前端开发Vue项目实战：电商后台管理系统（三）------ 用户管理模块 （用户列表 /添加修改删除用户）

1. 用户列表

1.1 通过路由的形式展示用户列表组件

1. 新建用户列表组件 components/user/Users.vue
2. 在router.js中导入子级路由组件Users.vue，并设置路由规则

import Users from './components/user/Users.vue'
const routes = [
{
    path: '/home',
    component: Home,
    redirect: '/welcome',
    children: [{ path: '/welcome', component: Welcome },
      { path: '/users', component: Users }]
  }
]

1.2 在sessionStorage中保存左侧菜单的激活状态

1. 当点击二级菜单的时候，被点击的二级子菜单并没有高亮，我们需要正在被使用的功能高亮显示，可以通过设置el-menu的default-active属性来设置当前激活菜单的index
2. 给所有的二级菜单添加点击事件,并将path值作为方法的参数

<!-- 二级菜单 -->
<el-menu-item @click="saveNavState('/'+ subItem.path)">

3. 在saveNavState方法中将path保存到sessionStorage中
4. 然后在数据中添加一个activePath绑定数据，并将el-menu的default-active属性设置为activePath
5. 最后在created中将sessionStorage中的数据赋值给activePath

<el-menu :default-active="activePath">

data() {
  return {
    // 被激活的链接地址
    activePath: ''
  }
},
created() {
  this.activePath = window.sessionStorage.getItem('activePath')
},
methods: {
  // 保存链接的激活状态
  saveNavState(activePath) {
    window.sessionStorage.setItem('activePath', activePath)
    this.activePath = activePath
  }
}

1.3 绘制用户列表的基本UI结构

1. 使用element-ui 面包屑 组件完成顶部导航路径

// element.js 按需导入
import { Breadcrumb,BreadcrumbItem } from 'element-ui'
Vue.use(Breadcrumb)
Vue.use(BreadcrumbItem)

//users.vue
// 面包屑导航区域 
<el-breadcrumb separator-class="el-icon-arrow-right">
     <el-breadcrumb-item :to="{ path: '/home' }">首页</el-breadcrumb-item>
     <el-breadcrumb-item>用户管理</el-breadcrumb-item>
     <el-breadcrumb-item>用户列表</el-breadcrumb-item>
 </el-breadcrumb>

2. 使用element-ui卡片组件完成主体表格；
   再使用element-ui输入框完成搜索框及搜索按钮，此时我们需要使用栅格布局来划分结构，然后再使用el-button制作添加用户按钮
   
   
   

// element.js 按需导入
import {Card,Row,Col } from 'element-ui'
Vue.use(Card)
Vue.use(Row)
Vue.use(Col)


// Users.vue
//卡片视图 
<el-card>
     //搜索与添加区域
     //el-row el-col 实现栅格布局 
     //Row 组件 提供 gutter 属性来指定每一栏之间的间隔，默认间隔为 0 
     <el-row :gutter="30">
         <el-col :span="10">
             <el-input placeholder="请输入内容">
                 <el-button slot="append" icon="el-icon-search"></el-button>
             </el-input>
         </el-col>
         <el-col :span="4">
             <el-button type="primary">添加用户</el-button>
         </el-col>
     </el-row>
 </el-card>

3. 在assets/css/global.css中添加样式

.el-breadcrumb {
    margin-bottom: 20px;
    font-size: 12px;
}

.el-card {
    box-shadow: 0 1px 1px rgba(0, 0, 0, 0.15) !important;
}

1.4 获取用户列表数据

export default {
    data() {
        return {
            //获取用户列表的参数对象
            //建议把get参数都定义在data数据中
            queryInfo:{
                query:'',
                pagenum:1, //当前页数
                pagesize:2  //当前每页显示多少条数据
            },
            userlist:[],
            total:0, //总数据条数

        }
    },
    created() {
        //在created生命周期函数中发起请求
        //页面创建期间就会调用getUserList函数，发起get请求
        this.getUserList()
    },
    methods: {
        async getUserList(){
            const {data:res} = await this.$http.get('users',{params:this.queryInfo})
            if(res.meta.status!=200){
                return this.$message.error('获取用户列表失败')
            }
            this.userlist = res.data.users
            this.total = res.data.total
            console.log(res) //打印结果见下图
        }
    },
}

1.5 使用el-table组件渲染用户列表

请求返回的响应数据，即 :data=“userlist”

{
  "data": {
	"totalpage": 5,
	"pagenum": 4,
	"users": [
	  {
		"id": 25,
		"username": "tige117",
		"mobile": "18616358651",
		"type": 1,
		"email": "tige112@163.com",
		"create_time": "2017-11-09T20:36:26.000Z",
		"mg_state": true, // 当前用户的状态
		"role_name": "炒鸡管理员"
	  }
	]
  },
  "meta": {
	"msg": "获取成功",
	"status": 200
  }
}

使用表格来展示用户列表数据，使用element-ui表格组件完成列表展示数据

//element.js
import {Table,TableColumn } from 'element-ui'
Vue.use(Table)
Vue.use(TableColumn)

//Users.vue
// 用户列表区域 
// 默认情况下，Table 组件是不具有竖直方向的边框的，如果需要，可以使用border属性，它接受一个Boolean，设置为true即可启用。
//stripe属性可以创建带斑马纹的表格。它接受一个Boolean，默认为false，设置为true即为启用
// :data绑定数据源，也就是请求返回的uerslist
       <el-table :data="userlist" border stripe>
       <el-table-column type='index' label="#"></el-table-column> //索引列
       //label指定当前列标题  prop指定当前这一列指向哪个数据
       <el-table-column prop="username" label="姓名"></el-table-column>
       <el-table-column prop="email" label="邮箱"></el-table-column>
       <el-table-column prop="mobile" label="电话"></el-table-column>
       <el-table-column prop="role_name" label="角色"></el-table-column>
       <el-table-column prop="mg_state" label="状态"></el-table-column>
       <el-table-column label="操作"></el-table-column>
   </el-table>
</el-card>


//global.css
.el-table {
    margin-top: 30px;
}

1.6 自定义状态列的显示效果

1. 在渲染展示状态时，作用域插槽获取每一行的数据 （scope.row就是行内的数据）
2. 使用switch开关组件展示状态信息

//element.js
import { Switch} from 'element-ui'
Vue.use(Switch)

//users.vue
<el-table-column label="状态">
         // slot-scope已经弃用了，可以用 v-slot="scope" 
         // 插槽 slot-scope 固定写法 拿到数据源中当前行的数据
         // 作用域插槽 会覆盖prop
         <template slot-scope="scope">
             <el-switch v-model="scope.row.mg_state" >
             </el-switch>
         </template>
     </el-table-column>

1.7 通过作用域插槽渲染操作列

在操作列中包含了修改，删除，分配角色按钮；
当我们把鼠标放到分配角色按钮上时希望能有一些文字提示Tooltip

//element.js
import { Tooltip } from 'element-ui'
Vue.use(Tooltip)


//users.vue
<el-table-column label="操作" width="180px">
      <template slot-scope="scope">
          //修改按钮
          <el-button type="primary" icon="el-icon-edit" size="mini"></el-button>
          //删除按钮
          <el-button type="danger" icon="el-icon-delete" size="mini"></el-button>
          //分配角色按钮
          <el-tooltip effect="dark" content="分配角色" placement="top" :enterable="false">
              <el-button type="warning" icon="el-icon-setting" size="mini"></el-button>
          </el-tooltip>
      </template>
</el-table-column>

1.8 实现数据分页效果

Pagination 分页组件完成列表分页展示数据

• @size-change (下拉菜单pagesize改变时触发)
• @current-change (页码值发生改变时触发)
• :current-page (设置当前页码)
• :page-size (设置每页的数据条数)
• :total (设置总页数)

<!-- 分页区域 -->
     <el-pagination 
     @size-change="handleSizeChange" 
     @current-change="handleCurrentChange" 
     :current-page="queryInfo.pagenum" 
     :page-sizes="[1, 2, 5, 10]" 
     :page-size="queryInfo.pagesize"
     layout="total, sizes, prev, pager, next, jumper" 
     :total="total">
     </el-pagination>

// 添加两个事件的事件处理函数 @size-change，@current-change
//监听 pagesize 改变的事件
 handleSizeChange(newSize){
      this.queryInfo.pagesize=newSize//监听到的值保存到queryInfo
      this.getUserList()//根据最新的newSize，重新发起请求
  },
  //监听页码值改变的事件
  handleCurrentChange(newPage){
      this.queryInfo.pagenum=newPage
      this.getUserList()
  },

1.9 修改用户状态

put 请求一般是发生了修改

当用户点击列表中的switch组件时，用户的状态应该跟随发生改变

1. 首先监听用户点击switch组件的事件，并将作用域插槽的数据当做事件参数进行传递
2. 在事件中发送请求完成状态的更改

    <el-switch 
    v-model="scope.row.mg_state" 
    @change="userStateChanged(scope.row)">
    </el-switch>


// 监听switch开关状态的改变
async userStateChange(userinfo) {
  // 发送请求进行状态修改
  // 用模板字符串比较方便
  const { data: result } = await this.$http.put(`users/${userinfo.id}/state/${userinfo.mg_state}`)
  //如果失败，取反可以保证页面状态没有变化
  if (result.meta.status !== 200) {
    userinfo.mg_state = !userinfo.mg_state
    return this.$message.error('更新用户状态失败')
  }
  this.$message.success('更新用户状态成功')
}

1.10 实现搜索功能

1. 为文本框添加数据绑定，为搜索按钮绑定点击事件(当用户点击搜索按钮的时候，调用getUserList方法根据文本框内容重新请求用户列表数据)
2. 当我们在输入框中输入内容并点击搜索之后，会按照搜索关键字搜索
   希望能够提供一个 X 删除搜索关键字并重新获取所有的用户列表数据，只需要给文本框添加clearable属性并添加clear事件，在clear事件中重新发起请求

<el-input placeholder="请输入搜索的内容" v-model="queryInfo.query" clearable @clear="getUserList">
<el-button slot="append" icon="el-icon-search" @click="getUserList"></el-button>

2. 添加用户

2.1 渲染添加用户对话框

1. 点击添加用户按钮，弹出一个对话框（Dialog组件）来实现添加用户的功能
2. 为“添加用户”按钮添加点击事件，在事件中将addDialogVisible设置为true，即显示对话框

//element.js
import { Dialog } from 'element-ui'
Vue.use(Dialog)

//Users.vue
<el-button type="primary" @click="addDialogVisible=true">添加用户</el-button>


<!-- 添加用户的对话框 -->
//visible控制对话框的显示隐藏
<el-dialog title="添加用户" :visible.sync="addDialogVisible" width="50%" >
    //内容主体区域
    <span>这是一段信息</span>
    //底部区域
    <span slot="footer" class="dialog-footer">
        <el-button @click="addDialogVisible = false">取 消</el-button>
        <el-button type="primary" @click="addDialogVisible = false">确 定</el-button>
    </span>
</el-dialog>


data() {
        return {
            //控制添加用户对话框的显示与隐藏
            addDialogVisible:false,
        }
    },

2.2 渲染添加用户的表单

• 更改Dialog组件中内容主体区域
• 添加数据绑定和校验规则

// 内容主体区域 
<el-form :model="addForm" :rules="addFormRules" ref="addFormRef" label-width="70px">
  <el-form-item label="用户名" prop="username">
    <el-input v-model="addForm.username"></el-input>
  </el-form-item>
  <el-form-item label="密码" prop="password">
    <el-input v-model="addForm.password"></el-input>
  </el-form-item>
  <el-form-item label="邮箱" prop="email">
    <el-input v-model="addForm.email"></el-input>
  </el-form-item>
  <el-form-item label="手机号 " prop="mobile">
    <el-input v-model="addForm.mobile"></el-input>
  </el-form-item>
</el-form>



data() {
  return {
    // 添加用户的表单数据
    addForm: {
      username: '',
      password: '',
      email: '',
      mobile: ''
    },
    // 添加表单的验证规则对象
    addFormRules: {
      username: [
        { required: true, message: '请输入用户名', trigger: 'blur' },
        { min: 3, max: 10, message: '用户名的长度在3-10个字符之间', trigger: 'blur' }
      ],
      password: [
        { required: true, message: '请输入密码', trigger: 'blur' },
        { min: 6, max: 15, message: '密码的长度在6-15个字符之间', trigger: 'blur' }
      ],
      email: [
        { required: true, message: '请输入邮箱', trigger: 'blur' },
        { min: 6, max: 15, message: '密码的长度在6-15个字符之间', trigger: 'blur' }
      ],
      mobile: [
        { required: true, message: '请输入手机号', trigger: 'blur' }
      ]
    }
  }
}

2.3 自定义邮箱和手机号校验规则

• 在data函数中通过 var 定义变量的形式定义校验规则，值指向一个箭头函数，形参包括三个参数（rule, value, callback），value是要校验的值，直接调用callback表示校验通过
• 校验规则有了之后，用的时候通过validator属性来指定具体的校验规则

    data() {
        //验证邮箱的规则
        var checkEmail = (rule, value, callback) => {
            //验证邮箱的正则表达式
            const regEmail = /^([a-zA-Z]|[0-9])(\w|\-)+@[a-zA-Z0-9]+\.([a-zA-Z]{2,4})$/
            // test() 方法是正则表达式的一个方法，用于检测一个字符串是否匹配某个模式
            //调用test来检验这个value是否合法
            if (regEmail.test(value)) {
                //合法的邮箱
                return callback()
            }
            callback(new Error('请输入合法的邮箱'))
        }
        //验证手机号的规则
        var checkMobile = (rule, value, callback) => {
            const regMobile = /^(?:(?:\+|00)86)?1\d{10}$/
            if (regMobile.test(value)) {
                return callback()
            }
            callback(new Error('请输入合法的手机号'))
        }
      
return {
            //添加表单的验证规则对象
            addFormRules: {
                email: [
                    { required: true, message: '请输入邮箱', trigger: 'blur' },
                    { validator: checkEmail, trigger: 'blur' },
                ],
                mobile: [
                    { required: true, message: '请输入手机号', trigger: 'blur' },
                    { validator: checkMobile, trigger: 'blur' },
                ],
            },
        }
    },
   

2.4 添加用户表单的重置操作

• 当关闭对话框时，重置表单
• 给el-dialog添加@close事件，在事件中添加重置表单的代码

<!-- 添加用户的对话框 -->
<el-dialog @close="addDialogClosed">
 <el-form :model="addForm" :rules="addFormRules" ref="addFormRef" >

// 监听添加用户对话框的关闭事件
addDialogClosed() {
  this.$refs.addFormRef.resetFields()
}

2.5 添加用户前的表单预校验 调用API完成添加用户

• 点击对话框中的确定按钮，发送请求完成添加用户的操作
• 首先给确定按钮添加点击事件，在点击事件中完成业务逻辑代码

//点击按钮，添加新用户
  addUser(){
      this.$refs.addFormRef.validate( async (valid) => {
          //valid会返回一个布尔值，如果true就表示校验通过，反之false
          //validate是element-ui表单的一个验证方法
          if (!valid) return //失败了，直接return
         
          //验证成功，发起添加用户的网络请求
          const {data:res} = await this.$http.post('users',this.addForm)
          if(res.meta.status != 201){
              this.$message.error('添加用户失败')
          }
          this.$message.success('添加用户成功')
          //隐藏添加用户的对话框
          this.addDialogVisible = false
          //重新获取用户列表数据
          this.getUserList()
      })
  },

3. 修改用户

3.1 展示修改用户的对话框

//修改按钮 
<el-button type="primary" icon="el-icon-edit" size="mini" @click="showEditDialog"></el-button>

<!-- 修改用户对话框 -->
<el-dialog title="修改用户" :visible.sync="editDialogVisible" width="50%" >
    <span>这是一段信息</span>
    <span slot="footer" class="dialog-footer">
        <el-button @click="editDialogVisible=false">取 消</el-button>
        <el-button type="primary" @click="editDialogVisible=false">确 定</el-button>
    </span>
</el-dialog>

data() {
  return {
	//控制修改用户对话框的显示与隐藏
    editDialogVisible:false,
  }
methods: {
  // 展示编辑用户的对话框
  showEditDialog(){
	this.editDialogVisible = true
  }
}

3.2 根据id查询对应的用户信息

//1.调方法的时候通过scope.row.id传id
<template slot-scope="scope">
    // 修改按钮
    <el-button type="primary" icon="el-icon-edit" size="mini" @click="showEditDialog(scope.row.id)"></el-button>
</template>

data() {
  return {
    // 查询到的用户的信息对象
    editForm: {}
  }
methods: {
  // 展示编辑用户的对话框
  // 2.接收id
  async showEditDialog(id){
    this.editDialogVisible = true
    const {data: result} = await this.$http.get('users/' + id)
    if(result.meta.status !== 200) {
      return this.$message.error('查询用户信息失败！')
    }
    //3.查询到的数据保存到editForm 上
    this.editForm = result.data
  }
}

3.3 渲染修改用户的表单

// editForm保存了数据，双向数据绑定之后就可以打开界面默认显示
// ：rules是验证规则对象
//  ：ref当前表单的引用对象 
 <el-form :model="editForm" :rules="editFormRules" ref="editFormRef" label-width="70px">
     <el-form-item label="用户名" >
         // disabled表示禁用，不用校验不要prop
         <el-input v-model="editForm.username" disabled></el-input>
     </el-form-item>
     //prop表示校验规则
     <el-form-item label="邮箱" prop="email" >
         <el-input v-model="editForm.email" ></el-input>
     </el-form-item>
     <el-form-item label="手机" prop="mobile" >
         <el-input v-model="editForm.mobile" ></el-input>
     </el-form-item>
 </el-form>


//修改表单的验证规则对象
data() {
	return {
		editFormRules:{
		     email: [
		         { required: true, message: '请输入邮箱', trigger: 'blur' },
		         { validator: checkEmail, trigger: 'blur' },
		     ],
		     mobile: [
		         { required: true, message: '请输入手机号', trigger: 'blur' },
		         { validator: checkMobile, trigger: 'blur' },
		     ],
		 },
	 }
 }

3.4 修改用户表单的重置操作

// 修改用户的对话框 
<el-dialog title="修改用户" :visible.sync="editDialogVisible" width="50%" @close="editDialogClosed">
<el-form :model="editForm" :rules="editFormRules" ref="editFormRef" label-width="70px">

// 监听修改用户对话框的关闭事件
editDialogClosed() {
resetFields对整个表单进行重置，将所有字段值重置为初始值并移除校验结果
  this.$refs.editFormRef.resetFields()
}

3.5 提交表单预验证及完成用户信息的修改

<el-form :model="editForm" :rules="editFormRules" ref="editFormRef" label-width="70px">
<el-button type="primary" @click="editUserInfo">确 定</el-button>

        //修改用户信息并提交
        editUserInfo(){
            this.$refs.editFormRef.validate(async (valid)=> {
                if(!valid) return //验证失败
                //验证成功：发起修改用户信息的put请求
                const {data:res} = await this.$http.put('users/' + this.editForm.id,
                {
                    email:this.editForm.email,
                    mobile:this.editForm.mobile
                })
                if(res.meta.status !==200) {
                    return this.$message.error('更新用户信息失败！')
                }
                //修改成功
                //1.关闭对话框
                this.editDialogVisible=false
                //2.刷新数据列表
                this.getUserList()
                //3.提示修改成功
                this.$message.success('更新用户信息成功！')
            })
        },

4. 删除用户

4.1 弹框询问用户是否确认删除

在点击删除按钮的时候，我们应该跳出提示信息框，让用户确认要进行删除操作；
如果想要使用确认取消提示框，我们需要先将提示信息框挂载到vue中；

- 导入MessageBox组件，并将MessageBox组件挂载到实例

import { MessageBox } from 'element-ui'
Vue.prototype.$confirm = MessageBox.confirm

- 给用户列表中的删除按钮添加事件，并在事件处理函数中弹出确定取消窗,最后再根据id发送删除用户的请求

// 删除按钮 
<el-button @click="removeUserById(scope.row.id)"></el-button>

//根据id删除对应用户信息
async removeUserById(id) {
    //弹窗询问是否删除  
    //如果用户确定删除 confirmResult 返回字符串 confirm
    //如果用户取消删除 confirmResult 返回字符串 cancel
    const confirmResult = await this.$confirm('此操作将永久删除该用户, 是否继续?', '提示', {
        confirmButtonText: '确定',
        cancelButtonText: '取消',
        type: 'warning',
    }).catch(error => error)

    if(confirmResult !=='confirm'){
        return this.$message.info('已取消删除')
    }
},

4.2 调用API完成删除用户操作

const {data:res} = await this.$http.delete('users/' + id)
if(res.meta.status !==200){
     return this.$message.error('删除用户失败！')
 }
 this.$message.success('删除用户成功！')
 this.getUserList()

5. 提交代码

//1. 创建新的分支user，并且切换到user分支
 git checkout -b user
 //2. 查看分支，前面的*号表示当前处于的分支
 git branch
 //3. 查看状态，哪些文件被修改、被创建
 git status
 //4. 将代码添加到暂存区
 git add .
 //5. 将代码提交到uers子分支，并注释
 git commit -m '添加完成用户列表功能开发'
 // 6. 将本地的user分支推送到码云(同时以user分支保存)
 git push -u origin user
 // 7. 将user分支代码合并到master主分支
 git checkout master  //切换到master
 git merge user //合并user
 //8. 将本地master分支的代码推送到码云
 //git push 我这句会报错，用下面的命令
 git push --set-upstream origin master