devbox
小舞很执着
这个屌丝很懒，什么也没留下！
关注作者
热门标签
热门文章
当前位置:   article > 正文

1-前后端分离的权限脚手架项目_程序员云翼

作者：小舞很执着 | 2024-06-30 22:02:37

赞

踩

程序员云翼

1.项目介绍和后台项目搭建

本项目是基于springboot + vue的前后端分离权限项目，适合做毕设项目和个人学习，手把手搭建。

后端技术栈：springboot，MySQL，redis，Maven

前端技术栈：vue，Vuex,Vue-Router,Echarts,elementUI

通用的权限管理项目，可以在本系统的基础上开发大部分的管理系统。

视频链接：1.项目介绍和后台搭建_哔哩哔哩_bilibili

导图：

创建springboot项目，如视频操作

pom.xml文件

  1. <?xml version="1.0" encoding="UTF-8"?>
  2. <project xmlns="http://maven.apache.org/POM/4.0.0" xmlns:xsi="http://www.w3.org/2001/XMLSchema-instance"
  3.          xsi:schemaLocation="http://maven.apache.org/POM/4.0.0 https://maven.apache.org/xsd/maven-4.0.0.xsd">
  4.     <modelVersion>4.0.0</modelVersion>
  5.     <parent>
  6.         <groupId>org.springframework.boot</groupId>
  7.         <artifactId>spring-boot-starter-parent</artifactId>
  8.         <version>2.5.9</version>
  9.         <relativePath/> <!-- lookup parent from repository -->
  10.     </parent>
  11.     <groupId>com.example</groupId>
  12.     <artifactId>base-authority</artifactId>
  13.     <version>0.0.1-SNAPSHOT</version>
  14.     <name>base-authority</name>
  15.     <description>Demo project for Spring Boot</description>
  16.     <properties>
  17.         <java.version>1.8</java.version>
  18.     </properties>
  19.     <dependencies>
  20.         <dependency>
  21.             <groupId>org.springframework.boot</groupId>
  22.             <artifactId>spring-boot-starter</artifactId>
  23.         </dependency>
  24.  
  25.         <dependency>
  26.             <groupId>org.springframework.boot</groupId>
  27.             <artifactId>spring-boot-starter-test</artifactId>
  28.             <scope>test</scope>
  29.         </dependency>
  30.  
  31.         <!--        swagger-->
  32.         <dependency>
  33.             <groupId>io.springfox</groupId>
  34.             <artifactId>springfox-swagger2</artifactId>
  35.             <version>2.9.2</version>
  36.         </dependency>
  37.         <dependency>
  38.             <groupId>io.springfox</groupId>
  39.             <artifactId>springfox-swagger-ui</artifactId>
  40.             <version>2.9.2</version>
  41.         </dependency>
  42.  
  43.  
  44.         <dependency>
  45.             <groupId>org.springframework.boot</groupId>
  46.             <artifactId>spring-boot-starter-web</artifactId>
  47.         </dependency>
  48.  
  49.  
  50.         <dependency>
  51.             <groupId>mysql</groupId>
  52.             <artifactId>mysql-connector-java</artifactId>
  53.             <scope>runtime</scope>
  54.         </dependency>
  55.         <dependency>
  56.             <groupId>org.projectlombok</groupId>
  57.             <artifactId>lombok</artifactId>
  58.             <optional>true</optional>
  59.         </dependency>
  60.         <!-- mybatis-plus -->
  61.         <dependency>
  62.             <groupId>com.baomidou</groupId>
  63.             <artifactId>mybatis-plus-boot-starter</artifactId>
  64.             <version>3.5.1</version>
  65.         </dependency>
  66.         <dependency>
  67.             <groupId>org.mybatis.spring.boot</groupId>
  68.             <artifactId>mybatis-spring-boot-starter</artifactId>
  69.             <version>2.2.1</version>
  70.         </dependency>
  71.  
  72.         <!--redis-->
  73.         <dependency>
  74.             <groupId>org.springframework.boot</groupId>
  75.             <artifactId>spring-boot-starter-data-redis</artifactId>
  76.         </dependency>
  77.         <!--  JSON的依赖      -->
  78.         <dependency>
  79.             <groupId>com.alibaba</groupId>
  80.             <artifactId>fastjson</artifactId>
  81.             <version>1.2.69</version>
  82.         </dependency>
  83.  
  84.         <dependency>
  85.             <groupId>commons-codec</groupId>
  86.             <artifactId>commons-codec</artifactId>
  87.         </dependency>
  88.  
  89.  
  90.         <!-- JWT -->
  91.         <dependency>
  92.             <groupId>com.auth0</groupId>
  93.             <artifactId>java-jwt</artifactId>
  94.             <version>3.10.3</version>
  95.         </dependency>
  96.  
  97.     </dependencies>
  98.  
  99.     <build>
  100.         <plugins>
  101.             <plugin>
  102.                 <groupId>org.springframework.boot</groupId>
  103.                 <artifactId>spring-boot-maven-plugin</artifactId>
  104.             </plugin>
  105.         </plugins>
  106.     </build>
  107.  
  108. </project>

 创建数据库，在创建sys_user表

  1. CREATE TABLE `sys_user` (
  2.   `id` int(11) NOT NULL AUTO_INCREMENT COMMENT 'id主键',
  3.   `username` varchar(255) DEFAULT NULL COMMENT '用户名',
  4.   `password` varchar(255) DEFAULT NULL COMMENT '密码',
  5.   `nickname` varchar(255) DEFAULT NULL COMMENT '昵称',
  6.   `address` varchar(255) DEFAULT NULL COMMENT '地址',
  7.   `email` varchar(255) DEFAULT NULL COMMENT '邮箱',
  8.   `phone` varchar(18) DEFAULT NULL COMMENT '联系方式',
  9.   `role_id` int(11) DEFAULT NULL COMMENT '角色id',
  10.   `create_time` timestamp NULL DEFAULT CURRENT_TIMESTAMP COMMENT '创建时间',
  11.   `header_url` varchar(255) DEFAULT NULL COMMENT '用户头像',
  12.   PRIMARY KEY (`id`)
  13. ) ENGINE=InnoDB AUTO_INCREMENT=31 DEFAULT CHARSET=utf8mb4;

 创建user的后端代码，entity,mapper,service,controller层代码,如视频操作，代码太多就不复制粘贴了。

2.前端项目首页搭建

效果图 

Aside.vue

  1. <template>
  2.   <el-menu default-active="1-4-1"
  3.            class="el-menu-vertical-demo"
  4.            style="min-height:100%;overflow-x: hidden;"
  5.            text-color="#fff"
  6.            active-text-color="#ffd046"
  7.            background-color="rgb(48,65,86)"
  8.            :collapse-transition="false"
  9.            router
  10.            :collapse="isCollapse">
  11.     <div style="height: 60px;line-height: 60px;text-align: center">
  12.       <img src="../assets/logo.png" style="width:30px;position: relative;margin-right: 5px;top:6px">
  13.       <b style="color:white" v-show="logoTextShow">后台管理系统</b>
  14.     </div>
  15.     <el-submenu index="1">
  16.       <template slot="title">
  17.         <i class="el-icon-location"></i>
  18.         <span slot="title">导航一</span>
  19.       </template>
  20.       <el-menu-item-group>
  21.         <span slot="title">分组一</span>
  22.         <el-menu-item index="/user">用户管理</el-menu-item>
  23.         <el-menu-item index="/role">角色管理</el-menu-item>
  24.       </el-menu-item-group>
  25.       <el-menu-item-group title="分组2">
  26.         <el-menu-item index="1-3">选项3</el-menu-item>
  27.       </el-menu-item-group>
  28.       <el-submenu index="1-4">
  29.         <span slot="title">选项4</span>
  30.         <el-menu-item index="1-4-1">选项1</el-menu-item>
  31.       </el-submenu>
  32.     </el-submenu>
  33.     <el-menu-item index="2">
  34.       <i class="el-icon-menu"></i>
  35.       <span slot="title">导航二</span>
  36.     </el-menu-item>
  37.   </el-menu>
  38. </template>
  39.  
  40. <script>
  41. export default {
  42.   name: "Aside",
  43.   props:{
  44.     isCollapse:Boolean,
  45.     logoTextShow:Boolean
  46.   }
  47. }
  48. </script>
  49.  
  50. <style scoped>
  51. .el-menu-vertical-demo:not(.el-menu--collapse) {
  52.   width: 200px;
  53.   min-height: 400px;
  54. }
  55. </style>

Header.vue

  1. <template>
  2.   <div style="line-height: 60px;display: flex">
  3.     <div style="flex: 1;font-size: 30px">
  4.       <span :class="collapseBtnClass" style="cursor: pointer" @click="collapse"></span>
  5.       <el-breadcrumb separator="/" style="display: inline-block;margin-left:10px;position: absolute;top:22px" >
  6.         <el-breadcrumb-item :to="{ path: '/' }">首页</el-breadcrumb-item>
  7.         <el-breadcrumb-item><b>{{currentPathName}}</b></el-breadcrumb-item>
  8.       </el-breadcrumb>
  9.     </div>
  10.  
  11.  
  12.     <el-dropdown style="width: 150px;cursor: pointer;text-align: center">
  13.       <div style="display: inline-block">
  14.         <img src="../assets/logo.png" style="width:65px;height:45px;border-radius: 50%;position: relative;top:10px;right:8px"/>
  15.         <span>张三</span><i class="el-icon-arrow-down" style="margin-left:5px"></i>
  16.       </div>
  17.  
  18.       <el-dropdown-menu slot="dropdown" style="width: 100px;text-align: center;text-decoration: none">
  19.         <el-dropdown-item style="font-size: 15px;padding:5px 0">
  20.           <router-link to="/person" style="text-decoration: none;color: #606266">个人信息</router-link>
  21.         </el-dropdown-item>
  22.         <el-dropdown-item style="font-size: 15px;padding:5px 0">
  23.           <router-link to="/person" style="text-decoration: none;color: #606266">修改密码</router-link>
  24.         </el-dropdown-item>
  25.         <el-dropdown-item style="font-size: 15px;padding:5px 0">
  26.           <div style="text-decoration: none">退出</div>
  27.         </el-dropdown-item>
  28.       </el-dropdown-menu>
  29.     </el-dropdown>
  30.  
  31.   </div>
  32. </template>
  33.  
  34. <script>
  35. export default {
  36.   name: "Header",
  37.   props:{
  38.     collapseBtnClass:String
  39.   },
  40.   computed:{
  41.     currentPathName(){
  42.       return this.$store.state.currentPathName;
  43.     }
  44.   },
  45.   methods:{
  46.     collapse(){
  47.       this.$emit('collapse')
  48.     }
  49.   }
  50. }
  51. </script>
  52.  
  53. <style scoped>
  54.  
  55. </style>

Manage.vue

  1. <template>
  2.   <el-container style="min-height: 100vh">
  3.     <el-aside :width="sideWidth + 'px'">
  4.      <Aside :isCollapse="isCollapse" :logoTextShow="logoTextShow"></Aside>
  5.     </el-aside>
  6.  
  7.     <el-container>
  8.       <el-header style="border-bottom: 1px solid #ccc">
  9.        <Header @collapse="collapse" :collapseBtnClass="collapseBtnClass"></Header>
  10.       </el-header>
  11.  
  12.       <el-main>
  13.         <router-view></router-view>
  14.       </el-main>
  15.     </el-container>
  16.   </el-container>
  17. </template>
  18.  
  19. <script>
  20. import Aside from "@/components/Aside";
  21. import Header from "@/components/Header";
  22. export default {
  23.   name: "Manage",
  24.   components:{
  25.     Aside,Header
  26.   },
  27.   data(){
  28.     return{
  29.       isCollapse:false,
  30.       logoTextShow:true,
  31.       collapseBtnClass:'el-icon-s-fold',
  32.       sideWidth:200
  33.     }
  34.   },
  35.   methods:{
  36.     collapse(){
  37.       this.isCollapse = !this.isCollapse;
  38.       if(this.isCollapse){
  39.         //收缩
  40.         this.sideWidth = 64;
  41.         this.logoTextShow = false;
  42.         this.collapseBtnClass = 'el-icon-s-unfold';
  43.       }else{
  44.         this.sideWidth = 200;
  45.         this.logoTextShow = true;
  46.         this.collapseBtnClass = 'el-icon-s-fold';
  47.       }
  48.     }
  49.   }
  50. }
  51. </script>
  52.  
  53. <style scoped>
  54. /*去掉aside侧边栏的底部滚动条*/
  55. .el-aside::-webkit-scrollbar {
  56.   display: none;
  57.  
  58. }
  59. </style>

VUEX的index.js

  1. import Vue from 'vue'
  2. import Vuex from 'vuex'
  3.  
  4. Vue.use(Vuex)
  5.  
  6. export default new Vuex.Store({
  7.   state: {
  8.     currentPathName:''
  9.   },
  10.   getters: {
  11.   },
  12.   mutations: {
  13.     setPath(state){
  14.       state.currentPathName = localStorage.getItem('currentPathName');
  15.     }
  16.   },
  17.   actions: {
  18.   },
  19.   modules: {
  20.   }
  21. })

Router的index.js

  1. import Vue from 'vue'
  2. import VueRouter from 'vue-router'
  3. import store from '../store'
  4. Vue.use(VueRouter)
  5.  
  6. const routes = [
  7.   {
  8.     path: '/',
  9.     name: 'manage',
  10.     component: () => import(/* webpackChunkName: "about" */ '../views/Manage.vue'),
  11.     children:[
  12.       {
  13.         path: 'user',
  14.         name: '用户管理',
  15.         component: () => import(/* webpackChunkName: "about" */ '../views/User.vue'),
  16.       },
  17.       {
  18.         path: 'role',
  19.         name: '角色管理',
  20.         component: () => import(/* webpackChunkName: "about" */ '../views/Role.vue'),
  21.       }
  22.     ]
  23.   }
  24. ]
  25.  
  26. const router = new VueRouter({
  27.   mode: 'history',
  28.   base: process.env.BASE_URL,
  29.   routes
  30. })
  31.  
  32. router.beforeEach((to,from,next) => {
  33.   localStorage.setItem('currentPathName',to.name);
  34.   store.commit('setPath')
  35.   next();
  36. })
  37. export default router

3.用户管理

补充

sys_user表添加 hearer_url 头像字段

去掉Aside侧边栏的底部滚动条

安装axios

npm install axios -S

 封装axios的请求文件

  1. import axios from 'axios'
  2. import { Notification, MessageBox, Message, Loading } from 'element-ui'
  3. import ElementUI from 'element-ui'
  4. import router from "@/router";
  5.  
  6. const request = axios.create({
  7.     baseURL:'http://localhost:8899/',
  8.     timeout:5000
  9. })
  10.  
  11. request.interceptors.request.use(config => {
  12.     config.headers['Content-Type'] = 'application/json;charset=UTF-8'
  13.     let user = localStorage.getItem("user") ? JSON.parse(localStorage.getItem("user")) : null
  14.     if(user){
  15.         config.headers["token"] = user.token;
  16.     }
  17.     return config;
  18. },error => {
  19.     return Promise.reject(error)
  20. })
  21.  
  22. request.interceptors.response.use(
  23.     response => {
  24.         let res = response.data;
  25.         if(response.config.responseType === 'blob'){
  26.             return res;
  27.         }
  28.         if(typeof res === 'string'){
  29.             res = res ? JSON.parse(res) : res
  30.         }
  31.         // 当权限验证不通过的时候给出提示
  32.         if (res.code === '401') {
  33.             ElementUI.Message({
  34.                 message: res.msg,
  35.                 type: 'error'
  36.             });
  37.             console.log('router.currentRoute.fullPath ')
  38.             console.log(router.currentRoute.fullPath )
  39.             // if (router.currentRoute.fullPath  !== '/login') {
  40.             //     router.push('/login')
  41.             // }
  42.         }
  43.         return res;
  44.     },
  45.     error => {
  46.         if(error.code === '401'){
  47.             router.push("/login")
  48.         }
  49.         Message.error(error)
  50.         return Promise.reject(error);
  51.     }
  52. )
  53.  
  54. export default request

编写User.vue的界面，五部分组成：

1.搜索栏

2.加新增和批量删除按钮

3.table表格

4.新增和编辑的弹出框

5.分页

生命周期介绍
//created：在模板渲染成html前调用，即通常初始化某些属性值，然后再渲染成识图
//mounted：在模板渲染成html后调用，通常初始化页面完成后，再对html的dom节点进行一些需要的操作。

跨域

 当一个请求url的协议、域名、端口三者之间任意一个与当前页面url不同即为跨域。

报错显示：

解决方法：

  1. package com.example.authority.config;
  2.  
  3. import org.springframework.context.annotation.Bean;
  4. import org.springframework.context.annotation.Configuration;
  5. import org.springframework.web.cors.CorsConfiguration;
  6. import org.springframework.web.cors.UrlBasedCorsConfigurationSource;
  7. import org.springframework.web.filter.CorsFilter;
  8.  
  9. @Configuration
  10. public class CorsConfig {
  11.  
  12.     // 当前跨域请求最大有效时长。这里默认1天
  13.     private static final long MAX_AGE = 24 * 60 * 60;
  14.  
  15.     @Bean
  16.     public CorsFilter corsFilter() {
  17.         UrlBasedCorsConfigurationSource source = new UrlBasedCorsConfigurationSource();
  18.         CorsConfiguration corsConfiguration = new CorsConfiguration();
  19.         corsConfiguration.addAllowedOrigin("*"); // 1 设置访问源地址
  20.         corsConfiguration.addAllowedHeader("*"); // 2 设置访问源请求头
  21.         corsConfiguration.addAllowedMethod("*"); // 3 设置访问源请求方法
  22.         corsConfiguration.setMaxAge(MAX_AGE);
  23.         source.registerCorsConfiguration("/**", corsConfiguration); // 4 对接口配置跨域设置
  24.         return new CorsFilter(source);
  25.     }
  26. }
  27.

完成的User.vue页面

  1. <template>
  2.   <div>
  3.     <div>
  4.       <!--      搜索栏-->
  5.       <el-input  style="width: 200px;margin-right: 20px" placeholder="请输入用户名" v-model="username" prefix-icon="el-icon-user"></el-input>
  6.       <el-input  style="width: 200px" placeholder="请输入邮箱" v-model="email" prefix-icon="el-icon-message"></el-input>
  7.       <el-button style="margin-left: 10px;" type="primary" @click="load" class="el-icon-search">搜索</el-button>
  8.       <el-button style="margin-left: 10px;" type="warning" @click="reset" class="el-icon-refresh">重置</el-button>
  9.     </div>
  10.  
  11.     <div style="margin-top:20px;margin-bottom: 20px;">
  12.       <!--      新增。批量删除-->
  13.       <el-button style="margin-right: 10px;" type="success"  class="el-icon-plus" @click="save">新增</el-button>
  14.       <el-popconfirm
  15.           confirm-button-text='确定'
  16.           cancel-button-text='取消'
  17.           icon="el-icon-info"
  18.           icon-color="red"
  19.           title="确定删除这些数据吗？"
  20.           @confirm="deleteBatch"
  21.           @cancel="cancel">
  22.         <el-button slot="reference" type="danger" style="margin-left:5px;" class="el-icon-delete">批量删除</el-button>
  23.       </el-popconfirm>
  24.     </div>
  25.  
  26.     <el-table :data="tableData" border stripe :header-cell-style="getRowClass" @selection-change="handleSelectionChange">
  27.       <el-table-column type="selection" width="55"></el-table-column>
  28.       <el-table-column prop="id" label="id"></el-table-column>
  29.       <el-table-column prop="username" label="用户名"></el-table-column>
  30.       <el-table-column prop="nickname" label="昵称"></el-table-column>
  31.       <el-table-column prop="address" label="地址"></el-table-column>
  32.       <el-table-column prop="email" label="邮箱"></el-table-column>
  33.       <el-table-column prop="phone" label="联系方式"></el-table-column>
  34.       <el-table-column prop="roleId" label="角色"></el-table-column>
  35.       <el-table-column prop="createTime" label="创建时间"></el-table-column>
  36.       <el-table-column prop="headerUrl" label="头像"></el-table-column>
  37.       <el-table-column  label="操作" width="200">
  38.         <template slot-scope="scope">
  39.           <el-button  type="primary"  class="el-icon-edit" @click="handleEdit(scope.row)">编辑</el-button>
  40.           <el-popconfirm
  41.               confirm-button-text='确定'
  42.               cancel-button-text='取消'
  43.               icon="el-icon-info"
  44.               icon-color="red"
  45.               title="确定删除这些数据吗？"
  46.               @confirm="handleDelete(scope.row.id)"
  47.               @cancel="cancel">
  48.             <el-button slot="reference" type="danger" style="margin-left:5px;" class="el-icon-delete">删除</el-button>
  49.           </el-popconfirm>
  50.         </template>
  51.       </el-table-column>
  52.     </el-table>
  53.  
  54.       <div class="block" style="padding:10px 0;align-content: center;margin-left: 30%;margin-top:30px;">
  55.         <el-pagination
  56.             @size-change="handleSizeChange"
  57.             @current-change="handleCurrentChange"
  58.             :current-page="pageNum"
  59.             :page-sizes="[5, 10, 15, 20]"
  60.             :page-size="10"
  61.             layout="total, sizes, prev, pager, next, jumper"
  62.             :total="total">
  63.         </el-pagination>
  64.       </div>
  65.  
  66.     <el-dialog title="收货地址" :visible.sync="dialogFormVisible" width="30%">
  67.       <el-form :model="form">
  68.         <el-form-item label="用户名" :label-width="formLabelWidth">
  69.           <el-input v-model="form.username" autocomplete="off"></el-input>
  70.         </el-form-item>
  71.         <el-form-item label="密码" :label-width="formLabelWidth">
  72.           <el-input v-model="form.password" autocomplete="off" type="password" show-password></el-input>
  73.         </el-form-item>
  74.         <el-form-item label="昵称" :label-width="formLabelWidth">
  75.           <el-input v-model="form.nickname" autocomplete="off"></el-input>
  76.         </el-form-item>
  77.         <el-form-item label="地址" :label-width="formLabelWidth">
  78.           <el-input v-model="form.address" autocomplete="off"></el-input>
  79.         </el-form-item>
  80.         <el-form-item label="邮箱" :label-width="formLabelWidth">
  81.           <el-input v-model="form.email" autocomplete="off"></el-input>
  82.         </el-form-item>
  83.         <el-form-item label="联系方式" :label-width="formLabelWidth">
  84.           <el-input v-model="form.phone" autocomplete="off"></el-input>
  85.         </el-form-item>
  86.       </el-form>
  87.       <div slot="footer" class="dialog-footer">
  88.         <el-button @click="dialogFormVisible = false">取 消</el-button>
  89.         <el-button type="primary" @click="handleAdd">确 定</el-button>
  90.       </div>
  91.     </el-dialog>
  92.  
  93.   </div>
  94. </template>
  95.  
  96. <script>
  97. export default {
  98.   name: "User",
  99.   data(){
  100.     return{
  101.       pageSize:10,
  102.       pageNum:1,
  103.       username:'',
  104.       email:'',
  105.       tableData:[],
  106.       dialogFormVisible:false,
  107.       form:{},
  108.       formLabelWidth: '80px',
  109.       multipleSelection:[],
  110.       total:0
  111.     }
  112.   },
  113.   created() {
  114.     this.load();
  115.   },
  116.   methods:{
  117.     load(){
  118.       this.request.get("/user/findPage",{
  119.         params:{
  120.           pageNum:this.pageNum,
  121.           pageSize:this.pageSize,
  122.           username:this.username,
  123.           email:this.email
  124.         }
  125.       }).then(res => {
  126.         this.tableData = res.data.records;
  127.         this.total = res.data.total;
  128.       })
  129.     },
  130.     getRowClass({rowIndex,columnIndex}){
  131.       if(rowIndex === 0){
  132.         return 'background:#ccc'
  133.       }
  134.     },
  135.     reset(){
  136.       this.email = '';
  137.       this.username = '';
  138.       this.load();
  139.     },
  140.     save(){
  141.       this.dialogFormVisible = true;
  142.       this.form = {};
  143.     },
  144.     handleAdd(){
  145.       this.request.post("/user/save",this.form).then(res => {
  146.         if(res.code === '200'){
  147.           if(this.form.id){
  148.             this.$message.success('编辑成功');
  149.           }else{
  150.             this.$message.success('新增成功');
  151.           }
  152.           this.dialogFormVisible = false;
  153.           this.load();
  154.         }else{
  155.           this.$message.error('操作失败，请联系管理员')
  156.         }
  157.       })
  158.     },
  159.     handleEdit(row){
  160.       this.form = JSON.parse(JSON.stringify(row));
  161.       this.dialogFormVisible = true;
  162.     },
  163.     handleDelete(id){
  164.       if(id){
  165.         this.request.delete('/user/deleteById/' + id).then(res => {
  166.           if(res.code === '200'){
  167.             this.$message.success('删除数据成功');
  168.             this.load();
  169.           }else{
  170.             this.$message.error('删除数据失败，请联系管理员')
  171.           }
  172.         })
  173.       }else{
  174.         this.$message.error('没有id信息，无法删除');
  175.       }
  176.     },
  177.     cancel(){
  178.       this.$message.success('取消操作成功');
  179.     },
  180.     handleSelectionChange(val) {
  181.       this.multipleSelection = val;
  182.     },
  183.     deleteBatch(){
  184.       //批量删除数据
  185.       if(this.multipleSelection.length === 0){
  186.         this.$message.warning("请先选择要删除的数据");
  187.         return
  188.       }
  189.       const ids = this.multipleSelection.map(v => v.id);
  190.       this.request.post('/user/deleteBatch',ids).then(res => {
  191.         if(res.code === '200'){
  192.           this.$message.success('批量删除成功');
  193.           this.load();
  194.         }else{
  195.           this.$message.error('批量删除失败');
  196.         }
  197.       })
  198.     },
  199.     handleSizeChange(val) {
  200.       this.pageSize = val;
  201.       this.load();
  202.     },
  203.     handleCurrentChange(val) {
  204.       this.pageNum = val;
  205.       this.load();
  206.     }
  207.   }
  208. }
  209. </script>
  210.  
  211. <style scoped>
  212.  
  213. </style>

4.角色管理

补充：删除数据的分页显示

创建角色表

创建角色管理后台代码

如视频操作，代码较多，不发出来了

创建角色页面

  1. <template>
  2.   <div>
  3.     <div>
  4.       <!--      搜索栏-->
  5.       <el-input  style="width: 200px;margin-right: 20px" placeholder="请输入名称" v-model="name" prefix-icon="el-icon-user"></el-input>
  6.       <el-button style="margin-left: 10px;" type="primary" @click="load" class="el-icon-search">搜索</el-button>
  7.       <el-button style="margin-left: 10px;" type="warning" @click="reset" class="el-icon-refresh">重置</el-button>
  8.     </div>
  9.  
  10.     <div style="margin-top:20px;margin-bottom: 20px;">
  11.       <!--      新增。批量删除-->
  12.       <el-button style="margin-right: 10px;" type="success"  class="el-icon-plus" @click="save">新增</el-button>
  13.       <el-popconfirm
  14.           confirm-button-text='确定'
  15.           cancel-button-text='取消'
  16.           icon="el-icon-info"
  17.           icon-color="red"
  18.           title="确定删除这些数据吗？"
  19.           @confirm="deleteBatch"
  20.           @cancel="cancel">
  21.         <el-button slot="reference" type="danger" style="margin-left:5px;" class="el-icon-delete">批量删除</el-button>
  22.       </el-popconfirm>
  23.     </div>
  24.  
  25.     <el-table :data="tableData" border stripe :header-cell-style="getRowClass" @selection-change="handleSelectionChange">
  26.       <el-table-column type="selection" width="55"></el-table-column>
  27.       <el-table-column prop="id" label="id"></el-table-column>
  28.       <el-table-column prop="name" label="角色名称"></el-table-column>
  29.       <el-table-column prop="code" label="角色编码"></el-table-column>
  30.       <el-table-column prop="description" label="描述"></el-table-column>
  31.       <el-table-column  label="操作" width="200">
  32.         <template slot-scope="scope">
  33.           <el-button  type="primary"  class="el-icon-edit" @click="handleEdit(scope.row)">编辑</el-button>
  34.           <el-popconfirm
  35.               confirm-button-text='确定'
  36.               cancel-button-text='取消'
  37.               icon="el-icon-info"
  38.               icon-color="red"
  39.               title="确定删除这些数据吗？"
  40.               @confirm="handleDelete(scope.row.id)"
  41.               @cancel="cancel">
  42.             <el-button slot="reference" type="danger" style="margin-left:5px;" class="el-icon-delete">删除</el-button>
  43.           </el-popconfirm>
  44.         </template>
  45.       </el-table-column>
  46.     </el-table>
  47.  
  48.     <div class="block" style="padding:10px 0;align-content: center;margin-left: 30%;margin-top:30px;">
  49.       <el-pagination
  50.           @size-change="handleSizeChange"
  51.           @current-change="handleCurrentChange"
  52.           :current-page="pageNum"
  53.           :page-sizes="[5, 10, 15, 20]"
  54.           :page-size="10"
  55.           layout="total, sizes, prev, pager, next, jumper"
  56.           :total="total">
  57.       </el-pagination>
  58.     </div>
  59.  
  60.     <el-dialog title="角色信息" :visible.sync="dialogFormVisible" width="30%">
  61.       <el-form :model="form">
  62.         <el-form-item label="角色名称" :label-width="formLabelWidth">
  63.           <el-input v-model="form.name" autocomplete="off"></el-input>
  64.         </el-form-item>
  65.         <el-form-item label="角色编码" :label-width="formLabelWidth">
  66.           <el-input v-model="form.code" autocomplete="off"></el-input>
  67.         </el-form-item>
  68.         <el-form-item label="描述" :label-width="formLabelWidth">
  69.           <el-input v-model="form.description" autocomplete="off"></el-input>
  70.         </el-form-item>
  71.       </el-form>
  72.       <div slot="footer" class="dialog-footer">
  73.         <el-button @click="dialogFormVisible = false">取 消</el-button>
  74.         <el-button type="primary" @click="handleAdd">确 定</el-button>
  75.       </div>
  76.     </el-dialog>
  77.  
  78.   </div>
  79. </template>
  80.  
  81. <script>
  82. export default {
  83.   name: "Role",
  84.   data(){
  85.     return{
  86.       pageSize:2,
  87.       pageNum:1,
  88.       name:'',
  89.       tableData:[],
  90.       dialogFormVisible:false,
  91.       form:{},
  92.       formLabelWidth: '80px',
  93.       multipleSelection:[],
  94.       total:0
  95.     }
  96.   },
  97.   created() {
  98.     this.load();
  99.   },
  100.   methods:{
  101.     load(){
  102.       this.request.get("/role/findPage",{
  103.         params:{
  104.           pageNum:this.pageNum,
  105.           pageSize:this.pageSize,
  106.           name:this.name,
  107.         }
  108.       }).then(res => {
  109.         this.tableData = res.data.records;
  110.         this.total = res.data.total;
  111.       })
  112.     },
  113.     getRowClass({rowIndex,columnIndex}){
  114.       if(rowIndex === 0){
  115.         return 'background:#ccc'
  116.       }
  117.     },
  118.     reset(){
  119.       this.email = '';
  120.       this.username = '';
  121.       this.load();
  122.     },
  123.     save(){
  124.       this.dialogFormVisible = true;
  125.       this.form = {};
  126.     },
  127.     handleAdd(){
  128.       this.request.post("/role/save",this.form).then(res => {
  129.         if(res.code === '200'){
  130.           if(this.form.id){
  131.             this.$message.success('编辑成功');
  132.           }else{
  133.             this.$message.success('新增成功');
  134.           }
  135.           this.dialogFormVisible = false;
  136.           this.load();
  137.         }else{
  138.           this.$message.error('操作失败，请联系管理员')
  139.         }
  140.       })
  141.     },
  142.     handleEdit(row){
  143.       this.form = JSON.parse(JSON.stringify(row));
  144.       this.dialogFormVisible = true;
  145.     },
  146.     handleDelete(id){
  147.       if(id){
  148.         this.request.delete('/role/deleteById/' + id).then(res => {
  149.           if(res.code === '200'){
  150.             this.$message.success('删除数据成功');
  151.             this.handleCalPageNum();
  152.           }else{
  153.             this.$message.error('删除数据失败，请联系管理员')
  154.           }
  155.         })
  156.       }else{
  157.         this.$message.error('没有id信息，无法删除');
  158.       }
  159.     },
  160.     cancel(){
  161.       this.$message.success('取消操作成功');
  162.     },
  163.     handleSelectionChange(val) {
  164.       this.multipleSelection = val;
  165.     },
  166.     deleteBatch(){
  167.       //批量删除数据
  168.       if(this.multipleSelection.length === 0){
  169.         this.$message.warning("请先选择要删除的数据");
  170.         return
  171.       }
  172.       const ids = this.multipleSelection.map(v => v.id);
  173.       this.request.post('/role/deleteBatch',ids).then(res => {
  174.         if(res.code === '200'){
  175.           this.$message.success('批量删除成功');
  176.           this.handleCalPageNum();
  177.         }else{
  178.           this.$message.error('批量删除失败');
  179.         }
  180.       })
  181.     },
  182.     handleSizeChange(val) {
  183.       this.pageSize = val;
  184.       this.load();
  185.     },
  186.     handleCurrentChange(val) {
  187.       this.pageNum = val;
  188.       this.load();
  189.     },
  190.     handleCalPageNum(){
  191.       this.request.get("/role/findPage",{
  192.         params:{
  193.           pageNum:this.pageNum,
  194.           pageSize:this.pageSize,
  195.           username:this.username,
  196.           email:this.email
  197.         }
  198.       }).then(res => {
  199.         this.total = res.data.total;
  200.         this.pageNum = (this.total % this.pageSize === 0) ? (this.total / this.pageSize) : Math.floor((this.total / this.pageSize) + 1);
  201.         if(this.pageNum < 1){
  202.           this.pageNum = 1;
  203.         }
  204.         this.load();
  205.       })
  206.     }
  207.   }
  208. }
  209. </script>
  210.  
  211. <style scoped>
  212.  
  213. </style><template>
  214.   <div>
  215.     <div>
  216.       <!--      搜索栏-->
  217.       <el-input  style="width: 200px;margin-right: 20px" placeholder="请输入名称" v-model="name" prefix-icon="el-icon-user"></el-input>
  218.       <el-button style="margin-left: 10px;" type="primary" @click="load" class="el-icon-search">搜索</el-button>
  219.       <el-button style="margin-left: 10px;" type="warning" @click="reset" class="el-icon-refresh">重置</el-button>
  220.     </div>
  221.  
  222.     <div style="margin-top:20px;margin-bottom: 20px;">
  223.       <!--      新增。批量删除-->
  224.       <el-button style="margin-right: 10px;" type="success"  class="el-icon-plus" @click="save">新增</el-button>
  225.       <el-popconfirm
  226.           confirm-button-text='确定'
  227.           cancel-button-text='取消'
  228.           icon="el-icon-info"
  229.           icon-color="red"
  230.           title="确定删除这些数据吗？"
  231.           @confirm="deleteBatch"
  232.           @cancel="cancel">
  233.         <el-button slot="reference" type="danger" style="margin-left:5px;" class="el-icon-delete">批量删除</el-button>
  234.       </el-popconfirm>
  235.     </div>
  236.  
  237.     <el-table :data="tableData" border stripe :header-cell-style="getRowClass" @selection-change="handleSelectionChange">
  238.       <el-table-column type="selection" width="55"></el-table-column>
  239.       <el-table-column prop="id" label="id"></el-table-column>
  240.       <el-table-column prop="name" label="角色名称"></el-table-column>
  241.       <el-table-column prop="code" label="角色编码"></el-table-column>
  242.       <el-table-column prop="description" label="描述"></el-table-column>
  243.       <el-table-column  label="操作" width="200">
  244.         <template slot-scope="scope">
  245.           <el-button  type="primary"  class="el-icon-edit" @click="handleEdit(scope.row)">编辑</el-button>
  246.           <el-popconfirm
  247.               confirm-button-text='确定'
  248.               cancel-button-text='取消'
  249.               icon="el-icon-info"
  250.               icon-color="red"
  251.               title="确定删除这些数据吗？"
  252.               @confirm="handleDelete(scope.row.id)"
  253.               @cancel="cancel">
  254.             <el-button slot="reference" type="danger" style="margin-left:5px;" class="el-icon-delete">删除</el-button>
  255.           </el-popconfirm>
  256.         </template>
  257.       </el-table-column>
  258.     </el-table>
  259.  
  260.     <div class="block" style="padding:10px 0;align-content: center;margin-left: 30%;margin-top:30px;">
  261.       <el-pagination
  262.           @size-change="handleSizeChange"
  263.           @current-change="handleCurrentChange"
  264.           :current-page="pageNum"
  265.           :page-sizes="[5, 10, 15, 20]"
  266.           :page-size="10"
  267.           layout="total, sizes, prev, pager, next, jumper"
  268.           :total="total">
  269.       </el-pagination>
  270.     </div>
  271.  
  272.     <el-dialog title="角色信息" :visible.sync="dialogFormVisible" width="30%">
  273.       <el-form :model="form">
  274.         <el-form-item label="角色名称" :label-width="formLabelWidth">
  275.           <el-input v-model="form.name" autocomplete="off"></el-input>
  276.         </el-form-item>
  277.         <el-form-item label="角色编码" :label-width="formLabelWidth">
  278.           <el-input v-model="form.code" autocomplete="off"></el-input>
  279.         </el-form-item>
  280.         <el-form-item label="描述" :label-width="formLabelWidth">
  281.           <el-input v-model="form.description" autocomplete="off"></el-input>
  282.         </el-form-item>
  283.       </el-form>
  284.       <div slot="footer" class="dialog-footer">
  285.         <el-button @click="dialogFormVisible = false">取 消</el-button>
  286.         <el-button type="primary" @click="handleAdd">确 定</el-button>
  287.       </div>
  288.     </el-dialog>
  289.  
  290.   </div>
  291. </template>
  292.  
  293. <script>
  294. export default {
  295.   name: "Role",
  296.   data(){
  297.     return{
  298.       pageSize:2,
  299.       pageNum:1,
  300.       name:'',
  301.       tableData:[],
  302.       dialogFormVisible:false,
  303.       form:{},
  304.       formLabelWidth: '80px',
  305.       multipleSelection:[],
  306.       total:0
  307.     }
  308.   },
  309.   created() {
  310.     this.load();
  311.   },
  312.   methods:{
  313.     load(){
  314.       this.request.get("/role/findPage",{
  315.         params:{
  316.           pageNum:this.pageNum,
  317.           pageSize:this.pageSize,
  318.           name:this.name,
  319.         }
  320.       }).then(res => {
  321.         this.tableData = res.data.records;
  322.         this.total = res.data.total;
  323.       })
  324.     },
  325.     getRowClass({rowIndex,columnIndex}){
  326.       if(rowIndex === 0){
  327.         return 'background:#ccc'
  328.       }
  329.     },
  330.     reset(){
  331.       this.email = '';
  332.       this.username = '';
  333.       this.load();
  334.     },
  335.     save(){
  336.       this.dialogFormVisible = true;
  337.       this.form = {};
  338.     },
  339.     handleAdd(){
  340.       this.request.post("/role/save",this.form).then(res => {
  341.         if(res.code === '200'){
  342.           if(this.form.id){
  343.             this.$message.success('编辑成功');
  344.           }else{
  345.             this.$message.success('新增成功');
  346.           }
  347.           this.dialogFormVisible = false;
  348.           this.load();
  349.         }else{
  350.           this.$message.error('操作失败，请联系管理员')
  351.         }
  352.       })
  353.     },
  354.     handleEdit(row){
  355.       this.form = JSON.parse(JSON.stringify(row));
  356.       this.dialogFormVisible = true;
  357.     },
  358.     handleDelete(id){
  359.       if(id){
  360.         this.request.delete('/role/deleteById/' + id).then(res => {
  361.           if(res.code === '200'){
  362.             this.$message.success('删除数据成功');
  363.             this.handleCalPageNum();
  364.           }else{
  365.             this.$message.error('删除数据失败，请联系管理员')
  366.           }
  367.         })
  368.       }else{
  369.         this.$message.error('没有id信息，无法删除');
  370.       }
  371.     },
  372.     cancel(){
  373.       this.$message.success('取消操作成功');
  374.     },
  375.     handleSelectionChange(val) {
  376.       this.multipleSelection = val;
  377.     },
  378.     deleteBatch(){
  379.       //批量删除数据
  380.       if(this.multipleSelection.length === 0){
  381.         this.$message.warning("请先选择要删除的数据");
  382.         return
  383.       }
  384.       const ids = this.multipleSelection.map(v => v.id);
  385.       this.request.post('/role/deleteBatch',ids).then(res => {
  386.         if(res.code === '200'){
  387.           this.$message.success('批量删除成功');
  388.           this.handleCalPageNum();
  389.         }else{
  390.           this.$message.error('批量删除失败');
  391.         }
  392.       })
  393.     },
  394.     handleSizeChange(val) {
  395.       this.pageSize = val;
  396.       this.load();
  397.     },
  398.     handleCurrentChange(val) {
  399.       this.pageNum = val;
  400.       this.load();
  401.     },
  402.     handleCalPageNum(){
  403.       this.request.get("/role/findPage",{
  404.         params:{
  405.           pageNum:this.pageNum,
  406.           pageSize:this.pageSize,
  407.           username:this.username,
  408.           email:this.email
  409.         }
  410.       }).then(res => {
  411.         this.total = res.data.total;
  412.         this.pageNum = (this.total % this.pageSize === 0) ? (this.total / this.pageSize) : Math.floor((this.total / this.pageSize) + 1);
  413.         if(this.pageNum < 1){
  414.           this.pageNum = 1;
  415.         }
  416.         this.load();
  417.       })
  418.     }
  419.   }
  420. }
  421. </script>
  422.  
  423. <style scoped>
  424.  
  425. </style>

完善用户页面的角色部分

集成git，把代码提交git仓库

5.登录注册页面

        5.1 验证码组件

  1. <template>
  2.   <span class="s-canvas">
  3.     <canvas id="s-canvas" :width="contentWidth" :height="contentHeight"></canvas>
  4.   </span>
  5. </template>
  6. <script>
  7. export default {
  8.   name: 'SIdentify',
  9.   props: {
  10.     identifyCode: {
  11.       type: String,
  12.       default: '1234'
  13.     },
  14.     fontSizeMin: {
  15.       type: Number,
  16.       default: 16
  17.     },
  18.     fontSizeMax: {
  19.       type: Number,
  20.       default: 40
  21.     },
  22.     backgroundColorMin: {
  23.       type: Number,
  24.       default: 180
  25.     },
  26.     backgroundColorMax: {
  27.       type: Number,
  28.       default: 240
  29.     },
  30.     colorMin: {
  31.       type: Number,
  32.       default: 50
  33.     },
  34.     colorMax: {
  35.       type: Number,
  36.       default: 160
  37.     },
  38.     lineColorMin: {
  39.       type: Number,
  40.       default: 40
  41.     },
  42.     lineColorMax: {
  43.       type: Number,
  44.       default: 180
  45.     },
  46.     dotColorMin: {
  47.       type: Number,
  48.       default: 0
  49.     },
  50.     dotColorMax: {
  51.       type: Number,
  52.       default: 255
  53.     },
  54.     contentWidth: {
  55.       type: Number,
  56.       default: 112
  57.     },
  58.     contentHeight: {
  59.       type: Number,
  60.       default: 38
  61.     }
  62.   },
  63.   methods: {
  64.     // 生成一个随机数
  65.     randomNum(min, max) {
  66.       return Math.floor(Math.random() * (max - min) + min)
  67.     },
  68.     // 生成一个随机的颜色
  69.     randomColor(min, max) {
  70.       let r = this.randomNum(min, max)
  71.       let g = this.randomNum(min, max)
  72.       let b = this.randomNum(min, max)
  73.       return 'rgb(' + r + ',' + g + ',' + b + ')'
  74.     },
  75.     drawPic() {
  76.       let canvas = document.getElementById('s-canvas')
  77.       let ctx = canvas.getContext('2d')
  78.       ctx.textBaseline = 'bottom'
  79.       // 绘制背景
  80.       ctx.fillStyle = this.randomColor(this.backgroundColorMin, this.backgroundColorMax)
  81.       ctx.fillRect(0, 0, this.contentWidth, this.contentHeight)
  82.       // 绘制文字
  83.       for (let i = 0; i < this.identifyCode.length; i++) {
  84.         this.drawText(ctx, this.identifyCode[i], i)
  85.       }
  86.       this.drawLine(ctx)
  87.       this.drawDot(ctx)
  88.     },
  89.     drawText(ctx, txt, i) {
  90.       ctx.fillStyle = this.randomColor(this.colorMin, this.colorMax)
  91.       ctx.font = this.randomNum(this.fontSizeMin, this.fontSizeMax) + 'px SimHei'
  92.       let x = (i + 1) * (this.contentWidth / (this.identifyCode.length + 1))
  93.       let y = this.randomNum(this.fontSizeMax, this.contentHeight - 5)
  94.       var deg = this.randomNum(-45, 45)
  95.       // 修改坐标原点和旋转角度
  96.       ctx.translate(x, y)
  97.       ctx.rotate(deg * Math.PI / 180)
  98.       ctx.fillText(txt, 0, 0)
  99.       // 恢复坐标原点和旋转角度
  100.       ctx.rotate(-deg * Math.PI / 180)
  101.       ctx.translate(-x, -y)
  102.     },
  103.     drawLine(ctx) {
  104.       // 绘制干扰线
  105.       for (let i = 0; i < 3; i++) {
  106.         ctx.strokeStyle = this.randomColor(this.lineColorMin, this.lineColorMax)
  107.         ctx.beginPath()
  108.         ctx.moveTo(this.randomNum(0, this.contentWidth), this.randomNum(0, this.contentHeight))
  109.         ctx.lineTo(this.randomNum(0, this.contentWidth), this.randomNum(0, this.contentHeight))
  110.         ctx.stroke()
  111.       }
  112.     },
  113.     drawDot(ctx) {
  114.       // 绘制干扰点
  115.       for (let i = 0; i < 10; i++) {
  116.         ctx.fillStyle = this.randomColor(0, 255)
  117.         ctx.beginPath()
  118.         ctx.arc(this.randomNum(0, this.contentWidth), this.randomNum(0, this.contentHeight), 1, 0, 2 * Math.PI)
  119.         ctx.fill()
  120.       }
  121.     }
  122.   },
  123.   watch: {
  124.     identifyCode() {
  125.       this.drawPic()
  126.     }
  127.   },
  128.   mounted() {  //mounted：在模板渲染成html后调用，通常初始化页面完成后，再对html的dom节点进行一些需要的操作。
  129.     this.drawPic()
  130.   }
  131. }
  132. </script>
  133. <style>
  134. .s-canvas {
  135.   height: 38px;
  136. }
  137.  
  138. canvas {
  139.   margin-top: 1px;
  140.   margin-left: 8px;
  141. }
  142. </style>

        5.2 编写Login.vue页面

  1. <template>
  2.   <div class="wrapper">
  3.  
  4. <!--    项目名称-->
  5.     <div style="height: 60px;line-height: 60px;font-size: 20px;padding-left: 50px;color: white;text-align: center;align-content: center;background-color: #cccccc">
  6.       权限脚手架项目
  7.     </div>
  8.  
  9.     <div style="display: flex;width:55%;height:40%;margin: 150px auto;background-color: white;border-radius: 10px;overflow: hidden;background-color: bisque">
  10. <!--      左侧图片显示-->
  11.       <div style="width: 50%;margin-top: 30px;margin-left: 30px">
  12.         <img src="../assets/register.png" alt="" style="width:100%;height:90%" />
  13.       </div>
  14. <!--      提交表单-->
  15.       <div style="width:350px;margin-top: 30px">
  16.         <div style="margin: 20px 0;text-align: center;font-size: 20px">登录页面</div>
  17.         <el-form :model="userForm" :rules="rules" ref="userForm" label-width="100px" class="demo-ruleForm">
  18.           <el-form-item label="用户名" prop="username">
  19.             <el-input v-model="userForm.username" prefix-icon="el-icon-user"></el-input>
  20.           </el-form-item>
  21.           <el-form-item label="密码" prop="password">
  22.             <el-input v-model="userForm.password" prefix-icon="el-icon-lock" type="password" show-password></el-input>
  23.           </el-form-item>
  24.           <el-form-item label="验证码" prop="identifyCode">
  25.             <el-input v-model="userForm.identifyCode" style="width:50%;position:relative;bottom:8px;" prefix-icon="el-icon-mobile-phone"></el-input>
  26.             <span @click="refreshCode" style="position: relative;top:5px;left:6px;">
  27.               <SIdentity :identify-code="identifyCode"></SIdentity>
  28.             </span>
  29.           </el-form-item>
  30.           <el-form-item>
  31.             <el-button type="primary" @click="login('userForm')">登录</el-button>
  32.             <el-button type="success" @click="$router.push('/register')">前往注册</el-button>
  33. <!--            <el-button type="warning" @click="resetForm('userForm')">重置</el-button>-->
  34.           </el-form-item>
  35.         </el-form>
  36.       </div>
  37.     </div>
  38.   </div>
  39. </template>
  40.  
  41. <script>
  42. import SIdentity from "@/components/SIdentity";
  43. export default {
  44.   name: "Login",
  45.   components:{
  46.     SIdentity
  47.   },
  48.   mounted() {
  49.     this.refreshCode()
  50.   },
  51.   data(){
  52.     return{
  53.       userForm:{},
  54.       identifyCode:'',
  55.       identifyCodes:'1234567890zxcvbnmasdfghjklqwertyuiopQWERTYUIPOLSADFGHJ',
  56.       rules: {
  57.         username: [
  58.           { required: true, message: '请输入用户名称', trigger: 'blur' },
  59.           { min: 1, max: 20, message: '长度在 1 到 20 个字符', trigger: 'blur' }
  60.         ],
  61.         password: [
  62.           { required: true, message: '请输入密码', trigger: 'blur' },
  63.           { min: 6, max: 50, message: '长度不能小于6位', trigger: 'blur' }
  64.         ],
  65.         identifyCode: [
  66.           { required: true, message: '请输入验证码', trigger: 'blur' },
  67.           { min: 4, max: 4, message: '验证码长度为4位', trigger: 'blur' }
  68.         ]
  69.       }
  70.     }
  71.   },
  72.   methods:{
  73.     //提交数据
  74.     login(formName) {
  75.       this.$refs[formName].validate((valid) => {
  76.         if (valid) {
  77.           if(this.identifyCode.toUpperCase() !== this.userForm.identifyCode.toUpperCase()){
  78.             this.$message.warning("验证码输入错误，请重新输入");
  79.             return;
  80.           }
  81.           alert('submit!');
  82.         } else {
  83.           console.log('error submit!!');
  84.           return false;
  85.         }
  86.       });
  87.     },
  88.     // 重置数据
  89.     resetForm(formName) {
  90.       this.$refs[formName].resetFields();
  91.     },
  92.  
  93.     // 验证码方法
  94.     refreshCode(){
  95.       this.identifyCode = ''
  96.       this.makeCode(this.identifyCodes,4);
  97.     },
  98.     makeCode(o,l){
  99.       for(let i = 0;i < l;i++){
  100.         this.identifyCode += this.identifyCodes[
  101.               this.randomNum(0,this.identifyCodes.length)
  102.             ]
  103.       }
  104.     },
  105.     randomNum(min,max){
  106.       return Math.floor(Math.random() * (max - min) + min);
  107.     }
  108.   }
  109. }
  110. </script>
  111.  
  112. <style scoped>
  113.   .wrapper{
  114.     background: url("../assets/auth.jpg");
  115.     width:100%;
  116.     height: 100%;
  117.     position: fixed;
  118.     background-size: 100% 100%;
  119.   }
  120. </style>

        5.4 编写Register.vue页面

  1. <template>
  2.   <div class="wrapper">
  3.  
  4. <!--    项目名称-->
  5.     <div style="height: 60px;line-height: 60px;font-size: 20px;padding-left: 50px;color: white;text-align: center;align-content: center;background-color: #cccccc">
  6.       权限脚手架项目
  7.     </div>
  8.  
  9.     <div style="display: flex;width:55%;height:40%;margin: 150px auto;background-color: white;border-radius: 10px;overflow: hidden;background-color: bisque">
  10. <!--      左侧图片显示-->
  11.       <div style="width: 50%;margin-top: 30px;margin-left: 30px">
  12.         <img src="../assets/register.png" alt="" style="width:100%;height:90%" />
  13.       </div>
  14. <!--      提交表单-->
  15.       <div style="width:350px;margin-top: 30px">
  16.         <div style="margin: 20px 0;text-align: center;font-size: 20px">注册页面</div>
  17.         <el-form :model="userForm" :rules="rules" ref="userForm" label-width="100px" class="demo-ruleForm">
  18.           <el-form-item label="用户名" prop="username">
  19.             <el-input v-model="userForm.username" prefix-icon="el-icon-user"></el-input>
  20.           </el-form-item>
  21.           <el-form-item label="密码" prop="password">
  22.             <el-input v-model="userForm.password" prefix-icon="el-icon-lock" type="password" show-password></el-input>
  23.           </el-form-item>
  24.           <el-form-item label="确认密码" prop="confirmPassword">
  25.             <el-input v-model="userForm.confirmPassword" prefix-icon="el-icon-lock" type="password" show-password></el-input>
  26.           </el-form-item>
  27.           <el-form-item>
  28.             <el-button type="primary" @click="register('userForm')">注册</el-button>
  29.             <el-button type="success" @click="$router.push('/login')">返回登录</el-button>
  30. <!--            <el-button type="warning" @click="resetForm('userForm')">重置</el-button>-->
  31.           </el-form-item>
  32.         </el-form>
  33.       </div>
  34.     </div>
  35.   </div>
  36. </template>
  37.  
  38. <script>
  39. export default {
  40.   name: "Register",
  41.   data(){
  42.     return{
  43.       userForm:{},
  44.  
  45.       rules: {
  46.         username: [
  47.           { required: true, message: '请输入用户名称', trigger: 'blur' },
  48.           { min: 1, max: 20, message: '长度在 1 到 20 个字符', trigger: 'blur' }
  49.         ],
  50.         password: [
  51.           { required: true, message: '请输入密码', trigger: 'blur' },
  52.           { min: 6, max: 50, message: '长度不能小于6位', trigger: 'blur' }
  53.         ],
  54.         confirmPassword: [
  55.           { required: true, message: '请输入确认密码', trigger: 'blur' },
  56.           { min: 6, max: 50, message: '长度不能小于6位', trigger: 'blur' }
  57.         ]
  58.       }
  59.     }
  60.   },
  61.   methods:{
  62.     //提交数据
  63.     register(formName) {
  64.       this.$refs[formName].validate((valid) => {
  65.         if (valid) {
  66.           if(this.userForm.password !== this.userForm.confirmPassword){
  67.             this.$message.warning("两次密码不一致，请重新输入");
  68.             return;
  69.           }
  70.           alert('submit!');
  71.         } else {
  72.           console.log('error submit!!');
  73.           return false;
  74.         }
  75.       });
  76.     },
  77.     // 重置数据
  78.     resetForm(formName) {
  79.       this.$refs[formName].resetFields();
  80.     },
  81.  
  82.     // 验证码方法
  83.     refreshCode(){
  84.       this.identifyCode = ''
  85.       this.makeCode(this.identifyCodes,4);
  86.     },
  87.     makeCode(o,l){
  88.       for(let i = 0;i < l;i++){
  89.         this.identifyCode += this.identifyCodes[
  90.               this.randomNum(0,this.identifyCodes.length)
  91.             ]
  92.       }
  93.     },
  94.     randomNum(min,max){
  95.       return Math.floor(Math.random() * (max - min) + min);
  96.     }
  97.   }
  98. }
  99. </script>
  100.  
  101. <style scoped>
  102.   .wrapper{
  103.     background: url("../assets/auth.jpg");
  104.     width:100%;
  105.     height: 100%;
  106.     position: fixed;
  107.     background-size: 100% 100%;
  108.   }
  109. </style>

       5.4 添加两个路由到index.js文件

6.登录注册接口

        创建UserDto类

  1. package com.example.authority.dto;
  2.  
  3. import lombok.Data;
  4.  
  5. import java.util.Date;
  6.  
  7. @Data
  8. public class UserDto {
  9.  
  10.     private Integer id;
  11.  
  12.     private String username;
  13.  
  14.     private String password;
  15.  
  16.     private String nickname;
  17.  
  18.     private String headerUrl;
  19.  
  20.     private String token;
  21. }

编写两个接口代码，看视频

JwtUtils的代码

  1. package com.example.authority.utils;
  2.  
  3. import com.auth0.jwt.JWT;
  4. import com.auth0.jwt.algorithms.Algorithm;
  5. import org.springframework.stereotype.Component;
  6.  
  7. import java.util.Date;
  8.  
  9. @Component
  10. public class JwtUtils {
  11.  
  12.     public static String generateToken(String userId,String sign){
  13.         return JWT.create().withAudience(userId)
  14.                 .withExpiresAt(new Date(System.currentTimeMillis() + 3600 * 24 * 1000))
  15.                 .sign(Algorithm.HMAC256(sign));
  16.     }
  17. }

7.菜单管理

用户管理的bug：

新增和修改用户名的时候加一下判断条件：用户名不能重复

角色管理的bug:

删除角色的时候先判断角色是否被使用了

RBAC:RBAC(Role-Based Access control) ，也就是基于角色的权限分配解决方案，相对于传统方案，RBAC提供了中间层Role（角色），其权限模式是给用户分配角色，给角色分配权限

菜单表：

字典管理，如视频操作

菜单后台代码，如视频操作

菜单页面：

  1. <template>
  2.   <div>
  3.     <div>
  4.       <!--      搜索栏-->
  5.       <el-input  style="width: 200px;margin-right: 20px" placeholder="请输入菜单名称" v-model="name" prefix-icon="el-icon-user"></el-input>
  6.       <el-button style="margin-left: 10px;" type="primary" @click="load" class="el-icon-search">搜索</el-button>
  7.       <el-button style="margin-left: 10px;" type="warning" @click="reset" class="el-icon-refresh">重置</el-button>
  8.     </div>
  9.  
  10.     <div style="margin-top:20px;margin-bottom: 20px;">
  11.       <!--      新增。批量删除-->
  12.       <el-button style="margin-right: 10px;" type="success"  class="el-icon-plus" @click="save(null)">新增</el-button>
  13.       <el-popconfirm
  14.           confirm-button-text='确定'
  15.           cancel-button-text='取消'
  16.           icon="el-icon-info"
  17.           icon-color="red"
  18.           title="确定删除这些数据吗？"
  19.           @confirm="deleteBatch"
  20.           @cancel="cancel">
  21.         <el-button slot="reference" type="danger" style="margin-left:5px;" class="el-icon-delete">批量删除</el-button>
  22.       </el-popconfirm>
  23.     </div>
  24.  
  25.     <el-table
  26.         :data="tableData" border stripe
  27.         :header-cell-style="getRowClass"
  28.         @selection-change="handleSelectionChange"
  29.         row-key="id"
  30.         border
  31.         default-expand-all>
  32.       <el-table-column type="selection" width="55"></el-table-column>
  33.       <el-table-column prop="id" label="id"></el-table-column>
  34.       <el-table-column prop="name" label="菜单名称"></el-table-column>
  35.       <el-table-column prop="path" label="菜单路径"></el-table-column>
  36.       <el-table-column label="菜单图标">
  37.         <template slot-scope="scope">
  38.           <i :class="scope.row.icon"/>
  39.         </template>
  40.       </el-table-column>
  41.       <el-table-column prop="description" label="菜单描述"></el-table-column>
  42.       <el-table-column prop="pagePath" label="页面路径"></el-table-column>
  43.       <el-table-column prop="sortNum" label="排序"></el-table-column>
  44.       <el-table-column  label="操作" width="350">
  45.         <template slot-scope="scope">
  46.           <el-button  type="success"  class="el-icon-circle-plus" @click="save(scope.row.id)" v-if="!scope.row.pid && !scope.row.path ">新增子菜单</el-button>
  47.           <el-button  type="primary"  class="el-icon-edit" @click="handleEdit(scope.row)">编辑</el-button>
  48.           <el-popconfirm
  49.               confirm-button-text='确定'
  50.               cancel-button-text='取消'
  51.               icon="el-icon-info"
  52.               icon-color="red"
  53.               title="确定删除这些数据吗？"
  54.               @confirm="handleDelete(scope.row.id)"
  55.               @cancel="cancel">
  56.             <el-button slot="reference" type="danger" style="margin-left:5px;" class="el-icon-delete">删除</el-button>
  57.           </el-popconfirm>
  58.         </template>
  59.       </el-table-column>
  60.     </el-table>
  61.  
  62.  
  63.     <el-dialog title="菜单信息" :visible.sync="dialogFormVisible" width="30%">
  64.       <el-form :model="form">
  65.         <el-form-item label="菜单名称" :label-width="formLabelWidth">
  66.           <el-input v-model="form.name" autocomplete="off"></el-input>
  67.         </el-form-item>
  68.         <el-form-item label="菜单路径" :label-width="formLabelWidth">
  69.           <el-input v-model="form.path" autocomplete="off"></el-input>
  70.         </el-form-item>
  71.         <el-form-item label="菜单图标" :label-width="formLabelWidth">
  72.           <el-select v-model="form.icon" filterable placeholder="请选择图标">
  73.             <el-option
  74.                 v-for="dict in dictList"
  75.                 :key="dict.name"
  76.                 :label="dict.name"
  77.                 :value="dict.value">
  78.               <i :class="dict.value"></i>&nbsp;&nbsp;{{dict.name}}
  79.             </el-option>
  80.           </el-select>
  81.         </el-form-item>
  82.         <el-form-item label="页面路径" :label-width="formLabelWidth">
  83.           <el-input v-model="form.pagePath" autocomplete="off"></el-input>
  84.         </el-form-item>
  85.         <el-form-item label="排序" :label-width="formLabelWidth">
  86.           <el-input v-model="form.sortNum" autocomplete="off" type="number"></el-input>
  87.         </el-form-item>
  88.         <el-form-item label="描述" :label-width="formLabelWidth">
  89.           <el-input v-model="form.description" autocomplete="off"></el-input>
  90.         </el-form-item>
  91.       </el-form>
  92.       <div slot="footer" class="dialog-footer">
  93.         <el-button @click="dialogFormVisible = false">取 消</el-button>
  94.         <el-button type="primary" @click="handleAdd">确 定</el-button>
  95.       </div>
  96.     </el-dialog>
  97.  
  98.   </div>
  99. </template>
  100.  
  101. <script>
  102. export default {
  103.   name: "Role",
  104.   data(){
  105.     return{
  106.       pageSize:10,
  107.       pageNum:1,
  108.       name:'',
  109.       tableData:[],
  110.       dialogFormVisible:false,
  111.       form:{},
  112.       formLabelWidth: '80px',
  113.       multipleSelection:[],
  114.       total:0,
  115.       dictList:[]
  116.     }
  117.   },
  118.   created() {
  119.     this.load();
  120.   },
  121.   methods:{
  122.     load(){
  123.       this.request.get("/menu/findAll",{
  124.         params:{
  125.           name:this.name,
  126.         }
  127.       }).then(res => {
  128.         this.tableData = res.data;
  129.       });
  130.       this.request.get("/dict/findAll",{
  131.         params:{
  132.           type:'icon',
  133.         }
  134.       }).then(res => {
  135.         this.dictList = res.data;
  136.       })
  137.     },
  138.     getRowClass({rowIndex,columnIndex}){
  139.       if(rowIndex === 0){
  140.         return 'background:#ccc'
  141.       }
  142.     },
  143.     reset(){
  144.       this.name = '';
  145.       this.load();
  146.     },
  147.     save(pid){
  148.       this.dialogFormVisible = true;
  149.       this.form = {};
  150.       if(pid){
  151.         this.form.pid = pid;
  152.       }
  153.     },
  154.     handleAdd(){
  155.       this.request.post("/menu/save",this.form).then(res => {
  156.         if(res.code === '200'){
  157.           if(this.form.id){
  158.             this.$message.success('编辑成功');
  159.           }else{
  160.             this.$message.success('新增成功');
  161.           }
  162.           this.dialogFormVisible = false;
  163.           this.load();
  164.         }else{
  165.           this.$message.error(res.msg)
  166.         }
  167.       })
  168.     },
  169.     handleEdit(row){
  170.       this.form = JSON.parse(JSON.stringify(row));
  171.       this.dialogFormVisible = true;
  172.     },
  173.     handleDelete(id){
  174.       if(id){
  175.         this.request.delete('/menu/deleteById/' + id).then(res => {
  176.           if(res.code === '200'){
  177.             this.$message.success('删除数据成功');
  178.             this.load();
  179.           }else{
  180.             this.$message.error(res.msg)
  181.           }
  182.         })
  183.       }else{
  184.         this.$message.error('没有id信息，无法删除');
  185.       }
  186.     },
  187.     cancel(){
  188.       this.$message.success('取消操作成功');
  189.     },
  190.     handleSelectionChange(val) {
  191.       this.multipleSelection = val;
  192.     },
  193.     deleteBatch(){
  194.       //批量删除数据
  195.       if(this.multipleSelection.length === 0){
  196.         this.$message.warning("请先选择要删除的数据");
  197.         return
  198.       }
  199.       const ids = this.multipleSelection.map(v => v.id);
  200.       this.request.post('/menu/deleteBatch',ids).then(res => {
  201.         if(res.code === '200'){
  202.           this.$message.success('批量删除成功');
  203.           this.load();
  204.         }else{
  205.           this.$message.error(res.msg);
  206.         }
  207.       })
  208.     },
  209.     handleSizeChange(val) {
  210.       this.pageSize = val;
  211.       this.load();
  212.     },
  213.     handleCurrentChange(val) {
  214.       this.pageNum = val;
  215.       this.load();
  216.     }
  217.   }
  218. }
  219. </script>
  220.  
  221. <style scoped>
  222.  
  223. </style>

8.角色分配权限

添加swagger配置类

  1. package com.example.authority.config;
  2.  
  3. import org.springframework.context.annotation.Bean;
  4. import org.springframework.context.annotation.Configuration;
  5. import springfox.documentation.builders.ApiInfoBuilder;
  6. import springfox.documentation.builders.PathSelectors;
  7. import springfox.documentation.builders.RequestHandlerSelectors;
  8. import springfox.documentation.service.ApiInfo;
  9. import springfox.documentation.service.Contact;
  10. import springfox.documentation.spi.DocumentationType;
  11. import springfox.documentation.spring.web.plugins.Docket;
  12. import springfox.documentation.swagger2.annotations.EnableSwagger2;
  13.  
  14. @Configuration
  15. public class SwaggerConfig {
  16.     @Bean
  17.     public Docket createRestApi() {
  18.         return new Docket(DocumentationType.SWAGGER_2)
  19.                 .pathMapping("/")
  20.                 .select()
  21.                 .apis(RequestHandlerSelectors.basePackage("com.example.authority.controller"))  //controller类所在的路径
  22.                 .paths(PathSelectors.any())
  23.                 .build().apiInfo(new ApiInfoBuilder()
  24.                         .title("SpringBoot整合Swagger")
  25.                         .description("SpringBoot整合Swagger，详细信息......")
  26.                         .version("9.0")
  27.                         .contact(new Contact("111","blog.csdn.net","www@gmail.com"))
  28.                         .license("hello")
  29.                         .licenseUrl("http://www.baidu.com")
  30.                         .build());
  31.     }
  32. }

启动类添加  ：@EnableSwagger2

  1. package com.example.authority;
  2.  
  3. import org.mybatis.spring.annotation.MapperScan;
  4. import org.springframework.boot.SpringApplication;
  5. import org.springframework.boot.autoconfigure.SpringBootApplication;
  6. import springfox.documentation.swagger2.annotations.EnableSwagger2;
  7.  
  8. @SpringBootApplication
  9. @MapperScan("com.example.authority.mapper")
  10. @EnableSwagger2
  11. public class BaseAuthorityApplication {
  12.  
  13.     public static void main(String[] args) {
  14.         SpringApplication.run(BaseAuthorityApplication.class, args);
  15.     }
  16.  
  17. }

常用注解

@Api(tags = "用户管理")：加在controller类上做说明
@ApiOperation(value = "新增/修改用户信息")：加在接口方法上

全局异常处理

处理类

  1. package com.example.authority.exception;
  2.  
  3.  
  4. import com.example.authority.common.Result;
  5. import org.springframework.web.bind.annotation.ControllerAdvice;
  6. import org.springframework.web.bind.annotation.ExceptionHandler;
  7. import org.springframework.web.bind.annotation.ResponseBody;
  8.  
  9. /**
  10.  * @author wangjy
  11.  * @version 1.0
  12.  * @date 2023/6/30 15:29
  13.  * 全局异常处理器
  14.  */
  15. @ControllerAdvice
  16. public class GlobalExceptionHandler {
  17.  
  18.     @ExceptionHandler(AuthException.class)
  19.     @ResponseBody
  20.     public Result handle(AuthException ex){
  21.         return Result.error(ex.getCode(),ex.getMessage());
  22.     }
  23.  
  24.  
  25.     @ExceptionHandler(Exception.class)
  26.     @ResponseBody
  27.     public Result handle(Exception ex){
  28.         return Result.error("500",ex.getMessage());
  29.     }
  30.  
  31. }

自定义异常

  1. package com.example.authority.exception;
  2.  
  3. import lombok.Data;
  4.  
  5. @Data
  6. public class AuthException extends RuntimeException{
  7.  
  8.     private String code;
  9.  
  10.     public AuthException( String code,String msg) {
  11.         super(msg);
  12.         this.code = code;
  13.     }
  14. }

在角色页面增加分配菜单功能，如视频操作

9.动态菜单和动态路由

动态菜单：根据角色分配的菜单在Aside页面动态显示

动态路由：动态路由，动态即不是写死的，是可变的。我们可以根据自己不同的需求加载不同的路由，做到不同的实现及页面的渲染。动态的路由存储可分为两种，一种是将路由存储到前端。另一种则是将路由存储到数据库。动态路由的使用一般结合角色权限控制一起使用。

具体代码看视频

10.后端拦截器

解决路由显示问题

  1. import Vue, {set} from 'vue'
  2. import VueRouter from 'vue-router'
  3. import store from '../store'
  4. Vue.use(VueRouter)
  5. import { Notification, MessageBox, Message, Loading } from 'element-ui'
  6. import ElementUI from 'element-ui'
  7.  
  8. const routes = [
  9.   {
  10.     path: '/login',
  11.     name: 'Login',
  12.     component: () => import(/* webpackChunkName: "about" */ '../views/Login.vue'),
  13.   },
  14.   {
  15.     path: '/register',
  16.     name: 'Register',
  17.     component: () => import(/* webpackChunkName: "about" */ '../views/Register.vue'),
  18.   },
  19.   {
  20.     path: '/404',
  21.     name: '404',
  22.     component: () => import(/* webpackChunkName: "about" */ '../views/404.vue'),
  23.   }
  24. ]
  25.  
  26. const router = new VueRouter({
  27.   mode: 'history',
  28.   base: process.env.BASE_URL,
  29.   routes
  30. })
  31.  
  32. export const setRoutes  = () => {
  33.   //获取浏览器缓存的菜单数据
  34.   const localMenus = localStorage.getItem("menus") ;
  35.   if(localMenus){
  36.    const currentRoutes =  router.getRoutes().map(v => v.name);
  37.    if(!currentRoutes.includes('manage')){
  38.      //当前Router不包含manage，在拼装
  39.      const manageRoute =  {
  40.            path: '/',
  41.            name: 'manage',
  42.            component: () => import(/* webpackChunkName: "about" */ '../views/Manage.vue'),
  43.            children:[]
  44.          };
  45.      const menus = JSON.parse(localMenus);
  46.      menus.forEach(item => {
  47.        if(item.path){
  48.          const itemMenu = {
  49.            path:item.path.replace("/",""),
  50.            name:item.name,
  51.            component: () => import(/* webpackChunkName: "about" */ '../views/' + item.pagePath + '.vue'),
  52.          };
  53.          manageRoute.children.push(itemMenu);
  54.        }else if(item.children.length){
  55.          item.children.forEach(item => {
  56.            const itemMenu = {
  57.              path:item.path.replace("/",""),
  58.              name:item.name,
  59.              component: () => import(/* webpackChunkName: "about" */ '../views/' + item.pagePath + '.vue'),
  60.            };
  61.            manageRoute.children.push(itemMenu);
  62.          })
  63.        }
  64.      })
  65.      router.addRoute(manageRoute);
  66.      console.log(router.getRoutes())
  67.    }
  68.   }
  69. }
  70.  
  71. setRoutes()
  72.  
  73. router.beforeEach((to,from,next) => {
  74.   localStorage.setItem('currentPathName',to.name);
  75.   store.commit('setPath')
  76.   const localMenus = localStorage.getItem("menus");
  77.   if(!to.matched.length){
  78.     //没有匹配到路由（也就是未找到路由)
  79.     if(localMenus){
  80.       //用户登录了
  81.       next('/404')
  82.     }else{
  83.       ElementUI.Message({
  84.         message: '请先登录',
  85.         type: 'warning'
  86.       });
  87.       next('/login')
  88.     }
  89.   }
  90.   next();
  91. })
  92. export default router

后端拦截器代码：看视频，详细教导。

11.AOP记录日志

添加依赖：

  1. <dependency>
  2.             <groupId>org.springframework.boot</groupId>
  3.             <artifactId>spring-boot-devtools</artifactId>
  4.             <optional>true</optional>
  5.         </dependency>
  6.  
  7.         <!--        AOP-->
  8.         <dependency>
  9.             <groupId>org.springframework.boot</groupId>
  10.             <artifactId>spring-boot-starter-aop</artifactId>
  11.         </dependency>

获取request对象

        HttpServletRequest request = ((ServletRequestAttributes) RequestContextHolder.getRequestAttributes()).getRequest();

 剩下的代码看视频

12.日志前端页面，退出登录

        12.1.补充配置拦截器里面放行swagger

  1. @Override
  2.     public void addInterceptors(InterceptorRegistry registry) {
  3.         registry.addInterceptor(jwtInterceptor).addPathPatterns("/**").excludePathPatterns(
  4.                 "/swagger-resources/**"
  5.                 ,"/webjars/**"
  6.                 ,"/v2/**"
  7.                 ,"/swagger-ui.html/**"
  8.         );
  9.     }

        12.2.退出登录

                看视频操作

        12.3.重置路由器的路由集合

                看视频操作

        12.4.日志页面

  1. <template>
  2.   <div>
  3.     <div>
  4.       <!--      搜索栏-->
  5.       <el-input  style="width: 200px;margin-right: 20px" placeholder="请输入操作用户名称" v-model="username" prefix-icon="el-icon-user"></el-input>
  6.       <el-input  style="width: 200px;margin-right: 20px" placeholder="请输入操作用户名称" v-model="type" prefix-icon="el-icon-info"></el-input>
  7.       <el-button style="margin-left: 10px;" type="primary" @click="load" class="el-icon-search">搜索</el-button>
  8.       <el-button style="margin-left: 10px;" type="warning" @click="reset" class="el-icon-refresh">重置</el-button>
  9.     </div>
  10.  
  11.     <div style="margin-top:20px;margin-bottom: 20px;">
  12.  
  13.     </div>
  14.  
  15.     <el-table :data="tableData" border stripe :header-cell-style="getRowClass" @selection-change="handleSelectionChange">
  16.       <el-table-column type="selection" width="55"></el-table-column>
  17.       <el-table-column prop="id" label="id"></el-table-column>
  18.       <el-table-column prop="username" label="操作用户"></el-table-column>
  19.       <el-table-column prop="record" label="操作记录"></el-table-column>
  20.       <el-table-column prop="type" label="操作类型"></el-table-column>
  21.       <el-table-column prop="createTime" label="创建时间"></el-table-column>
  22.     </el-table>
  23.  
  24.     <div class="block" style="padding:10px 0;align-content: center;margin-left: 30%;margin-top:30px;">
  25.       <el-pagination
  26.           @size-change="handleSizeChange"
  27.           @current-change="handleCurrentChange"
  28.           :current-page="pageNum"
  29.           :page-sizes="[5, 10, 15, 20]"
  30.           :page-size="10"
  31.           layout="total, sizes, prev, pager, next, jumper"
  32.           :total="total">
  33.       </el-pagination>
  34.     </div>
  35.   </div>
  36. </template>
  37.  
  38. <script>
  39. export default {
  40.   name: "Role",
  41.   data(){
  42.     return{
  43.       pageSize:10,
  44.       pageNum:1,
  45.       name:'',
  46.       tableData:[],
  47.       dialogFormVisible:false,
  48.       menuVisible:false,
  49.       form:{},
  50.       formLabelWidth: '80px',
  51.       multipleSelection:[],
  52.       total:0,
  53.       menuData:[],
  54.       checks:[],
  55.       props: {
  56.         children: 'children',
  57.         label: 'name'
  58.       }
  59.     }
  60.   },
  61.   created() {
  62.     this.load();
  63.   },
  64.   methods:{
  65.     load(){
  66.       this.request.get("/sysLog/findPage",{
  67.         params:{
  68.           pageNum:this.pageNum,
  69.           pageSize:this.pageSize,
  70.           username:this.username,
  71.           type:this.type
  72.         }
  73.       }).then(res => {
  74.         this.tableData = res.data.records;
  75.         this.total = res.data.total;
  76.       })
  77.     },
  78.     getRowClass({rowIndex,columnIndex}){
  79.       if(rowIndex === 0){
  80.         return 'background:#ccc'
  81.       }
  82.     },
  83.     reset(){
  84.       this.username = '';
  85.       this.type = '';
  86.       this.load();
  87.     },
  88.     handleSelectionChange(val) {
  89.       this.multipleSelection = val;
  90.     },
  91.     handleSizeChange(val) {
  92.       this.pageSize = val;
  93.       this.load();
  94.     },
  95.     handleCurrentChange(val) {
  96.       this.pageNum = val;
  97.       this.load();
  98.     },
  99.   }
  100. }
  101. </script>
  102.  
  103. <style scoped>
  104.  
  105. </style>

13.文件管理

        13.1.文件表：

        13.2上传文件，下载文件接口

  1. package com.example.authority.controller;
  2.  
  3. import com.baomidou.mybatisplus.core.conditions.query.QueryWrapper;
  4. import com.baomidou.mybatisplus.core.toolkit.CollectionUtils;
  5. import com.baomidou.mybatisplus.core.toolkit.StringUtils;
  6. import com.baomidou.mybatisplus.extension.plugins.pagination.Page;
  7. import com.example.authority.annotation.Log;
  8. import com.example.authority.annotation.NoAuth;
  9. import com.example.authority.common.Result;
  10. import com.example.authority.entity.SysFile;
  11. import com.example.authority.service.SysFileService;
  12. import org.apache.commons.codec.digest.DigestUtils;
  13. import org.springframework.beans.factory.annotation.Autowired;
  14. import org.springframework.beans.factory.annotation.Value;
  15. import org.springframework.web.bind.annotation.*;
  16. import org.springframework.web.multipart.MultipartFile;
  17.  
  18. import javax.servlet.ServletOutputStream;
  19. import javax.servlet.http.HttpServletResponse;
  20. import java.io.File;
  21. import java.io.FileInputStream;
  22. import java.io.IOException;
  23. import java.net.URLEncoder;
  24. import java.util.List;
  25. import java.util.UUID;
  26.  
  27. @RestController
  28. @RequestMapping("/sysFile")
  29. public class SysFileController {
  30.  
  31.     @Autowired
  32.     private SysFileService sysFileService;
  33.  
  34.     @Value("${files.upload.path}")
  35.     private String fileUploadPath;
  36.  
  37.     /**
  38.      * 批量删除文件
  39.      * @param idList
  40.      * @return
  41.      */
  42.     @PostMapping("/deleteBatch")
  43.     @Log(record = "批量删除文件",type = "删除")
  44.     public Result deleteBatch(@RequestBody List<Integer> idList){
  45.         for (Integer id : idList) {
  46.             SysFile sysFile = sysFileService.getById(id);
  47.             sysFile.setIsDelete(1);
  48.             sysFileService.updateById(sysFile);
  49.         }
  50.         return Result.success();
  51.     }
  52.     /**
  53.      * 改变启用状态
  54.      * @param sysFile
  55.      * @return
  56.      */
  57.     @PostMapping("/updateEnable")
  58.     @Log(record = "updateEnable",type = "修改")
  59.     public Result updateEnable(@RequestBody SysFile sysFile){
  60.         boolean b = sysFileService.updateById(sysFile);
  61.         if(b){
  62.             return Result.success();
  63.         }else{
  64.             return Result.error();
  65.         }
  66.     }
  67.  
  68.     /**
  69.      * 根据id删除
  70.      * @param id
  71.      * @return
  72.      */
  73.     @DeleteMapping("/deleteById/{id}")
  74.     @Log(record = "根据id删除文件",type = "删除")
  75.     public Result deleteById(@PathVariable Integer id){
  76.         SysFile sysFile = sysFileService.getById(id);
  77.         sysFile.setIsDelete(1);
  78.         boolean b = sysFileService.updateById(sysFile);
  79.         if(b){
  80.             return Result.success();
  81.         }else{
  82.             return Result.error();
  83.         }
  84.     }
  85.  
  86.     /**
  87.      * 上传文件
  88.      * @param file
  89.      * @return
  90.      */
  91.     @PostMapping("/upload")
  92.     @Log(record = "上传文件",type = "新增")
  93.     @NoAuth
  94.     public String upload(@RequestParam MultipartFile file) throws IOException {
  95.         String md5 = DigestUtils.md5Hex(file.getBytes());
  96.         String originalFilename = file.getOriginalFilename();  //文件的名称
  97.         String type = originalFilename.substring(originalFilename.lastIndexOf(".") + 1);//文件类型
  98.         long size = file.getSize();
  99.         File uploadParentFile = new File(fileUploadPath);
  100.         if(!uploadParentFile.exists()){
  101.             uploadParentFile.mkdirs();
  102.         }
  103.         List<SysFile> existFileList = sysFileService.getByMD5(md5);
  104.         String url = null;
  105.         if(CollectionUtils.isNotEmpty(existFileList)){
  106.             //文件已经存在上传目录
  107.             url = existFileList.get(0).getUrl();
  108.         }else{
  109.             //文件不存在上传目录
  110.             String uuid = UUID.randomUUID().toString().replaceAll("-", "");
  111.             String fileUUID = uuid + "." + type;
  112.             File uploadFile = new File(fileUploadPath + fileUUID);
  113.             url = "http://localhost:8888/sysFile/" + fileUUID;
  114.             file.transferTo(uploadFile);
  115.         }
  116.  
  117.         //存储数据库
  118.         SysFile sysFile = new SysFile();
  119.         sysFile.setName(originalFilename);
  120.         sysFile.setSize(size / 1024);
  121.         sysFile.setType(type);
  122.         sysFile.setUrl(url);
  123.         sysFile.setMd5(md5);
  124.         sysFileService.save(sysFile);
  125.         return url;
  126.     }
  127.  
  128.     /**
  129.      * 下载文件
  130.      * @param fileUUID
  131.      */
  132.     @GetMapping("/{fileUUID}")
  133.     @NoAuth
  134.     public void download(@PathVariable String fileUUID, HttpServletResponse response){
  135.         File downloadFile = new File(fileUploadPath + fileUUID);
  136.         try {
  137.             FileInputStream fileInputStream = new FileInputStream(downloadFile);
  138.             // 设置输出流的格式
  139.             response.setCharacterEncoding("UTF-8");
  140.             response.addHeader("Content-Disposition", "attachment;filename=" + URLEncoder.encode(fileUUID, "UTF-8"));
  141.             //作用是使客户端浏览器区分不同种类的数据，并根据不同的MIME调用浏览器内不同的程序嵌入模块来处理相应的数据。
  142.             response.setContentType("application/octet-stream");  //.*（ 二进制流，不知道下载文件类型）
  143.             ServletOutputStream outputStream = response.getOutputStream();
  144.             int len = 0;
  145.             byte[] bytes = new byte[1024];
  146.             while((len = fileInputStream.read(bytes)) != -1){
  147.                 outputStream.write(bytes,0,len);
  148.                 outputStream.flush();
  149.             }
  150.             outputStream.flush();
  151.             outputStream.close();
  152.             fileInputStream.close();
  153.         } catch (IOException e) {
  154.             e.printStackTrace();
  155.         }
  156.  
  157.     }
  158.     /**
  159.      * 查询全部数据
  160.      * @return
  161.      */
  162.     @GetMapping("/findAll")
  163.     @Log(record = "查询全部文件",type = "查询")
  164.     public Result findAll(@RequestParam(name = "type",defaultValue = "") String type){
  165.         QueryWrapper<SysFile> queryWrapper = new QueryWrapper<>();
  166.         if(StringUtils.isNotBlank(type)){
  167.             queryWrapper.eq("type",type);
  168.         }
  169.         return Result.success(sysFileService.list(queryWrapper));
  170.     }
  171.  
  172.     /**
  173.      * 分页查询
  174.      * @param pageNum：页码
  175.      * @param pageSize：每页条数
  176.      * @param name：角色名称
  177.      * @return
  178.      */
  179.     @GetMapping("/findPage")
  180.     @Log(record = "查询文件分页",type = "查询")
  181.     public Result findPage(@RequestParam Integer pageNum,
  182.                            @RequestParam Integer pageSize,
  183.                            @RequestParam(name = "name",defaultValue = "") String name){
  184.         Page<SysFile> page = new Page<>(pageNum,pageSize);
  185.         QueryWrapper<SysFile> queryWrapper = new QueryWrapper<>();
  186.         queryWrapper.eq("is_delete",0);
  187.         if(StringUtils.isNotBlank(name)){
  188.             queryWrapper.like("name",name);
  189.         }
  190.         Page<SysFile> sysFilePage = sysFileService.page(page, queryWrapper);
  191.         return Result.success(sysFilePage);
  192.     }
  193. }

        13.3前端页面

  1. <template>
  2.   <div>
  3.     <div>
  4.       <!--      搜索栏-->
  5.       <el-input  style="width: 200px;margin-right: 20px" placeholder="请输入名称" v-model="name" prefix-icon="el-icon-user"></el-input>
  6.       <el-button style="margin-left: 10px;" type="primary" @click="load" class="el-icon-search">搜索</el-button>
  7.       <el-button style="margin-left: 10px;" type="warning" @click="reset" class="el-icon-refresh">重置</el-button>
  8.     </div>
  9.  
  10.     <div style="margin-top:20px;margin-bottom: 20px;">
  11.       <!--      新增。批量删除-->
  12.       <el-upload
  13.           style="display: inline-block"
  14.           action="http://localhost:8888/sysFile/upload"
  15.           :show-file-list="false"
  16.           :on-success="handleAvatarSuccess"
  17.           :on-error="handleAvatarError">
  18.         <el-button style="margin-right: 10px;" type="primary"  class="el-icon-plus">上传文件</el-button>
  19.       </el-upload>
  20.       <el-popconfirm
  21.           confirm-button-text='确定'
  22.           cancel-button-text='取消'
  23.           icon="el-icon-info"
  24.           icon-color="red"
  25.           title="确定删除这些数据吗？"
  26.           @confirm="deleteBatch"
  27.           @cancel="cancel">
  28.         <el-button slot="reference" type="danger" style="margin-left:5px;" class="el-icon-delete">批量删除</el-button>
  29.       </el-popconfirm>
  30.     </div>
  31.  
  32.     <el-table :data="tableData" border stripe :header-cell-style="getRowClass" @selection-change="handleSelectionChange">
  33.       <el-table-column type="selection" width="55"></el-table-column>
  34.       <el-table-column prop="id" label="id"></el-table-column>
  35.       <el-table-column prop="name" label="文件名称"></el-table-column>
  36.       <el-table-column prop="type" label="文件类型"></el-table-column>
  37.       <el-table-column prop="size" label="文件大小(kb)"></el-table-column>
  38.       <el-table-column prop="enable" label="是否启用">
  39.         <template slot-scope="scope">
  40.           <el-switch
  41.               v-model="scope.row.enable"
  42.               active-color="#13ce66"
  43.               inactive-color="#ff4949"
  44.               @change="changeEnable(scope.row)"
  45.               :active-value="1"
  46.               :inactive-value="0">
  47.           </el-switch>
  48.         </template>
  49.       </el-table-column>
  50.       <el-table-column  label="操作" width="300">
  51.         <template slot-scope="scope">
  52.           <el-button  type="success"  class="el-icon-view" @click="viewImage(scope.row.url)">预览</el-button>
  53.           <el-button  type="primary"  class="el-icon-download" @click="download(scope.row.url)" v-if="scope.row.enable === 1">下载</el-button>
  54.           <el-popconfirm
  55.               confirm-button-text='确定'
  56.               cancel-button-text='取消'
  57.               icon="el-icon-info"
  58.               icon-color="red"
  59.               title="确定删除这些数据吗？"
  60.               @confirm="handleDelete(scope.row.id)"
  61.               @cancel="cancel">
  62.             <el-button slot="reference" type="danger" style="margin-left:5px;" class="el-icon-delete">删除</el-button>
  63.           </el-popconfirm>
  64.         </template>
  65.       </el-table-column>
  66.     </el-table>
  67.  
  68.     <div class="block" style="padding:10px 0;align-content: center;margin-left: 30%;margin-top:30px;">
  69.       <el-pagination
  70.           @size-change="handleSizeChange"
  71.           @current-change="handleCurrentChange"
  72.           :current-page="pageNum"
  73.           :page-sizes="[5, 10, 15, 20]"
  74.           :page-size="10"
  75.           layout="total, sizes, prev, pager, next, jumper"
  76.           :total="total">
  77.       </el-pagination>
  78.     </div>
  79.  
  80.     <el-dialog title="字典信息" :visible.sync="viewVisible" width="30%">
  81.       <img width="100%" :src="dialogImageUrl" alt="图片"/>
  82.     </el-dialog>
  83.  
  84.   </div>
  85. </template>
  86.  
  87. <script>
  88. export default {
  89.   name: "Role",
  90.   data(){
  91.     return{
  92.       pageSize:10,
  93.       pageNum:1,
  94.       name:'',
  95.       tableData:[],
  96.       dialogImageUrl:'',
  97.       dialogFormVisible:false,
  98.       viewVisible:false,
  99.       form:{},
  100.       formLabelWidth: '80px',
  101.       multipleSelection:[],
  102.       total:0
  103.     }
  104.   },
  105.   created() {
  106.     this.load();
  107.   },
  108.   methods:{
  109.     viewImage(url){
  110.       this.dialogImageUrl = url;
  111.       this.viewVisible = true;
  112.     },
  113.     changeEnable(row){
  114.       this.request.post('/sysFile/updateEnable',row).then(res => {
  115.         if(res.code === '200'){
  116.           this.$message.success('更新启用状态成功')
  117.         }else{
  118.           this.$message.error('更新启用状态失败')
  119.         }
  120.       })
  121.     },
  122.     load(){
  123.       this.request.get("/sysFile/findPage",{
  124.         params:{
  125.           pageNum:this.pageNum,
  126.           pageSize:this.pageSize,
  127.           name:this.name,
  128.         }
  129.       }).then(res => {
  130.         this.tableData = res.data.records;
  131.         this.total = res.data.total;
  132.       })
  133.     },
  134.     getRowClass({rowIndex,columnIndex}){
  135.       if(rowIndex === 0){
  136.         return 'background:#ccc'
  137.       }
  138.     },
  139.     reset(){
  140.       this.name = '';
  141.       this.load();
  142.     },
  143.     save(){
  144.       this.dialogFormVisible = true;
  145.       this.form = {};
  146.     },
  147.     handleAdd(){
  148.       this.request.post("/sysFile/save",this.form).then(res => {
  149.         if(res.code === '200'){
  150.           if(this.form.id){
  151.             this.$message.success('编辑成功');
  152.           }else{
  153.             this.$message.success('新增成功');
  154.           }
  155.           this.dialogFormVisible = false;
  156.           this.load();
  157.         }else{
  158.           this.$message.error(res.msg)
  159.         }
  160.       })
  161.     },
  162.     handleEdit(row){
  163.       this.form = JSON.parse(JSON.stringify(row));
  164.       this.dialogFormVisible = true;
  165.     },
  166.     handleDelete(id){
  167.       if(id){
  168.         this.request.delete('/sysFile/deleteById/' + id).then(res => {
  169.           if(res.code === '200'){
  170.             this.$message.success('删除数据成功');
  171.             this.handleCalPageNum();
  172.           }else{
  173.             this.$message.error(res.msg)
  174.           }
  175.         })
  176.       }else{
  177.         this.$message.error('没有id信息，无法删除');
  178.       }
  179.     },
  180.     cancel(){
  181.       this.$message.success('取消操作成功');
  182.     },
  183.     handleSelectionChange(val) {
  184.       this.multipleSelection = val;
  185.     },
  186.     deleteBatch(){
  187.       //批量删除数据
  188.       if(this.multipleSelection.length === 0){
  189.         this.$message.warning("请先选择要删除的数据");
  190.         return
  191.       }
  192.       const ids = this.multipleSelection.map(v => v.id);
  193.       this.request.post('/sysFile/deleteBatch',ids).then(res => {
  194.         if(res.code === '200'){
  195.           this.$message.success('批量删除成功');
  196.           this.handleCalPageNum();
  197.         }else{
  198.           this.$message.error(res.msg);
  199.         }
  200.       })
  201.     },
  202.     handleSizeChange(val) {
  203.       this.pageSize = val;
  204.       this.load();
  205.     },
  206.     handleCurrentChange(val) {
  207.       this.pageNum = val;
  208.       this.load();
  209.     },
  210.     handleCalPageNum(){
  211.       this.request.get("/sysFile/findPage",{
  212.         params:{
  213.           pageNum:this.pageNum,
  214.           pageSize:this.pageSize,
  215.           name:this.name,
  216.         }
  217.       }).then(res => {
  218.         this.total = res.data.total;
  219.         this.pageNum = (this.total % this.pageSize === 0) ? (this.total / this.pageSize) : Math.floor((this.total / this.pageSize) + 1);
  220.         if(this.pageNum < 1){
  221.           this.pageNum = 1;
  222.         }
  223.         this.load();
  224.       })
  225.     },
  226.     handleAvatarSuccess(res, file) {
  227.       this.$message.success('上传文件成功!');
  228.       this.load();
  229.  
  230.     },
  231.     handleAvatarError() {
  232.         this.$message.error('上传文件失败!');
  233.     },
  234.     download(url){
  235.       window.open(url);
  236.     }
  237.   }
  238. }
  239. </script>
  240.  
  241. <style scoped>
  242. .avatar-uploader .el-upload {
  243.   border: 1px dashed #d9d9d9;
  244.   border-radius: 6px;
  245.   cursor: pointer;
  246.   position: relative;
  247.   overflow: hidden;
  248. }
  249. .avatar-uploader .el-upload:hover {
  250.   border-color: #409EFF;
  251. }
  252. .avatar-uploader-icon {
  253.   font-size: 28px;
  254.   color: #8c939d;
  255.   width: 178px;
  256.   height: 178px;
  257.   line-height: 178px;
  258.   text-align: center;
  259. }
  260. .avatar {
  261.   width: 178px;
  262.   height: 178px;
  263.   display: block;
  264. }
  265. </style>

网页显示图片的配置，

InterceptorConfig类
/**
 * 映射路径修改:这段代码意思就配置一个拦截器， 如果访问路径是addResourceHandler中的filepath 这个路径
 * 那么就 映射到访问本地的addResourceLocations 的参数的这个路径上，
 * 这样就可以让别人访问服务器的本地文件了，比如本地图片或者本地音乐视频什么的。
 * @param registry
 */
@Override
public void addResourceHandlers(ResourceHandlerRegistry registry) {
    registry.addResourceHandler("/sysFile/show/**").addResourceLocations("file:D:\\temp\\files\\");
}

14.文章管理

文章表：

后端代码，参考视频

安装npm依赖包

npm install mavon-editor --s

main.js

// main.js全局注册
import mavonEditor from 'mavon-editor'
import 'mavon-editor/dist/css/index.css'
// use
Vue.use(mavonEditor)


// 绑定@imgAdd event
imgAdd(pos, $file) {
  let $vm = this.$refs.md
  // 第一步.将图片上传到服务器.
  const formData = new FormData();
  formData.append('file', $file);
  axios({
    url: 'http://localhost:8899/file/upload',
    method: 'post',
    data: formData,
    headers: {'Content-Type': 'multipart/form-data'},
  }).then((res) => {
    // 第二步.将返回的url替换到文本原位置![...](./0) -> ![...](url)
    $vm.$img2Url(pos, res.data);
  })
}

展示富文本

<mavon-editor
    class="md"
    :value="content"
    :subfield="false"
    :defaultOpen="'preview'"
    :toolbarsFlag="false"
    :editable="false"
    :scrollStyle="true"
    :ishljs="true"
/>

富文本编辑

<mavon-editor ref="md" v-model="form.content" :ishljs="true" @imgAdd="imgAdd"/>

前端页面

  1. <template>
  2.   <div>
  3.     <div>
  4.       <!--      搜索栏-->
  5.       <el-input  style="width: 200px;margin-right: 20px" placeholder="请输入文章名称" v-model="name" prefix-icon="el-icon-user"></el-input>
  6.       <el-input  style="width: 200px;margin-right: 20px" placeholder="请输入创建者名称" v-model="user" prefix-icon="el-icon-user"></el-input>
  7.       <el-button style="margin-left: 10px;" type="primary" @click="load" class="el-icon-search">搜索</el-button>
  8.       <el-button style="margin-left: 10px;" type="warning" @click="reset" class="el-icon-refresh">重置</el-button>
  9.     </div>
  10.  
  11.     <div style="margin-top:20px;margin-bottom: 20px;">
  12.       <!--      新增。批量删除-->
  13.       <el-button style="margin-right: 10px;" type="success"  class="el-icon-plus" @click="save">新增</el-button>
  14.       <el-popconfirm
  15.           confirm-button-text='确定'
  16.           cancel-button-text='取消'
  17.           icon="el-icon-info"
  18.           icon-color="red"
  19.           title="确定删除这些数据吗？"
  20.           @confirm="deleteBatch"
  21.           @cancel="cancel">
  22.         <el-button slot="reference" type="danger" style="margin-left:5px;" class="el-icon-delete">批量删除</el-button>
  23.       </el-popconfirm>
  24.     </div>
  25.  
  26.     <el-table :data="tableData" border stripe :header-cell-style="getRowClass" @selection-change="handleSelectionChange">
  27.       <el-table-column type="selection" width="55"></el-table-column>
  28.       <el-table-column prop="id" label="id"></el-table-column>
  29.       <el-table-column prop="name" label="文章名称"></el-table-column>
  30.       <el-table-column prop="content" label="文章内容">
  31.         <template slot-scope="scope">
  32.           <el-button  type="primary"  class="el-icon-view" @click="view(scope.row.content)">查看内容</el-button>
  33.         </template>
  34.       </el-table-column>
  35.       <el-table-column prop="value" label="创建用户"></el-table-column>
  36.       <el-table-column prop="type" label="类型"></el-table-column>
  37.       <el-table-column prop="createTime" label="创建时间"></el-table-column>
  38.       <el-table-column  label="操作" width="200">
  39.         <template slot-scope="scope">
  40.           <el-button  type="primary"  class="el-icon-edit" @click="handleEdit(scope.row)">编辑</el-button>
  41.           <el-popconfirm
  42.               confirm-button-text='确定'
  43.               cancel-button-text='取消'
  44.               icon="el-icon-info"
  45.               icon-color="red"
  46.               title="确定删除这些数据吗？"
  47.               @confirm="handleDelete(scope.row.id)"
  48.               @cancel="cancel">
  49.             <el-button slot="reference" type="danger" style="margin-left:5px;" class="el-icon-delete">删除</el-button>
  50.           </el-popconfirm>
  51.         </template>
  52.       </el-table-column>
  53.     </el-table>
  54.  
  55.     <div class="block" style="padding:10px 0;align-content: center;margin-left: 30%;margin-top:30px;">
  56.       <el-pagination
  57.           @size-change="handleSizeChange"
  58.           @current-change="handleCurrentChange"
  59.           :current-page="pageNum"
  60.           :page-sizes="[5, 10, 15, 20]"
  61.           :page-size="10"
  62.           layout="total, sizes, prev, pager, next, jumper"
  63.           :total="total">
  64.       </el-pagination>
  65.     </div>
  66.  
  67.     <el-dialog title="文章信息" :visible.sync="dialogFormVisible" width="60%">
  68.       <el-form :model="form">
  69.         <el-form-item label="文章名称" :label-width="formLabelWidth">
  70.           <el-input v-model="form.name" autocomplete="off"></el-input>
  71.         </el-form-item>
  72.         <el-form-item label="文章内容" :label-width="formLabelWidth">
  73.           <mavon-editor ref="md" v-model="form.content" :ishljs="true" @imgAdd="imgAdd"/>
  74.         </el-form-item>
  75.         <el-form-item label="类型" :label-width="formLabelWidth">
  76.           <el-input v-model="form.type" autocomplete="off"></el-input>
  77.         </el-form-item>
  78.       </el-form>
  79.       <div slot="footer" class="dialog-footer">
  80.         <el-button @click="dialogFormVisible = false">取 消</el-button>
  81.         <el-button type="primary" @click="handleAdd">确 定</el-button>
  82.       </div>
  83.     </el-dialog>
  84.  
  85.    <el-dialog title="文章内容展示" :visible.sync="contentVisible" width="60%">
  86.     <el-card>
  87.       <mavon-editor
  88.           class="md"
  89.           :value="content"
  90.           :subfield="false"
  91.           :defaultOpen="'preview'"
  92.           :toolbarsFlag="false"
  93.           :editable="false"
  94.           :scrollStyle="true"
  95.           :ishljs="true"
  96.       />
  97.     </el-card>
  98.     </el-dialog>
  99.  
  100.   </div>
  101. </template>
  102.  
  103. <script>
  104. import axios from "axios";
  105.  
  106. export default {
  107.   name: "Article",
  108.   data(){
  109.     return{
  110.       pageSize:10,
  111.       pageNum:1,
  112.       name:'',
  113.       user:'',
  114.       content:'',
  115.       tableData:[],
  116.       dialogFormVisible:false,
  117.       contentVisible:false,
  118.       form:{},
  119.       formLabelWidth: '80px',
  120.       multipleSelection:[],
  121.       total:0
  122.     }
  123.   },
  124.   created() {
  125.     this.load();
  126.   },
  127.   methods:{
  128.     view(content){
  129.       this.content = content;
  130.       this.contentVisible = true;
  131.     },
  132.     // 绑定@imgAdd event
  133.     imgAdd(pos, $file) {
  134.       let $vm = this.$refs.md
  135.       // 第一步.将图片上传到服务器.
  136.       const formData = new FormData();
  137.       formData.append('file', $file);
  138.       axios({
  139.         url: 'http://localhost:8888/sysFile/upload',
  140.         method: 'post',
  141.         data: formData,
  142.         headers: {'Content-Type': 'multipart/form-data'},
  143.       }).then((res) => {
  144.         console.log(res)
  145.         // 第二步.将返回的url替换到文本原位置![...](./0) -> ![...](url)
  146.         $vm.$img2Url(pos, res.data);
  147.       })
  148.     },
  149.     load(){
  150.       this.request.get("/article/findPage",{
  151.         params:{
  152.           pageNum:this.pageNum,
  153.           pageSize:this.pageSize,
  154.           name:this.name,
  155.         }
  156.       }).then(res => {
  157.         this.tableData = res.data.records;
  158.         this.total = res.data.total;
  159.       })
  160.     },
  161.     getRowClass({rowIndex,columnIndex}){
  162.       if(rowIndex === 0){
  163.         return 'background:#ccc'
  164.       }
  165.     },
  166.     reset(){
  167.       this.name = '';
  168.       this.user = '';
  169.       this.load();
  170.     },
  171.     save(){
  172.       this.dialogFormVisible = true;
  173.       this.form = {};
  174.     },
  175.     handleAdd(){
  176.       this.request.post("/article/save",this.form).then(res => {
  177.         if(res.code === '200'){
  178.           if(this.form.id){
  179.             this.$message.success('编辑成功');
  180.           }else{
  181.             this.$message.success('新增成功');
  182.           }
  183.           this.dialogFormVisible = false;
  184.           this.load();
  185.         }else{
  186.           this.$message.error(res.msg)
  187.         }
  188.       })
  189.     },
  190.     handleEdit(row){
  191.       this.form = JSON.parse(JSON.stringify(row));
  192.       this.dialogFormVisible = true;
  193.     },
  194.     handleDelete(id){
  195.       if(id){
  196.         this.request.delete('/article/deleteById/' + id).then(res => {
  197.           if(res.code === '200'){
  198.             this.$message.success('删除数据成功');
  199.             this.handleCalPageNum();
  200.           }else{
  201.             this.$message.error(res.msg)
  202.           }
  203.         })
  204.       }else{
  205.         this.$message.error('没有id信息，无法删除');
  206.       }
  207.     },
  208.     cancel(){
  209.       this.$message.success('取消操作成功');
  210.     },
  211.     handleSelectionChange(val) {
  212.       this.multipleSelection = val;
  213.     },
  214.     deleteBatch(){
  215.       //批量删除数据
  216.       if(this.multipleSelection.length === 0){
  217.         this.$message.warning("请先选择要删除的数据");
  218.         return
  219.       }
  220.       const ids = this.multipleSelection.map(v => v.id);
  221.       this.request.post('/article/deleteBatch',ids).then(res => {
  222.         if(res.code === '200'){
  223.           this.$message.success('批量删除成功');
  224.           this.handleCalPageNum();
  225.         }else{
  226.           this.$message.error(res.msg);
  227.         }
  228.       })
  229.     },
  230.     handleSizeChange(val) {
  231.       this.pageSize = val;
  232.       this.load();
  233.     },
  234.     handleCurrentChange(val) {
  235.       this.pageNum = val;
  236.       this.load();
  237.     },
  238.     handleCalPageNum(){
  239.       this.request.get("/article/findPage",{
  240.         params:{
  241.           pageNum:this.pageNum,
  242.           pageSize:this.pageSize,
  243.           name:this.name,
  244.           user:this.user,
  245.         }
  246.       }).then(res => {
  247.         this.total = res.data.total;
  248.         this.pageNum = (this.total % this.pageSize === 0) ? (this.total / this.pageSize) : Math.floor((this.total / this.pageSize) + 1);
  249.         if(this.pageNum < 1){
  250.           this.pageNum = 1;
  251.         }
  252.         this.load();
  253.       })
  254.     }
  255.   }
  256. }
  257. </script>
  258.  
  259. <style scoped>
  260.  
  261. </style>

15.公告和轮播图管理

        公告表，轮播图表

        后端代码

        前端页面

看视频操作，代码较多

16.个人信息页面和修改密码页面

        参考视频

17.整合Echarts搭建后台首页

Home页面

  1. <template>
  2.   <div>
  3.     <el-row :gutter="20">
  4.       <el-col :span="6">
  5.         <el-card>权限项目</el-card>
  6.       </el-col>
  7.       <el-col :span="6">
  8.         <el-card>毕设项目</el-card>
  9.       </el-col>
  10.       <el-col :span="6">
  11.         <el-card>前后端分离</el-card>
  12.       </el-col>
  13.       <el-col :span="6">
  14.         <el-card>脚手架系统</el-card>
  15.       </el-col>
  16.     </el-row>
  17.  
  18.     <el-row :gutter="20">
  19.       <el-col :span="8">
  20.         <div style="width:400px;height:400px" id="main">
  21.  
  22.         </div>
  23.       </el-col>
  24.       <el-col :span="8">
  25.         <div style="width:400px;height:400px" id="main1">
  26.  
  27.         </div>
  28.       </el-col>
  29.       <el-col :span="8">
  30.         <div style="width:400px;height:400px" id="main2">
  31.  
  32.         </div>
  33.       </el-col>
  34.     </el-row>
  35.   </div>
  36. </template>
  37.  
  38. <script>
  39. import * as echarts from 'echarts';
  40.  
  41. export default {
  42.   name: "Home",
  43.   mounted() {
  44.  
  45.     var chartDom = document.getElementById('main');
  46.     var myChart = echarts.init(chartDom);
  47.     var option;
  48.  
  49.     option = {
  50.       xAxis: {
  51.         type: 'category',
  52.         data: ['Mon', 'Tue', 'Wed', 'Thu', 'Fri', 'Sat', 'Sun']
  53.       },
  54.       yAxis: {
  55.         type: 'value'
  56.       },
  57.       series: [
  58.         {
  59.           data: [820, 932, 901, 934, 1290, 1330, 1320],
  60.           type: 'line',
  61.           smooth: true
  62.         }
  63.       ]
  64.     };
  65.  
  66.  
  67.  
  68.     var chartDom1 = document.getElementById('main1');
  69.     var myChart1 = echarts.init(chartDom1);
  70.     var option1;
  71.  
  72.     option1 = {
  73.       xAxis: {
  74.         type: 'category',
  75.         data: ['Mon', 'Tue', 'Wed', 'Thu', 'Fri', 'Sat', 'Sun']
  76.       },
  77.       yAxis: {
  78.         type: 'value'
  79.       },
  80.       series: [
  81.         {
  82.           data: [120, 200, 150, 80, 70, 110, 130],
  83.           type: 'bar',
  84.           showBackground: true,
  85.           backgroundStyle: {
  86.             color: 'rgba(180, 180, 180, 0.2)'
  87.           }
  88.         }
  89.       ]
  90.     };
  91.  
  92.  
  93.  
  94.     var chartDom2 = document.getElementById('main2');
  95.     var myChart2 = echarts.init(chartDom2);
  96.     var option2;
  97.  
  98.     option2 = {
  99.       tooltip: {
  100.         trigger: 'item'
  101.       },
  102.       legend: {
  103.         top: '5%',
  104.         left: 'center'
  105.       },
  106.       series: [
  107.         {
  108.           name: 'Access From',
  109.           type: 'pie',
  110.           radius: ['40%', '70%'],
  111.           avoidLabelOverlap: false,
  112.           itemStyle: {
  113.             borderRadius: 10,
  114.             borderColor: '#fff',
  115.             borderWidth: 2
  116.           },
  117.           label: {
  118.             show: false,
  119.             position: 'center'
  120.           },
  121.           emphasis: {
  122.             label: {
  123.               show: true,
  124.               fontSize: 40,
  125.               fontWeight: 'bold'
  126.             }
  127.           },
  128.           labelLine: {
  129.             show: false
  130.           },
  131.           data: [
  132.             { value: 1048, name: 'Search Engine' },
  133.             { value: 735, name: 'Direct' },
  134.             { value: 580, name: 'Email' },
  135.             { value: 484, name: 'Union Ads' },
  136.             { value: 300, name: 'Video Ads' }
  137.           ]
  138.         }
  139.       ]
  140.     };
  141.  
  142.  
  143.  
  144.     this.request.get('/user/echart').then(res => {
  145.       if(res.code === '200'){
  146.         option.xAxis.data = res.data.list1;      //名称的集合
  147.         option.series[0].data = res.data.list2;  //数值的集合
  148.         option && myChart.setOption(option);
  149.  
  150.         option1.xAxis.data = res.data.list1;      //名称的集合
  151.         option1.series[0].data = res.data.list2;  //数值的集合
  152.         option1 && myChart1.setOption(option1);
  153.  
  154.         option2.series[0].data = res.data.list3;
  155.         option2 && myChart2.setOption(option2);
  156.       }
  157.     })
  158.  
  159.   }
  160. }
  161. </script>
  162.  
  163. <style scoped>
  164.  
  165. </style>

18.前台首页搭建

app.vue中不但可以当做是网站首页，也可以写所有页面中公共需要的动画或者样式。

app.vue是vue页面资源的首加载项，是主组件，页面入口文件，所有页面都是在App.vue下进行切换的；也是整个项目的关键，app.vue负责构建定义及页面组件归集。

index.html---主页，项目入口

App.vue---根组件

main.js---入口文件

        Front.vue和Home.vue页面，实现轮播图和项目介绍，头部展示基本信息

19.前台文章列表显示和文章详情

        看视频操作，代码较多不复制了

20.前台公告列表和项目总结

        看视频操作，代码较多不复制了

声明：本文内容由网友自发贡献，不代表【wpsshop博客】立场，版权归原作者所有，本站不承担相应法律责任。如您发现有侵权的内容，请联系我们。转载请注明出处：https://www.wpsshop.cn/w/小舞很执着/article/detail/774145
推荐阅读
相关标签

Copyright © 2003-2013 www.wpsshop.cn 版权所有，并保留所有权利。

  

闽ICP备14008679号