电商后台管理系统

利用Vue.js实现电商后台管理系统

引言
刚学完Vue.js，现学现卖，着手做电商后台管理的项目，刚刚将首页中用户管理的用户列表写完，写这篇文章记录一下这个项目的思路以及做的过程中遇到的小问题。
一、项目初始化

1. 采用cli3创建项目，在终端处输入vue create learnshop创建好项目，本人采用的是默认形式创建项目，路由或其他配置后续用到的时候在安装的。
2. 创建好项目之后，安装路由，npm install vue-router --save，运行时依赖。安装好路由之后，将其放在src文件夹下面的router文件夹的index.js中，采用路由懒加载的方式进行路由配置，路由被访问的时候在加载对应的组件，这样更加高效。
3. 接下来安装axios库，npm install axios --save,运行时依赖，axios用来请求后台数据，采用拦截器将axios封装起来，采用实例化的axios进行封装，const instance = axios.create()，里面放全局默认地址，接下来设置拦截器，请求拦截中需要授权的 API ，必须在请求头中使用 Authorization 字段提供 token 令牌，axios的不同请求方法也封装了起来，哪个组件用到直接引入使用。
   4.项目中使用elmement ui库，首先安装，npm install element-ui -save,运行时依赖。为方便在项目中使用，采用的是全局安装方式。
   5.根据项目的各个模块，组织项目目录结构。
   二、项目具体模块分析及部分代码演示
   2.1登录界面
   登录界面中需要输入用户名和密码，采用token进行身份验证，因为是第一次接触token，所以通过查找到的资料对token进行说明。
   基于token的身份验证是无状态的，基于token的身份验证实现的方式大致过程如下：
   1.用户通过用户名和密码发送请求
   2.程序验证
   3.程序返回一个签名的token给客户端
   4.客户端存储token,并且每次请求都会附带上它
   5.服务器验证token并返回数据
   每一次请求都需要token,token应该是在HTTP的头部发送从而保证了HTTP请求无状态。
   登录界面布局见图1
   
   图1 登录界面
   2.2首页数据
   点击登录界面的登录按钮后，数据请求成功就会跳转到首页中，即home中，首页的布局如图2所示
   
   图2 首页界面
   通过首页的布局可以清楚看出包括3个部分，在elementui库中直接找到使用对应的模板即可
   2.2.1 首页导航栏
   将导航栏分成左右两个部分，左侧为图标以及文字说明，右侧为退出按钮，当点击退出按钮时，页面会跳转到登录界面，使用this.$router.back()。
   2.2.2 首页侧边栏
   首页的侧边栏包括两部分，上面的|||以及下面的导航栏部分，点击上面的|||可以实现侧边栏的折叠与展开效果，通过设置不同的显示宽度即可实现。侧边栏中导航栏的各个数据通过请求数据采用v-for遍历得到。
   2.2.3 主体区域
   主体区域引入了welcome组件，只显示welcome这个标题，注意，这里能够显示welcome是因为home中重定向了welcome组件，所以默认显示的是welcome。
   2.3 首页侧边栏各个导航的具体实现
   首页侧边栏导航区内容通过axios请求数据得到，在这里先说明一下项目中主要使用的axios请求，get请求用来获取数据，post请求用来提交数据，put请求用来更新数据，delete请求用来删除数据。
   首页侧边栏导航栏数据主要通过get请求得到数据
   由于对axios封装的不熟悉，导致出现了一个小bug都能让我搞半天，现在终于有一点思路了，下面就是对首页导航栏数据的get请求，封装的get方法代码如下：

//get请求
export function getRequest(url,params){
   
   
    return request({
   
   
        method: 'get',
        url:url,
        params:params
    })
}

这里遇到的小bug我不得不说一下，由于method的书写错误导致我找错找了好久，最后才发现是method错写成了methods,导致我一直请求不到数据，一定要注意，要写method!!!。
在home中使用这个方法就要先导入

import {
   
   getRequest} from '../../network/Request'

导入完之后才能使用

//2.获取左侧侧边栏数据
     getMenuList(){
   
   
       getRequest('menus').then(res=>{
   
   
         console.log(res);
         if(res.data.meta.status!==200){
   
   
           return this.$message.error("获取列表数据失败");
         }
         this.menuList = res.data.data;
       })
     }

这样就实现了导航栏数据的获取。
2.3.1 用户列表区域

图3 用户列表
图3显示了用户列表总的布局，首先包括面包屑导航区域，下面的卡片区域以及下面的页码标记区域，由于进入到首页默认显示welcome,这里需要点击用户列表实现路由的跳转，此时跳转到了users页面，这样就可以显示图3的内容啦~。
由于后面的页面中也分别用到了面包屑导航和卡片视图区，所以将这两个组件进行了封装，哪里用到就在哪里引入。
上面的面包屑导航区域比较简单，主要对卡片视图区中的内容进行操作。
下面就详细介绍一下卡片视图区域中使用到的具体技术以及在设计的过程中遇到的各种bug。
2.3.2 卡片视图区
首先对卡片视图区进行整体布局，布局完成后在请求数据，操作界面内容。
上面的搜索框和添加用户的按钮很简单，只需在elmementui库中找到对应组件，写出来即可实现布局。
**1.**下面的表格内容则需要利用axios请求数据，最终渲染到页面中，页面中请求数据用到了4中请求方式，表格中的内容通过get方法得到
get的封装上面已经有了，直接在User组件中引入即可

import {
   
   postRequest,getRequest,putRequest,deleteRequest} from '../../network/Request'

这样就可以请求表格中的数据了

//1.获取用户列表数据
      getUserList(){
   
   
        getRequest('users',this.queryInfo).then(res=>{