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: [
          // [email protected]
          { required: true, message: ‘请输入邮箱‘, trigger: ‘blur‘ },
          { message: ‘请输入合法的邮箱‘, pattern: /\w+[@]\w+[.]\w+/, trigger: ‘blur‘ }
        ],
        mobile: [
          // [email protected]
          { required: true, message: ‘请输入手机号‘, trigger: ‘blur‘ },
          { message: ‘请输入正确的手机号‘, pattern: /^1\d{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)
})

效果展示

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

    支付宝                  微信

   

原文地址:https://www.cnblogs.com/sauronblog/p/11608585.html

时间: 2024-10-11 04:46:18

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

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

角色列表的增删改查 1.添加角色 先根据API文档编写接口: // 添加角色 export const addRolesApi = (data) => { return axios({ method: 'post', url: 'roles', data }) } 在角色组件内引用,然后给 添加角色 按钮绑定一个点击事件addRolesClick: <!-- 添加角色 --> <el-button type="success" plain @click=&quo

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

开胃小菜—左侧导航菜单的动态生成 通过为指定的用户指定角色,那么这个用户登陆之后应该只能看到这个角色所对应的权限菜单, 我们是根据当前登陆用户去获取对应的菜单权限 步骤 分析接口文档 ,发现不用传递参数,因为它是根据当前登陆用户的token来动态获取当前用户的权限 添加接口方法获取动态的菜单数据 // 获取左侧菜单权限 export const getLeftMenu = () => { return axios({ url: `menus` }) } 实现菜单项的动态加载 获取数据之后,注意看

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

优化之前的分配角色功能 实现下拉列表的选项默认选中 为下拉列表的v-model赋值一个id,这个id会对应着下拉列表的value,如果赋值了Value,那么就会让这个value数据所对应的字符串数据显示 我们得先获取到这个用户的rid // 分配角色提交 grantrolesubmit () { if (this.grantForm.rid) { grantUserRole(this.grantForm.id, this.grantForm.rid) .then(res => { if (res

构建ASP.NET MVC4+EF5+EasyUI+Unity2.x注入的后台管理系统(9)-MVC与EasyUI结合增删改查

在第八讲中,我们已经做到了怎么样分页.这一讲主要讲增删改查.第六讲的代码已经给出,里面包含了增删改,大家可以下载下来看下.这讲主要是,制作漂亮的工具栏,虽然easyui的datagrid已经自带可以设置工具栏,我们还是要提取出来,为以后权限控制做更好的准备. 前端代码没有逻辑结果,这也许是我写代码以来写得最轻松的,但也是最繁琐的,因为美工我不是强项,每一次调整都非常的困难,最后我把他调成了这样了: 看得过去的鼓掌一下.样式已经包含在附加代码中了. 大家只要加入以下HTML代码到index上就可以

搭建第一个web项目:实现用户的增删改查(二)

最近学了点java和微信的东西,公司这个项目有搭建不起来,在公司有时间的时候就学点Android了,放了个端午假期又颓废了一段时间,这个增删改还没有整理好,我勒个去啊. 不过最近慢慢整理项目的时候,发现了一些思路,对以后和像我一样的新手来说也许有不少的帮助. 1.不要一味心思的去赶紧实现自己的想法,其实一步一步,从简单的来,慢慢测试,也许更节约时间. 这次就是急着去扩展easyUI的dialog,模仿公司的扩展方法,可是一直不成功.反而先做一个简单的dialog,慢慢一步步调试,就会发现自己犯的

搭建第一个web项目:实现用户的增删改查

好久没写这个web的代码了,再不写估计以前的也忘记的差不多了,赶紧复习下,顺便把自己的想法慢慢实现了. 最近在公司发现以前的项目有用easyUI搭建的.赶紧copy回来学习下. 感觉写日志真的很有必要,自己总结的肯定要比每次从网上查阅来的靠谱.每次搭建一个基本的web项目都都要查ssh的配置真的很忧伤啊,有木有!!! 把jar包的截图截了一下,要不总是记不清该用到的基本jar有啥. 其中Struts中用到的jar有:commons-fileupload.jar  commons-io.jar  

web项目总结——通过jsp+servlet实现对oracle的增删改查功能

1.DAO模式 分包:依次建立 entity:实体包,放的是跟oracle数据库中表结构相对应的对象的属性,也就是这个对象有什么 dao:增删改查接口,实现增删改查的具体方法 service:同dao,也是一个接口,一个接口的实现类,方法什么的都跟dao差不多 servlet:新建servlet类,继承HttpServlet类,一个方法建立一个servlet类,根据不同的方法选择使用doGet().doPost()方法 .services()既包含doGet 又包含doPost 新建jsp页面

搭建第一个web项目:实现用户的增删改查(三)

每个程序员都有自己写代码的习惯吧,用公司编代码的方式习惯了之后,就按照公司的方法在后台建立了一些工具类. util类——JPAUtil.java(与数据库打交道)备注:只是一部分,只做了增删改查. package cn.itcast.oa.util; import java.io.Serializable; import java.util.List; import org.springframework.beans.BeansException; import org.springframew

React16+React-Router4 从零打造企业级电商后台管理系统

第1章 课程介绍本章整体介绍该课程的内容,让同学们了解这个课程的特点和学习方法,以及后台管理系统开发前的一些前置工作,如需求分析.技术选型和数据接口等. 第2章 课前知识储备本章介绍一些后面课程要用到的一些基础知识,为后面的开发打下基础,包括页面加载过程.ES6基础和本地存储相关的知识. 第3章 前端框架的分析本章介绍前端框架的共性和应用场景,分析前端加载原理,并对单页和多页应用,框架和原生开发,三大主流框架之间做详细的对比. 第4章 开发环境的搭建搭建项目依赖的开发环境,包括nodejs的安装