后台管理happymmail总结

1.项目准备

• 安装vue脚手架，创建项目
• 下载 axios，Element-ui组件 ，富文本编辑器以及Echarts
• 在入口文件main.js里面导入挂载需要的依赖
• 清除#app的默认样式
• 启动项目 在路由里的index.js里面用redirect配置重定向到登录页面
• 使用element-ul组件实现页面基本布局

2.项目组成：

分为登陆页面、首页、商品管理、品类管理、订单管理、用户管理、数据统计等几个模块

3.接口

1. 首先我们要在config里index.js文件中来配置公共接口，进而可以进行跨域访问数据
2. 接着我们要在src下创建一个utils文件夹，在这个文件夹里建一个js文件，在里面进行axios的二次封装，配置完成之后进行导出
3. 然后我们要在utils文件的同级创建一个文件夹，再建一个js文件，将utils导出的axios及进行引入，这个js文件里面放置所有的数据接口

4.登录

1. 首先需要获取登录的接口，进行传参（用户名和密码），然后将后台返回token以及用户信息存到本地中
2. 我们还要设置token过期时间，如果过期就需要重新登陆
3. 还要在router.js里配置路由守卫，判断token是否存在，不存在的话就不能跳转到其他页面 

 5.商品管理

• 商品管理页有搜索功能，上下架，查看，编辑，添加商品以及分页

 首先我们要引入商品管理的接口，进行数据请求，然后进行渲染，页面表格可以用element-ui中的表格进行实现

 搜索

1. 先请求搜索的接口数据
2. 然后判断按什么类型(ID或名称)进行搜索，通过类型来筛选数据并渲染

上架下架 

1. 先获取商品状态数据接口
2. 通过接口获取商品的状态、ID进而渲染页面
3. 然后就可以通过三元表达式来将商品的状态改为在售或已下架以及切换状态
4. 在切换状态完成时用element-ui中的轻提示来进行提示

 商品查看

1. 详情页有一级二级分类以及图片显示等功能
2. 点击查看，用动态路由携带id进行跳转到详情页
3. 在详情页，通过商品详情的接口进行获取数据，并通过参数渲染 
4. 这些数据都要用disabled属性进行禁用

一级二级分类实现：

• 首先通过map来遍历我们获取到数据的数组
• 判断数组中的name是否等于val值
• 如果相等，就从商品接口中获取相应id的数据
• 进行渲染 

图片显示：

• 先引入详情接口，然后通过动态路由传过来的ID进行赋值
• 然后图片是由我们数组中的参数图片路径与图片地址进行拼接就实现了图片的显示

 商品编辑

1. 它跟商品详情差不多，只不过是可以编辑，还有一级二级分类、图片上传、富文本编辑器等功能
2. 点击编辑，用动态路由携带id进行跳转到编辑页面
3. 还是先通过商品列表的接口获取数据，并渲染渲染到页面上
4. 分类是通过map来遍历我们获取到数据的数组，判断数组中的name是否等于val值，如果相等，就从商品接口中获取相应id的数据并进行渲染 

上传图片

• 利用Element-ui的upload上传进行图片的上传 

•  我们用action属性来选择上传的地址

• 用on-preview来上传图片时进行调用

• 用on-success文件上传时进行调用

• 然后图片是由我们数组中的参数，浏览器中的图片路径与图片地址进行拼接就实现了图片的显示

• 最后点击上传进行上传到页面上

富文本编辑器

• 首先我们要用npm install vue-quill-editor -S下载富文本编辑器插件
• 在main.js中引入需要的依赖
• 插入富文本标签，配置双向数据绑定以及内容改变时的配置
• 将改变是的内容赋值给定义的数组，进行渲染
• 点击提交时用Element-ui中的轻提示组件进行提示

• 提交成功时，用this.$router.push跳转到商品管理页面

添加商品

1. 添加商品有基本数据渲染、一二级分类、上传文件以及富文本编辑器等功能
2. 它与商品编辑一样，只不过我们要在上传文件时要规定文件的类型和大小

•  首先在点击添加商品按钮时，跳转到添加页面
• 然后引入商品管理的接口，然后获取数据并渲染
• 分类是通过map来遍历我们获取到数据的数组，判断数组中的name是否等于val值，如果相等，就从商品接口中获取相应id的数据并进行渲染

上传文件

• 利用Element-ui的upload上传进行文件的上传 

•  我们用action属性来选择上传的地址

• 用on-preview来上传图片时进行调用

• 用on-success文件上传时进行调用

• 然后图片是由我们数组中的参数，浏览器中的图片路径与图片地址进行拼接就实现了图片的显示

• 用before-upload属性来限制图片类型以及大小，通过file来进行计算

• 接着就用if判断来进行判断类型，只能上传jpg和png格式，还要判断文件大小是否不能超过2m，进行返回

• 最后点击上传进行上传到页面上，并通过this.$router.push跳转到商品管理页面 

 

6.品类管理 

• 品类管理有渲染基本数据，比如品类、品类名称，还有修改名称，查看子品类，添加品类
• 渲染数据我们就需要先引入品类管理的接口，然后进行进行获取数据并进行渲染

修改名称 

1. 修改名称的话我们需要用到弹出框进行提示，并携带我们需要修改的名称
2. 进行if判断，如果这个名称与数据里面的名称不相同并且不为空的话，我们就将接收过来的id和名称赋值给数据中的参数，然后进行渲染
3. 我们还要调用一下商品接口请求过来的数据，然后渲染到页面上
4. 修改成功的话就用Element-ui中的轻提示来添加一个提示效果

查看子品类 

1. 在点击品类管理中的查看子品类时，用动态路由携带ID进行跳转到子品类中
2. 然后在子品类中，我们通过商品管理的接口来通过携带过来的参数ID来进行赋值，并渲染相应id的子品类数据

添加品类 

1. 我们先引入添加评论的接口，将我们数据中的参数双向绑定到输入框中
2. 点击提交按钮时将数据渲染到页面上
3. 渲染成功时，就添加一个轻提示的效果并用this.$router.push跳转到一级品类页面

7.订单管理 

• 订单页面有通过ID进行搜索、查看功能详情以及分页功能
• 先引入订单管理的接口，然后进行进行获取数据并进行渲染

 搜索

1. 我们先获取订单搜索的接口，然后将获取过来的数据给赋值给里面的参数ID这就实现了通过ID进行查询
2. 然后再将input框进行清空清空

查看详情 

1. 点击查看的时候，需要用动态路由传递该数据的id进行跳转到详情页面
2. 然后引入订单管理的接口将传递过来的ID赋值给接口的参数，进而渲染对应id的数据
3. 这些数据都需要添加disabled属性进行禁用

8.用户管理 

• 用户管理有数据渲染和分页的功能
• 需要先引入用户管理的接口，然后将接口中的值赋给我们定义的数组进行数据渲染ID、用户名、邮箱电话、注册时间
• 注册时间我们需要用到过滤器，返回我们当前的时间，然后通过逻辑或的方式进行渲染

9.分页功能 

• 分页基本上是每个页面都要用到的一个功能，所以我们就可以将它放在一个单独的组件中，然后进行数组的传值
• 要先创建一个文件夹，然后在这个新的文件夹中创建一个组件

    @size-change:监听pagesize改变的事件

   @current-change:监听页码值改变的事件

   :current-page:当前页

   :page-size:当前的页数

   layout:控制显示内容

   :total：总共的信息条数

• 在这个组件中，通过this.$emit将这些自定义事件传到需要用到的组件中
• 并在需要用到的组件中引入这个组件
• 然后将传过来的事件在methods中进行赋值并获取数据，将我们获取到的页数、总条数、当前页再通过父传子的方式传递到分页的组件中就可以实现分页功能