尚硅谷通用权限管理系统 - 角色管理前端

1、搭建前端工程

1、下载vue-admin-template

搭建前端工程需要以下环境

• nodejs
• vue

如果上述都下载安装好了，就可以开始了。

使用的前端框架是vue-element-admin，是基于vue并使用了ui组件库elementui的后台管理系统模板。

提供了一整套的后台管理系统的前端ui模板，这里教程中使用的是极简版的模板。

github仓库： vue-admin-template仓库

或者使用git命令clone，前提是安装了git。

2、解压vue-admin-template并启动

如果是下载的vue-admin-template的话，需要进行解压到一个目录里面。

随后使用vscode编辑器的方式打开这个工作区，之后再vscode打开终端。

使用npm install命令，进行前端依赖的安装.

安装完成之后即可使用npm run dev，启动工程。

启动成功后，终端显示如下，两个地址便可以进入。

2、前端工程目录结构

上图是大致工程结构。

mock目录是存放的模拟数据，因为并没有后端所以人家做了数据模拟。

node_modules目录是我们依赖所存放的目录

src目录中是我们的主要写代码的目录，

在src内部，

api目录是请求接口的封装，assets目录是静态资源文件，里面放了图片之类的资源。

components目录是相关组件的封装，icons是图标文件存放的目录。

layout目录是布局存放的目录，router目录里面是路由的目录

store目录是仓库，styles是样式文件

utils是工具存放的都是一些工具js文件目录，views是视图页面的目录内部都是页面文件。

App.vue是主页面，路由的出口。

main.js是主入口文件

3、改造框架中的登录功能（了解流程）

1、后端编写与前端相同的模拟数据接口

通过f12开发者工具，抓取登录时候的请求，我们能发现一下两个请求。

login: 登录

info: 获取相关信息

我们在后端根据模拟的数据，编写我们的接口。

首先创建Controller

package cn.chenmanman.system.controller;

import cn.chenmanman.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.Arrays;
import java.util.HashMap;
import java.util.Map;

@Api(tags = "登录相关接口")
@RestController
@RequestMapping("/admin/index")
public class IndexController {
    @PostMapping("/login")
    public Result login(){
        Map<String, Object> map = new HashMap<String, Object>();
        map.put("token", "admin-token");
        return Result.ok(map);
    }

    @GetMapping("/info")
    public Result info(){
        Map<String, Object> map = new HashMap<String, Object>();
        map.put("roles", Arrays.asList("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);
    }
}

测试api

2、配置后端接口Ip+port

在vue.config.js中修改

修改为:

这里修改之后记得重启一下。

3、修改utils目录中的request.js文件

这里面有两个拦截器，需要修改的是处理响应的拦截器。

修改为200，因为我们接口的响应的状态码是200成功

4、修改登录接口的路径

这里要和我们的接口保持一致，即可，我们还缺少一个注销的接口。

只需要这样写即可。

4、编写角色管理页面前端

1、创建路由和页面

在src/router目录下的index.js就是配置路由的位置，打开之后第58行开始是修改为：

这里面component后面Import的就是对应的视图页面，需要创建它。

在src/views中创建对应目录及页面文件。

内容如下

现在效果就是下面的情况

之后给路由下面多余的部分，给清理掉。

2、实现表格显示角色数据功能

首先需要编写对于后台接口的请求，需要在api目录创建对应文件组织在一起。

编写代码如下：

import request from '@/utils/request'
const BASE_AURL = '/admin/system/sysRole'

/*
  currentPage: 当前页码
  limit: 每页数据条数
  params: 查询条件
  分页查询
*/
export function list(currentPage, limit, params) {
  return request({
    url: `${BASE_AURL}/${currentPage}/${limit}`,
    method: 'GET',
    params
  })
}

然后再role的list.vue中编写页面显示效果

<template>
  <div class="app-container">
    <el-form :inline="true" :model="formInline" class="demo-form-inline">
        <el-form-item label="角色名称">
            <el-input v-model="params.roleName"  placeholder="角色名称"></el-input>
        </el-form-item>
        <el-form-item>
            <el-button type="primary" @click="getRoleData()">查询</el-button>
            <el-button @click="resetForm()">重置</el-button>
        </el-form-item>
    </el-form>
    <div class="controller-btns">
        <el-button type="primary" @click="handleAddOrSave">添加</el-button>
        <el-button type="warning" @click="handleBatchRemove">批量删除</el-button>
    </div>
    <el-table
      :data="roleData"
      border
      style="width: 100%"
      @selection-change="handleSelectionChange"
    >
      <el-table-column
        type="selection"
        width="50"
      />
      <el-table-column
        type="index"
        label="序号"
        width="50"
      />

      <el-table-column
        prop="roleName"
        label="角色名称"
      />

      <el-table-column
        label="角色编码"
        prop="roleCode"
      />
      <el-table-column
        label="角色介绍"
        prop="description"
      />
      <el-table-column
        label="创建时间"
        prop="createTime"
      />
      <el-table-column
        label="更新时间"
        prop="updateTime"
      />

      <el-table-column label="操作">
        <template slot-scope="scope">
          <el-button
            size="mini"
            @click="handleAddOrSave(scope.$index, scope.row)">编辑</el-button>
          <el-button
            size="mini"
            type="danger"
            @click="handleDelete(scope.$index, scope.row)">删除</el-button>
        </template>
      </el-table-column>
    </el-table>
    <div class="page-pagenation">
        <el-pagination
        @size-change="getRoleData"
        @current-change="getRoleData"
        :current-page="currentPage"
        :page-size="limit"
        layout="prev, pager, next"
        :total="total">
        </el-pagination>
    </div>
    <el-dialog :title="dialogTitle" :visible.sync="dialogFormVisible">
      <el-form :model="roleForm">
        <el-form-item label="角色名称" :label-width="formLabelWidth">
          <el-input v-model="roleForm.roleName" autocomplete="off" />
        </el-form-item>
        <el-form-item label="角色代码" :label-width="formLabelWidth">
          <el-input v-model="roleForm.roleCode" autocomplete="off" />
        </el-form-item>
        <el-form-item label="角色介绍" :label-width="formLabelWidth">
          <el-input v-model="roleForm.description" autocomplete="off" />
        </el-form-item>
      </el-form>
      <div slot="footer" class="dialog-footer">
        <el-button @click="dialogFormVisible = false">取 消</el-button>
        <el-button type="primary" @click="AddOrSave">确 定</el-button>
      </div>
    </el-dialog>
  </div>
</template>

<script>
import { list, removeById, removeBatch, getRoleById, updateRole, addRole } from '@/api/system/sysRole/sysRole'

export default {
  name: 'SysRole',
  data() {
    return {
      roleData: [],
      page: 1,
      maxPage: undefined,
      limit: 5,
      total: undefined,
      params: {},
      selectIds: [],
      dialogFormVisible: false,
      dialogTitle: undefined,
      roleForm: {
        roleName: undefined,
        roleCode: undefined,
        description: undefined
      }
    }
  },
  created() {
    this.getRoleData()
  },
  methods: {
    /*
      获取角色数据
    */
    getRoleData(pageNum = 1) {
      this.page = pageNum
      list(this.page, this.limit, this.params).then(
        res => {
          if (res.code === 200) {
            this.roleData = res.data.records
            this.total = res.data.total
            this.maxPage = res.data.pages
          }
        }
      )
    },
    resetForm() {
      this.params = {}
      this.getRoleData()
    },
    handleDelete(index, row) {
      this.$confirm('此操作将删除该角色, 是否继续?', '提示', {
        confirmButtonText: '确定',
        cancelButtonText: '取消',
        type: 'warning'
      }).then(() => {
        removeById(row.id).then(
          res => {
            this.$message({
              type: 'success',
              message: '删除成功!'
            })
            this.getRoleData()
          }
        )
      })
    },
    handleSelectionChange(selection) {
      this.selectIds = selection.map((data) => {
        return data.id
      })
    },
    handleBatchRemove() {
      // 判断是否有选择要删的角色
      if (!this.selectIds.length) {
        this.$message.warning('请先选择您要删除的角色')
        return
      }
      // 询问是否真的要删除
      this.$confirm('此操作将删除选中, 是否继续?', '提示', {
        confirmButtonText: '确定',
        cancelButtonText: '取消',
        type: 'warning'
      }).then(() => {
        removeBatch(this.selectIds).then(
          res => {
            this.$message.success('删除成功！！！')
            this.getRoleData()
          }
        )
      })
    },
    resetRoleForm() {
      this.roleForm = {
        roleName: '',
        roleCode: '',
        description: ''
      }
    },
    handleAddRole() {
      this.dialogTitle = '添加角色'
      this.dialogFormVisible = true
      // 重置表单
      this.resetRoleForm()
    },
    handleAddOrSave(index, row) {
      if (row === undefined) {
        this.dialogTitle = '添加角色'
      } else {
        this.dialogTitle = '修改角色'
        // 数据回显
        getRoleById(row.id).then(
          res => {
            this.roleForm.id = row.id
            this.roleForm.roleName = row.roleName
            this.roleForm.roleCode = row.roleCode
            this.roleForm.description = row.description
          }
        )
      }
      this.dialogFormVisible = true
      // 重置表单
      this.resetRoleForm()
    },
    AddOrSave() {
      if (this.roleForm.id === undefined) {
        addRole(this.roleForm).then(
          res => {
            this.$message.success('添加新角色成功!')
          }
        )
      } else {
        updateRole(this.roleForm).then(
          res => {
            this.$message.success('修改角色成功!')
          }
        )
      }
      this.dialogFormVisible = false
      this.getRoleData()
    }
  }
}
</script>

<style scoped>
.page-pagenation{
    margin-top: 20px;
    text-align: center;
}

.controller-btns {
    margin-bottom: 5px;
}
</style>

import request from '@/utils/request'
const BASE_AURL = '/admin/system/sysRole'

/*
  currentPage: 当前页码
  limit: 每页数据条数
  params: 查询条件
  分页查询
*/
export function list(page, limit, params) {
  return request({
    url: `${BASE_AURL}/${page}/${limit}`,
    method: 'GET',
    params
  })
}

export function removeBatch(ids) {
  return request({
    url: `${BASE_AURL}/deleteBatch`,
    method: 'delete',
    data: ids
  })
}

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

export function getRoleById(id) {
  return request({
    url: `${BASE_AURL}/${id}`,
    method: 'get'
  })
}

export function updateRole(role) {
  return request({
    url: `${BASE_AURL}/update`,
    method: 'post',
    data: role
  })
}

export function addRole(role) {
  return request({
    url: `${BASE_AURL}`,
    method: 'post',
    data: role
  })
}

完成!