vue项目基础架构的一些封装

一 前端跨域问题的一些解决方案

• 为什么会出现跨域问题

  浏览器为了安全作出的限制策略
  浏览器必须遵循同源策略：同域名&同端口&同协议

• 三种解决方案

  CORS跨域
    服务端处理，前端不需要处理（origin: '*'同理）
  jsonp
    使用jsonp js 插件
  代理
    前端做处理，服务端不用处理，然后在通过修改nginx服务器配置来实现

  //代理方案 vue.config.js 里面配置
  module.exports = {
    host:'xxx',
    port:80,
    ...
    devserve{
       proxy:{
          '/api':{ //匹配api
             target:'代理的目标地址',
             //是否需要更改主机头的地址为代理的目标地址 
             //这个前端看不到你需要通过后端进行
             //request.getHeader("Host") 打印才能看到区别
             changeOrigin:true,  
             pathRewrite:{
                  '^/api':'' //当匹配到/api 的时候将api置为空(/api/xxx/x => /xxx/x)
               }
          }
        }
    }
  }
  

二 项目需求梳理

• 熟悉文档 看原型 读懂需求
• 了解设计稿-设计前端业务架构
• 了解后端接口文档-定制规范
• 协调资源

目录结构设置

• 大的图片资源放到public 文件夹中 小的图片放到assets中(webpack 会将里面的图片转换成base64 减少请求)
• components 放组件
• api 接口
• util 公共方法
• storage 数据存储的封装

依赖查找

• 直接去github 找
• vue-axios vue-cookie

Storage的封装

/**
 * Storage封装（【存储格式】{'mall':{a:{},b:{}}}）
 * 也可以分模块来管理本地存储 {'user':{},order:{}} STORAGE_KEY 可变
 */
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));
    }
  },
  // 获取某一个模块下面的属性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) {
      if (!val[module_name]) return;
      delete val[module_name][key];
    } else {
      delete val[key];
    }
    window.sessionStorage.setItem(STORAGE_KEY, JSON.stringify(val));
  }
}