【Vue全家桶高仿小米商城】——(四)项目基础架构

这篇具有很好参考价值的文章主要介绍了【Vue全家桶高仿小米商城】——(四)项目基础架构。希望对大家有所帮助。如果存在错误或未考虑完全的地方,请大家不吝赐教,您也可以点击"举报违法"按钮提交疑问。

第四章:项目基础架构

此章节全力讲解前端基本项目架构,通过此章节可搭建一个通用性的前端架构,内容涵盖跨域方案、路由封装、错误拦截等。

一、前端跨域解决

什么是前端跨域?
  • 跨域是浏览器为了安全而做出的限制策略
  • 浏览器请求必须遵循同源策略:同域名同端口同协议
怎么解决前端跨域?
CORS跨域

CORS跨域 - 服务端设置,前端直接调用
说明:后台允许前端某个站点进行访问。如Easy Mock:开源的公共MOCK平台,公共接口。
【Vue全家桶高仿小米商城】——(四)项目基础架构
控制台查看network信息
【Vue全家桶高仿小米商城】——(四)项目基础架构

响应头中:
Access-Control-Allow-Credentials:允许前端将cookie带过去
Access-Control-Allow-Origin:表示允许指定的这个网址访问mock的接口

JSONP跨域

前端适配,后台配合
说明:需要前后端同时改造
安装jsonp

安装并添加到环境中
npm i jsonp --save-dev

jsonp不是请求在network中的XHR里面没有,JS里面有,是js的一段脚本。
【Vue全家桶高仿小米商城】——(四)项目基础架构
【Vue全家桶高仿小米商城】——(四)项目基础架构

jsonp与cors的区别:
let url2 = 'https://order.imooc.com/pay/cartorder'
    axios.get(url2).then((data)=>{
   
      console.log(data)
    })
    jsonp(url2,{
   },(err,res)=>{
   
      console.log(res)
    })

当使用axios时控制台输出信息,表示不是允许的网站,无Access-Control-Allow-Origin请求头。
【Vue全家桶高仿小米商城】——(四)项目基础架构

当使用jsonp时,能正常访问。
【Vue全家桶高仿小米商城】——(四)项目基础架构

代理跨域

实现:通过修改nginx服务器配置来实现;
说明:前端修改,后台不动;

具体操作:
1.在整个项目项目中新增vue.config.js的配置文件
2.文件中写入:

// 开发环境下的接口代理  访问/a代理到/b,则实际访问的/b
// webpack的配置表传送给nodejs服务器
// nodejs遵循commonjs规范抛出就不用import了
module.exports = {
     
  // 自动加载devServer中的配置表
  devServer:{
   
      host:'localhost',
      port:8080,
      // 代理
      proxy:{
   
          // 访问/pay时实现拦截转发到target中
          '/api':{
   
              // 目标网址,内部访问到慕课网的接口
              target:'https://order.imooc.com',
              changeOrigin:true,
              pathRewrite:{
   
                  '/api':''
              }
          }
      }
  }
}

实现原理:

书写好config.js后重启项目,vue会自动加载此配置文件下的devServer配置表
针对proxy中做路由统一拦截(此处是统一拦截的/api),在.vue文件中定义url时都统一定义为如下:let url2 = ‘/api/pay/cartorder’,在拦截后进行访问目标地址时由**changeOrigin:true,pathRewrite:{’/api’:’ '}**自动去掉/api进行访问。
此时看似访问的localhost:8080/api/pay/cartorder实则访问的https://order.imooc.com/pay/cartorder
【Vue全家桶高仿小米商城】——(四)项目基础架构

二、项目准备

需求梳理
  1. 熟悉文档、查看原型、读懂需求
  2. 了解前端设计稿 - 设计前端业务架构
  3. 了解后台接口文档 - 制定相关对接规范
  4. 协调资源
  5. 搭建前端架构
分析目录
  1. 查看原型图,分析哪些板块会封装为一个组件,进行复用。
  2. 综合分析后先搭建大的目录再去创建小的。
  3. 静态图片建议src下的assets放小的,public下放大的。
  4. src下的components就是组件
构建项目目录
  1. 初始化VScode内容:删除components文件夹下的最初的HelloWord组件,以及删除App.vue下对HelloWord组件的所有引用,并增加router-view的入口。

  2. 在src目录下新建api文件夹统一管理路由api

  3. src下创建util文件夹存放公共方法,如格式化,数组转换之类的方法等。

  4. src下创建storage文件夹存放对数据存值取值等的工具箱。

  5. src下创建store文件夹存放vuex的内容。

  6. src下创建router.js存放路由

  7. src下创建pages文件夹存放页面文件

  8. pages创建index.vue(首页)、home.vue(主结构、存放公共的头部和尾部),product.vue(产品栈)、detail.vue(商品详情)、orderList.vue(订单页)、order.vue(订单主结构)、orderConfirm.vue(订单确认)、cart.vue(购物车)、login.vue(登录)、orderPay.vue(支付)、alipay.vue(支付跳转中间页)

  9. components下创建NavHeader.vue公共头部NavFooter公共底部。
    【Vue全家桶高仿小米商城】——(四)项目基础架构
    【Vue全家桶高仿小米商城】——(四)项目基础架构

安装依赖

懒加载:vue-lazyload
ui库:element-ui
sass编译:node-sass sass-loader
轮播:vue-awesome-swiper
axios:vue-axios
cookie:vue-cookie

npm i vue-lazyload element-ui node-sass sass-loader vue-awesome-swiper vue-axios vue-cookie --save-dev

【Vue全家桶高仿小米商城】——(四)项目基础架构

路由封装

由页面划分路由,找共性,拆分父子组件。
在router.js中封装所有的路由,并重定向到index文章来源地址https://www.toymoban.com/news/detail-496487.html

import Vue from 'vue'
import router from 'vue-router'
import Home from './pages/home.vue'
import Index from './pages/index.vue'
import Product from './pages/product.vue'
import Detail from './pages/detail.vue'
import Cart from './pages/cart.vue'
import Order from './pages/order.vue'
import OrderList from './pages/orderList.vue'
import OrderConfirm from './pages/orderConfirm.vue'
import OrderPay from './pages/orderPay.vue'
import AliPay from './pages/alipay.vue'

Vue.use(router);

export default new router({
   
    routes:[
        {
   
            path:'/'

到了这里,关于【Vue全家桶高仿小米商城】——(四)项目基础架构的文章就介绍完了。如果您还想了解更多内容,请在右上角搜索TOY模板网以前的文章或继续浏览下面的相关文章,希望大家以后多多支持TOY模板网!

本文来自互联网用户投稿,该文观点仅代表作者本人,不代表本站立场。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如若转载,请注明出处: 如若内容造成侵权/违法违规/事实不符,请点击违法举报进行投诉反馈,一经查实,立即删除!

领支付宝红包 赞助服务器费用

相关文章

  • 2023年Flutter教程_Flutter+Getx仿小米商城项目实战视频教程-V3版

    Flutter 是谷歌公司开发的一款开源、免费的UI框架,可以让我们快速的在Android和iOS上构建高质量App。它最大的特点就是跨平台、以及高性能。  目前 Flutter 已经支持 iOS、Android、Web、Windows、macOS、Linux 的跨平台开发 。   GetX  是 Flutter 上的一个轻量且强大的解决方案,我们可以

    2024年02月08日
    浏览(33)
  • Vue全家桶系~1.Vue2基础(兼容)

    HTML+CSS+JS基础文档:https://developer.mozilla.org/zh-CN/docs/Web Vue3官网文档:https://cn.vuejs.org/ | Vue2文档:https://v2.cn.vuejs.org/v2/guide 个人建议:对于小白和新手,以及只会HTML+CSS+JS基础的人来说,别上来就搞那一套高度封装的开发方式,开发是很方便,调bug也是非常麻烦的。先以这种脚

    2024年02月13日
    浏览(34)
  • 【Vue全家桶】带你全面了解通过Vue CLI初始化Vue项目

    🫡这里是前端程序员小张 🌟创作不易,希望各位大佬支持一下 什么是Vue脚手架? 在真实开发中我们不可能每一个项目从头来完成所有的 webpack配置,这样显示开发的效率会大大的降低; 所以在真实开发中,我们通常会使用脚手架来创建一个项目,Vue的项目我们使用的就是

    2023年04月09日
    浏览(39)
  • Vue项目实战——实现一个任务清单【基于 Vue3.x 全家桶(简易版)】

    内容 参考链接 Vue2.x全家桶 Vue2.x 全家桶参考链接 Vue2.x项目(一) Vue2.x 实现一个任务清单 Vue2.x项目(二) Vue2.x 实现GitHub搜索案例 Vue3.x项目(三) Vue3.x 实现一个任务清单 1、前言 如果你对 vue3 的基础知识还很陌生,推荐先去学习一下 vue 基础 内容 参考链接 Vue2.x全家桶 Vu

    2024年02月02日
    浏览(74)
  • electron+vue3全家桶+vite项目搭建【六】集成vue-i18n 国际化

    已发现 9.2.2版本的vue-i18n 如果使用cnpm安装,打包会报错,使用npm或者pnpm安装依赖没有问题 如果需要多语言支持,那么最好在项目搭建之初我们就集成好国际化 vue i18n官网 demo项目地址 关于多窗口国际化不同步更新状态的问题解决方案 1.我们现在src下面创建locals目录,里面创

    2023年04月12日
    浏览(81)
  • electron+vue3全家桶+vite项目搭建【24】设置应用图标,打包文件的图标

    demo项目地址 在electron中,我们可以通过electron-builder的配置文件来设置打包后的应用图标 因为mac环境下的图标需要特殊格式,这里我们可以利用electron-icon-builder进行配置 1.引入相关依赖 加入安装过程中卡在了 phantomjs-2.1.1-windows.zip的下载,可以直接去github上下载 这里我也放一

    2024年02月17日
    浏览(62)
  • electron+vue3全家桶+vite项目搭建【23】url唤醒应用,并传递参数

    demo项目地址 很多场景下我们都希望通过url快速唤醒应用,例如百度网盘,在网页中唤醒应用,并传递下载链接,在electron中要实现这样的效果,就需要针对不同的平台做对应的处理。 1.主进程中补充调整代码 windows中需要注册协议,指定被唤醒时如何处理url windows当页面被唤

    2024年02月16日
    浏览(50)
  • 谷粒商城第一天-项目概述、架构、Linux环境搭建

    目录 一、学习的内容 一、常见的商城模式 二、谷粒商城项目的微服务架构 三、谷粒商城项目的微服务划分 四、谷粒商城项目的亮点 五、微服务的基本的概念 二、完成的进度 三、学到的东西 四、总结 6月9日正式下决心开始学习谷粒商城项目,之前早就听说谷粒商城项目的

    2024年02月10日
    浏览(45)
  • 谷粒商城笔记+踩坑(1)——架构、项目环境搭建、代码生成器

     导航: 谷粒商城笔记+踩坑汇总篇_谷粒商城笔记踩坑6_vincewm的博客-CSDN博客 目录 1、项目介绍 1.1 微服务架构图 1.2. 微服务划分图 2、项目环境搭建 2.1. 虚拟机搭建环境 2.2. Linux安装docker、配置镜像加速 2.3. docker配置mysql、设置自启动 2.3.1、安装mysql5.7 2.3.2、修改mysql配置文件

    2024年02月01日
    浏览(80)
  • electron+vue3全家桶+vite项目搭建【25】使用electron-updater自动更新应用

    demo项目地址 electron-updater官网 我们不可能每次发布新的版本都让用户去手动下载安装最新的包,而是应用可以自动下载新包进行覆盖安装,electron-updater就可以非常方便的实现这个功能 引入依赖 实测用pnpm安装打包运行会有问题,这里还是推荐使用npm管理依赖 配置electron-bui

    2024年02月14日
    浏览(69)

觉得文章有用就打赏一下文章作者

支付宝扫一扫打赏

博客赞助

微信扫一扫打赏

请作者喝杯咖啡吧~博客赞助

支付宝扫一扫领取红包,优惠每天领

二维码1

领取红包

二维码2

领红包