尚硅谷java项目＜云尚办公系统＞超详细(三)角色管理前端环境搭建

怼烎@ 2024-04-29 19:08 8阅读 0赞

### **一、前端框架** ###

#### **1、vue-element-admin**  ####

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

**功能：**[https://panjiachen.github.io/vue-element-admin-site/zh/guide/\#][https_panjiachen.github.io_vue-element-admin-site_zh_guide]功能

**GitHub地址：**[https://github.com/PanJiaChen/vue-element-admin][https_github.com_PanJiaChen_vue-element-admin]

**项目在线预览：**[https://panjiachen.gitee.io/vue-element-admin][https_panjiachen.gitee.io_vue-element-admin]

#### **2、vue-admin-template** ####

##### 2.1、简介 #####

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

**GitHub地址：**[https://github.com/PanJiaChen/vue-admin-template][https_github.com_PanJiaChen_vue-admin-template]

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

##### 2.2、安装 #####

#修改项目名称 vue-admin-template 改为 guigu-oa-admin
    # 解压压缩包
    # 进入目录
    cd guigu-oa-admin
    # 安装依赖
    npm install
     # 启动。执行后，浏览器自动弹出并访问http://localhost:9528/
    npm run dev

![966079828121078410bbd40a1a4b9f66.png][]

##### 2.3、源码目录结构 #####

##### 2.4、实现登录&退出登录 #####

###### **2.4.1、vue.config.js (guigu-oa-admin目录下)** ######

*  注释掉mock接口配置

*  配置代理转发请求到目标接口

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

###### **2.4.2、src/utils/request.js** ######

请求自动携带token, 且请求头名称为 token

const token = store.getters.token
    if (token) {
      // let each request carry token
      // ['X-Token'] is a custom headers key
      // please modify it according to the actual situation
      // config.headers['X-Token'] = getToken()
      config.headers['token'] = token
    }

if (res.code !== 200) {
            Message({
              message: res.message || 'Error',
              type: 'error',
              duration: 5 * 1000
            })
          }

###### **2.4.3、src/api/user.js** ######

import request from '@/utils/request'
    
    export function login(data) {
      return request({
        url: '/admin/system/index/login',
        method: 'post',
        data
      })
    }
    
    export function getInfo(token) {
      return request({
        url: '/admin/system/index/info',
        method: 'get',
        params: { token }
      })
    }
    
    export function logout() {
      return request({
        url: '/admin/system/index/logout',
        method: 'post'
      })
    }

![5d2412418ebf86c120cc65bcf66025a7.png][]

###### **2.4.4、服务器端增加接口(service-oa模块)** ######

package com.atguigu.auth.controller;
    
    import com.atguigu.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;
    
    /**
     * <p>
     * 后台登录登出    前端guigu-oa-admin    src/api/user.js
     * </p>
     */
    @Api(tags = "后台登录管理")
    @RestController
    @RequestMapping("/admin/system/index")
    public class IndexController {
    
    
        /**
         * 登录
         * @return
         */
        @PostMapping("login")
        public Result login() {
            Map<String, Object> map = new HashMap<>();
            map.put("token","admin");
            return Result.ok(map);
        }
        /**
         * 获取用户信息
         * @return
         */
        @GetMapping("info")
        public Result info() {
            Map<String, Object> map = new HashMap<>();
            map.put("roles","[admin]");
            map.put("name","admin");
            map.put("avatar","https://oss.aliyuncs.com/aliyun_id_photo_bucket/default_handsome.jpg");
            return Result.ok(map);
        }
        /**
         * 退出
         * @return
         */
        @PostMapping("logout")
        public Result logout(){
            return Result.ok();
        }
    
    }

###### **2.4.5、src/store/modules/user.js** ######

不用指定token参数,就是state.token删了

![60668090bd3889d78191d6868f064cad.png][]

getInfo({ commit, state }) {
      return new Promise((resolve, reject) => {
        getInfo().then(response => {
          const { data } = response
    
          if (!data) {
            return reject('Verification failed, please Login again.')
          }
    
          const { name, avatar } = data
    
          commit('SET_NAME', name)
          commit('SET_AVATAR', avatar)
          resolve(data)
        }).catch(error => {
          reject(error)
        })
      })
    },

###### **2.4.6、src/views/login/index.vue** ######

更改页面标题,

<div class="title-container">
      <h3 class="title">硅谷通用权限系统</h3>
    </div>

用户名检查只检查长度 ,覆盖原有的

const validateUsername = (rule, value, callback) => {
      if (value.length<5) {
        callback(new Error('Please enter the correct user name'))
      } else {
        callback()
      }
    }
    const validatePassword = (rule, value, callback) => {
      if (value.length < 6) {
        callback(new Error('The password can not be less than 6 digits'))
      } else {
        callback()
      }
    }

###### **2.4.7、src/router/index.js** ######

删除多余路由,除了以下这个,剩下的注释或者删除

###### **2.4.8、测试登录** ######

### **二、角色列表** ###

#### **1、修改路由** ####

**修改 src/router/index.js 文件，重新定义constantRoutes**

export const constantRoutes = [
      {
        path: '/login',
        component: () => import('@/views/login/index'),
        hidden: true
      },
    
      {
        path: '/404',
        component: () => import('@/views/404'),
        hidden: true
      },
    
      {
        path: '/',
        component: Layout,
        redirect: '/dashboard',
        children: [
          {
            path: 'dashboard',
            name: 'Dashboard',
            component: () => import('@/views/dashboard/index'),
            meta: { title: 'Dashboard', icon: 'dashboard' }
          }
        ]
      },
    
    
      {
        path: '/system',
        component: Layout,
        meta: {
          title: '系统管理',
          icon: 'el-icon-s-tools'
        },
        alwaysShow: true,
        children: [
          {
            path: 'sysRole',
            component: () => import('@/views/system/sysRole/list'),
            meta: {
              title: '角色管理',
              icon: 'el-icon-s-help'
            },
          }
        ]
      },
      // 404 page must be placed at the end !!!
      { path: '*', redirect: '/404', hidden: true }
    ]

#### **2、创建vue组件** ####

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

**创建文件夹：system/sysRole**

**创建文件：list.vue**

#### **3、定义api**  ####

**创建文件 src/api/system/sysRole.js**

/*
    角色管理相关的API请求函数
    */
    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
        })
      }
    }

#### **4、初始化vue组件** ####

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

<template>
      <div class="app-container">
        角色列表
      </div>
    </template>
    <script>
    import api from '@/api/system/sysRole'
    export default {
      // 定义数据模型
      data() {
        return {
        }
      },
      // 页面渲染成功后获取数据
      created() {
        this.fetchData()
      },
      // 定义方法
      methods: {
        fetchData() {
        }
      }
    }
    </script>

#### **5、定义data** ####

// 定义数据模型
      data() {
        return {
          list: [], // 列表
          total: 0, // 总记录数
          page: 1, // 页码
          limit: 10, // 每页记录数
          searchObj: {}, // 查询条件
          multipleSelection: []// 批量删除选中的记录列表
        }
      },

#### **6、定义methods** ####

methods: {
        fetchData(current=1) {
          this.page = current
          // 调用api
          api.getPageList(this.page, this.limit, this.searchObj).then(response => {
            this.list = response.data.records
            this.total = response.data.total
          })
        },
      }

#### **7、表格渲染** ####

<div class="app-container">
        
        <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 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>

#### **8、分页组件** ####

<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"
    />

#### **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" :loading="loading" @click="fetchData()">搜索</el-button>
              <el-button icon="el-icon-refresh" size="mini" @click="resetData">重置</el-button>
            </el-row>
          </el-form>
        </div>

**分页和清空方法**

// 重置表单
    resetData() {
        console.log('重置查询表单')
        this.searchObj = {}
        this.fetchData()
    }

### **三、角色删除** ###

#### **1、定义api** ####

**src/api/system/sysRole.js**

removeById(id) {
      return request({
        url: `${api_name}/remove/${id}`,
        method: 'delete'
      })
    }

#### **2、定义methods** ####

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

使用MessageBox 弹框组件

// 根据id删除数据
    removeDataById(id) {
        // debugger
        this.$confirm('此操作将永久删除该记录, 是否继续?', '提示', {
            confirmButtonText: '确定',
            cancelButtonText: '取消',
            type: 'warning'
        }).then(() => { // promise
            // 点击确定，远程调用ajax
            return api.removeById(id)
        }).then((response) => {
            this.fetchData(this.page)
            this.$message.success(response.message || '删除成功')
        })
    }

### **四、角色添加** ###

#### **1、定义api** ####

**src/api/system/sysRole.js**

save(role) {
      return request({
        url: `${api_name}/save`,
        method: 'post',
        data: role
      })
    }

#### **2、定义data** ####

export default {
      // 定义数据模型
      data() {
        return {
          list: [], // 讲师列表
          total: 0, // 总记录数
          page: 1, // 页码
          limit: 10, // 每页记录数
          searchObj: {}, // 查询条件
          multipleSelection: [],// 批量删除选中的记录列表
    
          dialogVisible: false,
          sysRole: {},
          saveBtnDisabled: false
        }
      },
      ...
    }

#### **3、定义添加按钮** ####

**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>

#### **4、定义弹出层** ####

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

表格最下面添加弹出层

<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"/>
            </el-form-item>
            <el-form-item label="角色编码">
              <el-input v-model="sysRole.roleCode"/>
            </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>

#### **5、实现功能** ####

add(){
      this.dialogVisible = true
    },
    
    saveOrUpdate() {
      this.saveBtnDisabled = true // 防止表单重复提交
      if (!this.sysRole.id) {
        this.saveData()
      } else {
        this.updateData()
      }
    },
    
    // 新增
    saveData() {
      api.save(this.sysRole).then(response => {
        this.$message.success(response.message || '操作成功')
        this.dialogVisible = false
        this.fetchData(this.page)
      })
    }

### **五、角色修改与数据回显** ###

#### **1、定义api** ####

**src/api/system/sysRole.js**

getById(id) {
      return request({
        url: `${api_name}/get/${id}`,
        method: 'get'
      })
    },
    
    updateById(role) {
      return request({
        url: `${api_name}/update`,
        method: 'put',
        data: role
      })
    }

#### **2、组件中调用api** ####

**methods中定义fetchDataById**

edit(id) {
      this.dialogVisible = true
      this.fetchDataById(id)
    },
    
    fetchDataById(id) {
      api.getById(id).then(response => {
        this.sysRole = response.data
      })
    }

#### **3、修改提交** ####

updateData() {
      api.updateById(this.sysRole).then(response => {
        this.$message.success(response.message || '操作成功')
        this.dialogVisible = false
        this.fetchData(this.page)
      })
    }

### **六、批量删除** ###

#### **1、定义api** ####

**src/api/system/sysRole.js**

batchRemove(idList) {
      return request({
        url: `${api_name}/batchRemove`,
        method: `delete`,
        data: idList
      })
    },

#### **2、初始化组件** ####

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

在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"/>

#### **3、实现功能** ####

**data定义数据**

multipleSelection: []// 批量删除选中的记录列表

**完善方法**

// 当多选选项发生变化的时候调用
    handleSelectionChange(selection) {
      console.log(selection)
      this.multipleSelection = selection
    },
    // 批量删除
    batchRemove() {
      if (this.multipleSelection.length === 0) {
        this.$message.warning('请选择要删除的记录！')
        return
      }
      this.$confirm('此操作将永久删除该记录, 是否继续?', '提示', {
        confirmButtonText: '确定',
        cancelButtonText: '取消',
        type: 'warning'
      }).then(() => {
        // 点击确定，远程调用ajax
        // 遍历selection，将id取出放入id列表
        var idList = []
        this.multipleSelection.forEach(item => {
          idList.push(item.id)
        })
        // 调用api
        return api.batchRemove(idList)
      }).then((response) => {
        this.fetchData()
        this.$message.success(response.message)
      })
    }

[https_panjiachen.github.io_vue-element-admin-site_zh_guide]: https://panjiachen.github.io/vue-element-admin-site/zh/guide/#
[https_github.com_PanJiaChen_vue-element-admin]: https://github.com/PanJiaChen/vue-element-admin
[https_panjiachen.gitee.io_vue-element-admin]: https://panjiachen.gitee.io/vue-element-admin/#/login?redirect=%2Fdashboard
[https_github.com_PanJiaChen_vue-admin-template]: https://github.com/PanJiaChen/vue-admin-template
[966079828121078410bbd40a1a4b9f66.png]: https://image.dandelioncloud.cn/pgy_files/images/2024/04/29/a9bd1bf2463e4b69a9ebe39ee56e9a40.png
[5d2412418ebf86c120cc65bcf66025a7.png]: https://image.dandelioncloud.cn/pgy_files/images/2024/04/29/d3b05f995d97411ea47373feb52101d6.png
[60668090bd3889d78191d6868f064cad.png]: https://image.dandelioncloud.cn/pgy_files/images/2024/04/29/b861356e3f194c3790949788a597a840.png