五、前后端分离通用权限系统（5）

已于 2024-08-24 15:36:45 修改
阅读量929 收藏 9
点赞数 22
分类专栏： # 计算机（Java项目实战）实战 阶段 文章标签： spring boot intellij-idea vscode node.js vue.js elementui es6
于 2024-08-24 15:33:53 首次发布
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/weixin_42171159/article/details/141370881
版权

🌻🌻 目录

一、前端框架

1.1、vue-element-admin

vue-element-admin是基于Vue和Element-ui 的一套后台管理系统集成方案。

1.1.1、Vue 概述

Vue (读音 /vjuː/，类似于 view) 是一套用于构建用户界面的渐进式框架。

Vue 的核心库只关注视图层，不仅易于上手，还便于与第三方库或既有项目整合。另一方面，当与现代化的工具链以及各种支持类库结合使用时，Vue 也完全能够为复杂的单页应用提供驱动。

官方网站：https://cn.vuejs.org

在这里插入图片描述

1.1.2、Element-ui 概述

element-ui 是饿了么前端出品的基于 Vue.js的 后台组件库，方便程序员进行页面快速布局和构建

官网： https://element.eleme.cn/#/zh-CN

在这里插入图片描述

在这里插入图片描述

1.1.3、ES6 概述

ECMAScript 6.0（以下简称 ES6）是 JavaScript 语言的下一代标准，已经在 2015 年 6 月正式发布了。它的目标，是使得 JavaScript 语言可以用来编写复杂的大型应用程序，成为企业级开发语言。

1.2、vue-admin-template

1.2.1、简介

vue-admin-template是基于vue-element-admin的一套后台管理系统基础模板（最少精简版），可作为模板进行二次开发。

建议：你可以在 vue-admin-template 的基础上进行二次开发，把 vue-element-admin当做工具箱，想要什么功能或者组件就去 vue-element-admin 那里复制过来。

1.2.2、下载

在这里插入图片描述

在这里插入图片描述

解压重命名为 gansu-system-front 并放到工作区 GANSU-SYSTEM-FRONT 下面

在这里插入图片描述

打开 VSCode 如下所示：

在这里插入图片描述

1.2.3、安装

# 安装依赖
npm install
# 启动。执行后，浏览器自动弹出并访问http://localhost:9528/
npm run dev

①
在这里插入图片描述

②

在这里插入图片描述

③ 浏览器显示如下

在这里插入图片描述

④ 登录进去如下所示

在这里插入图片描述

1.2.4、源码目录结构（了解）

|-dist 生产环境打包生成的打包项目
|-mock 产生模拟数据
|-public 包含会被自动打包到项目根路径的文件夹
	|-index.html 唯一的页面
|-src
	|-api 包含接口请求函数模块
		|-table.js  表格列表mock数据接口的请求函数
		|-user.js  用户登陆相关mock数据接口的请求函数
	|-assets 组件中需要使用的公用资源
		|-404_images 404页面的图片
	|-components 非路由组件
		|-SvgIcon svg图标组件
		|-Breadcrumb 面包屑组件(头部水平方向的层级组件)
		|-Hamburger 用来点击切换左侧菜单导航的图标组件
	|-icons
		|-svg 包含一些svg图片文件
		|-index.js 全局注册SvgIcon组件,加载所有svg图片并暴露所有svg文件名的数组
	|-layout
		|-components 组成整体布局的一些子组件
		|-mixin 组件中可复用的代码
		|-index.vue 后台管理的整体界面布局组件
	|-router
		|-index.js 路由器
	|-store
		|-modules
			|-app.js 管理应用相关数据
			|-settings.js 管理设置相关数据
			|-user.js 管理后台登陆用户相关数据
		|-getters.js 提供子模块相关数据的getters计算属性
		|-index.js vuex的store
	|-styles
		|-xxx.scss 项目组件需要使用的一些样式(使用scss)
	|-utils 一些工具函数
		|-auth.js 操作登陆用户的token cookie
		|-get-page-title.js 得到要显示的网页title
		|-request.js axios二次封装的模块
		|-validate.js 检验相关工具函数
		|-index.js 日期和请求参数处理相关工具函数
	|-views 路由组件文件夹
		|-dashboard 首页
		|-login 登陆
	|-App.vue 应用根组件
	|-main.js 入口js
	|-permission.js 使用全局守卫实现路由权限控制的模块
	|-settings.js 包含应用设置信息的模块
|-.env.development 指定了开发环境的代理服务器前缀路径
|-.env.production 指定了生产环境的代理服务器前缀路径
|-.eslintignore eslint的忽略配置
|-.eslintrc.js eslint的检查配置
|-.gitignore git的忽略配置
|-.npmrc 指定npm的淘宝镜像和sass的下载地址
|-babel.config.js babel的配置
|-jsconfig.json 用于vscode引入路径提示的配置
|-package.json 当前项目包信息
|-package-lock.json 当前项目依赖的第三方包的精确信息
|-vue.config.js webpack相关配置(如: 代理服务器)

在这里插入图片描述

1.2.5、改造登录&退出功能

1.2.5.1、服务器端增加接口

① 到前端登录页，按 Fn+F12 根据如下创建接口

在这里插入图片描述

上面两种响应里面如下所示：

login:
{"code":20000,"data":{"token":"admin-token"}}
info:
{
    "code": 20000,
    "data": {
        "roles": [
            "admin"
        ],
        "introduction": "I am a super administrator",
        "avatar": "https://wpimg.wallstcn.com/f778738c-e4f8-4870-b634-56703b4acafe.gif",
        "name": "Super Admin"
    }
}

② 在后端 service-system 模块下操作，创建 IndexController.java

在这里插入图片描述

package com.gansu.system.controller;

import com.gansu.common.result.Result;
import io.swagger.annotations.Api;
import org.springframework.web.bind.annotation.GetMapping;
import org.springframework.web.bind.annotation.PostMapping;
import org.springframework.web.bind.annotation.RequestMapping;
import org.springframework.web.bind.annotation.RestController;

import java.util.HashMap;
import java.util.Map;

@Api(tags = "后台登录管理")
@RestController
@RequestMapping("/admin/system/index")
public class IndexController {

    //1.login登录方式
    @PostMapping("login") //根据浏览器请求方法决定
    public Result login(){
        Map<String,Object> map = new HashMap<>();
        map.put("token","admin-token");
        return Result.ok(map);
    }

    //2.info 登录方式
    @GetMapping("info")
    public Result info(){
        Map<String,Object> map = new HashMap<>();
        map.put("roles","[admin]");
        map.put("introduction","I am a super administrator");
        map.put("avatar","https://wpimg.wallstcn.com/f778738c-e4f8-4870-b634-56703b4acafe.gif");
        map.put("name","Super Admin");
        return Result.ok(map);
    }
}
1.2.5.2、前端配置修改

修改 ① vue.config.js（直接复制即可）

  • 注释掉mock接口配置
  • 配置代理转发请求到目标接口

在这里插入图片描述

// before: require('./mock/mock-server.js')
proxy: {
  '/dev-api': { // 匹配所有以 '/dev-api'开头的请求路径
    target: 'http://localhost:8800',
    changeOrigin: true, // 支持跨域
    pathRewrite: { // 重写路径: 去掉路径中开头的'/dev-api'
      '^/dev-api': ''
    }
  }
}

解析跨域：访问协议，地址ip，端口号不一致都属于跨域；

在这里插入图片描述

修改 ② src/utils/request.js

在这里插入图片描述

修改 ③ src/api/user.js

在这里插入图片描述

修改 ④ 可增加一个标识 ，然后启动后端，再次启动前端，查看是否可以登录进去。

在这里插入图片描述

登录ok,但是没法退出

在这里插入图片描述

解决：

  • 方式一：前端修改接口地址，后端加接口

在这里插入图片描述

  • 方式二：直接注释掉下面这四行也可以

在这里插入图片描述

再次启动就可以顺利退出。

二、角色列表

2.1、修改路由

修改 src/router/index.js

① 复制修改路由，删除多余的路由

在这里插入图片描述

2.2、创建vue组件

在src/views文件夹下创建以下文件夹和文件

在views下面分别创建 system/sysRole/list.vue,system/sysUser/list.vue

在这里插入图片描述

分别添加如下：

<template>
  <div class="app-container">
    角色列表
  </div>
</template>

③ 刷新查看浏览器

在这里插入图片描述

2.3、定义api（含 es6 拼接）

es6 特性如下(拼接)

在这里插入图片描述

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=<device-width>, initial-scale=1.0">
    <title>Document</title>
</head>
<body>

    <script>

        let a = 'a';  //es6 定义变量
        const b = 'b' //es6 定义常量

        let c = `${a}`+"#"+`${b}`

        console.log(c)

    </script>
    
</body>
</html>

在api目录中创建文件 src/api/system/sysRole.js*

在这里插入图片描述

import request from '@/utils/request'
//角色管理相关的API请求函数
const api_name  = '/admin/system/sysrole/'

export default{

    getPageList(page,limit,searchObject){

      return request({

        url: `${api_name}/${page}/${limit}`,
  
        method: 'get',
  
        params: searchObject
  
      })
    }
}

2.4、初始化 vue 组件

src/views/system/sysRole/list.vue

在这里插入图片描述

<template>
  <div class="app-container">
    角色列表
  </div>
</template>

<script>
//引入
import api from '@/system/sysRole.js'
export default {
//定义数据模型
  data(){
    return{

    }
  },
  //页面渲染前获取数据
  created(){

  },
  //定义方法
  methods:{
      fetchData(){

      }
  }
  
}
</script>

2.5、定义 data，methods

在这里插入图片描述

<template>
  <div class="app-container">
    角色列表
  </div>
</template>
<script>
//引入
import api from '@/api/system/sysRole'
export default {
//定义数据模型
  data(){
    return{
        listLoading:true,//数据是否正在加载
        list:[],//角色列表
        total:0,//总记录数，默认为0
        page:1,//页码
        limit:3,//每页显示的条数 自定义3条
        searchObj:{} //查询条件
    }
  },
  //页面渲染前获取数据
  created(){
      this.fetchData()
  },
  //定义方法
  methods:{
      fetchData(pageNum =1){
        this.page = pageNum
        // 调用api
          api.getPageList(this.page,this.limit,this.searchObj)
          .then(Response =>{
            console.log(Response)
          })
      }
  } 
}
</script>

浏览器查看：

在这里插入图片描述

优化 methods 方法

在这里插入图片描述

//定义方法
methods:{
    fetchData(pageNum =1){
      this.page = pageNum
      // 调用api
        api.getPageList(this.page,this.limit,this.searchObj)
        .then(Response =>{
          //console.log(Response)
          debugger
          this.listLoading = false
            //每页数据的列表
            this.list = Response.data.records,
            //总记录数
            this.total = Response.data.total
        })
    }
}

2.6、表格渲染

在这里插入图片描述

建议直接复制我 code，涉及 element-ui https://element.eleme.cn/#/zh-CN 表格。

在这里插入图片描述

<div class="app-container">
  <!-- 表格 -->
  <el-table
    v-loading="listLoading"
    :data="list"
    stripe
    border
    style="width: 100%;margin-top: 10px;">

    <el-table-column
      label="序号"
      width="70"
      align="center">
      <template slot-scope="scope">
        {{ (page - 1) * limit + scope.$index + 1 }}
      </template>
    </el-table-column>

    <el-table-column prop="roleName" label="角色名称" />
    <el-table-column prop="roleCode" label="角色编码" />
    <el-table-column prop="createTime" label="创建时间" width="160"/>
    <el-table-column label="操作" width="200" align="center">
      <template slot-scope="scope">
        <el-button type="primary" icon="el-icon-edit" size="mini" @click="edit(scope.row.id)" title="修改"/>
        <el-button type="danger" icon="el-icon-delete" size="mini" @click="removeDataById(scope.row.id)" title="删除"/>
      </template>
    </el-table-column>
  </el-table>
</div>

如下显示：

在这里插入图片描述

2.7、日期格式化

服务器端添加配置：application-dev.yml

在这里插入图片描述

spring:
  jackson:
    date-format: yyyy-MM-dd HH:mm:ss
    time-zone: GMT+8

重启服务再次查看：

在这里插入图片描述

2.8、分页组件

建议直接复制我 code，涉及 element-ui https://element.eleme.cn/#/zh-CN　表单 。

在这里插入图片描述

在这里插入图片描述

<!-- 分页组件 -->
<el-pagination
  :current-page="page"
  :total="total"
  :page-size="limit"
  style="padding: 30px 0; text-align: center;"
  layout="total, prev, pager, next, jumper"
  @current-change="fetchData"
/>

显示效果如下：

在这里插入图片描述

2.9、顶部查询表单

在这里插入图片描述

在这里插入图片描述

<!--查询表单-->
<div class="search-div">
 <el-form label-width="70px" size="small">
   <el-row>
     <el-col :span="24">
       <el-form-item label="角色名称">
         <el-input style="width: 100%" v-model="searchObj.roleName" placeholder="角色名称"></el-input>
       </el-form-item>
     </el-col>
   </el-row>
   <el-row style="display:flex">
     <el-button type="primary" icon="el-icon-search" size="mini"  @click="fetchData()">搜索</el-button>
     <el-button icon="el-icon-refresh" size="mini" @click="resetData">重置</el-button>
   </el-row>
 </el-form>
</div>

在这里插入图片描述

重置表单方法

在这里插入图片描述

//重置
resetData(){
//清空
this.searchObj = {},
//刷新页面或查询全部
this.fetchData()
},

在这里插入图片描述

三、角色删除和添加

在这里插入图片描述

3.1、定义 api，methods

在这里插入图片描述

src/api/system/sysRole.js

//删除功能
removeById(id) {

 return request({

   url: `${api_name}/removeRole/${id}`,

   method: 'delete'

 })
}

src/views/system/sysRole/list.vue

使用MessageBox 弹框组件

在这里插入图片描述

在这里插入图片描述

//删除
removeDataById(id){

    this.$confirm('此操作将永久删除该角色, 是否继续?', '提示', {
    confirmButtonText: '确定',
    cancelButtonText: '取消',
    type: 'warning'
  }).then(() => {
    // 点击确定，远程调用ajax
   api.removeById(id).then(Response =>{
      this.$message({
      type: 'success',
      message: '删除成功!'
    });
       //刷新页面或查询全部
       this.fetchData()
     })
  })
},

3.2、测试

问题 ① 无法删除，如下显示

在这里插入图片描述

  • 分析报错（后端打断点）

后端没有报错，则打断点排查：

在这里插入图片描述

javascript默认为16位即2的正负53次方，而我们生成的为19位，所以改为String解决。

在这里插入图片描述

解决：

在这里插入图片描述

问题 ②：后端报错 Failed to convert value of type 'java.lang.String' to required type 'java.lang.Long'; nested exception is java.lang.NumberFormatException: For input string: "null"

在这里插入图片描述

在这里插入图片描述

分析与解决：SysRoleMapper.xml里面sql写的有问题

成功测试如下所示：

在这里插入图片描述

测试后数据库：

在这里插入图片描述

3.3、角色添加

定义 api，methods

3.3.1、定义api

src/api/system/sysRole.js

在这里插入图片描述

//添加角色
saveRole(role) {
  return request({
      url: `${api_name}/addSysRole`,
      method: 'post',
      data: role
  })
},

3.3.2、定义添加按钮 和 弹出层

在这里插入图片描述

① src/views/system/sysRole/list.vue

表格上面添加按钮，分页组件或添加按钮下面直接添加弹出层

在这里插入图片描述

<!-- 工具条 -->
<div class="tools-div">
  <el-button type="success" icon="el-icon-plus" size="mini" @click="add">添 加</el-button>
</div>
<!-- 定义弹出层 -->
<el-dialog title="添加/修改" :visible.sync="dialogVisible" width="40%" >
  <el-form ref="dataForm" :model="sysRole" label-width="150px" size="small" style="padding-right: 40px;">
    <el-form-item label="角色名称">
      <el-input v-model="sysRole.roleName" placeholder="请输入角色名称" />
    </el-form-item>
    <el-form-item label="角色编码">
      <el-input v-model="sysRole.roleCode" placeholder="请输入角色编码"/>
    </el-form-item>
  </el-form>
  <span slot="footer" class="dialog-footer">
    <el-button @click="dialogVisible = false" size="small" icon="el-icon-refresh-right">取 消</el-button>
    <el-button type="primary" icon="el-icon-check" @click="saveOrUpdate()" size="small">确 定</el-button>
  </span>
</el-dialog>

② 在public目录的index.html页面中添加样式

在这里插入图片描述

<!-- 添加按钮样式 -->
<style>
  .search-div {
      padding:10px;border: 1px solid #EBEEF5;border-radius:3px;
  }
  .tools-div {
      margin-top: 10px;padding:10px;border: 1px solid #EBEEF5;border-radius:3px;
  }
</style>

3.3.3、实现功能

src/views/system/sysRole/list.vue

在这里插入图片描述

<script>

import api from '@/api/system/sysRole'
export default {
    
   data(){
      return{

        listLoading:false,//数据是否正在加载
        list:[],//角色列表
        total:0,//总记录数，默认为0
        page:1,//页码
        limit:3,//每页显示的条数 自定义3条
        searchObj:{}, //查询条件
        dialogVisible:false, //取消弹出角色的页面框
        sysRole:{} //添加角色 这个与上面的 v-model="sysRole.xx" 进行了双向绑定
      }
   },
   created(){
        this.fetchData()
   },
   methods:{
          //添加修改角色，弹出后确定
          saveOrUpdate(){
              if(!this.sysRole.id){
                    this.saveRole()
              }else{
                updateSysRole()
              }  
          },
          //修改角色，弹出后确定
          updateSysRole(){},
          //添加角色，弹出后确定
          saveRole(){
            if(this.sysRole.roleName != null && this.sysRole.roleCode != null){
              api.saveRole(this.sysRole).then(Response=>{
                      //1.提示
                      this.$message({
                      type: 'success',
                      message: '添加成功!'
                       });
                //2.关闭弹框
                this.dialogVisible = false,
                //3.刷新页面或查询全部
                this.fetchData()
              })
            }else{
              alert("请输入要添加的角色名称和角色编码！！！")
            }
          },
          //添加角色，弹出按钮
          add(){
              this.dialogVisible = true,
              this.sysRole = {}
          },

          // 根据id删除数据
          removeDataById(id){

              this.$confirm('此操作将永久删除该角色, 是否继续?', '提示', {
              confirmButtonText: '确定',
              cancelButtonText: '取消',
              type: 'warning'
            }).then(() => {
              // 点击确定，远程调用ajax
            api.removeById(id).then(Response =>{
                this.$message({
                type: 'success',
                message: '删除成功!'
                });
                //刷新页面或查询全部
                this.fetchData()
              })
            })
          },

        //重置
        resetData(){
            this.searchObj = {}
            this.fetchData()
        },

        //角色列表显示
        fetchData(pageNum = 1){
            this.page = pageNum;
            api.getPageList(this.page,this.limit,this.searchObj)
            .then(Response=>{
                this.list = Response.data.records
                this.total = Response.data.total
            })
        }
   }
}
</script>

3.3.4、 测试：

在这里插入图片描述

添加成功如下显示：

在这里插入图片描述

在这里插入图片描述

四、角色修改与数据回显

4.1、定义 api，组件中调用 api

① src/api/system/sysRole.js

② src/views/system/sysRole/list.vue

在这里插入图片描述

① src/api/system/sysRole.js

// 修改角色：① 回显数据
findSysRoleById(id) {
 return request({
     url: `${api_name}/findSysRoleById/${id}`,
     method: 'get',
 })
},
//修改角色：② 修改并保存数据
updateById(role) {
return request({
 url: `${api_name}/updateById`,
 method: 'put',
 data:role
})

② src/views/system/sysRole/list.vue

<script>

import api from '@/api/system/sysRole'
export default {
    
   data(){
      return{

        listLoading:false,//数据是否正在加载
        list:[],//角色列表
        total:0,//总记录数，默认为0
        page:1,//页码
        limit:3,//每页显示的条数 自定义3条
        searchObj:{}, //查询条件
        dialogVisible:false, //取消弹出角色的页面框
        sysRole:{} //添加角色 这个与上面的 v-model="sysRole.xx" 进行了双向绑定
      }
   },
   created(){
        this.fetchData()
   },
   methods:{
          //添加修改角色，弹出后确定
          saveOrUpdate(){
              if(!this.sysRole.id){
                    this.saveRole()
              }else{
                updateSysRole()
              }  
          },

          updateSysRole(){
            api.updateById(this.sysRole)
            .then(response=>{
                //1.提示
                this.$message({
                type: 'success',
                message: '修改成功!'
                });
                //2.关闭弹框
                this.dialogVisible = false,
                //3.刷新页面或查询全部
                this.fetchData()
            })
          },
          //修改角色，弹出后确定
          edit(id){
              this.dialogVisible = true
              api.findSysRoleById(id).then(Response=>{
                   this.sysRole = Response.data
              })
          },
          //添加角色，弹出后确定
          saveRole(){
            if(this.sysRole.roleName != null && this.sysRole.roleCode != null){
              api.saveRole(this.sysRole).then(Response=>{
                      //1.提示
                      this.$message({
                      type: 'success',
                      message: '添加成功!'
                       });
                //2.关闭弹框
                this.dialogVisible = false,
                //3.刷新页面或查询全部
                this.fetchData()
              })
            }else{
              alert("请输入要添加的角色名称和角色编码！！！")
            }
          },
          //添加角色，弹出按钮
          add(){
              this.dialogVisible = true,
              this.sysRole = {}
          },


          // 根据id删除数据
          removeDataById(id){

              this.$confirm('此操作将永久删除该角色, 是否继续?', '提示', {
              confirmButtonText: '确定',
              cancelButtonText: '取消',
              type: 'warning'
            }).then(() => {
              // 点击确定，远程调用ajax
            api.removeById(id).then(Response =>{
                this.$message({
                type: 'success',
                message: '删除成功!'
                });
                //刷新页面或查询全部
                this.fetchData()
              })
            })
          },

        //重置
        resetData(){
            this.searchObj = {}
            this.fetchData()
        },

        //角色列表显示
        fetchData(pageNum = 1){

            this.page = pageNum;
            api.getPageList(this.page,this.limit,this.searchObj)
            .then(Response=>{
                console.log(Response)
                this.list = Response.data.records
                this.total = Response.data.total
            })
        }
   }
}
</script>

4.2、测试

在这里插入图片描述

修改后：

在这里插入图片描述

五、批量删除

5.1、定义api，初始化组件

① src/api/system/sysRole.js

② src/views/system/sysRole/list.vue

在这里插入图片描述
①

//批量删除
batchDeleteById(idList) {
  return request({
    url: `${api_name}/batchDeleteById`,
    method: 'delete',
    data:idList
  })
}

② 在table组件上添加 批量删除 按钮

<!-- 工具条 -->
<div class="tools-div">
  <el-button type="success" icon="el-icon-plus" size="mini" @click="add">添 加</el-button>
  <el-button class="btn-add" size="mini" @click="batchRemove()" >批量删除</el-button>
</div>

③ 在table组件上添加复选框

<el-table
  v-loading="listLoading"
  :data="list"
  stripe
  border
  style="width: 100%;margin-top: 10px;"
  @selection-change="handleSelectionChange">
  <el-table-column type="selection"/>

在这里插入图片描述

5.2、实现功能

data定义数据

在这里插入图片描述

 idList:[] //将所有选中的行存储到数组中,如 [1,2,3] 批量删除选中的记录列表

完善方法

在这里插入图片描述

//选中要批量删除的行
handleSelectionChange(selection){
    //将选中的行存入到selectValue数组中
    this.selectValue = selection
    //console.log(this.selectValue)
},

//批量删除
batchRemove(){
  if(this.selectValue.length == 0){
    //alert('请选择要删除的记录!')
    this.$message.warning('请选择要删除的记录!')
    return
  }
  
  this.$confirm('此操作将永久删除该角色, 是否继续?', '提示', {
    confirmButtonText: '确定',
    cancelButtonText: '取消',
    type: 'warning'
  }).then(() => {
    //定义一个空数组
    var idList = [];
    //获取多个复选框对应的id值，封装到数组里面
    //遍历数组
    for(var i=0;i<this.selectValue.length;i++){
        //遍历数组
        var obj = this.selectValue[i]
        var id = obj.id
        // alert(id) 选中所有的 id 
        idList.push(id)
    }
    //TODO
    // 点击确定，远程调用ajax
    api.batchDeleteById(idList).then(Response=>{
          this.$message({
          type: 'success',
          message: '删除成功!'
          });
          //刷新页面或查询全部
          this.fetchData()
        })
    })
},

5.3、功能测试

测试效果①

在这里插入图片描述

测试效果②

在这里插入图片描述

在这里插入图片描述

附完整源码：

  • src/api/system/sysRole.js
  • src/views/system/sysRole/list.vue

src/api/system/sysRole.js

import request from '@/utils/request'

const api_name = '/admin/system/sysrole';

export default {

      getPageList(page, limit, searchObj) {
          return request({
              url: `${api_name}/${page}/${limit}`,
              method: 'get',
              params: searchObj
          })
      },
      //角色删除
      removeById(id) {
          return request({
            url: `${api_name}/removeRole/${id}`,
            method: 'delete'
          })
    },
    //添加角色
    saveRole(role) {
      return request({
          url: `${api_name}/addSysRole`,
          method: 'post',
          data: role
      })
    },

      // 修改角色：① 回显数据
      getRoleById(id) {
        return request({
            url: `${api_name}/findSysRoleById/${id}`,
            method: 'post',
        })
      },
      //修改角色：② 修改并保存数据
      updateById(sysRole) {
        return request({
          url: `${api_name}/updateById`,
          method: 'put',
          data: sysRole
        })
      },
    //批量删除
    batchDeleteById(idList) {
      return request({
        url: `${api_name}/batchDeleteById`,
        method: 'delete',
        data:idList
      })
    }    
}

src/views/system/sysRole/list.vue

<template>
  <div class="app-container">

    <!--查询表单-->
    <div class="search-div">
      <el-form label-width="70px" size="small">
        <el-row>
          <el-col :span="24">
            <el-form-item label="角色名称">
              <el-input style="width: 100%" v-model="searchObj.roleName" placeholder="角色名称"></el-input>
            </el-form-item>
          </el-col>
        </el-row>
        <el-row style="display:flex">
          <el-button type="primary" icon="el-icon-search" size="mini"  @click="fetchData()">搜索</el-button>
          <el-button icon="el-icon-refresh" size="mini" @click="resetData">重置</el-button>
        </el-row>
      </el-form>
    </div>

    <!-- 工具条 -->
    <div class="tools-div">
      <el-button type="success" icon="el-icon-plus" size="mini" @click="add">添 加</el-button>
      <el-button class="btn-add" size="mini" @click="batchRemove()" >批量删除</el-button>
    </div>

    <el-dialog title="添加/修改" :visible.sync="dialogVisible" width="40%" >
      <el-form ref="dataForm" :model="sysRole" label-width="150px" size="small" style="padding-right: 40px;">
        <el-form-item label="角色名称">
          <el-input v-model="sysRole.roleName" placeholder="请输入角色名称" />
        </el-form-item>
        <el-form-item label="角色编码">
          <el-input v-model="sysRole.roleCode" placeholder="请输入角色编码"/>
        </el-form-item>
      </el-form>
      <span slot="footer" class="dialog-footer">
        <el-button @click="dialogVisible = false" size="small" icon="el-icon-refresh-right">取 消</el-button>
        <el-button type="primary" icon="el-icon-check" @click="saveOrUpdate()" size="small">确 定</el-button>
      </span>
    </el-dialog>

    <!-- 表格 -->
    <el-table
      v-loading="listLoading"
      :data="list"
      stripe
      border
      style="width: 100%;margin-top: 10px;"
      @selection-change="handleSelectionChange">  
       <!-- 添加复选框 -->
      <el-table-column type="selection"/>
       
      <el-table-column
        label="序号"
        width="70"
        align="center">
        <template slot-scope="scope">
          {{ (page - 1) * limit + scope.$index + 1 }}
        </template>
      </el-table-column>

      <el-table-column prop="roleName" label="角色名称" />
      <el-table-column prop="roleCode" label="角色编码" />
      <el-table-column prop="createTime" label="创建时间" width="160"/>
      <el-table-column prop="updateTime" label="更新时间" width="160"/>
      <el-table-column label="操作" width="200" align="center">
        <template slot-scope="scope">
          <el-button type="primary" icon="el-icon-edit" size="mini" @click="edit(scope.row.id)" title="修改"/>
          <el-button type="danger" icon="el-icon-delete" size="mini" @click="removeDataById(scope.row.id)" title="删除"/>
        </template>
      </el-table-column>
    </el-table>

      <!-- 分页组件 -->
      <el-pagination
        :current-page="page"
        :total="total"
        :page-size="limit"
        style="padding: 30px 0; text-align: center;"
        layout="total, prev, pager, next, jumper"
        @current-change="fetchData"
      />
  </div>
  
</template>
<script>

import api from '@/api/system/sysRole'
export default {
    
   data(){
      return{

        listLoading:false,//数据是否正在加载
        list:[],//角色列表
        total:0,//总记录数，默认为0
        page:1,//页码
        limit:3,//每页显示的条数 自定义3条
        searchObj:{}, //查询条件
        dialogVisible:false, //取消弹出角色的页面框
        sysRole:{},//添加角色 这个与上面的 v-model="sysRole.xx" 进行了双向绑定
        idList:[] //将所有选中的行存储到数组中,如 [1,2,3] 批量删除选中的记录列表
      }
   },
   created(){
        this.fetchData()
   },
   methods:{
          //选中要批量删除的行
          handleSelectionChange(selection){
              //将选中的行存入到selectValue数组中
              this.selectValue = selection
              //console.log(this.selectValue)
          },

          //批量删除
          batchRemove(){
            if(this.selectValue.length == 0){
              //alert('请选择要删除的记录!')
              this.$message.warning('请选择要删除的记录!')
              return
            }
            
            this.$confirm('此操作将永久删除该角色, 是否继续?', '提示', {
              confirmButtonText: '确定',
              cancelButtonText: '取消',
              type: 'warning'
            }).then(() => {
              //定义一个空数组
              var idList = [];
              //获取多个复选框对应的id值，封装到数组里面
              //遍历数组
              for(var i=0;i<this.selectValue.length;i++){
                  //遍历数组
                  var obj = this.selectValue[i]
                  var id = obj.id
                  // alert(id) 选中所有的 id 
                  idList.push(id)
              }
              //TODO
              // 点击确定，远程调用ajax
              api.batchDeleteById(idList).then(Response=>{
                    this.$message({
                    type: 'success',
                    message: '删除成功!'
                    });
                    //刷新页面或查询全部
                    this.fetchData()
                  })
              })
          },

          //添加修改角色，弹出后确定
          saveOrUpdate(){
              if(!this.sysRole.id){
                  this.saveRole()
              }else{
                
                this.updateSysRole()
              }  
          },

          updateSysRole(){
            api.updateById(this.sysRole)
            .then(Response=>{
                //1.提示
                this.$message({
                type: 'success',
                message: '修改成功!'
                });
                //2.关闭弹框
                this.dialogVisible = false,
                //3.刷新页面或查询全部
                this.fetchData()
            })
          },
          //修改角色，弹出后确定
          edit(id){

              api.getRoleById(id).then(Response=>{

                 //弹出框
                  this.dialogVisible = true
                  
                  this.sysRole  = Response.data
              })
          },
          //添加角色，弹出后确定
          saveRole(){
            if(this.sysRole.roleName != null && this.sysRole.roleCode != null){
              api.saveRole(this.sysRole).then(Response=>{
                      //1.提示
                      this.$message({
                      type: 'success',
                      message: '添加成功!'
                       });
                //2.关闭弹框
                this.dialogVisible = false,
                //3.刷新页面或查询全部
                this.fetchData()
              })
            }else{
              alert("请输入要添加的角色名称和角色编码！！！")
            }
          },
          //添加角色，弹出按钮
          add(){
              this.dialogVisible = true,
              this.sysRole = {}
          },

          // 根据id删除数据
          removeDataById(id){

              this.$confirm('此操作将永久删除该角色, 是否继续?', '提示', {
              confirmButtonText: '确定',
              cancelButtonText: '取消',
              type: 'warning'
            }).then(() => {
              // 点击确定，远程调用ajax
            api.removeById(id).then(Response =>{
                this.$message({
                type: 'success',
                message: '删除成功!'
                });
                //刷新页面或查询全部
                this.fetchData()
              })
            })
          },

        //重置
        resetData(){
            this.searchObj = {}
            this.fetchData()
        },

        //角色列表显示
        fetchData(pageNum = 1){

            this.page = pageNum;
            api.getPageList(this.page,this.limit,this.searchObj)
            .then(Response=>{
                console.log(Response)
                this.list = Response.data.records
                this.total = Response.data.total
            })
        }
   }
}
</script>

文章源码

Daniel521-Spark
关注
专栏目录
前后端分离系统通用权限管理系统.zip
07-19
前后端分离系统通用权限管理系统.zip前后端分离系统通用权限管理系统.zip前后端分离系统通用权限管理系统.zip前后端分离系统通用权限管理系统.zip前后端分离系统通用权限管理系统.zip前后端分离系统通用权限管理系统...
五、前后端分离通用权限系统（5）gansu-system-front.zip
08-24
五、前后端分离通用权限系统（5）gansu-system-front.zip
c# .net core 3.1 好用的通用后台管理 前后端分离框架
06-26
前后端分离框架，基于.NET5/.NET6实现的通用权限管理平台。整合最新技术高效快速开发，前后端分离模式，开箱即用。 代码量少、学习简单、通俗易懂、功能强大、易扩展、轻量级，让web开发更快速、简单高效（从此告别...
基于 SpringBoot、Spring Security、JWT 的前后端分离的通用权限管理系统，个人学习，快速搭建模板
06-16
- 权限认证使用Jwt，支持多终端认证系统。 - 支持加载动态权限菜单，多方式轻松权限控制。 - 高效率开发，使用代码生成器可以一键生成前后端代码。 ## 功能 - 用户管理：用户是系统操作者，该功能主要完成系统用户...
毕业设计：基于ASP.NET的前后端分离通用权限管理系统.zip
10-11
"毕业设计：基于ASP.NET的前后端分离通用权限管理系统"是一个典型的IT项目，主要针对计算机科学与技术专业的毕业生进行。这个系统利用ASP.NET技术构建，旨在实现前后端分离的设计模式，同时具备通用权限管理功能，是...
现代化水电管理：Spring Boot在大学城的实践
2402_85758349的博客
11-02 908
在概念模式的设计中，E-R模型法是最常见的设计方法。B/S架构的运行方式是在远程的服务器上把开发的软件系统部署在远程的服务器上，在部署好软件系统之后就可以实现在任何接入互联网的电脑上访问部署好的软件系统。6、网络上的客户端和服务器可以用来编程任何独立的编程环境，也有中国，GB2312，BIG5，日文写作，一般基金，用于支持多国语言，并且可以嵌入在数据表和其他软件shift_jis访问柱可以用作的名称。编程语言，如C, C ++，Python和Java的，的Perl，PHP，埃菲尔铁塔，Ruby和Tcl的。
深入理解跨域资源共享（CORS）安全问题原理及解决思路
weixin_43841461的博客
10-31 1821
CORS 是一种机制，它允许一个域上的Web应用请求另一个域上的资源。浏览器通过检查响应头中的CORS字段来决定是否允许跨域请求。: 指定允许访问的源。: 指定允许的HTTP方法。: 指定允许的请求头。: 表示是否允许发送凭据信息（如Cookies、HTTP认证信息）。
Java项目实战II基于Spring Boot的交通管理在线服务系统设计与实现（开发文档+数据库+源码）
2401_86524610的博客
10-30 685
随着城市化进程的加速和交通流量的剧增，传统的交通管理方式已经难以满足现代城市交通管理的需求。为了提升交通管理的效率和智能化水平，我们设计并实现了基于Spring Boot的交通管理在线服务系统。该系统集成了交通违法查询、路况实时监控、交通事故处理、交通设施管理等多个功能模块，旨在通过信息化手段实现对城市交通的全面管理和监控。通过本系统，交通管理部门可以实时掌握交通状况，快速响应交通事件，提高交通管理的效率和准确性。
Spring Boot框架：校园社团信息管理的现代化解决方案
2401_85812026的博客
10-31 830
在整个系统测试中，根据需求文档和设计文档，逐一对功能进行检测并写好测试用例，有效避免残片缺陷，因为产品出现缺陷不仅影响功能，而且可以导致数据的不准确，导致产品质量的降低，经过测试，才能使得产品的稳定性和成熟度得到极大的提升，产品质量也才有保证。本系统具有易操作、易管理、交互性好的特点，在操作上是非常简单的，因此在操作上具有很高的可行性。（2）该完整内容全面，管理方便可以及时的全面的处理各种错误，异常，这样避免了很多因用户的马虎操作而出现的失误，其操作方便，用户界面友好，能够上网的人都可以很好的进行操作。
校园社团信息管理：Spring Boot技术的优势与实现
2402_85761468的博客
10-31 400
编程语言，如C, C ++，Python和Java的，的Perl，PHP，埃菲尔铁塔，Ruby和Tcl的。
信息学科平台系统设计与实现：Spring Boot框架
2401_85812053的博客
11-02 401
1系统概述 1.1 研究背景 随着计算机技术的发展以及计算机网络的逐渐普及，互联网成为人们查找信息的重要场所，二十一世纪是信息的时代，所以信息的管理显得特别重要。因此，使用计算机来管理基于保密信息学科平台系统的相关信息成为必然。开发合适的基于保密信息学科平台系统，可以方便管理人员对基于保密信息学科平台系统的管理，提高信息管理工作效率及查询效率，有利于更好的为人们服务。 1.2研究目的 随着互联网技术的快速发展，网络时代的到来，网络信息也将会改变当今社会。各行各业在日常企业经营管理等方面也在慢慢的向规范化和网
构建校园社团信息管理平台：Spring Boot技术的核心要点
2402_85758936的博客
10-31 822
在整个系统测试中，根据需求文档和设计文档，逐一对功能进行检测并写好测试用例，有效避免残片缺陷，因为产品出现缺陷不仅影响功能，而且可以导致数据的不准确，导致产品质量的降低，经过测试，才能使得产品的稳定性和成熟度得到极大的提升，产品质量也才有保证。不出现字体变形等情况！
信息学科平台设计与实现：Spring Boot技术详解
2401_85763639的博客
11-02 831
在整个系统测试中，根据需求文档和设计文档，逐一对功能进行检测并写好测试用例，有效避免残片缺陷，因为产品出现缺陷不仅影响功能，而且可以导致数据的不准确，导致产品质量的降低，经过测试，才能使得产品的稳定性和成熟度得到极大的提升，产品质量也才有保证。近来，软件工程界趋向于一种新的观点，即认为软件生命周期每一阶段中都应包含测试，从而检验本阶段的成果是否接近预期的目标，尽可能早的发现错误并加以修正，如果不在早期阶段进行测试，错误的延时扩散常常会导致最后成品测试的巨大困难。任务：消除软件故障，保证程序的可靠运行。
信息学科平台系统开发：基于Spring Boot的最佳实践
2401_85761762的博客
11-02 816
在整个系统测试中，根据需求文档和设计文档，逐一对功能进行检测并写好测试用例，有效避免残片缺陷，因为产品出现缺陷不仅影响功能，而且可以导致数据的不准确，导致产品质量的降低，经过测试，才能使得产品的稳定性和成熟度得到极大的提升，产品质量也才有保证。本系统具有易操作、易管理、交互性好的特点，在操作上是非常简单的，因此在操作上具有很高的可行性。（2）该完整内容全面，管理方便可以及时的全面的处理各种错误，异常，这样避免了很多因用户的马虎操作而出现的失误，其操作方便，用户界面友好，能够上网的人都可以很好的进行操作。
校园社团信息管理：Spring Boot技术的最佳实践
2401_85702623的博客
10-31 1205
在整个系统测试中，根据需求文档和设计文档，逐一对功能进行检测并写好测试用例，有效避免残片缺陷，因为产品出现缺陷不仅影响功能，而且可以导致数据的不准确，导致产品质量的降低，经过测试，才能使得产品的稳定性和成熟度得到极大的提升，产品质量也才有保证。近来，软件工程界趋向于一种新的观点，即认为软件生命周期每一阶段中都应包含测试，从而检验本阶段的成果是否接近预期的目标，尽可能早的发现错误并加以修正，如果不在早期阶段进行测试，错误的延时扩散常常会导致最后成品测试的巨大困难。至此，在功能的测试上也已经比较圆满的完成了。
后端：Spring、Spring Boot-实例化Bean&依赖注入(DI)
坚持不懈的大白的博客
11-01 1171
后端：Spring、Spring Boot-实例化Bean&依赖注入(DI)
spring boot 3.x 整合Swagger3
小趴菜不能喝的博客
10-30 371
主机名:端口/swagger-ui/index.html,我这里访问。
信息学科平台系统构建：Spring Boot框架深度解析
2401_85341950的博客
11-02 725
4系统概要设计 4.1概述 本系统采用B/S结构(Browser/Server,浏览器/服务器结构)和基于Web服务两种模式，是一个适用于Internet环境下的模型结构。只要用户能连上Internet,便可以在任何时间、任何地点使用。系统工作原理图如图4-1所示： 图4-1系统工作原理图 4.2系统结构 本系统是基于B/S架构的网站系统，设计的功能结构图如下图所示： 图4-2功能结构图 4.3.数据库设计 4.3.1数据库实体 概念设计的目标是设计出反映某个组织部门信息需求的数据库系统概念模式，数据库系统
Java项目实战II基于spring boot的个人博客系统的设计与实现（开发文档+数据库+源码）
最新发布
2401_86524610的博客
11-03 139
在信息爆炸的时代，个人博客成为了人们分享知识、交流思想的重要平台。一个功能完善、易于维护的个人博客系统，不仅能够满足博主的创作需求，还能吸引并留住读者。基于Spring Boot的个人博客系统，正是为了应对这一需求而设计的。该系统利用Spring Boot框架的简洁性和高效性，结合前端技术，构建了一个集文章发布、评论互动、用户管理等功能于一体的博客平台。通过该系统，博主可以轻松地发布和编辑文章，管理个人资料和博客设置；读者则可以浏览文章、发表评论、关注博主等。
Java实现前后端分离通用权限系统
资源摘要信息:"九、前后端分离通用权限系统（9）gansu-system-front(9).zip" 在当前的IT行业中，前后端分离已成为一种主流的开发模式，它具有诸多优点，比如提高了开发效率、增强了系统的可维护性和可扩展性。本...
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包

打赏作者

Daniel521-Spark

你的鼓励将是我创作的最大动力

¥1 ¥2 ¥4 ¥6 ¥10 ¥20
扫码支付：¥1
获取中
扫码支付

您的余额不足，请更换扫码支付或充值

打赏作者

实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

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

余额充值