四、用户列表

添加用户列表组件并配置路由表

  1. 分别创建下面的四个文件
  • src/components/user-list/user-list.vue
  • src/components/user-list/template.html
  • src/components/user-list/script.js
  • src/components/user-list/style.css

src/components/user-list/template.html:

  1. <div>
  2.   <p>user-list component</p>
  3. </div>

src/components/user-list/user-list.vue:

  1. <template src="./template.html"></template>
  2. <script src="./script.js"></script>
  3. <style src="./style.css"></style>
  1. 配置路由表

src/router/index.js:

  1. // ... 代码略
  3. const router = new Router({
  4.   routes: [
  5.     {
  6.       path: '/',
  7.       component: Home,
  8.       // 当渲染 children 组件的时候会先把 Home 组件渲染出来
  9.       // Home 组件找到根组件中的 router-view 出口替换渲染
  10.       // Home 组件的 children 子路由会渲染到 Home 组件内部的 router-view 出口
  11.       // 参考文档：https://router.vuejs.org/zh-cn/essentials/nested-routes.html
  12.       children: [
  13.         {
  14.           path: '/users',
  15.           component: UserList
  16.         }
  17.       ]
  18.     },
  19.     {
  20.       path: '/login',
  21.       component: Login
  22.     }
  23.   ]
  24. })
  26. // ... 代码略
  1. 访问 /users 测试。

在用户列表中使用表格组件

参考链接：

src/components/user-list/template.html:

  1. <div>
  2. <!--
  3.   表格组件的使用：
  4.   el-table 组件
  5.     data 用来绑定表格数据，是一个数组
  6.     表格组件会根据 data 自动循环渲染
  7.   el-table-column 组件就是表格列
  8.     label 属性用来指定列的标题
  9.     prop 属性用来指定 data 数组中元素项的某个属性
  10.     width 用来设定表格列的宽度，默认单位是 px
  11.  -->
  12. <el-table
  13.   :data="tableData"
  14.   style="width: 100%">
  15.   <el-table-column
  16.     prop="date"
  17.     label="日期"
  18.     width="180">
  19.   </el-table-column>
  20.   <el-table-column
  21.     prop="name"
  22.     label="姓名"
  23.     width="180">
  24.   </el-table-column>
  25.   <el-table-column
  26.     prop="address"
  27.     label="地址">
  28.   </el-table-column>
  29. </el-table>
  30. </div>

src/components/user-list/script.js:

  1. export default {
  2.   data() {
  3.     return {
  4.       tableData: [{
  5.         date: '2016-05-02',
  6.         name: '王小虎',
  7.         address: '上海市普陀区金沙江路 1518 弄'
  8.       }, {
  9.         date: '2016-05-04',
  10.         name: '王小虎',
  11.         address: '上海市普陀区金沙江路 1517 弄'
  12.       }, {
  13.         date: '2016-05-01',
  14.         name: '王小虎',
  15.         address: '上海市普陀区金沙江路 1519 弄'
  16.       }, {
  17.         date: '2016-05-03',
  18.         name: '王小虎',
  19.         address: '上海市普陀区金沙江路 1516 弄'
  20.       }]
  21.     }
  22.   }
  23. }

在请求头中加入 token 请求用户列表

src/components/user-list/script.js

  1. import axios from 'axios'
  3. export default {
  4.   // ... 代码略
  6.   created () {
  7.     // 1. 除了登陆接口，其它接口都需要 token 认证
  8.     // 2. 我们要做的就是按照服务器接口的要求，把 token 放到请求头的 Authorization 字段中
  9.     // 3. 对于接口中的查询字符串，我们可以通过 axios 请求的可选参数 params 来指定传递
  10.     //    params 对象就类似于我们之前使用的 $.ajax 中的 data 选项
  11.     //    params 对象最终会被转换为 key=value&key=value 的格式字符串然后以 ? 分隔拼接到请求地址后面发起请求
  12.     //    这样做的好处就是不需要我们自己去 url 中拼 ?key=value&key=value
  13.     // 服务器 API 除了登陆的接口是可以直接请求处理
  14.     // 其它所有的接口都必须提供登陆成功交换到的 token 发送给服务器才可以
  15.     // 我们这里服务器接口要求必须在请求头中通过一个名字为  Authorization 字段提供 token 令牌
  16.     axios.get('http://localhost:8888/api/private/v1/users', {
  17.       headers: { // headers 是 axios 的 API，固定的
  18.         // 需要授权的 API ，必须在请求头中使用 Authorization 字段提供 token 令牌
  19.         // Authorization 是服务器接口的要求，我们不能乱写
  20.         // 也就是说如果接口要求在头里面放一个 a 值为 token
  21.         // 则我们就要
  22.         //    a: window.localStorage.getItem('token')
  23.         Authorization: window.localStorage.getItem('token')
  24.       },
  25.       params: { // params 可以用来指定请求的查询字符串
  26.         pagenum: 1, // 告诉接口服务器，我要获取第 1 页的数据
  27.         pagesize: 5 // 告诉接口服务器，每页5条数据
  28.       }
  29.     })
  30.       .then(res => {
  31.         console.log(res.data)
  32.       })
  33.   }
  35.   // ... 代码略
  36. }

将请求得到的数据更新到用户列表表格中

src/components/user-list/template.html:

  1. <div>
  2.   <el-table
  3.     :data="tableData"
  4.     style="width: 100%">
  5.     <el-table-column
  6.       prop="username"
  7.       label="用户名"
  8.       width="180">
  9.     </el-table-column>
  10.     <el-table-column
  11.       prop="email"
  12.       label="邮箱"
  13.       width="180">
  14.     </el-table-column>
  15.     <el-table-column
  16.       prop="mobile"
  17.       label="电话"
  18.       width="180">
  19.     </el-table-column>
  20.   </el-table>
  21. </div>

src/components/user-list/script.js:

  1. import axios from 'axios'
  3. export default {
  4.   created () {
  5.     axios.get('http://localhost:8888/api/private/v1/users', {
  6.       headers: {
  7.         Authorization: window.localStorage.getItem('token')
  8.       },
  9.       params: {
  10.         pagenum: 1,
  11.         pagesize: 5
  12.       }
  13.     })
  14.       .then(res => {
  15.         const {data, meta} = res.data
  16.         if (meta.status === 200) {
  17.           this.tableData = data.users
  18.         }
  19.       })
  20.   },
  21.   data () {
  22.     return {
  23.       tableData: []
  24.     }
  25.   }
  26. }

分页展示用户列表

src/components/user-list/template.html:

  1. <div>
  2.   <!-- 表格列表 -->
  3.   ... 代码略
  4.   <!-- /表格列表 -->
  6.   <!-- 数据分页 -->
  7.   <el-pagination
  8.     background
  9.     layout="prev, pager, next"
  10.     :page-size="2"
  11.     :total="total"
  12.     @current-change="handleCurrentChange">
  13.   </el-pagination>
  14.   <!-- /数据分页 -->
  15. </div>

src/components/user-list/script.js:

  1. import axios from 'axios'
  3. export default {
  4.   created () {
  5.     // 页码第一次加载，显示第1页数据
  6.     this.loadUsersByPage(1)
  7.   },
  8.   data () {
  9.     return {
  10.       tableData: [],
  11.       total: 0
  12.     }
  13.   },
  14.   methods: {
  15.     handleCurrentChange (page) {
  16.       // 在页码改变的时候，请求加载该页码对应的数据
  17.       this.loadUsersByPage(page)
  18.     },
  20.     loadUsersByPage (page) {
  21.       axios.get('http://localhost:8888/api/private/v1/users', {
  22.         headers: {
  23.           Authorization: window.localStorage.getItem('token')
  24.         },
  25.         params: {
  26.           pagenum: page,
  27.           pagesize: 2
  28.         }
  29.       }).then(res => {
  30.           const {data, meta} = res.data
  31.           if (meta.status === 200) {
  32.             this.tableData = data.users
  33.             this.total = data.total
  34.           }
  35.         })
  36.     }
  37.   }
  38. }

用户列表搜索

src/components/user-list/template.html:

  1. <div>
  2.   <el-row>
  3.     <el-col :span="6">
  4.       <el-input placeholder="请输入内容" v-model="searchText" class="input-with-select">
  5.         <el-button slot="append" icon="el-icon-search" @click="handleSearch"></el-button>
  6.       </el-input>
  7.     </el-col>
  8.   </el-row>
  9.   <!-- 表格列表 -->
  10.   ... 代码略
  11.   <!-- /表格列表 -->
  13.   <!-- 数据分页 -->
  14.   ... 代码略
  15.   <!-- /数据分页 -->
  16. </div>

src/components/user-list/script.js:

  1. import axios from 'axios'
  3. export default {
  4.   created () {
  5.     // 页码第一次加载，显示第1页数据
  6.     this.loadUsersByPage(1)
  7.   },
  8.   data () {
  9.     return {
  10.       tableData: [],
  11.       total: 0,
  12.       searchText: ''
  13.     }
  14.   },
  15.   methods: {
  16.     handleCurrentChange (page) {
  17.       // 在页码改变的时候，请求加载该页码对应的数据
  18.       this.loadUsersByPage(page)
  19.     },
  21.     loadUsersByPage (page) {
  22.       axios.get('http://localhost:8888/api/private/v1/users', {
  23.         headers: {
  24.           Authorization: window.localStorage.getItem('token')
  25.         },
  26.         params: {
  27.           pagenum: page,
  28.           pagesize: 2,
  29.           query: this.searchText  // query 参数可选，用来指定查询的筛选条件，这里的筛选条件是用户名
  30.         }
  31.       }).then(res => {
  32.           const {data, meta} = res.data
  33.           if (meta.status === 200) {
  34.             this.tableData = data.users
  35.             this.total = data.total
  36.           }
  37.         })
  38.     },
  40.     /**
  41.      * 处理搜索
  42.      */
  43.     handleSearch () {
  44.       // 点击搜索，调用请求方法加载数据列表
  45.       // 请求方法中会去根据输入框中的内容进行搜索
  46.       this.loadUsersByPage(1)
  47.     }
  48.   }
  49. }

添加用户

shop-admin/src/components/user-list/template.html:

  1. <div>
  2.   <!-- 面包屑 -->
  3.   ... 代码略
  4.   <!-- /面包屑 -->
  6.   <!-- 搜索 -->
  7.   <el-row :gutter="20">
  8.     <el-col :span="6">
  9.       <el-input placeholder="请输入内容" v-model="searchText">
  10.         <el-button slot="append" icon="el-icon-search" @click="handleSearch"></el-button>
  11.       </el-input>
  12.     </el-col>
  13.     <el-col :span="2">
  14.       <el-button type="primary" @click="dialogFormVisible = true">添加用户</el-button>
  15.     </el-col>
  16.   </el-row>
  17.   <!-- /搜索 -->
  19.   <!-- 表格列表 -->
  20.   ... 代码略
  21.   <!-- /表格列表 -->
  23.   <!-- 数据分页 -->
  24.   ... 代码略
  25.   <!-- /数据分页 -->
  27.   <!-- 添加用户对话框 -->
  28.   <!--
  29.     el-dialog 是对话框组件
  30.       visible 属性需要绑定一个布尔值，对话框会根据布尔值的真假来决定显示与隐藏
  31.    -->
  32.   <el-dialog title="添加用户" :visible.sync="dialogFormVisible">
  33.     <el-form ref="form" :model="addUserForm" label-position="left" size="small" :rules="formRule">
  34.       <el-form-item label="用户名" label-width="80px" prop="username">
  35.         <el-input v-model="addUserForm.username" auto-complete="off"></el-input>
  36.       </el-form-item>
  37.       <el-form-item label="密码" label-width="80px" prop="password">
  38.         <el-input v-model="addUserForm.password" auto-complete="off"></el-input>
  39.       </el-form-item>
  40.       <el-form-item label="邮箱" label-width="80px" prop="email">
  41.         <el-input v-model="addUserForm.email" auto-complete="off"></el-input>
  42.       </el-form-item>
  43.       <el-form-item label="电话" label-width="80px" prop="mobile">
  44.         <el-input v-model="addUserForm.mobile" auto-complete="off"></el-input>
  45.       </el-form-item>
  46.     </el-form>
  47.     <div slot="footer" class="dialog-footer">
  48.       <el-button @click="dialogFormVisible = false">取 消</el-button>
  49.       <el-button type="primary" @click="handleAddUser">确 定</el-button>
  50.     </div>
  51.   </el-dialog>
  52.   <!-- 添加用户对话框 -->
  53. </div>

src/components/user-list/script.js:

  1. import axios from 'axios'
  3. export default {
  4.   created () {
  5.     this.loadUsersByPage(1)
  6.   },
  7.   data () {
  8.     return {
  9.       tableData: [],
  10.       total: 0,
  11.       searchText: '',
  12.       dialogFormVisible: false,
  13.       addUserForm: {
  14.         username: '',
  15.         password: '',
  16.         email: '',
  17.         mobile: ''
  18.       },
  19.       formRule: {
  20.         username: [
  21.           {required: true, message: '请输入用户名', trigger: 'blur'}
  22.         ],
  23.         password: [
  24.           {required: true, message: '请输入密码', trigger: 'blur'},
  25.           {min: 3, max: 16, message: '密码为 3 - 16 位长度', trigger: 'blur'}
  26.         ],
  27.         email: [
  28.           { required: true, message: '请输入用户名', trigger: 'blur' },
  29.           { type: 'email', message: '请输入正确的邮箱', trigger: 'blur' }
  30.         ],
  31.         mobile: [
  32.           { required: true, message: '请输入手机号', trigger: 'blur' }
  33.         ]
  34.       }
  35.     }
  36.   },
  37.   methods: {
  38.     // ... 代码略
  39.     // ... 代码略
  41.     /**
  42.      * 添加用户
  43.      */
  44.     handleAddUser () {
  45.       axios({
  46.         method: 'post',
  47.         url: 'http://localhost:8888/api/private/v1/users',
  48.         data: this.addUserForm,
  49.         headers: {
  50.           Authorization: window.localStorage.getItem('token')
  51.         }
  52.       }).then(res => {
  53.         if (res.data.meta.status === 201) {
  54.           this.$message({
  55.             type: 'success',
  56.             message: '添加用户成功'
  57.           })
  59.           // 关闭对话框
  60.           this.dialogFormVisible = false
  62.           // 清空表单
  63.           this.$refs['form'].resetFields()
  64.         }
  65.       })
  66.     }
  68.     // ... 代码略
  69.     // ... 代码略
  70.   }
  71. }

修改用户状态

删除用户

编辑用户