• 权限系统(前后端分离)


    权限系统(前后端分离)

    B站视频教程
    以下是总结的笔记。仅供参考。


    采用的技术栈:本课程采用主流的技术栈实现,Mysq|数据库,SpringBoot2+Mybatis Plus后端,redis缓存,安全框架SpringSecurity,Vue3.2+Element Plus实现后台管理。基于JWT技术实现前后端分离。项目开发同时采用MybatisX插件生成代码,提高开发效率。
    基于SpringSecurity实现了登录验证鉴权功能,用户管理,角色管理,权限管理。


    架构搭建

    后端框架搭建

    在这里插入图片描述
    可以通过更换阿里云的url进行替换:https://start.aliyun.com/
    在这里插入图片描述
    使用最新版本2.3.7,等在依赖下载和加载完成。

    在pom.xml中导入依赖

     <dependency>
                <groupId>mysqlgroupId>
                <artifactId>mysql-connector-javaartifactId>
                <scope>runtimescope>
            dependency>
            
            <dependency>
                <groupId>com.alibabagroupId>
                <artifactId>druidartifactId>
                <version>1.1.10version>
            dependency>
            
            <dependency>
                <groupId>com.baomidougroupId>
                <artifactId>mybatis-plus-boot-starterartifactId>
                <version>3.3.2version>
            dependency>
            <dependency>
                <groupId>com.baomidougroupId>
                <artifactId>mybatis-plus-boot-starterartifactId>
                <version>3.3.2version>
            dependency>
            <dependency>
                <groupId>com.alibabagroupId>
                <artifactId>fastjsonartifactId>
                <version>1.2.40version>
            dependency>
            
            <dependency>
                <groupId>com.auth0groupId>
                <artifactId>java-jwtartifactId>
                <version>3.2.0version>
            dependency>
            <dependency>
                <groupId>io.jsonwebtokengroupId>
                <artifactId>jjwtartifactId>
                <version>0.9.1version>
            dependency>
            <dependency>
                <groupId>commons-iogroupId>
                <artifactId>commons-ioartifactId>
                <version>2.5version>
            dependency>
            <dependency>
                <groupId>org.projectlombokgroupId>
                <artifactId>lombokartifactId>
                <optional>trueoptional>
            dependency>
            
            <dependency>
                <groupId>org.springframework.bootgroupId>
                <artifactId>spring-boot-starter-data-redisartifactId>
            dependency>
            
            <dependency>
                <groupId>org.apache.commonsgroupId>
                <artifactId>commons-pool2artifactId>
            dependency>
            
            <dependency>
                <groupId>cn.hutoolgroupId>
                <artifactId>hutool-allartifactId>
                <version>5.3.3version>
            dependency>
    
    • 1
    • 2
    • 3
    • 4
    • 5
    • 6
    • 7
    • 8
    • 9
    • 10
    • 11
    • 12
    • 13
    • 14
    • 15
    • 16
    • 17
    • 18
    • 19
    • 20
    • 21
    • 22
    • 23
    • 24
    • 25
    • 26
    • 27
    • 28
    • 29
    • 30
    • 31
    • 32
    • 33
    • 34
    • 35
    • 36
    • 37
    • 38
    • 39
    • 40
    • 41
    • 42
    • 43
    • 44
    • 45
    • 46
    • 47
    • 48
    • 49
    • 50
    • 51
    • 52
    • 53
    • 54
    • 55
    • 56
    • 57
    • 58
    • 59
    • 60
    • 61
    • 62
    • 63
    • 64

    在resource文件夹下新建application.yml:

    server:
      port: 80
      servlet:
        context-path: /
    
    spring:
      datasource:
        type: com.alibaba.druid.pool.DruidDataSource
        driver-class-name: com.mysql.cj.jdbc.Driver
        url: jdbc:mysql://localhost:3306/db_admin?serverTimezone=Asia/Shanghai
        username: root
        password: 123456
      redis: # redis配置
        host: 127.0.0.1 # IP
        port: 6379 # 端口
        password: # 密码
        connect-timeout: 10s # 连接超时时间
        lettuce: # lettuce redis客户端配置
          pool: # 连接池配置
            max-active: 8 # 连接池最大连接数(使用负值表示没有限制) 默认 8
            max-wait: 200s # 连接池最大阻塞等待时间(使用负值表示没有限制) 默认 -1
            max-idle: 8 # 连接池中的最大空闲连接 默认 8
            min-idle: 0 # 连接池中的最小空闲连接 默认 0
    
    mybatis-plus:
      global-config:
        db-config:
          id-type: auto
      configuration:
        map-underscore-to-camel-case: true
        auto-mapping-behavior: full
        log-impl: org.apache.ibatis.logging.stdout.StdOutImpl
      mapper-locations: classpath:mapper/*.xml
    
    • 1
    • 2
    • 3
    • 4
    • 5
    • 6
    • 7
    • 8
    • 9
    • 10
    • 11
    • 12
    • 13
    • 14
    • 15
    • 16
    • 17
    • 18
    • 19
    • 20
    • 21
    • 22
    • 23
    • 24
    • 25
    • 26
    • 27
    • 28
    • 29
    • 30
    • 31
    • 32
    • 33

    新建数据库db_admin
    新建用户表sys_user

    CREATE TABLE `sys_user` (
    `id` bigint(20) NOT NULL AUTO_INCREMENT COMMENT '用户ID',
    `username` varchar(100) DEFAULT NULL COMMENT '用户名',
    `password` varchar(100) DEFAULT NULL COMMENT '密码',
    `avatar` varchar(255) DEFAULT 'default.jpg' COMMENT '用户头像',
    `email` varchar(100) DEFAULT '' COMMENT '用户邮箱',
    `phonenumber` varchar(11) DEFAULT '' COMMENT '手机号码',
    `login_date` datetime DEFAULT NULL COMMENT '最后登录时间',
    `status` char(1) DEFAULT '0' COMMENT '帐号状态(0正常 1停用)',
    `create_time` datetime DEFAULT NULL COMMENT '创建时间',
    `update_time` datetime DEFAULT NULL COMMENT '更新时间',
    `remark` varchar(500) DEFAULT NULL COMMENT '备注',
    PRIMARY KEY (`id`)
    ) ENGINE=InnoDB AUTO_INCREMENT=31 DEFAULT CHARSET=utf8;
    
    • 1
    • 2
    • 3
    • 4
    • 5
    • 6
    • 7
    • 8
    • 9
    • 10
    • 11
    • 12
    • 13
    • 14

    插入数据

    insert into
    `sys_user`(`id`,`username`,`password`,`avatar`,`email`,`phonenumber`,`login_date`,`status`,`create_time`,`update_time`,`remark`) values
    (1,'java1234','$2a$10$Kib4zuVhTzg3I1CoqJfd0unuY9G9ysI7cfbhyT3fi7k7Z/4pr3bGW','20
    220727112556000000325.jpg','caofeng4017@126.com','18862857417','2022-08-29 22:10:52','0','2022-06-09 08:47:52','2022-06-22 08:47:54','备注'),
    (2,'common','$2a$10$tiArwm0GxChyEP5k0JGzsOuzyY15IKA.ZTl8S2aj3haYlKAfpwfl.','222.jpg','','','2022-08-22 21:34:39','0',NULL,NULL,NULL),
    (3,'test','$2a$10$tiArwm0GxChyEP5k0JGzsOuzyY15IKA.ZTl8S2aj3haYlKAfpwfl.','333.jpg','','','2022-07-24 17:36:07','0',NULL,NULL,NULL),
    (4,'1','$2a$10$lD0Fx7oMsFFmX9hVkmYy7eJteH8pBaXXro1X9DEMP5sbM.Z6Co55m','default.jpg','','',NULL,'1',NULL,NULL,NULL),
    (5,'2',NULL,'default.jpg','','',NULL,'1',NULL,NULL,NULL),
    (15,'fdsfs','$2a$10$AQVcp4hQ7REc5o7ztVnI7eX.sJdcYy3d1x2jm5CfrcCoMZMPacfpi','default.jpg','fdfa4@qq.com','18862851414','2022-08-02 02:22:45','1','2022-08-02 02:21:24','2022-08-01 18:23:16','fdfds4'),
    (28,'sdfss2','$2a$10$7aNJxwVmefI0XAk64vrzYuOqeeImYJUQnoBrtKP9pLTGTWO2CXQ/y','default.jpg','dfds3@qq.com','18862857413',NULL,'1','2022-08-07 00:42:46','2022-08-06 16:43:04','ddd33'),
    (29,'ccc','$2a$10$7cbWeVwDWO9Hh3qbJrvTHOn0E/DLYXxnIZpxZei0jY4ChfQbJuhi.','20220829080150000000341.jpg','3242@qq.com','18862584120','2022-08-29 19:52:27','0','2022-08-29 17:04:58',NULL,'xxx'),
    (30,'ccc666','$2a$10$Tmw5VCM/K2vb837AZDYHQOqE3gPiRZKevxLsh/ozndpTSjdwABqaK','20220829100454000000771.jpg','fdafds@qq.com','18865259845','2022-08-29 22:05:18','0','2022-08-29 22:00:39',NULL,'ccc');
    
    
    • 1
    • 2
    • 3
    • 4
    • 5
    • 6
    • 7
    • 8
    • 9
    • 10
    • 11
    • 12
    • 13

    使用MybatisX快速生成代码(没有去plagin插件中心下载)
    使用database进行连接
    在这里插入图片描述
    在这里插入图片描述
    在这里插入图片描述

    在这里插入图片描述

    启动类修改:
    在这里插入图片描述
    浏览器输入:http://localhost/test/user/list

    在这里插入图片描述


    前端框架搭建

    我们用vue ui来搭建vue项目;
    vue ui是一个可视化图形界面,方便你去创建、更新和管理vue项目,包括下载router,vuex,axios,elementui等插件,配置好一些属性以及依赖关系,方便我们使用,我个人第一次接触它就感觉非常非常非常智能和强大。

    安装node

    安装 Vue Cli

    npm install -g @vue/cli
    
    • 1

    vue ui搭建vue项目

    vue ui
    
    • 1

    新建项目
    在这里插入图片描述

    安装axios element-plus

    在这里插入图片描述
    同理安装element-plus
    在这里插入图片描述

    element-plus官网:https://element-plus.gitee.io/

    项目测试

    安装vuex和router
    在这里插入图片描述

    导入elementplus以及样式

    main.js进行修改:

    import ElementPlus from 'element-plus'
    import 'element-plus/dist/index.css'
    
    createApp(App).use(store).use(router).use(ElementPlus).mount('#app')
    
    • 1
    • 2
    • 3
    • 4

    在这里插入图片描述
    测试修改about页面
    在这里插入图片描述
    代码来源自element plus