Vue + Element UI 前端篇（十二）：用户管理模块

news2024/10/6 14:25:26

Vue + Element UI 实现权限管理系统 前端篇（十二）：用户管理模块 

用户管理模块

添加接口

在 http/moduls/user.js 中添加用户管理相关接口。

复制代码

import axios from '../axios'

/* 
 * 用户管理模块
 */

// 保存
export const save = (params) => {
    return axios({
        url: '/user/save',
        method: 'post',
        params
    })
}// 删除
export const del = (params) => {
    return axios({
        url: '/user/delete',
        method: 'post',
        params
    })
}
// 分页查询
export const findPage = (params) => {
    return axios({
        url: '/user/findPage',
        method: 'post',
        params
    })
}

复制代码

模拟数据

在 mock/moduls/user.js 中添加用户管理相关mock接口。

复制代码

/* 
 * 用户管理模块
 */

// 保存
export function save() {
  return {
    url: 'http://localhost:8080/user/save',
    type: 'post',
    data: {
      "code": 200,
      "msg": null,
      "data": 1
    }
  }
}// 删除
export function del() {
  return {
    url: 'http://localhost:8080/user/delete',
    type: 'post',
    data: {
      "code": 200,
      "msg": null,
      "data": 1
    }
  }
}
// 分页查询
export function findPage() {
  return {
    url: 'http://localhost:8080/user/findPage',
    type: 'post',
    data: findPageData
  }
}

复制代码

提取根路径

为了可以统一控制mock的开启与关闭，把mock的根路径提取出来。

 而具体的Mock接口，把根路径移除，因为在生成Mock的时候会自动把根路径加上去。

用户界面

用户管理界面主要是用户信息的表格展示，并提供基础的增删改查功能。

User.vue

复制代码

<template>
  <div class="container" style="width:100%;">
    <!--工具栏-->
    <div class="toolbar" style="float:left; padding:18px;">
        <el-form :inline="true" :model="filters" size="small">
            <el-form-item>
                <el-input v-model="filters.name" placeholder="用户名"></el-input>
            </el-form-item>
            <el-form-item>
                <el-button type="primary" v-on:click="findPage(null)">查询</el-button>
            </el-form-item>
            <el-form-item>
                <kt-button label="新增" perms="sys:user:add" type="primary" @click="handleAdd" />
            </el-form-item>
        </el-form>
    </div>
    <!--表格内容栏-->
    <kt-table permsEdit="sys:user:edit" permsDelete="sys:user:delete"
        :data="pageResult" :columns="columns" 
        @findPage="findPage" @handleEdit="handleEdit" @handleDelete="handleDelete">
    </kt-table>
    <!--新增编辑界面-->
    <el-dialog :title="operation?'新增':'编辑'" width="40%" :visible.sync="editDialogVisible" :close-on-click-modal="false">
        <el-form :model="dataForm" label-width="80px" :rules="dataFormRules" ref="dataForm">
            <el-form-item label="ID" prop="id">
                <el-input v-model="dataForm.id" :disabled="true" auto-complete="off"></el-input>
            </el-form-item>
            <el-form-item label="用户名" prop="name">
                <el-input v-model="dataForm.name" auto-complete="off"></el-input>
            </el-form-item>
            <el-form-item label="密码" prop="password">
                <el-input v-model="dataForm.password" type="password" auto-complete="off"></el-input>
            </el-form-item>
            <el-form-item label="机构" prop="deptName">
                <popup-tree-input 
                    :data="deptData" 
                    :props="deptTreeProps" 
                    :prop="dataForm.deptName" 
                    :nodeKey="''+dataForm.deptId" 
                    :currentChangeHandle="deptTreeCurrentChangeHandle">
                </popup-tree-input>
            </el-form-item>
            <el-form-item label="邮箱" prop="email">
                <el-input v-model="dataForm.email" auto-complete="off"></el-input>
            </el-form-item>
            <el-form-item label="手机" prop="mobile">
                <el-input v-model="dataForm.mobile" auto-complete="off"></el-input>
            </el-form-item>
        </el-form>
        <div slot="footer" class="dialog-footer">
            <el-button @click.native="editDialogVisible = false">取消</el-button>
            <el-button type="primary" @click.native="editSubmit" :loading="editLoading">提交</el-button>
        </div>
    </el-dialog>
  </div>
</template>

<script>
import PopupTreeInput from "@/components/PopupTreeInput"
import KtTable from "@/views/Core/KtTable"
import KtButton from "@/views/Core/KtButton"
export default {
    components:{
            PopupTreeInput,
            KtTable,
            KtButton
    },
    data() {
        return {
            filters: {
                name: ''
            },
            columns: [
                {prop:"id", label:"ID", minWidth:40, sortable:"false"},
                {prop:"name", label:"用户名", minWidth:120, sortable:"true"},
                {prop:"deptName", label:"机构", minWidth:120, sortable:"true"},
                {prop:"email", label:"邮箱", minWidth:120, sortable:"true"},
                {prop:"mobile", label:"手机", minWidth:120, sortable:"true"}
            ],
            pageRequest: { pageNum: 1, pageSize: 8 },
            pageResult: {},

            operation: false, // true:新增, false:编辑
            editDialogVisible: false, // 新增编辑界面是否显示
            editLoading: false,
            dataFormRules: {
                name: [
                    { required: true, message: '请输入用户名', trigger: 'blur' }
                ]
            },
            // 新增编辑界面数据
            dataForm: {
                id: 0,
                name: '',
                password: '123456',
                deptId: 1,
                deptName: '',
                email: 'test@qq.com',
                mobile: '13889700023',
                status: 1
            },
            deptData: [],
            deptTreeProps: {
                label: 'name',
                children: 'children'
            }
        }
    },
    methods: {
        // 获取分页数据
        findPage: function (data) {
            if(data !== null) {
                this.pageRequest = data.pageRequest
            }
            this.pageRequest.columnFilters = {name: {name:'name', value:this.filters.name}}
            this.$api.user.findPage(this.pageRequest).then((res) => {
                this.pageResult = res.data
            })
        },
        // 批量删除
        handleDelete: function (data) {
            this.$api.user.batchDelete(data.params).then(data.callback)
        },
        // 显示新增界面
        handleAdd: function () {
            this.editDialogVisible = true
            this.operation = true
            this.dataForm = {
                id: 0,
                name: '',
                password: '',
                deptId: 1,
                deptName: '',
                email: 'test@qq.com',
                mobile: '13889700023',
                status: 1
            }
        },
        // 显示编辑界面
        handleEdit: function (params) {
            this.editDialogVisible = true
            this.operation = false
            this.dataForm = Object.assign({}, params.row)
        },
        // 编辑
        editSubmit: function () {
            this.$refs.dataForm.validate((valid) => {
                if (valid) {
                    this.$confirm('确认提交吗？', '提示', {}).then(() => {
                        this.editLoading = true
                        let params = Object.assign({}, this.dataForm)
                        this.$api.user.save(params).then((res) => {
                            this.editLoading = false
                            this.$message({ message: '提交成功', type: 'success' })
                            this.$refs['dataForm'].resetFields()
                            this.editDialogVisible = false
                            this.findPage(null)
                        })
                    })
                }
            })
        },
        // 获取部门列表
        findDeptTree: function () {
            this.$api.dept.findDeptTree().then((res) => {
                this.deptData = res.data
            })
        },
        // 菜单树选中
          deptTreeCurrentChangeHandle (data, node) {
            this.dataForm.deptId = data.id
            this.dataForm.deptName = data.name
          }
    },
    mounted() {
        this.findDeptTree()
    }
}
</script>

<style scoped>

</style>

复制代码

表格组件封装

为了可以实现表格的代码复用，封装表格组件。

src/views/Core/KtTable.vue

复制代码

<template>
  <div>
    <!--表格栏-->
    <el-table :data="data.content" stripe highlight-current-row @selection-change="selectionChange" 
      :v-loading="loading" :max-height="maxHeight" :size="size" :align="align" style="width:100%;" >
      <el-table-column type="selection" width="40"></el-table-column>
      <el-table-column v-for="column in columns" 
        :prop="column.prop" :label="column.label" :width="column.width" :min-width="column.minWidth" 
        :sortable="column.sortable" :fixed="column.fixed" :key="column.prop" :type="column.type">
      </el-table-column>
      <el-table-column label="操作" width="150" fixed="right">
        <template slot-scope="scope">
          <kt-button label="编辑" :perms="permsEdit" :size="size" @click="handleEdit(scope.$index, scope.row)" />
          <kt-button label="删除" :perms="permsDelete" :size="size" type="danger" @click="handleDelete(scope.$index, scope.row)" />
        </template>
      </el-table-column>
    </el-table>
    <!--分页栏-->
    <div class="toolbar" style="padding:10px;">
      <kt-button label="批量删除" :perms="permsDelete" :size="size" type="danger" @click="handleBatchDelete()" 
        :disabled="this.selections.length===0" style="float:left;"/>
      <el-pagination layout="total, prev, pager, next, jumper" @current-change="refreshPageRequest" 
        :current-page="pageRequest.pageNum" :page-size="pageRequest.pageSize" :total="data.totalSize" style="float:right;">
      </el-pagination>
    </div>
  </div>
</template>

<script>
import KtButton from "@/views/Core/KtButton"
export default {
  name: 'KtTable',
  components:{
            KtButton
    },
  props: {
    columns: Array, // 表格列配置
    data: Object, // 表格分页数据
    permsEdit: String,  // 编辑权限标识
    permsDelete: String,  // 删除权限标识
    size: { // 尺寸样式
      type: String,
      default: 'mini'
    },
    align: {  // 文本对齐方式
      type: String,
      default: 'left'
    },
    maxHeight: {  // 表格最大高度
      type: Number,
      default: 420
    }
  },
  data() {
    return {
      // 分页信息
            pageRequest: {
                pageNum: 1,
        pageSize: 8
      },
      loading: false,  // 加载标识
      selections: []  // 列表选中列
    }
  },
  methods: {
    // 分页查询
    findPage: function () {
      this.$emit('findPage', {pageRequest:this.pageRequest})
    },
    // 选择切换
    selectionChange: function (selections) {
            this.selections = selections
    },
    // 换页刷新
        refreshPageRequest: function (pageNum) {
      this.pageRequest.pageNum = pageNum
      this.findPage()
    },
    // 编辑
        handleEdit: function (index, row) {
      this.$emit('handleEdit', {index:index, row:row})
        },
    // 删除
        handleDelete: function (index, row) {
            this.delete(row.id)
        },
        // 批量删除
        handleBatchDelete: function () {
            let ids = this.selections.map(item => item.id).toString()
            this.delete(ids)
        },
        // 删除操作
        delete: function (ids) {
            this.$confirm('确认删除选中记录吗？', '提示', {
                type: 'warning'
            }).then(() => {
                let params = []
                let idArray = (ids+'').split(',')
                for(var i=0; i<idArray.length; i++) {
                    params.push({'id':idArray[i]})
        }
        let callback = res => {
          this.$message({message: '删除成功', type: 'success'})
          this.findPage()
        }
        this.$emit('handleDelete', {params:params, callback:callback})
            }).catch(() => {
            })
        }
  },
  mounted() {
    this.refreshPageRequest(1)
  }
}
</script>

<style scoped>

</style>

复制代码

权限按钮封装

为了可以实现对表格数据进行新增、编辑、删除操作按钮的权限控制，封装权限按钮组件。

src/views/Core/KtButton.vue

复制代码

<template>
  <el-button :size="size" :type="type" 
    :loading="loading" :disabled="!hasPerms(perms)" @click="handleClick">
    {{label}}
  </el-button>
</template>

<script>
import { hasPermission } from '@/permission/index.js'
export default {
  name: 'KtButton',
  props: {
    label: {
      type: String,
      default: 'Button'
    },
    size: {
      type: String,
      default: 'mini'
    },
    type: {
      type: String,
      default: null
    },
    loading: {
      type: Boolean,
      default: false
    },
    disabled: {
      type: Boolean,
      default: false
    },
    perms: {
      type: String,
      default: null
    }
  },
  data() {
    return {
    }
  },
  methods: {
    handleClick: function () {
       this.$emit('click', {})
    }, 
    hasPerms: function (perms) {
       return hasPermission(perms) & !this.disabled
    }
  },
  mounted() {
  }
}
</script>

<style scoped>

</style>

复制代码

测试效果

测试效果如下，增删改功能，mock不能实际操作数据库，可以结合本教程的后端代码一起测试。

源码下载

后端：kitty: 基于Spring Boot、Spring Cloud、Vue.js 、Element UI实现，采用前后端分离架构的权限管理系统，JAVA快速开发平台。

前端：kitty-ui: Kitty 前端，基于 Vue + Element 实现的权限管理系统。

本文来自互联网用户投稿，该文观点仅代表作者本人，不代表本站立场。本站仅提供信息存储空间服务，不拥有所有权，不承担相关法律责任。如若转载，请注明出处：http://www.coloradmin.cn/o/978275.html

如若内容造成侵权/违法违规/事实不符，请联系多彩编程网进行投诉反馈，一经查实，立即删除！

相关文章

Unity中Shader的变体shader_feature

Unity中Shader的变体shader_feature

文章目录 前言一、变体的类型1、multi_compile —— 无论如何都会被编译的变体2、shader_feature —— 通过材质的使用情况来决定是否编译的变体 二、使用 shader_feature 来控制 shader 效果的变化1、首先在属性面板暴露一个开关属性&#xff0c;用于配合shader_feature来控制…
阅读更多...
解决deepspeed框架的bug：不保存调度器状态，模型训练重启时学习率从头开始

解决deepspeed框架的bug：不保存调度器状态，模型训练重启时学习率从头开始

deepspeed存在一个bug&#xff0c;即在训练时不保存调度器状态&#xff0c;因此如果训练中断后再重新开始训练&#xff0c;调度器还是会从头开始而不是接着上一个checkpoint的调度器状态来训练。这个bug在deepspeed的github中也有其他人提出&#xff1a;https://github.com/mic…
阅读更多...
清理Maven仓库中下载失败的文件

清理Maven仓库中下载失败的文件

&#x1f337;&#x1f341; 博主猫头虎&#xff08;&#x1f405;&#x1f43e;&#xff09;带您 Go to New World✨&#x1f341; &#x1f984; 博客首页——&#x1f405;&#x1f43e;猫头虎的博客&#x1f390; &#x1f433; 《面试题大全专栏》 &#x1f995; 文章图文…
阅读更多...
【SpringBoot】统一功能处理

【SpringBoot】统一功能处理

目录 &#x1f383;1 拦截器 &#x1f380;1.1 拦截器的代码实现 &#x1f3a8;1.2 拦截器的实现原理 &#x1f9f6;2 拦截器应用——登录验证 &#x1f9ba;3 异常统一处理 &#x1f3ad;4 统一数据返回格式 &#x1f9e4;4.1 为什么需要统一数据返回格式 &#x1f9e3;4.2 统…
阅读更多...
Cisco Packet Tracer入门篇

Cisco Packet Tracer入门篇

&#x1f490; &#x1f338; &#x1f337; &#x1f340; &#x1f339; &#x1f33b; &#x1f33a; &#x1f341; &#x1f343; &#x1f342; &#x1f33f; &#x1f344;&#x1f35d; &#x1f35b; &#x1f364; &#x1f4c3;个人主页 &#xff1a;阿然成长日记 …
阅读更多...
Python中的文件I/O操作：常见问题与解决方案

Python中的文件I/O操作：常见问题与解决方案

在Python编程中&#xff0c;文件I/O操作是常见的任务。本文将介绍一些关于Python文件I/O操作的常见问题及其解决方案&#xff0c;并提供详细的代码示例。 1、问题&#xff1a;如何正确地打开和关闭文件&#xff1f; 解决方案&#xff1a;使用with语句可以确保文件在操作完成后…
阅读更多...
查漏补缺 - ES6

查漏补缺 - ES6

目录 1&#xff0c;let 和 const1&#xff0c;会产生块级作用域。2&#xff0c;如何理解 const 定义的变量不可被修改? 2&#xff0c;数组3&#xff0c;对象1&#xff0c;Object.is()2&#xff0c;属性描述符3&#xff0c;常用API4&#xff0c;得到除某个属性之外的新对象。 4…
阅读更多...
华为云云服务器评测｜使用Docker可视化Portainer部署Yolov5项目进行AI识别

华为云云服务器评测｜使用Docker可视化Portainer部署Yolov5项目进行AI识别

目录 初始化配置使用Xshell连接 项目准备 docker-compose Dockerfile .dockerignore 在服务器中启动Docker项目 初始化配置使用Xshell连接 因为我比较喜欢用xshell来操作服务器&#xff0c;如果你是使用华为在线的CloudShell或其他方式&#xff0c;可以跳过第一步的连接…
阅读更多...
【Redis专题】Redis持久化、主从与哨兵架构详解

【Redis专题】Redis持久化、主从与哨兵架构详解

目录 前言课程目录一、Redis持久化1.1 RDB快照&#xff08;Snapshot&#xff09;&#xff1a;二进制文件基本介绍开启/关闭方式触发方式bgsave的写时复制&#xff08;COW&#xff0c;Copy On Write&#xff09;机制优缺点 1.2 AOF&#xff08;append-only file&#xff09;&…
阅读更多...
Git—版本控制系统

Git—版本控制系统

git版本控制系统 1、什么是版本控制2、常见的版本控制工具3、版本控制分类3.1、本地版本控制3.2、集中版本控制 SVN3.3、分布式版本控制 Git 4、Git与SVN的主要区别5、Git环境配置6、启动Git7、常用的Linux命令8、Git配置9、设置用户名与邮箱&#xff08;用户标识&#xff0c;必…
阅读更多...
数学建模--逻辑回归算法的Python实现

数学建模--逻辑回归算法的Python实现

首先感谢CSDN上发布吴恩达的机器学习逻辑回归算法任务的各位大佬. 通过大佬的讲解和代码才勉强学会. 这篇文章也就是简单记录一下过程和代码. CSDN上写有关这类文章的大佬有很多,大家都可以多看一看学习学习. 机器学习方面主要还是过程和方法. 这篇文章只完成了线性可分方面的任…
阅读更多...
Mac Homebrew中常用的 Brew 命令

Mac Homebrew中常用的 Brew 命令

Mac 中常用的 Brew 命令集 Brew&#xff08;Homebrew&#xff09;是一个强大的包管理器&#xff0c;用于在 macOS 上安装、更新和管理各种软件包。它使得在 Mac 上安装开发工具、应用程序和库变得轻松和便捷。本博客将介绍一些在 Mac 中常用的 Brew 命令&#xff0c;以帮助您更…
阅读更多...
SpringMVC_SSM整合

SpringMVC_SSM整合

一、回顾SpringMVC访问接口流程 1.容器加载分析 容器分析 手动注册WebApplicationContext public class ServletConfig extends AbstractDispatcherServletInitializer {Overrideprotected WebApplicationContext createServletApplicationContext() {//获取SpringMVC容器An…
阅读更多...
UDP的可靠性传输

UDP的可靠性传输

UDP系列文章目录 第一章 UDP的可靠性传输-理论篇&#xff08;一&#xff09; 第二章 UDP的可靠性传输-理论篇&#xff08;二&#xff09; 文章目录 UDP系列文章目录前言1.TCP 和UDP格式对比2.UDP分片原理3.UDP 传输层应该注意问题4.MTU5.UDP 分片机制设计重点 一、ARQ协议什么…
阅读更多...
华为OD机考算法题：食堂供餐

华为OD机考算法题：食堂供餐

目录 题目部分 解析与思路 代码实现 题目部分 题目食堂供餐题目说明某公司员工食堂以盒饭方式供餐。为将员工取餐排队时间降低为0&#xff0c;食堂的供餐速度必须要足够快。现在需要根据以往员工取餐的统计信息&#xff0c;计算出一个刚好能达成排队时间为0的最低供餐速度。…
阅读更多...
PPO算法

PPO算法

PPO算法 全称Proximal Policy Optimization&#xff0c;是TRPO(Trust Region Policy Optimization)算法的继承与简化&#xff0c;大大降低了实现难度。原论文 算法大致流程 首先&#xff0c;使用已有的策略采样 N N N条轨迹&#xff0c;使用这些轨迹上的数据估计优势函数 A ^ …
阅读更多...
算法做题记录

算法做题记录

一、递推 95.费解的开关 #include<iostream> #include<cstring> using namespace std;const int N 8;char a[N][N],s[N][N]; int T; int ans20,cnt; int dir[5][2]{1,0,-1,0,0,1,0,-1,0,0};void turn(int x,int y) {for(int i0;i<5;i){int xx xdir[i][0];in…
阅读更多...
数学建模--Topsis评价方法的Python实现

数学建模--Topsis评价方法的Python实现

目录 1.算法流程简介 2.算法核心代码 3.算法效果展示 1.算法流程简介 """ TOPSIS(综合评价方法):主要是根据根据各测评对象与理想目标的接近程度进行排序. 然后在现有研究对象中进行相对优劣评价。 其基本原理就是求解计算各评价对象与最优解和最劣解的距离…
阅读更多...
文字验证码：简单有效的账号安全守卫！

文字验证码：简单有效的账号安全守卫！

前言 文字验证码不仅是一种简单易懂的验证方式&#xff0c;同时也是保护您的账号安全的重要工具。通过输入正确的文字组合&#xff0c;您可以有效地确认自己的身份&#xff0c;确保只有真正的用户才能访问您的账号。 HTML代码 <script src"https://cdn6.kgcaptcha.…
阅读更多...
rust编译出错：error: failed to run custom build command for `ring v0.16.20`

rust编译出错：error: failed to run custom build command for `ring v0.16.20`

安装 Visual Studio&#xff0c;确保选择 —.NET 桌面开发、使用 C 的桌面开发和通用 Windows 平台开发。显示已安装的工具链rustup show。然后通过运行更改和设置工具链rustup default stable-x86_64-pc-windows-msvc。 另外是想用clion进行调试rust 需要你按下面配置即可解…
阅读更多...
推荐文章
最新文章

Copyright @ 2022~2023