∞拾年

vue项目基础架构的一些封装
一 前端跨域问题的一些解决方案为什么会出现跨域问题浏览器为了安全作出的限制策略 浏览器必须遵循同源策略:同域名&a...
扫描右侧二维码阅读全文
12
2021/05

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

路由的封装

import vue form 'vue'
import vueRouter from 'vue-router'
vue.use(vueRouter)
let routes = [...]
let router = new vueRouter({
     routes,
     mode:'' //history/hash
})
export default router

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));
  }
}
Last modification:May 13th, 2021 at 09:20 pm
If you think my article is useful to you, please feel free to appreciate

Leave a Comment