第四章：项目基础架构

一、跨域- CORS

1：什么是前端跨域？

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

2：怎么解决前端跨域？

	CORS跨域 - 服务端设置，前端直接调用（说明：后台允许前端某个站点进行访问）
	JSONP跨域 - 前端适配，后台配合（说明：前后台同时改造）
	代理跨域

3：创建项目目录

	小图片放在assets，大图片放在public
	components放各个组件
	app.vue 是根组件，通常不做处理，只是放 <router-view></router-view> 做视图，相当于 webview，可加载所有的子页面，
	src 下建立接口文件夹 api，下面建立文件 index.js，去承载整个项目的 api 请求，

8：Storage 封装

• Cookie、localStorage、sessionStorage三者区别？

• 为什么要封装 Storage，本身不是已经有API？

   ## 三者区别？ 
   	存储大小：Cookie  4K，Storage 5M
   	有效期：Cookie 拥有有效期，Storage永久存储
   	Cookie 会发送到服务器端，存储在内存中，Storage只存储在浏览器端
   	路径：Cookie 有路径限制，Storage 只存储在域名下
   	API：Cookie 没有特定的API，Storage 有对应的API
   ## 为什么要封装Storage？
   	Storage 本身有API，但是只是简单地 kay/value 形式
   	Storage 只存储字符串，需要手动转换成 json 对象
   	Storage 只能一次性清空，不能单个清空
  

示例代码：

/**
* 数据存储的工具箱,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));
        }

    },
    // 获取某一个模块下面的属性
    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];
        } else {
            delete val[key]
        }
        window.sessionStorage.setItem(STORAGE_KEY, JSON.stringify(val));
    }
}

9：接口错误拦截

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

安装 axios 和 vue-axios 两个插件，插件放在上面，组件放在下面。