项目总结（HAPPY MMALL）

一、项目的分析与搭建

项目参考地址 链接: [link](http://adminv2.happymmall.com)
新建一个vue项目，采用vue-cli 2.x , 和之前的3.x 版本是不一样的，尤其是我们的配置文件 放在 config 文件夹中的index.js,还有我们需要安装 sass 以及 sass-loader 到开发环境下，由于此项目不涉及到较大的数据传输，所以没有用到vuex ；

二、组件库的选择，以及一些其他工具的安装

1. 在组件库的选择上，一开始就准备采用 element-ui 它能够实现我们此项目的全部布局以及功能，然后我们采用的是局部引入的方式，以减少我们的打包大小，所以需要安装一个 babel-plugin-component 在开发环境上用来实现我们的局部组件引入 
2. 因为项目涉及到了 网络数据请求 所以就安装了axios这一ajax工具来请求数据，后面会对其进行二次封装，达到我们的需求
3. 到了项目后面 发现需要用到富文本 组件，综合选择了vue-quill-editor 这个组件

三、对数据接口的测试 以及axios 的封装引用，

1. 在postman上对接口进行了测试，发现2点，1是参数的请求是携带在头部的，也就是说在axios中所有的参数都统一配置在params中; 2是请求成功下的status为0，未登录的status为10,以及整个请求都需要进行跨域请求 ，所以在 配置文件中 设置了跨域请求 proxyTable 
2. 对axios进行二次封装 ， 设置基本的公共路径 为我们跨域的基础路径，以及超时时间等，然后 设置拦截器，在拦截期中设置了全局的loading，以及在响应拦截中 判断 响应码的status,然后处理各种的其他不正常状态，
3. 对所有的接口路径进行统一管理，一个文件下最多不超过100个，
4. 然后对接口的请求进行封装并导出，方便在组件中导入调用，

四、对于所有组件页面的处理以及路由的分析

1. 对官方网站进行分析，大致分为5个模块 登陆 ，首页，商品，订单，以及用户
2. 期中 登陆页面为1级路由，其他为2级路由 在主页面中有顶部的header 放有logo 和我们用户登陆信息，和一个侧边导航栏 ，右下角为我们的二级路由(首页，商品，订单，以及用户)
3. 在最后发现了 一个404页面 用来匹配没有此路由的页面，以提高用户体验
4. 最后对我们的路由进行守卫，用的是localStorage本地存储 来存储我们的登录时间以及过时事件和登陆的用户信息，

五、写页面中遇到的问题？？

1. 在写商品列表，分类列表，订单列表，以及用户列表中发现 全部用到了 分页器，于是对我们的element-ui的分页器再次封装一层，已减少代码量，
2. 在写分类页面时发现，数据请求出来的是所有的分类，而不是正常的根据页面来请求少量数据，导致整个项目在网络不好的时候变得很慢很慢，以及分页的思路需要变更    我是用运用了数组的slice 方法进行截取数组展示
3. 最后就是 在添加商品信息和 编辑商品信息时候的图片上传问题以及图片展示问题，其实添加商品还相对好一点，不用考虑已经生成的网络图片，在编辑商品中需要考虑一下，用到了 el-upload中的file-list属性 是展示已上传的图片 该属性是一个数组 ，数组中的每一项必须要有name和url属性，
4. 最后发现了 一些页面 或者说一些路由 可以共用一个组件 ，例如 商品的添加 以及商品的修改 期中 只涉及到了一个 对于商品相求的请求 ，还有分类中的一级分类和二级分类列表展示 这两个页面只有分类的id不同 ，也就是请求的参数不同，所以最后惊醒了结合 写成了一个组件，不同路由进行调用

六、一些在项目中用到的工具 ，或者说封装的一些函数，或者说一些乱七八杂的东西

1. 对时间格式的处理，
2. 由于emementui 的局部引入代码量多，加上最后需要筛选出需要的组件，所以统一放在一个文件中处理，等待项目写完后进行删除
3. 对请求接口的路径 和 实现请求的管理 
4. 对我们的全局的基本css 的管理

七、总结

本项目是一个纯后台的项目，功能比较单一，除登陆外涉及到了数据的增删改查 ，没有什么其他的动画逻辑以及复杂的算法逻辑 ，适合于对于初写项目的同学练手用