vue与elementUI电商后台管理系统笔记06

已于 2022-07-18 09:26:11 修改
阅读量726 收藏 1
点赞数
分类专栏： vue与elementUI 文章标签： vue.js elementui 前端
于 2022-07-18 09:19:47 首次发布
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/wulikunbing/article/details/125841133
版权

用户列表开发

表格中Boolean值渲染成开关按钮

作用域插槽

（即带数据的插槽）让父组件在填充子组件的插槽内容时使用子组件的数据

slot-scope=“作用域名”（作用域名.数据名来使用子组件的数据）

通过 Scoped slot 可以获取到 row, column, $index 和 store（table 内部的状态管理）的数据

什么时候会用到作用域插槽？

需要在列表中进行非文本渲染，比如渲染图片、按钮、进度条等

首先，在表格列el-table-column中放一个模板template

使用slot-scope=“scope”，scope接收数据，使用scope.row属性获取当前行数据。将其打印是输出一下：

<template slot-scope="scope">{{scope.row}}</template>

然后，从打印结果可以看到scope.row中有一个mg_state:false,所以我们可以通过scope.row.mg_state获取到该数据，并且将此数据渲染成开关样式，使用el-switch，绑定v-model到一个Boolean类型的变量，完整代码如下：

<el-table-column label="状态">
    <template slot-scope="scope">
        <el-switch v-model="scope.row.mg_state"></el-switch>
    </template>
</el-table-column>

效果如下：

插槽形式自定义列的渲染

<el-table-column label="操作"
                         width="180px">
                         //让按钮在一行显示，给当前列加宽
          <template>
            <!-- 修改按钮 -->
            <el-button type="danger"//红色
                       icon="el-icon-edit"
                       size="mini"></el-button>
            <!-- 删除按钮 -->
            <el-button type="primary"//蓝色
                       icon="el-icon-delete"
                       size="mini"></el-button>
            <!-- 分配角色按钮 -->
            //el-tooltip鼠标移动到该按钮显示提示信息
            <el-tooltip effect="dark"//黑色提示框
                        content="分配角色"//提示信息
                        placement="top"//上面显示
                        :enterable="false">
                        //鼠标离开，隐藏tooltip                      //enterable鼠标是否可进入到 tooltip 中，Boolean —默认true
              <el-button type="warning"//橙色
                         icon="el-icon-setting"
                         size="mini"></el-button>
            </el-tooltip>
          </template>
        </el-table-column>

实现数据分页效果

<el-pagination
    //切换分页条(每页显示多少条)时触发
      @size-change="handleSizeChange"
      //切换页码时触发
      @current-change="handleCurrentChange"
      :current-page="queryInfo.pagenum"//当前页码
      :page-sizes="[1, 2, 5, 10]"//分页条
      :page-size="queryInfo.pagesize"//当前每页显示多少条数据
      //layout表示会在页面上展示哪些功能组件
      layout="total, sizes, prev, pager, next, jumper"
      :total="total">
      //total表示一共多少数据(动态绑定data里面的total)
</el-pagination>
data () {
    return {
      // 获取用户列表的参数对象
      queryInfo: {
        query: '',
        // 当前的页数
        pagenum: 1,
        // 当前每页显示多少条数据
        pagesize: 2
      },
      userlist: [],
      total: 0
    }
  },
  
methods：{
 // 监听pagesize改变的事件
    handleSizeChange (newSize) {
      // console.log(newSize)
      // 将最新的每页显示多少条数据保存到data里面的pageSize
      this.queryInfo.pagesize = newSize
      // 更新表格数据（重新发起get请求获取最新的数据）
      this.getUserList()
    },
    // 监听页码值改变的事件
    handleCurrentChange (newPage) {
      // console.log(newPage)
      this.queryInfo.pagenum = newPage
      this.getUserList()
    }

实现用户状态的修改

在视图界面修改状态信息，实现后台保存修改

①

首先，要监听到switch开关状态信息的改变

监听switch开关状态信息

事件名称说明回调参数
changeswitch 状态发生变化时的回调函数新状态的值

给switch添加一个点击事件：

<el-switch v-model="scope.row.mg_state"
                       @change="userStateChanged(scope.row)"></el-switch>
// 监听switch开关状态的改变
    userStateChanged (userinfo) {
      console.log(userinfo)
    }

后台打印监听结果：

开关关上时：

 

开关打开时：

监听数据成功

②

然后，调用对应的api接口将监听的结果保存到数据库

调用api接口保存数据

这里发起api请求时，uId是动态参数，为了插入动态数据，需要用到模板字符串：

es6 模板字符串

参考：ES6之反引号(`)标识的作用——字符串插入变量${插值变量名} & 多行字符串 & 标签模板-tag函数_viceen的博客-CSDN博客_es6反引号

ES6 模板字符串(Template String)是增强版的字符串，用反引号(`)标识，而不是单引号（’）或双引号（“）引号；它可以当作普通字符串使用，也可以用来定义多行字符串，或者在字符串中嵌入变量。

字符串插入变量和表达式。变量名写在 ${} 中

let info = `我是${name},我${age + 1}岁了。`
//等价于：
let info="我是"+name+"，我"+(age+1)+"岁了。"

请注意，插值（${插值}）内的任何占位符都将被视为JavaScript表达式并进行评估，例如，您可以进行数学运算。

console.log(`1和1的插值运算${1 + 1}`);

查阅api文档：

1.3.3. 修改用户状态

  • 请求路径：users/:uId/state/:type

  • 请求方法：put //一般发生修改都是调用put请求

  • 请求参数

参数名参数说明备注
uId用户 ID不能为空携带在url中
type用户状态不能为空携带在url中，值为 true 或者 false

  • 响应数据

{
  "data": {
    "id": 566,
    "rid": 30,
    "username": "admin",
    "mobile": "123456",
    "email": "bb@itcast.com",
    "mg_state": 0
  },
  "meta": {
    "msg": "设置状态成功",
    "status": 200
  }
}

发起请求：

发起put请求后会返回promise对象，所以加上await 和asyns简化promise为一个data属性，并且将data重命名为res。判断是否设置状态成功，若失败没有返回200（即视图数据已经更改，数据库数据更新失败）需要把视图状态重置回原来状态（即状态取反）；反之，返回200数据，更新状态成功，输出提示信息。

完整switch点击事件如下：

// 监听switch开关状态的改变
    async userStateChanged (userinfo) {
      console.log(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('更新用户状态失败！')
      }
      return this.$message.success('更新用户状态成功！')
    }

页面效果如下，点击状态按钮，上方弹出message对话框

并且更改完状态信息，再次刷新页面，状态信息不会变，说明修改的状态信息已经成功保存到数据库

实现搜索功能

当用户在文本框输入信息后，点击搜索按钮，可以根据指定名称搜索不同的用户。应该将文本框和data中的数据进行双向绑定；绑定完成后，在点击搜索按钮时，调用获取列表的函数进行查询。

首先，给input输入框在data中定义一个关键字query

data（）{return{queryInfo: {
        // 搜索输入框关键字
        query: '',
        // 当前的页数
        pagenum: 1,
        // 当前每页显示多少条数据
        pagesize: 2
      },

v-model双向绑定，button添加点击事件(绑定获取用户列表事件进行查询)：

<!-- 搜索与添加区域 -->
<el-input placeholder="请输入内容"
		  v-model="queryInfo.query">
            <el-button slot="append"
                       icon="el-icon-search"
                       @click="getUserList"></el-button>
 </el-input>

效果演示（查询到adm所有数据）：

实现可清空input

此时，我们查询完成数据后，把输入框内容清空，点击查询按钮可以查询到所有用户信息。现在我们可以在输入框添加一个可以把输入框数据都清空的按钮，点击按钮输入框内容清空同时查询出所有用户信息。

查阅element文档input中有一个可清空输入框，是使用clearable属性得到的

<!-- 搜索与添加区域 -->
          <el-input placeholder="请输入内容"
                    v-model="queryInfo.query"
                    clearable>

加上此属性后，点击清空按钮输入框内容确实被清空了，但是表格数据并没有被重置为所有用户信息。查阅文档，input下方有一个clear事件

clear在点击由 clearable 属性生成的清空按钮时触发
<el-input placeholder="请输入内容"
                    v-model="queryInfo.query"
                    clearable
                    @clear="getUserList">

点击清空按钮成功获取到所有用户信息。

实现添加用户的功能

点击添加用户按钮弹出dialog对话框，点击取消确定按钮或者对话框外的其他任意区域都能实现对话框隐藏

dialog对话框

element官网复制以下内容至el-card的最下面

<!-- 添加用户的对话框 -->
<el-dialog 	title="提示"
//属性绑定boolean，控制对话框的显示与隐藏
            :visible.sync="addDialogVisible"
            width="50%">
    <!-- 内容主体区域 -->
    <span>这是一段信息</span>
    <!-- 底部区域 -->
    //footer-Dialog 按钮操作区的内容，使用插槽插入
    <span 	slot="footer"
    		class="dialog-footer">
    	<el-button @click="addDialogVisible = false">取 消			</el-button>
    	<el-button 	type="primary"
   					@click="addDialogVisible = false">确 定			</el-button>//置为false，点击确定或取消按钮隐藏对话框
    </span>
</el-dialog>
data（）{return{
// 控制添加用户对话框的显示与隐藏
      addDialogVisible: false//默认模式不显示对话框

给添加用户写一个点击事件绑定对话框

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

设为true表示点击添加用户按钮时显示对话框

对话框中渲染一个表单

dialog内容主体区域替换为form表单：

<!-- 内容主体区域 -->
//form表单使用model数据双向绑定addForm数组，rules绑定验证规则对象，			ref引用对象，label-width指定文本长度
        <el-form :model="addForm"
                 :rules="addFormRules"
                 ref="addFormRef"
                 label-width="70px">
           //prop指定具体校验规则，此规则在addFormRules中具体定义
          <el-form-item label="用户名"
                        prop="username">
            //输入框使用v-model进行数据双向绑定
            <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,max则校验了我们要求的字符串长度
          { 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' }
        ],
        mobile: [
          { required: true, message: '请输入手机', trigger: 				'blur' }
        ]
      }

    }
  },

效果演示：

自定义校验规则

使用自定义校验规则校验邮箱和手机号，首先在data中非return{}的部分定义校验规则，然后在rules中进行绑定。

如下：箭头函数，接收3个参数,rule,value和cb，其中value是要验证的字段的值，cb是验证以后的回调函数 如果值可以通过正则校验，就return cb() 否则调用cb返回错误信息

data () {
    // 验证邮箱的规则
    const checkEmail = (rule, value, cb) => {
      // 验证邮箱的正则表达式
    const regEmail = /^([a-zA-Z0-9_-])+@([a-zA-Z0-9_-])+(.[a-zA-Z0-9_-])+/
    if (regEmail.test(value)) {
        // 合法的邮箱
        return cb()
      }
    cb(new Error('请输入合法的邮箱'))
    }
    // 验证手机号的规则
    const checkMobile = (rule, value, cb) => {
    const regMobile = /^(0|86|17951)?(13[0-9]|15[0123456789]|17[678]|18[0-9]|14[57])[0-9]{8}$/
    if (regMobile.test(value)) {
        return cb()
      }
    cb(new Error('请输入合法的手机号'))
    }
    return {
    。。。
    // 添加表单的验证规则对象
      addFormRules: {
        。。。
        //validator绑定自定义校验规则
        email: [{ required: true, message: '请输入邮箱', trigger: 'blur' }, { validator: checkEmail, trigger: 'blur' }],
        mobile: [{ required: true, message: '请输入手机', trigger: 'blur' }, { validator: checkMobile, trigger: 'blur' }]
      }

添加用户表单重置

关闭对话框后，重置表单。使再次打开对话框，里面没有之前数据，是一个新的表单。首先，监听对话框的关闭事件。然后，在关闭事件中重置表单。

elementui文档dialog有一个close事件：

只有这个事件触发了，就说明这个对话框被关闭了。对话框被关闭，我们就重置表单数据。

通过ref引用调用resetFields方法，重置表单。

<!-- 添加用户的对话框 -->
      <el-dialog title="添加用户"
                 :visible.sync="addDialogVisible"
                 width="50%"
                 @close="addDialogClosed">
// 监听添加用户对话框的关闭事件
    addDialogClosed () {
      this.$refs.addFormRef.resetFields()
    }

this.$refs[name].resetFields();的使用：

重置表单方法的注意事项：

  • Form必须要有ref属性

  • Form必须绑定：model

  • Form的FormItem中必须要有prop属性

  • Form包裹的元素绑定值需与FormItem中prop属性名称保持一致

添加用户的预验证功能

填写完添加用户的信息，点击确定的时候调用一下函数对整个表单进行一下预验证。

<el-button  type="primary"
			@click="addUser">确 定</el-button>
// 点击按钮，添加新用户(预验证)
    addUser () {
      this.$refs.addFormRef.validate(valid => {
        console.log(valid)
      })
    }

未填写任何信息，点击确定，校验失败：

输入完整信息，点击确定，打印true

// 点击按钮，添加新用户(预验证)
    addUser () {
      this.$refs.addFormRef.validate(valid => {
        // 如果验证失败直接return
        if (!valid) return
        // 验证通过，可以发起添加用户的网络请求
      })
    }

发起请求添加一个新用户

发什么请求呢->查阅文档：

1.3.2. 添加用户

  • 请求路径：users

  • 请求方法：post

  • 请求参数

参数名参数说明备注
username用户名称不能为空
password用户密码不能为空
email邮箱可以为空
mobile手机号可以为空

  • 响应数据

    "meta": { "msg": "用户创建成功", "status": 201 }

请求参数是添加用户的表单数据存在data（）return{中的addForm函数中，所以直接传参addForm即可。

post返回promise函数，使用async和await

// 点击按钮，添加新用户(预验证)
    addUser () {
      this.$refs.addFormRef.validate(async valid => {
        // 如果验证失败直接return
        if (!valid) 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()
      })
    }

实现用户信息修改操作

dialog对话框

点击表格操作栏蓝色修改按钮，会弹出修改用户信息的对话框

  <!-- 修改按钮 -->
<el-button  type="danger"
            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
}
}
// 展示编辑用户的对话框
    showEditDialog () {
      this.editDialogVisible = true
    }

点击按钮显示对话框：

根据ID查询用户信息

弹出对话框中肯定要拿到以前旧数据，才能对数据进行修改。所以我们现在根据ID查询一下用户信息。

<template slot-scope="scope">
<!-- 修改按钮 -->
	<el-button  type="danger"
				icon="el-icon-edit"
				size="mini"
				@click="showEditDialog(scope.row.id)"></el-						button>//传参，把这一行的id传过来
// 展示编辑用户的对话框
    async showEditDialog (id) {
      console.log(id)//点击按钮，打印这一行数据的id
      this.editDialogVisible = true
    }

测试一下，打印id成功

查阅文档：

1.3.4根据 ID 查询用户信息

  • 请求路径：userss/:id

  • 请求方法：get

  • 请求参数

参数名参数说明备注
id角色 ID不能为空携带在url中

  • 响应参数

参数名参数说明备注
id用户 ID
role_id角色 ID
mobile手机号
email邮箱

  • 响应数据

{
    "data": {
        "id": 503,
        "username": "admin3",
        "role_id": 0,
        "mobile": "00000",
        "email": "new@new.com"
    },
    "meta": {
        "msg": "查询成功",
        "status": 200
    }
}

编辑按钮点击事件：

 // 展示编辑用户的对话框
async showEditDialog (id) {
      // console.log(id)
      this.editDialogVisible = true
      const { data: res } = await 			this.$http.get('roles/:id', id)
      if (res.meta.status !== 200) {
        this.$message.error('查询用户信息失败！')
      }
      // 获取成功就把数据保存到editForm中
      this.editForm = res.data
      //这里传的是整个数组，所以data里面editForm数组里面不用定		义具体数据
    }
data（）{return{
// 查询到的用户信息数据
      editForm: {}

绘制修改用户的表单

<!-- 修改用户对话框 -->
<el-dialog  title="修改用户"
            :visible.sync="editDialogVisible"
            width="50%">
        <!-- 内容主体区域 -->
        <el-form :model="editForm"
                 :rules="editFormRules"
                 ref="editFormRef"
                 label-width="70px">
          <el-form-item label="用户名">
            <el-input v-model="editForm.username" 					disabled>//用户名disable设为不能修改
            </el-input>
          </el-form-item>
          <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>
        <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（）{
// 验证邮箱的规则
const checkEmail = (rule, value, cb) => {
      // 验证邮箱的正则表达式
      const regEmail = /^([a-zA-Z0-9_-])+@([a-zA-Z0-9_-])+(.[a-zA-Z0-9_-])+/
      if (regEmail.test(value)) {
        // 合法的邮箱
        return cb()
      }
      cb(new Error('请输入合法的邮箱'))
    }
    // 验证手机号的规则
    const checkMobile = (rule, value, cb) => {
      const regMobile = /^(0|86|17951)?(13[0-9]|15[0123456789]|17[678]|18[0-9]|14[57])[0-9]{8}$/
      if (regMobile.test(value)) {
        return cb()
      }
      cb(new Error('请输入合法的手机号'))
    }
return{
// 查询到的用户信息对象
      editForm: {
      },
      // 修改表单的验证规则对象
      editFormRules:{
        email: [{ required: true, message: '请输入邮箱', trigger: 'blur' }, { validator: checkEmail, trigger: 'blur' }],
        mobile: [{ required: true, message: '请输入手机', trigger: 'blur' }, { validator: checkMobile, trigger: 'blur' }]
      }

实现修改表单的关闭之后的重置操作

关闭对话框，重置表单（之前的验证规则提示信息被重置）。需要监听对话框关闭之后的close事件

<!-- 修改用户对话框 -->
      <el-dialog title="修改用户"
                 :visible.sync="editDialogVisible"
                 width="50%"
                 @close="editDialogClosed">
// 监听修改用户对话框的关闭事件
    editDialogClosed () {
      this.$refs.editFormRef.resetFields()
    }

提交修改之前的表单预验证操作

点击确定按钮之后对表单信息进行预验证，只有验证通过才能提交表单信息。

<el-button type="primary"
           @click="editUserInfo">确 定</el-button>
// 修改用户信息并提交
    editUserInfo () {
      this.$refs.editFormRef.validate(valid => {
        console.log(valid)
        if (!valid) return
        // 发起修改用户信息的数据请求
      })
    }//验证通过valid为true，验证不通过valid为false

提交修改用户信息

查阅文档:

1.3.5. 编辑用户提交

  • 请求路径：users/:id

  • 请求方法：put

  • 请求参数

参数名参数说明备注
id用户 id不能为空 参数是url参数:id
email邮箱可以为空
mobile手机号可以为空
// 修改用户信息并提交
    editUserInfo () {
    //预验证
      this.$refs.editFormRef.validate(async valid => {
        console.log(valid)
        if (!valid) return
        // 发起修改用户信息的数据请求
        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('更新用户信息失败！'))
        }
        // 关闭对话框
        this.editDialogVisible = false
        // 刷新数据列表
        this.getUserList()
        // 提示修改成功
        this.$message.success('更新用户信息成功!')
      })
    }

实现删除用户的操作

点击删除按钮，弹出是否确认删除的弹框，点击确定删除用户信息，点击取消不删除用户信息。

使用elementUI弹框组件MessageBox

先给删除按钮添加一个点击事件并获取当前行的id，

<!-- 删除按钮 -->
<el-button  type="primary"
            icon="el-icon-delete"
            size="mini"              							@click="removeUserById(scope.row.id)"></el-				button>
// 根据id删除对应的用户信息
    async removeUserById (id) {
      // 弹框询问用户是否删除数据
      const confirmResult = await this.$confirm('此操作将永久删除该用户, 是否继续?', '提示', {
        confirmButtonText: '确定',
        cancelButtonText: '取消',
        type: 'warning'
      })
      // 如果用户确认删除，则返回为字符串 confirm
      console.log(confirmResult)
    }

$confirm函数返回的是promise，所以加了一个await和async简化promise，并且使用confirmResult接收，然后点击弹框的确定按钮，返回字符串 confirm，点击取消按钮，报错（因为点击取消会触发$confirm里面的一个错误），所以我们这里使用catch捕获这个错误消息（.catch(err=>{return err)可以简写成(err => err)）并且把错误消息return给confirmResult接收。此时再点击弹窗中的取消按钮就不会报错了，而是打印了字符串cancel。然后，我们就可以根据confirmResult的值是confirm还是cancel判断用户点击了确认还是取消。

 // 根据id删除对应的用户信息
async removeUserById (id) {
      // 弹框询问用户是否删除数据
      const confirmResult = await this.$confirm('此操作将永久删除该用户, 是否继续?', '提示', {
        confirmButtonText: '确定',
        cancelButtonText: '取消',
        type: 'warning'
      }).catch(err => err)
      // 如果用户确认删除，则返回为字符串 confirm
      // 如果用户取消删除，则返回为字符串 cancel
      // console.log(confirmResult)
      if (confirmResult !== 'confirm') {
        return this.$message.info('已取消删除')
      }
      console.log('确认了删除')
    }

完成删除用户操作

查阅文档：

1.3.6. 删除单个用户

  • 请求路径：users/:id

  • 请求方法：delete

  • 请求参数

参数名参数说明备注
id用户 id不能为空参数是url参数:id

  • 响应参数

  • 响应数据

{
    "data": null,
    "meta": {
        "msg": "删除成功",
        "status": 200
    }
}
// 根据id删除对应的用户信息
    async removeUserById (id) {
      // 弹框询问用户是否删除数据
      const confirmResult = await this.$confirm('此操作将永久删除该用户, 是否继续?', '提示', {
        confirmButtonText: '确定',
        cancelButtonText: '取消',
        type: 'warning'
      }).catch(err => err)
      // 如果用户确认删除，则返回为字符串 confirm
      // 如果用户取消删除，则返回为字符串 cancel
      // console.log(confirmResult)
      if (confirmResult !== 'confirm') {
        return this.$message.info('已取消删除')
      }
      const { data: res } = await 				this.$http.delete('users/' + id)
      if (res.meta.status !== 200) {
        return this.$message.error('删除用户失败！')
      }
      this.$message.success('删除用户成功！')
      this.getUserList()
      console.log('确认了删除')
    }

提交用户列表功能代码

新建一个user分支，将代码提交到user，然后把user分支提交到码云，然后把user里面的内容更新到主分支master，最后git push 把所有代码提交到码云。

git branch//查看当前分支
git check -b user//新建user分支并且切换到user分支
git status//查看一下工作区的状态,有改过的文件就是红色的
git add .//把改过的文件添加到缓存区，红色文件变色绿色
git commit -m "完成用户列表功能的开发" //提交代码
git status// working tree clean
git push -u origin user//把user分支提交到码云
git checkout master//切换到主分支
git merge user//把user分支的文件更新到master
git push//提交
胆大王-
关注
  • 0
    点赞
  • 踩
  • 1
    收藏
    觉得还不错? 一键收藏
  • 1
    评论
专栏目录
Vue实战项目day03--电商后台管理系统(Element-ui)
weixin_46379498的博客
06-24 522
Vue实战项目day03--电商后台管理系统今日目标修改用户信息删除用户推送代码权限列表角色列表分配角色将代码推送到码云 今日目标 1.修改用户,删除用户 2.推送代码到码云 3.权限列表 4.角色列表 5.分配角色 修改用户信息 A.为用户列表中的修改按钮绑定点击事件 B.在页面中添加修改用户对话框，并修改对话框的属性 C.根据id查询需要修改的用户数据 //展示编辑用户的对话框 async showEditDialog(id) { //发送请求根据id获取用户信息 const { d
Vue实战项目day07--电商后台管理系统(Element-ui)
weixin_46379498的博客
07-03 592
Vue实战项目day07--电商后台管理系统项目优化添加进度条根据报错修改代码执行build生成打包报告修改webpack的默认配置加载外部CDN定制首页内容路由懒加载项目上线开启gzip压缩配置https服务 今日目标 1.完成项目优化 2.完成项目上线 项目优化 实现步骤： A.生成打包报告，根据报告优化项目 B.第三方库启用CDN C.Element-UI组件按需加载 D.路由懒加载 E.首页内容定制 添加进度条 给项目添加进度条效果，先打开项目控制台，打开依赖，安装nprogress 打开main.
Vue +Element UI 前端写假分页，不请求后台数据接口
weixin_43837305的博客
01-27 2872
文章目录前言一、使用步骤1.element分页代码2.js代码3.参考链接总结 前言 提示：前端做假分页，只限于适用的场景和数据或列表展示，不适用操作和编辑，望周知。 提示：以下是本篇文章正文内容，下面案例可供参考 一、使用步骤 1.element分页代码 代码如下（示例）： <div class="pagination-container"> <el-pagination @size-change="handleSizeChange" @cur
Vue项目 + element - 前端分页加搜索（不依赖接口实现分页，接口一次性返回数据）
weixin_55042716的博客
11-12 2923
需求： 后端一次性返回数据，前端实现分页效果，并且可以搜索，，，最左边懒和最右边栏固定，当窗口缩小时，产生滚动条
Vue+Node(express)+ ElementUI实现各种功能(一)
weixin_45389051的博客
03-29 1710
一.首先使用ElementUI实现后台的增删改查 用vue-cli先搭建一个项目admin，再创建一个文件夹，命名为serve,里面放自己写的接口数据和连接mongodb数据库等 在serve文件夹中操作 第一步 npm init -y 先初始化一个package.json 再安装express,mongoose,cors npm i express npm i mongoose npm i...
使用 Vue 3.0 和 Element UI 实现功能增加、按钮操作和查询框功能详解
liudianban33的博客
06-21 864
通过使用 Vue 3.0 和 Element UI，我们可以轻松实现功能增加、按钮操作以及通过查询框输入信息进行信息查询的操作。本篇博客介绍了导入 Element UI 组件、创建按钮和增加功能、以及利用查询框实现信息查询的详细步骤和示例代码。希望这些内容能够帮助你在 Vue 3.0 和 Element UI 的开发过程中取得更好的效果。Vue 3 官方文档Element Plus 官方文档Element Plus GitHub 仓库。
基于vue+Element Table的增改查（纯前端解决方案，附源码）
Whit3ZzT的博客
11-30 814
实现表格数据的查询，修改，增加功能
vue-cil3+elementUi 后台电商管理系统讲解
06-04
此文件为markdown文件，由typora编写；记录做管理系统的笔记。电商系统提供了PC端、小程序、移动web、移动APP等多种用户访问方式，内部人员采用PC后台管理系统进行数据管理。
黑马程序员课程-Vue项目实战-Element-UI——电商后台管理系统主页制作
weixin_48884617的博客
03-24 1万+
黑马程序员课程-Vue项目实战-Element-UI——电商后台管理系统主页制作
黑马程序员课程-Vue项目实战-Element-UI——电商后台管理系统-用户列表制作
weixin_48884617的博客
03-27 6206
黑马程序员课程-Vue项目实战-Element-UI——电商后台管理系统--用户列表制作
Vue + ElementUI 实现后台管理系统模板 -- 前端篇（八，2024历年华为跳动前端面试真题解析
最新发布
m0_61943758的博客
03-19 762
前面封装了 axios，并在 main.js 中全局挂载，所以在组件中可以使用 $http 进行访问。但是每次请求的相关处理都会写在各个组件中，代码看上去不太美观，且不易维护。所以可以将请求根据功能、模块进行划分，并写在固定位置，在组件中引入这些模块即可。前端资料汇总开源分享：【大厂前端面试题解析+核心总结学习笔记+真实项目实战+最新讲解视频】框架原理真的深入某一部分具体的代码和实现方式时，要多注意到细节，不要只能写出一个框架。算法方面很薄弱的，最好多刷一刷，不然影响你的工资和成功率😯。
黑马程序员课程Vue实战项目_Element-ui——电商后台管理系统-数据报表
weixin_48884617的博客
04-19 3763
黑马程序员课程Vue实战项目_Element-ui——电商后台管理系统-数据报表
vue+element-ui实现数据的增删改查及分页
qsj0606的博客
06-17 1554
1、首先获取所有的学生信息并显示在表格上，进行分页 后台要求传的参数： 后台接口封装： element-ui创建数据。必须有HTML表格 <el-table :data="studentData" border style="width: 100%"> <el-table-column prop="id" label="学号"></el-table-column> <el-table-column prop="name" label="姓名">&
VUE&Element&案例实战
树叶子的博客
03-15 1094
今日目标：接下来我们学习一款前端的框架，就是 VUE。Vue 是一套前端框架，免除原生JavaScript中的DOM操作，简化书写。我们之前也学习过后端的框架 ， 是用来简化 代码编写的；而 是前端的框架，是用来简化 代码编写的。前一天我们做了一个综合性的案例，里面进行了大量的DOM操作，如下学习了 后，这部分代码我们就不需要再写了。那么 是如何简化 DOM 书写呢？基于MVVM(Model-View-ViewModel)思想，实现数据的双向绑定，将编程的关注点放在数据上。之前我们是将关注点放在
vue+element ui中dialog 使用知识点记录
rain_pen的博客
05-10 391
1、给dialog增加class。搬运工为下次搬运做记录！2、动态改变dialog宽度。3、改变弹框进入时动画。
vue2+elementUi 弹窗二次封装
fengxiaopeng74的博客
06-20 813
【代码】vue2+elementUi 弹窗二次封装。
前端（实际开发总结）2
weixin_46013619的博客
05-09 1455
1.ElementUI中表单验证下面的提示文字，这里好像少一步也不行，就按这个走吧，第一次写这个提示， 这里逻辑应该是valid代表着是不是输入框为空值，空值返回false。 ...
elementUi表格获取当前行的id,表格路由跳转传id值，进行删除，编辑
CongJiYong的博客
04-19 5687
表格绑定数据 <el-table :data="tableData"> <el-table-column label="通道" prop="id" sortable width="75"> </el-table-column> </el-table> 定义的数据 tableData: [ { id: 1, flag: true, date: '2016
Vue3+Element-Plus 实现在表单中自定义操作按钮 三二
热门推荐
build2024
12-21 1万+
1. 实现效果 分析需求 1. 首先操作列并不对应任何的数据结构，所以想要实现在列表中操作列增加按钮来实现编辑或者删除，必须要拿到对应的Id,才能进行数据操作。 2. 所以要拿到对应的Id，必须通过使用作用域插槽来实现操作列的渲染 2. 实现步骤 2.1 定义作用域插槽步骤 定义template 结构，在template 结构中定义v-slot="scope" 并定义一个scope接收 通过 scope.row 获取到当行前的数据 例如： 如下图，通过作用域的方式取到当...
评论 1
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值