Vue电商管理系统-用户列表

Posted Kira~~

tags:

篇首语:本文由小常识网(cha138.com)小编为大家整理,主要介绍了Vue电商管理系统-用户列表相关的知识,希望对你有一定的参考价值。

  1. 创建用户列表组件并添加Home下的子路由
      
        path: '/users',
        component: User
      
  1. 侧边栏选项高亮
    菜单的default-activate值表示现在应该高亮的选项的index
    思路:将当前的选项值保存到sessionStorage当中,每次创建页面都自动读取sessionStorage中的值。
    步骤:
    a. data中添加activePath: ''
    b. created()中添加
this.activePath = window.sessionStorage.getItem('activePath')
  1. 绘制用户列表组件的UI结构
    添加面包屑导航区
<!--    面包屑导航区-->
    <el-breadcrumb separator="/">
      <el-breadcrumb-item :to=" path: '/welcome' ">首页</el-breadcrumb-item>
      <el-breadcrumb-item>用户管理</el-breadcrumb-item>
      <el-breadcrumb-item>用户列表</el-breadcrumb-item>
    </el-breadcrumb>
  1. 搜索框和添加用户按钮
    添加卡片并重设阴影和元素空间
    :gutter 元素间距
    :span 元素长度所占空间
    <el-card>
      <el-row :gutter="20">
        <el-col :span="8">
          <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>
.el-breadcrumb
    margin-bottom: 15px;
    font-size: 12px;

.el-card
    box-shadow: 0 1px 1px rgba(0, 0, 0, 0.15) !important;
 /* 
 	box-shadow: h-shadow v-shadow blur spread color inset;
 	h-shadow	必需。水平阴影的位置。允许负值。	
 	v-shadow	必需。垂直阴影的位置。允许负值。
 	blur	可选。模糊距离。	
 	spread	可选。阴影的尺寸。	测试
 	color	可选。阴影的颜色。请参阅 CSS 颜色值。
 	inset	可选。将外部阴影 (outset) 改为内部阴影。	
 */

  1. 请求用户列表
  data() 
    return 
      // 获取用户列表的参数
      queryInfo: 
        query: '',
        pagenum: 1,
        pagesize: 2
      ,
      userlist: [],
      total: 0
    
  ,
  created() 
    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
    
  
  1. 表格渲染
    通过:data="userlist"绑定数据源并设置索引列
    border:带边框
    stripe:隔行变色
    type=“index”:索引列
      <el-table :data="userlist" border stripe>
        <el-table-column type="index"></el-table-column>
        <el-table-column label="姓名" prop="username"></el-table-column>
        <el-table-column label="邮箱" prop="email"></el-table-column>
        <el-table-column label="电话" prop="mobile"></el-table-column>
        <el-table-column label="角色" prop="role_name"></el-table-column>
        <el-table-column label="状态" prop="mg_state"></el-table-column>
        <el-table-column label="操作" ></el-table-column>
      </el-table>
  1. 渲染状态列
    通过作用域插槽
        <el-table-column label="状态" prop="mg_state">
          <template slot-scope="scope">
            <el-switch v-model="scope.row.mg_state">
            </el-switch>
          </template>
        </el-table-column>
  1. 操作页的列表渲染
    enterable=“false”:不允许鼠标进入提示框
        <el-table-column label="操作" width="180px">
          <template>
<!--            修改按钮-->
            <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 class="item" effect="dark" content="Top Center 分配角色" placement="top" enterable="false">
              <el-button type="warning" icon="el-icon-setting" size="mini"></el-button>
            </el-tooltip>
          </template>
        </el-table-column>
  1. 实现分页效果
<!--        分页区域-->
      <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>
    // 监听pagesize改变的事件
    handleSizeChange(newSize)
      this.queryInfo.pagesize = newSize
    ,
    // 监听页码改变的事件
    handleCurrentChange(newPage)
      this.queryInfo.pagenum = newPage
    
  1. 修改用户状态
    给按钮添加点击事件
        <el-table-column label="状态">
          <template slot-scope="scope">
            <el-switch v-model="scope.row.mg_state" @change="userStateChanged(scope.row)">
            </el-switch>
          </template>
        </el-table-column>
    // 监听Switch状态的改变
    async userStateChanged(userInfo)
      const  data: res = await this.$http.put(`users/$userInfo.id/state/$userInfo.mg_state`)
      if(res.meta.status !== 200)
        userInfo.mg_state = !userInfo.mg_state
        return this.$message.error('更新用户状态失败!')
      
      this.$message.success('更新用户状态成功!')
    ,
  1. 实现搜索用户功能
    搜索框绑定model:v-model=“queryInfo.query”
    搜索按钮添加点击事件:@click=“getUserList”
    和初始时查找的流程是一样的,只是修改了queryInfo中query字段的值
    添加clearable可清空属性,可以清空input中的文字
    添加@clear="getUserList"事件
  2. 渲染加用户的对话框
    data中添加addDialogVisible值,默认为false,绑定添加用户按钮事件弹出对话框
<!--    添加用户的对话框-->
    <el-dialog
      title="提示"
      :visible.sync="addDialogVisible"
      width="50%"
      :before-close="handleClose">
<!--      添加内容主体区域-->
      <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>
  1. 渲染添加用户的表单
    和验证登录界面类似,注意验证规则中required不能写成require(我因为这个卡了好久)
<!--      内容主体区域-->
      <el-form :model="addUserForm" ref="addUserFormRef" :rules="addUserFormRules" label-width="100px">
        <el-form-item label="用户名" prop="username">
          <el-input v-model="addUserForm.username"></el-input>
        </el-form-item>
        <el-form-item label="密码" prop="password">
          <el-input v-model="addUserForm.password"></el-input>
        </el-form-item>
        <el-form-item label="邮箱" prop="email">
          <el-input v-model="addUserForm.email"></el-input>
        </el-form-item>
        <el-form-item label="手机" prop="mobile">
          <el-input v-model="addUserForm.mobile"></el-input>
        </el-form-item>
      </el-form>
      // 添加用户的表单数据
      addUserForm: 
        username: '',
        password: '',
        email: '',
        mobile: ''
      ,
      // 添加表单的验证规则对象
      addUserFormRules: 
        username: [
          required: true, message: '请输入用户名', trigger: 'blur',
           min: 3,
            max: 10,
            message: '用户名的长度在3-10个字符之间',
            trigger: 'blur'
          
        ],
        password: [
          required: true, message: '请输入密码', trigger: 'blur',
           min: 3,
            max: 10,
            message: '用户名的长度在3-10个字符之间',
            trigger: 'blur'
          
        ],
        email: [
          required: true, message: '请输入邮箱', trigger: 'blur',
        ],
        mobile: [
          required: true, message: '请输入手机号', trigger: 'blur',
        ]
      
  1. 邮箱和电话的校验
    //自定义邮箱规则
    var checkEmail = (rule, value, callback) => 
      const regEmail = /^\\w+@\\w+(\\.\\w+)+$/
      if (regEmail.test(value)) 
        //合法邮箱
        return callback()
      
      callback(new Error('请输入合法邮箱'))
    
    // 自定义手机号规则
    var checkMobile = (rule, value, callback) => 
      const regMobile = /^1[34578]\\d9$/
      if (regMobile.test(value)) 
        return callback()
      
      // 返回一个错误提示
      callback(new Error('请输入合法的手机号码'))
    
  1. 实现添加用户功能
    后台创建用户成功的返回值为201,因此,返回值非201时则表示返回数据错误
    addUser() 
      this.$refs.addUserFormRef.validate(async valid => 
        // 表单预校验失败
        if (!valid) return
        const data: res = await this.$http.post('users', this.addUserForm)
        if (res.meta.status !== 201)
          return this.$message.error('添加用户失败!')
        
        this.$message.success('添加用户成功!')
        this.addDialogVisible = false
        this.getUserList()
      )
    ,
  1. 实现修改用户信息功能
    a. 添加修改用户信息对话框,对话框的显示绑定变量值editDialogVisibleeditDialogVisible为true时显示,为false时不显示。
    b. 对话框内包含表单的内容,表单的内容绑定data中的editUserForm对象,并添加editUserFormRules校验规则。
    c. 修改按钮绑定click事件@click="showEditDialog(scope.row.id)",当请求得到正确的返回数据时置editDialogVisible为true并将返回的数据赋值到editUserForm,实现表单数据的显示。
    d.实现效果
<el-dialog
      title="修改用户信息"
      :visible.sync="editDialogVisible"
      width="50%"
      @close="editDialogClosed">
      <el-form
        :model="editUserForm"
        ref="editUserFormRef"
        :rules="editUserFormRules"
        label-width="70px">
        <el-form-item label="用户名">
          <el-input v-model="editUserForm.username" disabled></el-input>
        </el-form-item>
        <el-form-item label="邮箱" prop="email">
          <el-input v-model="editUserForm.email"></el-input>
        </el-form-item>
        <el-form-item label="手机" prop="mobile">
          <el-input v-model="editUserForm.mobile"

以上是关于Vue电商管理系统-用户列表的主要内容,如果未能解决你的问题,请参考以下文章

Vue项目实战:电商后台管理系统(Vue+VueRouter+Axios+Element)

Vue电商管理系统-用户列表

Vue电商管理系统-用户列表

Vue电商后台管理系统项目第3篇-首页用户列表增删改查功能

Vue电商后台管理系统项目第6篇-商品管理的商品列表和商品添加组件实现

vue项目实战-电商后台管理系统