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

Posted sauronblog

tags:

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

前言

由于之前的作者没有再更新这个后台管理系统项目的文章了,我想着把它的项目重头到位做一遍,把剩下的文章写完,把这个项目记录完整,以后遇到类似的后台管理系统项目,可以快速复习一些知识点。

新的项目地址:https://github.com/C4az6/vue_manage_system

 

添加用户

这个操作在用户列表页面,所以路由不用再进行 处理了。

基于单文件组件:

  1. 添加事件绑定--弹出新增用户对话框
  2. 添加dialog对话框
  3. Element-UI组件>dialog对话框>自定义内容>表单

重点属性:

  1. :visible.sync:控制当前对话框的显示和隐藏,如果 值为true,则显示
  2. label-width:label宽度
  3. model:表单的数据源绑定
  4. v-model:单个表单元素的数据绑定

细节:

  1. 表单元素的绑定数据的名称不要随意,而是参照接口
  2. <el-form :model="addForm" :label-width="‘120px‘">:如果为label设置宽度没有必须为每一个元素单独设置,而是可以在form中统一设置

在dialog添加表单结构

<!-- 新增用户对话框 -->
<el-dialog title="新增用户" :visible.sync="addDialogFormVisible">
    <el-form :model="addForm" :label-width="‘120px‘">
        <el-form-item label="用户名">
            <el-input v-model="addForm.username" auto-complete="off"></el-input>
        </el-form-item>
        <el-form-item label="密码">
            <el-input v-model="addForm.password" auto-complete="off"></el-input>
        </el-form-item>
        <el-form-item label="邮箱">
            <el-input v-model="addForm.email" auto-complete="off"></el-input>
        </el-form-item>
        <el-form-item label="手机号">
            <el-input v-model="addForm.mobile" auto-complete="off"></el-input>
        </el-form-item>
    </el-form>
    <div slot="footer" class="dialog-footer">
        <el-button @click="addDialogFormVisible = false">取 消</el-button>
        <el-button type="primary">确 定</el-button>
    </div>
</el-dialog>

为表单元素添加验证提示信息

  1. :rules属性的设置
  2. rules规则的添加
  3. prop的名称必须和规则的名称对应
  4. rules规则添加在data属性中的

 

// 新增用户和编辑用户数据验证规则
      rules: {
        username: [
          { required: true, message: ‘请输入用户名‘, trigger: ‘blur‘ }
        ],
        password: [
          { required: true, message: ‘请输入密码‘, trigger: ‘blur‘ },
          { min: 6, max: 16, message: ‘长度在 6 到 16 个字符‘, trigger: ‘blur‘ }
        ],
        email: [
          // wuhu0723@126.com
          { required: true, message: ‘请输入邮箱‘, trigger: ‘blur‘ },
          { message: ‘请输入合法的邮箱‘, pattern: /w+[@]w+[.]w+/, trigger: ‘blur‘ }
        ],
        mobile: [
          // wuhu0723@126.com
          { required: true, message: ‘请输入手机号‘, trigger: ‘blur‘ },
          { message: ‘请输入正确的手机号‘, pattern: /^1d{10}$/, trigger: ‘blur‘ }
        ]
      }

在事件中进行用户数据的验证--可以阻止 本次提交

  1. 为表单添加ref属性
  2. 为按钮添加绑定事件
  3. validate方法可以实现表单数据的验证,这个验证的规则与之前所设置的Rules完全对应
  4. 这个函数在实现完验证之后会传递一个值给当前函数的回调,如果值为true,则说明验证通过,否则说明不通过

发起新增用户的请求,接收返回值,实现数据的刷新

  1. 引入接口方法
  2. 调用接口方法,传递参数,添加then的回调
// 新增用户
add () {
    // 再次进行用户数据的验证
    this.$refs.addForm.validate(valid => {
        if (valid) {
            // 发起新增用户请求
            addUser(this.addForm)
                .then(res => {
                if (res.data.meta.staus === 201) {
                    this.$message({
                        type: ‘success‘,
                        message: res.data.meta.msg
                    })
                    // 数据刷新
                    this.addDialogFormVisible = false
                    // 表单元素的数据重置
                    this.$refs.addForm.resetFields()
                    this.init()
                } else {
                    this.$message({
                        type: ‘error‘,
                        message: res.data.meta.msg
                    })
                }
            })
                .catch(() => {
                this.$message({
                    type: ‘error‘,
                    message: ‘err‘
                })
            })
        } else {
            // 中止本次请求
            return false
        }
    })
}

后台接口方法:@/api/users.js

// 新增用户
export const addUser = (data) => {
  return axios({
    method: ‘post‘,
    url: ‘users‘,
    data
  })
}

 

编辑用户

组件中的业务处理

  1. 为编辑按钮添加事件--弹框

  2. 添加dialog

<!-- 编辑用户对话框 -->
    <el-dialog title="编辑用户" :visible.sync="editDialogFormVisible">
      <el-form ref=‘editForm‘ :model="editForm" :rules=‘rules‘ :label-width="‘120px‘">
        <el-form-item label="用户名">
          <el-input v-model="editForm.username" auto-complete="off" disabled></el-input>
        </el-form-item>
        <el-form-item label="邮箱" prop=‘email‘>
          <el-input v-model="editForm.email" auto-complete="off"></el-input>
        </el-form-item>
        <el-form-item label="手机号" prop=‘mobile‘>
          <el-input v-model="editForm.mobile" auto-complete="off"></el-input>
        </el-form-item>
      </el-form>
      <div slot="footer" class="dialog-footer">
        <el-button @click="editDialogFormVisible = false;$refs.editForm.resetFields()">取 消</el-button>
        <el-button type="primary">确 定</el-button>
      </div>
    </el-dialog>

添加dialog对象的属性

// 控制新增用户对话框的显示和隐藏
      addDialogFormVisible: false,
      // 新增数据的表单数据绑定对象
      addForm: {
        username: ‘‘,
        password: ‘‘,
        email: ‘‘,
        mobile: ‘‘
      },

在弹出框 的时候需要加载默认数据

  1. 重点是slot-scope的使用
  2. 通过scope可以获取这一行的对应的数据对象
  3. scope.row就是当前这一行的数据对象
// 单击编辑弹出对话框,加载默认数据
    handleEdit (obj) {
      console.log(obj)
      // 让弹出框显示
      this.editDialogFormVisible = true
      // 表单元素实现的双向数据绑定,所以我们只需要为表单元素的双向绑定数据对象有数据就行
      this.editForm.id = obj.id
      this.editForm.username = obj.username
      this.editForm.email = obj.email
      this.editForm.mobile = obj.mobile
    }

添加数据验证的提示:和之前新增用户完全一样

  1. 单击确定实现修改操作

  2. 修改提交之前再次实现用户数据验证

  3. 接收操作返回值,进行数据刷新,关闭弹出框...

// 编辑用户
    edit () {
      this.$refs.editForm.validate(valid => {
        if (valid) {
          editUser(this.editForm).then(res => {
            // 一定不要靠猜,而是打印出数据分析数据内容和结构
            console.log(res)
            if (res.data.meta.status === 200) {
              this.$message({
                type: ‘success‘,
                message: res.data.meta.msg
              })
              // 数据刷新
              this.editDialogFormVisible = false
              // 表单元素的数据重置
              this.$refs.editForm.resetFields()
              this.init()
            } else {
              this.$message({
                type: ‘error‘,
                message: res.data.meta.msg
              })
            }
          }).catch(() => {
            console.log(‘err‘)
          })
        } else {
          return false
        }
      })
    }

接口方法的添加

// 编辑用户
/**
 * 这个方法可以实现用户数据的编辑
 * @param {object} data-用户对象
 */
export const editUser = (data) => {
  return axios({
    method: ‘put‘,
    url: `users/${data.id}`,
    data
  })
}

 

删除用户

组件中的业务处理

  1. 添加删除事件绑定
  2. 写出删除确认提示框:内容不是很复杂,但是也没有自动消息(既不是dialog也不是$message,而是messageBox)

messageBox的使用

技术图片

 

在单击确认的时候发起请求

 

// 根据id删除用户
    del (id) {
      // 弹出删除确认框
      this.$confirm(`此操作将永久删除id号为${id}的数据, 是否继续?`, ‘提示‘, {
        confirmButtonText: ‘确定‘,
        cancelButtonText: ‘取消‘,
        type: ‘warning‘
      }).then(() => {
        // 发起删除请求
        deleteUser(id)
          .then(res => {
            if (res.data.meta.status === 200) {
              this.$message({
                type: ‘success‘,
                message: ‘删除成功!‘
              })
              this.init()
            }
          })
          .catch(() => {
            this.$message({
              type: ‘error‘,
              message: ‘删除失败!‘
            })
          })
      }).catch(() => {
        this.$message({
          type: ‘info‘,
          message: ‘已取消删除‘
        })
      })
    }

接口方法的添加

// 删除用户
export const deleteUser = (id) => {
  return axios({
    method: ‘delete‘,
    url: `users/${id}`
  })
}

 

分配用户角色

组件中的业务处理

  1. 绑定分配角色的事件
  2. 添加分配角色对话框

下拉列表结构说明

// 当用户进行选择之后,会自动的将:value所对应数据赋值给v-model所指定的属性
<el-select v-model="value" placeholder="请选择">
    <el-option
               v-for="item in options"
               :key="item.value"
               :label="item.label" //用于展示的数据--给用户看的
               :value="item.value" //这个展示数据背后的value值,它就是相当于背后的唯一标识id
               ></el-option>
</el-select>

观察接口方法:接口需要的是id

接口方法

// 分配用户角色
// id:就是id号
// rid:也是一个id号
export const grantUserRole = (id, rid) => {
  return axios({
    method: ‘put‘,
    url: `users/${id}/role`,
    data: { rid: rid }
  })
}

 

修改用户状态

 vue组件的业务处理

处理不同用户不同的状态的展示

  1. 之前都是绑定了同个属性值--value2,所以其中一个状态变化也会影响到其它switch的状态变化

  2. 我们发现数据中有一个属性mg_state,它就是用来描述当前用户的状态

  3. 所以我们可以将swtich的v-model绑定为用户数据 的mg_state

<el-switch v-model="scope.row.mg_state" active-color="#13ce66" inactive-color="#ff4949"></el-switch>

为switch添加状态切换的事件:change事件就是在切换状态时的触发事件,这个事件有一个参数,就是当前状态

  1. 这个事件如果没有传递参数,那么就默认的当前状态做为参数

  2. 如果你手动传递了参数,默认的参数就不会再进行传递,你可以手动的添加$event

  3. $event的值就是当前的状态值

  4. 你也可以将之前数据源数据双向绑定属性做为参数传递

<el-switch v-model="scope.row.mg_state" active-color="#13ce66" inactive-color="#ff4949" @change=‘updateStatus(scope.row.id,scope.row.mg_state)‘></el-switch>

实现状态的修改:调用接口方法

// 修改用户状态
    updateStatus (id, type) {
      updateUserStatus(id, type)
        .then(res => {
          console.log(res)
          if (res.data.meta.status === 200) {
            this.$message({
              type: ‘success‘,
              message: res.data.meta.msg
            })
          }
        })
    }

接口方法

// 修改用户状态
export const updateUserStatus = (id, type) => {
  return axios({
    method: ‘put‘,
    url: `users/${id}/state/${type}`
  })
}

 

补充:Token

token是一种新的状态保持的方式:客户端使用用户名和密码请求登录。服务端收到请求,验证用户名和密码。验证成功后,服务端会生成一个token,然后把这个token发送给客户端。客户端收到token后把它存储起来,可以放在cookie或者Local Storage(本地存储)里。客户端每次向服务端发送请求的时候都需要带上服务端发给的token。服务端收到请求,然后去验证客户端请求里面带着token,如果验证成功,就向客户端返回请求的数据。

现在我们有一个需求:我们需要获取到token值,并且在每一次后台数据请求的时候传递这个token给服务器。

存储token 》 获取token 》 传递token。

存储token

  1. 在登陆成功之后的返回值中就包含token

  2. 我们可以使用本地存储来实现对token值的存储:localStorage sessionStorage

获取token + 传递token

  1. 什么时候获取并进行传递:每个请求发送的时候都需要传递token,我们当然不想每个请求都单独进行处理

  2. 拦截器就是在这个场景提供支持的

  3. axios提供了拦截器功能

// 添加请求拦截器
axios.interceptors.request.use(function (config) {
  // 在发送请求之前做些什么
  // 获取可能有的token数据,进行请求头的设置,格式Authorization:token
  var token = localStorage.getItem(‘itcast_pro_token‘)
  // console.log(config)
  config.headers[‘Authorization‘] = token

  return config
}, function (error) {
  // 对请求错误做些什么
  return Promise.reject(error)
})

 

效果展示

技术图片

 

如果您喜欢这篇文章,可以打赏点钱给我 :)

    支付宝                  微信

技术图片   技术图片

 

以上是关于Vue电商后台管理系统项目第3篇-首页用户列表增删改查功能的主要内容,如果未能解决你的问题,请参考以下文章

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

Vue电商后台管理系统项目第4篇-权限管理页面实现

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

Vue电商后台管理系统项目第5篇-角色列表的增删改查&&角色授权

电商后台管理项目d01

电商后台管理项目d01