【练习记录】基于Vue的电商后台管理系统（一）

红太狼 2023-02-18 03:21 6阅读 0赞

### 目录 ###

*   *   *  1. 项目概述
         *  2. 项目初始化
         *  3. 登录退出功能实现
         *  4. 用户列表功能实现

**前言：** 根据某机构的课程视频进行的练习，这篇文章用来记录练习的过程。

### 1. 项目概述 ###

电商管理系统主要是用于管理用户账号、 商品分类、商品信息、订单、数据统计等功能：  
![在这里插入图片描述][20200615212408922.png]

整体使用前后端分离的开发模式，前端是**基于Vue的SPA项目**，使用到了**Element UI**组件库。

前端技术栈：

*  Vue
 *  vue-router
 *  Element-UI
 *  Axios
 *  Echarts

### 2. 项目初始化 ###

项目初始化需要以下几部分内容：

*  安装vue-cli脚手架
 *  通过脚手架创建项目（这里使用vue ui创建项目）
 *  配置Vue路由
 *  配置Element-UI组件库
 *  配置Axios库
 *  初始化Git远程仓库
 *  将本地项目托管到码云中

### 3. 登录退出功能实现 ###

相关技术点：

*  HTTP是无状态的，
 *  登录后通过`cookie`在客户端记录状态
 *  登录后通过`session`在服务端记录状态
 *  通过`token`方法维持状态

当前后端不存在跨域问题时使用`cookie`和`session`来维持登录，在出现跨域时使用`token`来维持登录状态。

*  `token`的原理：  
    ![在这里插入图片描述][20200615222903798.png]
 *  创建并切换到分支：

// 创建并切换到分支
    git checkout -b login
    //查看当前分支
    git branch

*  对于Element UI组件的引入，报了一个错误：`imported multiple times`

查了资料才知道，是导入次数过多，只要将所有需要导入的组件放在一起就可以了：

import {  Button, Form, FormItem, Input, Message } from 'element-ui'

*  对表单进行校验，然后登录：

在提交请求之前，需要对整个表单进行校验，只有校验成功之后才进行登录请求：  
![在这里插入图片描述][20200616175046884.png]  
因为返回的是一个Promis对象，所以需要添加一个`async/await`；

login () { 
          this.$refs.loginFormRef.validate(async valid => { 
            // 表单校验
            if (!valid) { 
              return 0
            }
            // 发起登录请求
            const result = await this.$http.post('login', this.loginForm)
            // 判断是否登录成功
            if (result.data.meta.status === 200) { 
              this.$message.success(result.data.meta.msg)
            } else { 
              this.$message.error(result.data.meta.msg)
            }
            // 将返回的token值保存在本地的sessionStorage
            window.sessionStorage.setItem('token', result.data.data.token)
            // 编程式路由跳转
            this.$router.push('/home')
          })
        }

在登陆成功之后，将获取到的token保存在客户端的`sessionStorage`中，项目的其他的请求都必须在登陆成功的基础上进行，所以需要保存token，以便于后面携带token进行请求。

注意：`token`只在当前网站打来的期间生效，所以是将`token`保存在`sessionStorage`中。

*  使用路由导航守卫来控制权限

对于系统，我们要求是必须登录之后才能进行访问其他页面，所以需要给页面访问设权限，这时路由导航守卫就派上了用场：

所谓的路由导航守卫，在这里就是指，如果用户没有登录，而是通过URL直接访问页面，那么就需要重新导航到登录页面。

// 为路由对象添加beforeEach导航守卫
    router.beforeEach((to, from, next) => { 
      // 如果现在是登录页面，直接放行
      if (to.path === '/login') return next()
      // 从sessionStorage中获取token值
      const tokenStr = window.sessionStorage.getItem('token')
      // 如果没有找到token，强制跳转到登录页面
      if (!tokenStr) return next('login')
      next()
    })
    
    // to表示将要访问的路径
    // from 表示从那个路径跳转而来
    // next: next()表示直接放行， next('/login')表示强制跳转页面

*  实现退出功能的原理：

基于`token`实现退出功能，只要在退出时，销毁本地的`token`值即可。这样后续请求不会再携带`token`，就需要重新登录生成一个新的`token`之后才可以访问页面。

// 清除客户端sessionStorage中的token
    window.sessionStorage.clear()
    // 跳转到指定页面
    this.$router.push('/login')

*  代码提交

（1）查看源代码状态

git status

（2）将代码添加到本地暂存区

git add .

（3）将暂存区的代码提交到本地源代码仓库中

git commit -m "完成登录功能"

（4）将login的代码合并到主分支

// 切换到主分支
    git checkout master
    // 合并到主分支
    git merge login

（5）将主分支代码提交到码云

git push

（6）将login分支代码提交到码云

git checkout login
    // 第一次推送login分支，不能直接git push
    git push -u origin

### 4. 用户列表功能实现 ###

*  在使用其他接口获取数据时，我们需要对API进行授权，需要在请求头中使用Authorization字段来提供token令牌。通过axios的请求拦截器来添加token，保证拥有获取数据的权限：

设置一个axios请求拦截器：

axios.interceptors.request.use(config => { 
      config.headers.Authorization = window.sessionStorage.getItem('token')
      return config
    })

*  在导航栏重复点击时，会报错：`Avoided redundant navigation to current location " /users"`

解决方案（在`router/index.js`文件中进行修改）：

import Vue from 'vue';
    import VueRouter from 'vue-router';
    
    Vue.use(Router);
    
    // 解决ElementUI导航栏中的vue-router在3.0版本以上重复点菜单报错问题
    const originalPush = VueRouter.prototype.push
    VueRouter.prototype.push = function push(location) { 
      return originalPush.call(this, location).catch(err => err)
    }

*  需要在点击左侧导航栏时，链接需要高亮显示，刷新页面之后也还是高亮显示。

要完成这个需求，我们先要看一下`Element UI`的文档，其中导航栏有一个属性：`default-active`，它表示当前激活菜单的 `index`，也就是说：如果想让菜单中的哪一项进行高亮激活，就把这一项对应的`index`值赋值给`default-active`属性。`index`值就是每个链接的路由链接。

实现步骤：

（1）在点击链接时，将链接地址保存在客户端的`sessionStorage`中  
（2） 在页面创建时，将`sessionStorage`中的值取出来，赋值给左侧的菜单  
（3）在点击链接时，将获取到的链接赋值给`activePath`

// 侧边导航栏，在这里绑定default-active属性
    <el-menu background-color="#333744" text-color="#fff" active-text-color="#409eff"  :unique-opened="true" :collapse="isCollapse" :collapse-transition="false" :router="true" :default-active="activePath">
       // 一级菜单
       <el-submenu :index="item.id+''" v-for="item in menuList" :key="item.id">
            // 一级的菜单的内容
            <template slot="title">
                <i :class="iconsObj[item.id]"></i>
                <span>{ { item.authName}}</span>
            </template>
            // 二级菜单，在这里绑定单击事件来保存连接地址，以及触发激活
            <el-menu-item :index="'/'+subItem.path" v-for="subItem in item.children" :key="subItem.id" @click="savaNavState('/'+subItem.path)">
               // 二级菜单的内容
               <i class="el-icon-menu"></i>
               <span>{ { subItem.authName}}</span>
            </el-menu-item>
        </el-submenu>
    </el-menu>

*  渲染转态图标

后台传给我们的数据是布尔值，无法渲染在页面，而我们需要将这个值渲染成一个开关的图标。  
![在这里插入图片描述][20200617163651237.png]  
这时，就可以作用域插槽，在作用域插槽内，父组件可以拿到子组件的数据。子组件可以在`slot`标签上绑定属性值。

通过`scope.row`可以拿到表格中这一行的数据，那么就可以使用`scope.row.mg_state`拿到状态的数据，赋值给`swich`组件即可。

<el-table-column label="状态">
        <template slot-scope="scope">
           <el-switch v-model="scope.row.mg_state"> </el-switch>
        </template>
    </el-table-column>

注意：这时我们就不需要再使用prop来传递数据，作用域插槽会覆盖prop指定的数据。

目前的效果：  
![在这里插入图片描述][20200617205439612.png]

未完待续…

[20200615212408922.png]: https://img-blog.csdnimg.cn/20200615212408922.png?
[20200615222903798.png]: https://img-blog.csdnimg.cn/20200615222903798.png?
[20200616175046884.png]: https://img-blog.csdnimg.cn/20200616175046884.png?
[20200617163651237.png]: https://img-blog.csdnimg.cn/20200617163651237.png?
[20200617205439612.png]: https://img-blog.csdnimg.cn/20200617205439612.png?