HAPPYMMAIL 后台管理项目

一、接口

接口地址：http://adminv2.happymmall.com/login?redirect=%2Fproduct%2Findex

二、流程

1、测试接口：postman

2、创建框架：vue-cli2 ----- vue init webpack

3、配置相关文件：

在config文件夹下面配置index.js文件，在其中配置跨域，公共接口，以及代理地址（跨域：在config文件中的index.js里面设置proxyTable，

proxyTable: {
      "/api":{
        target:"http://admintest.happymmall.com/manage",//转发目标路径
        changeOrigin:true,  //允许转发
        pathRewrite: { //重写
          '^/api': ''
        }
      }
  },

4、使用插件：element-ui、axios、富文本编辑器、echarts表格、

5、封装：axios -----进行后台数据请求并且进行二次封装

1）首先创建 utils文件夹
2）在utils中 创建request.js文件，引入axios 创建axios实例，设置基本的公共路径 为我们跨域的基础路径，以及超时时间等
设置请求、响应拦截器，在拦截器中设置全局的loading，以及在响应拦截中 判断 响应码的status,然后处理各种的其他不正常状态，
3) 创建api.js 在其中导入request.js 把所有的接口路径进行统一管理，
对接口的请求进行封装并导出，方便在组件中导入调用，

6、将项目的功能模块进行划分：

1）登录模块：

请求登陆的接口，并传响应的参数用户名及密码拿到返回的数据跳转到主页面
（用的是localStorage本地存储 来存储我们的登录时间以及过时事件和登陆的用户信息）

2）首页布局及退出模块

3）商品模块：

A、商品管理：查看详情获取当前点击的id跳转详情页，在详情页通过路由接收参数，获取数据进行渲染
a、富文本编辑器：---- npm install vue-quill-editor -S
安装富文本插件，并挂载在全局中，在项目中使用标签
它自带有许多配置，项目中直接使用双向数据绑定v-model来绑定富文本内容
b、图片上传功能： ---- element-ui中的Upload

<el-upload list-type="picture-card" class="upload-demo" name="upload_file" 
action="api/product/upload.do" :on-preview="handlePreview" 
:before-remove="beforeRemove" :on-success="successTop" :on-remove="removeImg">
</el-upload>

1. :on-preview ------点击文件列表中已上传的文件时的钩子----function(file)
2. :on-remove ----- 文件列表移除文件时的钩子-----function(file, fileList)
3. :before-remove------删除文件之前的钩子，参数为上传的文件和文件列表，
   若返回 false 或者返回 Promise 且被 reject，则停止删除。—function(file, fileList)
4. :on-success-----文件上传成功时的钩子----function(response, file, fileList)
5. :before-upload----上传文件之前的钩子，参数为上传的文件，
   若返回 false 或者返回 Promise 且被 reject，则停止上传。-----function(file)
6. list-type----文件列表的类型----string text/picture/picture-card text
   B、品类管理：

4）订单模块：订单管理

这个页面数据请求出来的是所有的分类，所以导致这个页面在网络不好时请求很慢，
因此使用了数组的 slice 方法进行截取数组展示

5）用户模块：用户列表

6）工具模块：

	a、echarts 表格：查看echarts文档，安装并引入相应的图表实现该内容。
	b、百度地图：查看百度地图的文档，对应文档中的步骤进行实现

7、封装一些公共的组件/其他：

1. 在写页面时发现全部用到了 分页器，所以我们对分页器进行了再次封装，以减少代码量， 分页： page-size表示每页显示条目个数，
   current-page表示当前的页数,
   total 总条数
2. 对时间格式进行处理
3. 对请求接口的路径 和 实现请求的管理
4. 全局的基本css 的管理