Vue电商项目实战之角色列表添加,编辑,删除功能

港控/mmm° 2024-04-29 19:09 6阅读 0赞

这是黑马vue电商项目后台,自己需要完成的功能,这里仅供参考当然还需要自己去理解.

![24ed146654bf4bbd9e1fbaf43ecf6cc2.png][]

## 一.添加功能 ##

在roles.vue中

#### 1.添加角色的对话框 ####

![871f35f1087c4d12a81d4c8dbec25b91.png][]

代码如下:

<el-dialog :visible.sync="addRoleDialogVisible" title="添加角色" width="35%" @close="addDialogClosed">
          
          <el-form ref="addFormRef" :model="addForm" :rules="addFormRules" label-width="70px">
            
            <el-form-item label="角色名称" label-width="85px" prop="roleName">
              <el-input v-model="addForm.roleName"></el-input>
            </el-form-item>
            <el-form-item label="角色描述" label-width="85px" prop="roleDesc">
              <el-input v-model="addForm.roleDesc"></el-input>
            </el-form-item>
          </el-form>
          
          <span slot="footer" class="dialog-footer">
            <el-button @click="addRoleDialogVisible = false">取 消</el-button>
            <el-button type="primary" @click="addRole">确 定</el-button>
          </span>
        </el-dialog>

2. 控制添加角色的对话框显示与隐藏

// 控制添加角色对话框的显示与隐藏
          addRoleDialogVisible: false,

3. 双向绑定:module添加角色的值

// 添加角色
          addForm: {
            roleName: '',
            roleDesc: ''
          },

4. 添加角色的验证规则

addFormRules: {
            roleName: [
              {
                required: true,
                message: '请输入角色名称',
                trigger: 'blur'
              },
              {
                min: 2,
                max: 6,
                message: '角色名称长度在 2 到 6 个字符',
                trigger: 'blur'
              }
            ],
            roleDesc: [
              {
                required: true,
                message: '请输入角色描述',
                trigger: 'blur'
              }
            ]
          },

5. 添加角色的方法methods下

![1f26c7e08670478a94e5545366af2fa9.png][]

代码如下

/**
         * 添加角色
         */
        async addRole () {
          this.$refs.addFormRef.validate(async valid => {
            if (!valid) {
              return
            }
            // 可以发起添加角色的网络请求
            const { data: res } = await this.$http.post('roles', this.addForm)
            console.log(res)
            if (res.meta.status !== 201) {
              return this.$message.error('添加角色失败!')
            } else {
              this.addRoleDialogVisible = false
              this.getRolesList()
              this.$message.success('添加角色成功!')
            }
          })
        },

6. 添加角色对话框关闭事件

/**
         * 监听 添加角色对话框的关闭事件
         */
        addDialogClosed () {
          this.$refs.addFormRef.resetFields()
        },

到这里完成了添加角色的功能 .

![884c812f0dda4b63ab92c55df1453e03.png][]

##  ##

## 二. 编辑角色功能 ##

![5c80f17997224d858dc4b6c1c9bfb27a.png][]

#### 1.根据上面的步骤差不多 ####

首页写一个编辑角色的对话框

![331de354f13a4de4959e0b5a20dfd31b.png][]

代码如下:

<el-dialog :visible.sync="editRoleDialogVisible" title="编辑角色" width="35%" @close="editDialogClosed">
          
          <el-form ref="editFormRef" :model="editForm" :rules="addFormRules" label-width="70px">
            
            <el-form-item label="角色名称" label-width="85px" prop="roleName">
              <el-input v-model="editForm.roleName"></el-input>
            </el-form-item>
            <el-form-item label="角色描述" label-width="85px" prop="roleDesc">
              <el-input v-model="editForm.roleDesc"></el-input>
            </el-form-item>
          </el-form>
          
          <span slot="footer" class="dialog-footer">
            <el-button @click="editRoleDialogVisible = false">取 消</el-button>
            <el-button type="primary" @click="editRole">确 定</el-button>
          </span>
        </el-dialog>

2. 控制编辑角色的对话框的显示与隐藏

//控制编辑角色的对话框的显示与隐藏
          editRoleDialogVisible: false

3. 获取值编辑角色的值

// 获取值编辑角色的值     
     editForm: {},

4. 编辑角色的验证规则,这里我说明一下,我使用的是添加角色的验证规则因为是一样的,所以就没有写另外的

![e0909857f2ab44db8fdef78a0ba761a0.png][]

所以和上面添加角色的代码是一样的,前面写了, 这里只需要写相同的名称就可以了

5. 编辑角色的methods下方法

展示编辑角色的对话框

/**
         * 展示编辑角色的对话框
         * @param roleId
         */
        async showEditDialog (roleId) {
          const { data: res } = await this.$http.get(`roles/${roleId}`)
          if (res.meta.status !== 200) {
            return this.$message.error('查询角色信息失败')
          } else {
            this.editForm = res.data
            this.editRoleDialogVisible = true
          }
        },

6. 编辑角色的方法

![3260772878384ba18b327e40fd7f229c.png][]

代码如下

/**
         * 编辑角色
         */
        async editRole () {
          this.$refs.editFormRef.validate(async valid => {
            if (!valid) {
              return
            }
            const { data: res } = await this.$http.put(`roles/${this.editForm.roleId}`,
              {
                roleName: this.editForm.roleName,
                roleDesc: this.editForm.roleDesc
              }
            )
            if (res.meta.status !== 200) {
              this.$message.error('更新角色信息失败!')
            } else {
              this.editRoleDialogVisible = false
              this.getRolesList()
              this.$message.success('更新角色成功!')
            }
          })
        },

7. 监听修改角色对话框的关闭事件

/**
         * 监听 修改角色对话框的关闭事件
         */
        editDialogClosed () {
          this.$refs.editFormRef.resetFields()
        }

## 三. 删除功能 ##

根据ID删除角色

![00bc45a5af7e42dfbef054c02dbc5842.png][]

/**
         * 根据角色id删除角色
         * @param roleId
         */
        async removeRoleById (roleId) {
          // 弹框询问用户是否直接删除数据
          const confirmResult = await this.$confirm('此操作将永久删除该角色, 是否继续?', '提示', {
            confirmButtonText: '确定',
            cancelButtonText: '取消',
            type: 'warning'
          }).catch(() => {
            this.$message({
              type: 'info',
              message: '已取消删除'
            })
          })
    
          if (confirmResult === 'confirm') {
            console.log('确认了删除')
            const { data: res } = await this.$http.delete(`roles/${roleId}`)
            if (res.meta.status !== 200) {
              return this.$message.error('删除角色失败!')
            } else {
              this.getRolesList()
              return this.$message.success('删除角色成功!')
            }
          }
        },

[24ed146654bf4bbd9e1fbaf43ecf6cc2.png]: https://image.dandelioncloud.cn/pgy_files/images/2024/04/29/3ae97f5abfe44ec38c9b72db322a1919.png
[871f35f1087c4d12a81d4c8dbec25b91.png]: https://image.dandelioncloud.cn/pgy_files/images/2024/04/29/0e36329ae1e84169a151344715e9a57c.png
[1f26c7e08670478a94e5545366af2fa9.png]: https://image.dandelioncloud.cn/pgy_files/images/2024/04/29/d0f7f1cc7d524e8bbadc02640ebcdb9c.png
[884c812f0dda4b63ab92c55df1453e03.png]: https://image.dandelioncloud.cn/pgy_files/images/2024/04/29/177b21ce4aab482abe35a4e2551c7f02.png
[5c80f17997224d858dc4b6c1c9bfb27a.png]: https://image.dandelioncloud.cn/pgy_files/images/2024/04/29/bae1d8eba76244fa957a18e4c71eb0f0.png
[331de354f13a4de4959e0b5a20dfd31b.png]: https://image.dandelioncloud.cn/pgy_files/images/2024/04/29/465142d63eeb4929848ee39e9dfe6cd3.png
[e0909857f2ab44db8fdef78a0ba761a0.png]: https://image.dandelioncloud.cn/pgy_files/images/2024/04/29/b8c017d98d3d41cd92220cb7b5126542.png
[3260772878384ba18b327e40fd7f229c.png]: https://image.dandelioncloud.cn/pgy_files/images/2024/04/29/da15852e45db472fb7d0f13c448735e0.png
[00bc45a5af7e42dfbef054c02dbc5842.png]: https://image.dandelioncloud.cn/pgy_files/images/2024/04/29/6159ec7f801e423193e12b5e4abe109e.png