【Vue全家桶高仿小米商城】——（四）项目基础架构-CSDN博客

本文链接：https://blog.csdn.net/qq_43826456/article/details/131254877

第四章：项目基础架构

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

文章目录

- 第四章：项目基础架构

一、前端跨域解决

什么是前端跨域？

跨域是浏览器为了安全而做出的限制策略
浏览器请求必须遵循同源策略：同域名、同端口、同协议

怎么解决前端跨域？

CORS跨域

CORS跨域 - 服务端设置，前端直接调用
说明：后台允许前端某个站点进行访问。如Easy Mock：开源的公共MOCK平台，公共接口。
在这里插入图片描述
控制台查看network信息

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

JSONP跨域

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

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

jsonp不是请求在network中的XHR里面没有，JS里面有，是js的一段脚本。
在这里插入图片描述

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请求头。
在这里插入图片描述

当使用jsonp时，能正常访问。
在这里插入图片描述

代理跨域

实现：通过修改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
在这里插入图片描述

二、项目准备

需求梳理

熟悉文档、查看原型、读懂需求
了解前端设计稿 - 设计前端业务架构
了解后台接口文档 - 制定相关对接规范
协调资源
搭建前端架构

分析目录

查看原型图，分析哪些板块会封装为一个组件，进行复用。
综合分析后先搭建大的目录再去创建小的。
静态图片建议src下的assets放小的，public下放大的。
src下的components就是组件

构建项目目录

初始化VScode内容：删除components文件夹下的最初的HelloWord组件，以及删除App.vue下对HelloWord组件的所有引用，并增加router-view的入口。
在src目录下新建api文件夹统一管理路由api
src下创建util文件夹存放公共方法，如格式化，数组转换之类的方法等。
src下创建storage文件夹存放对数据存值取值等的工具箱。
src下创建store文件夹存放vuex的内容。
src下创建router.js存放路由
src下创建pages文件夹存放页面文件
pages创建index.vue（首页）、home.vue（主结构、存放公共的头部和尾部），product.vue（产品栈）、detail.vue（商品详情）、orderList.vue（订单页）、order.vue（订单主结构）、orderConfirm.vue（订单确认）、cart.vue（购物车）、login.vue（登录）、orderPay.vue（支付）、alipay.vue（支付跳转中间页）
components下创建NavHeader.vue公共头部NavFooter公共底部。

安装依赖

懒加载：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

在这里插入图片描述

路由封装

由页面划分路由，找共性，拆分父子组件。
在router.js中封装所有的路由，并重定向到index

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:'/',
            name:'home',
            component:Home,
            redirect:'/index',
            children:[
                {
   
                    path:'/index',
                    name:'index',
                    component:Index
                },
                {
   
                    path:'/product/:id',
                    name:'product',
                    component:Product
                },
                {
   
                    path: