[电商项目]--基础架构

ゞ浴缸里的玫瑰 2022-12-27 14:25 226阅读 0赞

# 前言 #

基础架构掌握

--------------------

# 前端跨域解决方案 #

## 什么是前端跨域 ##

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

## 怎么解决前端跨域 ##

#### CORS跨域 ####

服务端设置，前端直接调用（说明：后台允许前端某个站点进行访问）  
![在这里插入图片描述][watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3FxXzMyMzcwOTEz_size_16_color_FFFFFF_t_70]

![在这里插入图片描述][20201212080049296.png]

#### JSONP跨域: ####

前端适配，后台配合（说明：前后台同时改造）  
需要项目中安装jsonp插件：

cnpm i jsonp --save-dev

![在这里插入图片描述][20201212080401621.png]

import jsonp from 'jsonp'
    export default { 
      name: 'App',
      components: { 
        HelloWorld
      },
      mounted(){ 
        let url ="www.baidu.com"
        // axios.get(url).then(() =>{ 
        //
        // })
        jsonp(url,(err,res)=>{ 
    		let result =res;
    		this.data = result;
        })
      }
    }

#### 代理跨域 ####

接口代理–通过修改nginx服务器配置来实现，  
说明前端修改，后台不动  
创建vue.config.js  
![在这里插入图片描述][watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3FxXzMyMzcwOTEz_size_16_color_FFFFFF_t_70 1]

module.exports ={ 
        devServer:{ 
            host:'localhost',
            port:8080,
            proxy:{ 
                '/api':{ 
                    target:'www.baidu.com',
                    changeOrigin:true,
                    pathRewrite:{ 
                        '/api':'api'//转发地址要写全比如：http://www.baidu.com/api'
                    }
                }
            }
        }
    }

# 目录结构设置 #

![在这里插入图片描述][watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3FxXzMyMzcwOTEz_size_16_color_FFFFFF_t_70 2]  
![在这里插入图片描述][watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3FxXzMyMzcwOTEz_size_16_color_FFFFFF_t_70 3]

# 插件安装 #

*  懒加载、element-ui,轮播拆件

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

![在这里插入图片描述][2020121300085710.png]

# 路由封装 #

![在这里插入图片描述][watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3FxXzMyMzcwOTEz_size_16_color_FFFFFF_t_70 4]

//存放路由地址
    import Vue from 'vue'
    import Router from 'vue-router'
    import Home from './pages/home'
    import Index from './pages/index'
    import Product from './pages/product'
    import Detail from './pages/detail'
    import Cart from './pages/cart'
    import Order from './pages/order'
    import OrderConfirm from './pages/orderConfirm'
    import OrderList from './pages/orderList'
    import OrderPay from './pages/orderPay'
    import AliPay from './pages/alipay'
    
    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: '/detail/:id',
                        name: 'detail',
                        component: Detail,
                    }
                ]
            },{ 
                path: '/cart',
                name: 'cart',
                component: Cart,
            },{ 
                path: '/order',
                name: 'order',
                component: Order,
                children: [
                    { 
                       path: 'list',
                       name : 'order-list',
                       component: OrderList,
                    },
                    { 
                        path: 'confirm',
                        name:'order-confirm',
                        component: OrderConfirm
                    },{ 
                        path: 'pay',
                        name: 'order-pay',
                        component: OrderPay,
                    },{ 
                        path: 'alipay',
                        name: 'alipay',
                        component: AliPay,
                    }
                ]
            }
        ]
    });

页面

<template>
      <div>
        orderConfirm
      </div>
    </template>
    <script>
      export default { 
          name: 'order-confirm'
      }
    </script>

*  组件编写：  
    ![在这里插入图片描述][watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3FxXzMyMzcwOTEz_size_16_color_FFFFFF_t_70 5]

# Storage封装 #

**Cookie、localStorage\\sessionStorage三者区别？**  
![在这里插入图片描述][watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3FxXzMyMzcwOTEz_size_16_color_FFFFFF_t_70 6]

**还有大家是否想过为什么要封装Storage,本身不是已经由API？**  
![在这里插入图片描述][watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3FxXzMyMzcwOTEz_size_16_color_FFFFFF_t_70 7]

*  代码实现：

/** *Storage封装 * 存放数据 */
    const STORAGE_KEY = 'mall';
    
    export default{ 
        //存储值
        setItem(key,value,module_name){ 
            if(module_name){ 
                let val = this.getItem(module_name);
                val[key] = value;
                this.setItem(module_name,val);
            }else{ 
                let val = this.getStorage();
                val[key] = value;
                window.sessionStorage.setItem(STORAGE_KEY,JSON.stringify(val));
            }
           let val = this.getStorage();
           val[key] = value;
           window.sessionStorage.setItem(STORAGE_KEY,JSON.stringify(val));
        },
        //获取某一个模块下面的属性 user下面的userName
        getItem(key,module_name){ 
            if(module_name){ 
                let val = this.getItem(module_name);
                if(val){ 
                    return val[key]
                }
            }
           return  this.getStorage()[key];
        },
        getStorage(){ 
           return  JSON.parse(window.sessionStorage.getItem(STORAGE_KEY) || '{}');
        },
        clear(key,module_name){ 
          let val = this.getStorage();
          if(module_name){ 
              delete val[module_name][key];
              // eslint-disable-next-line no-empty
          }else{ 
            delete val[key];
          }
           window.sessionStorage.setItem(STORAGE_KEY,JSON.stringify(val));
        }
    }

![在这里插入图片描述][watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3FxXzMyMzcwOTEz_size_16_color_FFFFFF_t_70 8]

![在这里插入图片描述][watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3FxXzMyMzcwOTEz_size_16_color_FFFFFF_t_70 9]

# 接口错误拦截 #

*  统一报错，
 *  未登录统一拦截
 *  请求值，返回值统一处理

import Vue from 'vue'
    import router from "@/router"
    import axios from 'axios'
    import VueAxios from 'vue-axios'
    import App from './App.vue'
    
    //根据前端的跨域方式做调整
    axios.defaults.baseURL='/api';//接口代理
    axios.defaults.timeout =8000;
    //接口返回错误拦截，
    axios.interceptors.response.use(function(response){ 
      let res = response.data;
      //res中的status 是与后台协商的字段，也可以叫code,这是定义的
      // eslint-disable-next-line no-empty
      if(res.status==0){ 
        return res.data;
        // eslint-disable-next-line no-empty
      }else if(res.status== 10){ 
        window.location.href ='/#/login';//hash路由，
      }else{ 
        alert(res.msg);
      }
    });
    Vue.use(VueAxios,axios)
    Vue.config.productionTip = false
    
    new Vue({ 
      //初始化路由
      router,
      render: h => h(App),
    }).$mount('#app')

# 接口环境设置 #

*  开发上线的不同阶段，需要不同的配置
 *  不同的跨域方式，配置不同
 *  打包的时候统一注入环境参数，统一管理环境，输出不同的版本包

let baseURL;
    
    
    //根据不同环境输出不同的URL地址,跨域方式下可以使用，如果使用的是代理的形式，下面的配置就不需要了
    switch (process.env.NODE_ENV) { 
        // eslint-disable-next-line no-undef
        case 'development':
            baseURL = '后台接口地址/api';
            break;
        case 'test':
            baseURL ='测试环境地址/api';
            break;
        case 'production':
            baseURL ='生成环境地址/api';
            break;
    }
    
    
    export default { 
        baseURL
    }

![在这里插入图片描述][watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3FxXzMyMzcwOTEz_size_16_color_FFFFFF_t_70 10]  
![在这里插入图片描述][watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3FxXzMyMzcwOTEz_size_16_color_FFFFFF_t_70 11]

import Vue from 'vue'
    import router from "@/router"
    import axios from 'axios'
    import VueAxios from 'vue-axios'
    import env from './env'
    import App from './App.vue'
    
    //根据前端的跨域方式做调整
    axios.defaults.baseURL='/api';//接口代理，跨域不能直接写/api，需要写全IP地址，https://www.baidu.com/api/
    axios.defaults.timeout =8000;
    //根据环境变量请求不同的请求地址
    axios.defaults.baseURL =env.baseURL
    //接口返回错误拦截，
    axios.interceptors.response.use(function(response){ 
      let res = response.data;
      //res中的status 是与后台协商的字段，也可以叫code,这是定义的
      // eslint-disable-next-line no-empty
      if(res.status==0){ 
        return res.data;
        // eslint-disable-next-line no-empty
      }else if(res.status== 10){ 
        window.location.href ='/#/login';//hash路由，
      }else{ 
        alert(res.msg);
      }
    });
    Vue.use(VueAxios,axios)
    Vue.config.productionTip = false
    
    new Vue({ 
      //初始化路由
      router,
      render: h => h(App),
    }).$mount('#app')

module.exports ={ 
        devServer:{ 
            host:'localhost',
            port:8080,
            proxy:{ 
                '/api':{ 
                    target:'www.baidu.com',//这个地方是配置代理形式，
                    changeOrigin:true,
                    pathRewrite:{ 
                        '/api':'api'//转发地址要写全比如：http://www.baidu.com/api'
                    }
                }
            }
        }
    }

*  如果想自定义开发环境，需要我们在路径下面创建如下文件，里面填写内容：  
    ![在这里插入图片描述][watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3FxXzMyMzcwOTEz_size_16_color_FFFFFF_t_70 12]

# Mock设置 #

什么是Mock呢？ 就是模拟数据

*  开发阶段，为了提高效率，需要提前Mock
 *  减少代码冗余，灵活插拔
 *  减少沟通，减少接口联调时间

方式：

*  本地创建json

![在这里插入图片描述][watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3FxXzMyMzcwOTEz_size_16_color_FFFFFF_t_70 13]  
![在这里插入图片描述][watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3FxXzMyMzcwOTEz_size_16_color_FFFFFF_t_70 14]

*  easy-mock平台

需要本地搭建：github地址  
[https://github.com/easy-mock/easy-mock][https_github.com_easy-mock_easy-mock]

*  集成Mock API  
    集成mock.js  
    [http://mockjs.com/][http_mockjs.com]  
    ![在这里插入图片描述][20201213152726999.png]  
    ![在这里插入图片描述][watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3FxXzMyMzcwOTEz_size_16_color_FFFFFF_t_70 15]  
    ![在这里插入图片描述][watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3FxXzMyMzcwOTEz_size_16_color_FFFFFF_t_70 16]  
    ![在这里插入图片描述][watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3FxXzMyMzcwOTEz_size_16_color_FFFFFF_t_70 17]

import Vue from 'vue'
    import router from "@/router"
    import axios from 'axios'
    import VueAxios from 'vue-axios'
    //import env from './env'
    import App from './App.vue'
    
    //定义mock开关
    const mock = true;
    if(mock){ 
      require('./mock/api')
    }
    //根据前端的跨域方式做调整
    //axios.defaults.baseURL='/api';//接口代理，跨域不能直接写/api，需要写全IP地址，https://www.baidu.com/api/
    axios.defaults.timeout =8000;
    //根据环境变量请求不同的请求地址
    //axios.defaults.baseURL =env.baseURL
    //接口返回错误拦截，
    axios.interceptors.response.use(function(response){ 
      let res = response.data;
      //res中的status 是与后台协商的字段，也可以叫code,这是定义的
      // eslint-disable-next-line no-empty
      if(res.status==0){ 
        return res.data;
        // eslint-disable-next-line no-empty
      }else if(res.status== 10){ 
        window.location.href ='/#/login';//hash路由，
      }else{ 
        alert(res.msg);
      }
    });
    Vue.use(VueAxios,axios)
    Vue.config.productionTip = false
    
    new Vue({ 
      //初始化路由
      router,
      render: h => h(App),
    }).$mount('#app')

[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3FxXzMyMzcwOTEz_size_16_color_FFFFFF_t_70]: /images/20221120/ad4ef87d59f54dee999c6f86b2157111.png
[20201212080049296.png]: /images/20221120/ed35d65d3fc74bd58fbde925d656b6d4.png
[20201212080401621.png]: /images/20221120/129f3fb859fd4e508eb81c154ea7885f.png
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3FxXzMyMzcwOTEz_size_16_color_FFFFFF_t_70 1]: /images/20221120/cda6e97df9a3476b8dcc03459f0a281f.png
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3FxXzMyMzcwOTEz_size_16_color_FFFFFF_t_70 2]: /images/20221120/9123463f9dce4ebeae5fa1a812d05acb.png
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3FxXzMyMzcwOTEz_size_16_color_FFFFFF_t_70 3]: /images/20221120/ae4c0a3d6389492bac1c25e123790da3.png
[2020121300085710.png]: /images/20221120/25051b12557a49dfb4841fe6879ddc8a.png
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3FxXzMyMzcwOTEz_size_16_color_FFFFFF_t_70 4]: /images/20221120/7975d3f1c036421badceccdb25b157d1.png
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3FxXzMyMzcwOTEz_size_16_color_FFFFFF_t_70 5]: /images/20221120/592b1fb7248e49009a57c329ee50d193.png
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3FxXzMyMzcwOTEz_size_16_color_FFFFFF_t_70 6]: /images/20221120/eb4a9379ed3742c68372d5ae179e867b.png
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3FxXzMyMzcwOTEz_size_16_color_FFFFFF_t_70 7]: /images/20221120/6e416f0aa61c4637bb778fba98370d51.png
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3FxXzMyMzcwOTEz_size_16_color_FFFFFF_t_70 8]: /images/20221120/0c1546cd4bcc42c8be722a65bcfb89ce.png
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3FxXzMyMzcwOTEz_size_16_color_FFFFFF_t_70 9]: /images/20221120/af248b686fa14fbaa71fbf22833eb433.png
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3FxXzMyMzcwOTEz_size_16_color_FFFFFF_t_70 10]: /images/20221120/5a193114557d4d7caa7f4c950829c8eb.png
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3FxXzMyMzcwOTEz_size_16_color_FFFFFF_t_70 11]: /images/20221120/ad34cfc95d9042c1b963fe0c95f17f18.png
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3FxXzMyMzcwOTEz_size_16_color_FFFFFF_t_70 12]: /images/20221120/b605064d0ea4440682ebf6493ef1fb9c.png
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3FxXzMyMzcwOTEz_size_16_color_FFFFFF_t_70 13]: /images/20221120/18829b86b4114925b0e927724514423b.png
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3FxXzMyMzcwOTEz_size_16_color_FFFFFF_t_70 14]: /images/20221120/15257efb2088445db36a3301b2f88e8f.png
[https_github.com_easy-mock_easy-mock]: https://github.com/easy-mock/easy-mock
[http_mockjs.com]: http://mockjs.com/
[20201213152726999.png]: /images/20221120/f0f83af3b31d4e28b8185a04fdad06a0.png
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3FxXzMyMzcwOTEz_size_16_color_FFFFFF_t_70 15]: /images/20221120/efb016a28bd143c38fe5fb7f824fb9e4.png
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3FxXzMyMzcwOTEz_size_16_color_FFFFFF_t_70 16]: /images/20221120/1224f04ab7c8423ba941fad07ce2c152.png
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3FxXzMyMzcwOTEz_size_16_color_FFFFFF_t_70 17]: /images/20221120/3befdd5b9ca7439b9cbab370b6826228.png