SpringBoot+SpringSecurity+MybatisPlus+Vue3小项目摘录

最近时间比较多，应后台留言的朋友们，进行图文摘录相关内容！~ 有需要的朋友的可以留言或者私信许锅锅，有时间都会摘录的！~
如果朋友们觉得还不错的话，请多多支持本锅锅哈(点赞、关注、留言等)，感谢！！！

SpringBoot+SpringSecurity+MybatisPlus后台框架搭建

提示：这里需要一点点Java后端框架的基础哦（不太懂的地方可以标注起来，留言回复）

一、项目搭建准备

基本的设置

• 1、设置项目的jre
  

• 2、设置项目的maven路径

• 3、设置字符集编码【统一为UTF-8】
  

• 4、其他自行进行设置
  

为了应景，来个真正的面向对象编程，那本锅锅就设置个美女背景图片吧！

还不错吧！

*特别注意：新建项目【2023年11月27号idea工具项目创建springboot3依赖jdk17或者21】

其他的自行设置，Action！！！

二、重要的代码标示：

数据库相关

新建数据库security_vue3【navicat工具或者其他自己喜欢的工具都可】

建表语句sql

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=1 DEFAULT CHARSET=utf8;

pom.xml依赖坐标文件

<project xmlns="http://maven.apache.org/POM/4.0.0" xmlns:xsi="http://www.w3.org/2001/XMLSchema-instance"
         xsi:schemaLocation="http://maven.apache.org/POM/4.0.0 https://maven.apache.org/xsd/maven-4.0.0.xsd">
    <modelVersion>4.0.0modelVersion>
    <groupId>com.xuguoguogroupId>
    <artifactId>springsecurity-vue3artifactId>
    <version>0.0.1-SNAPSHOTversion>
    <name>springsecurity-vue3name>
    <description>springsecurity-vue3description>
    <properties>
        <java.version>1.8java.version>
        <project.build.sourceEncoding>UTF-8project.build.sourceEncoding>
        <project.reporting.outputEncoding>UTF-8project.reporting.outputEncoding>
        <spring-boot.version>2.7.6spring-boot.version>
    properties>
    <dependencies>
        <dependency>
            <groupId>org.springframework.bootgroupId>
            <artifactId>spring-boot-starter-webartifactId>
        dependency>

        <dependency>
            <groupId>mysqlgroupId>
            <artifactId>mysql-connector-javaartifactId>
            <version>5.1.6version>
            <scope>runtimescope>
        dependency>

        
        <dependency>
            <groupId>com.alibabagroupId>
            <artifactId>druidartifactId>
            <version>1.2.9version>
        dependency>
        
        <dependency>
            <groupId>com.baomidougroupId>
            <artifactId>mybatis-plus-boot-starterartifactId>
            <version>3.5.3version>
        dependency>

        <dependency>
            <groupId>com.alibabagroupId>
            <artifactId>fastjsonartifactId>
            <version>1.2.79version>
        dependency>

        
        <dependency>
            <groupId>com.auth0groupId>
            <artifactId>java-jwtartifactId>
            <version>3.18.2version>
        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.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.8.18version>
        dependency>


        <dependency>
            <groupId>org.springframework.bootgroupId>
            <artifactId>spring-boot-devtoolsartifactId>
            <scope>runtimescope>
            <optional>trueoptional>
        dependency>
        <dependency>
            <groupId>org.springframework.bootgroupId>
            <artifactId>spring-boot-configuration-processorartifactId>
            <optional>trueoptional>
        dependency>
        <dependency>
            <groupId>org.projectlombokgroupId>
            <artifactId>lombokartifactId>
            <optional>trueoptional>
        dependency>
        <dependency>
            <groupId>org.springframework.bootgroupId>
            <artifactId>spring-boot-starter-testartifactId>
            <scope>testscope>
        dependency>
    dependencies>
    <dependencyManagement>
        <dependencies>
            <dependency>
                <groupId>org.springframework.bootgroupId>
                <artifactId>spring-boot-dependenciesartifactId>
                <version>${spring-boot.version}version>
                <type>pomtype>
                <scope>importscope>
            dependency>
        dependencies>
    dependencyManagement>

    <build>
        <plugins>
            <plugin>
                <groupId>org.apache.maven.pluginsgroupId>
                <artifactId>maven-compiler-pluginartifactId>
                <version>3.8.1version>
                <configuration>
                    <source>1.8source>
                    <target>1.8target>
                    <encoding>UTF-8encoding>
                configuration>
            plugin>
            <plugin>
                <groupId>org.springframework.bootgroupId>
                <artifactId>spring-boot-maven-pluginartifactId>
                <version>${spring-boot.version}version>
                <configuration>
                    <mainClass>com.xuguoguo.SpringsecurityVue3ApplicationmainClass>
                    <skip>trueskip>
                configuration>
                <executions>
                    <execution>
                        <id>repackageid>
                        <goals>
                            <goal>repackagegoal>
                        goals>
                    execution>
                executions>
            plugin>
        plugins>
    build>

project>

application.yml文件

Ctrl+J触发之前编写的live template模板

server:
  port: 8888
  servlet:
    context-path: /
  tomcat:
    uri-encoding: UTF-8
    threads:
      max: 200

#  数据源配置
spring:
  # 数据源配置
  datasource:
    driver-class-name: com.mysql.jdbc.Driver
    url: jdbc:mysql://localhost:3306/security_vue3
    username: root
    password: 123
    type: com.alibaba.druid.pool.DruidDataSource
  # 集成redis的基本配置
  redis:
    host: 192.168.174.128 # redis服务器的IP地址
    #    password:    # redis服务器的密码
    lettuce:
      pool:
        max-active: 8 #  最大空闲连接数
        max-idle: 8 # 最大连接数默认为8
        min-idle: 0 # 最小空闲连接数为0
        max-wait: 500ms  # 最大等待时间
  main:
    banner-mode: off # 关闭springboot启动图标
# 开启日志
mybatis-plus:
  global-config:
    db-config:
      id-type: auto #默认值
      logic-delete-field: deleted # 逻辑删除的字段
      logic-not-delete-value: 0 # 逻辑删除的字面值：未删除为0
      logic-delete-value: 1  # 逻辑删除的字面值：未删除为1
    banner: off # 关闭mybatisPlus的启动图标
  #      table-prefix: tb_ #统一配置数据标的前缀



  configuration:
    log-impl: org.apache.ibatis.logging.stdout.StdOutImpl
    map-underscore-to-camel-case: true
    cache-enabled: false #  默认的全局的缓存为true
  #  config-location: classpath:mybatis-config.xml
  type-aliases-package: com.xuguoguo.entity
  mapper-locations: classpath*:mappers/*.xml

# 查看sql语句的日志
#  日志记录
logging:
  level:
    com.xuguoguo: debug
    org.springframework: info

安装好MybatisX插件

通过插件生成代码

按照序号依次点击即可

最后看一下生成的项目结构

编写控制器进行测试

@RestController
@RequestMapping("/sysUser")
public class SysUserController {

    //注入service
    @Autowired
    private SysUserService sysUserService;

    @RequestMapping("/getUser")
    public List<SysUser> get(){
        List<SysUser> list = sysUserService.list();
        return list;
    }

}

@SpringBootApplication
@MapperScan("com.xuguoguo.mapper")
public class SpringsecurityVue3Application {

    public static void main(String[] args) {
        SpringApplication.run(SpringsecurityVue3Application.class, args);
    }

}

启动服务测试:

但是这样写出来的响应不够通用和高级，那就用上之前的一个结果类对象，封装返回的具体内容吧

通用结果集编写(自行扩展也是也可以的哈！！！)

package com.xuguoguo.common;

import lombok.Data;

import java.io.Serializable;

/**
 * 统一返回对象
 */

@Data
public class Result<T> implements Serializable {
    /**
     * 通信数据
     */
    private T data;
    /**
     * 通信状态
     */
    private boolean flag = true;
    /**
     * 通信描述
     */
    private String msg = "操作成功";

    /**
     * 通过静态方法获取实例
     */
    public static <T> Result<T> of(T data) {
        return new Result<>(data);
    }

    public static <T> Result<T> of(T data, boolean flag) {
        return new Result<>(data, flag);
    }

    public static <T> Result<T> of(T data, boolean flag, String msg) {
        return new Result<>(data, flag, msg);
    }

    @Deprecated
    public Result() {

    }

    private Result(T data) {
        this.data = data;
    }

    private Result(T data, boolean flag) {
        this.data = data;
        this.flag = flag;
    }

    private Result(T data, boolean flag, String msg) {
        this.data = data;
        this.flag = flag;
        this.msg = msg;
    }

}

Vue的基础搭建

提示：这里是Vue创建项目的基础(必须拿下哈！！！)

1、安装node，测试cmd–》node -v

2、npm 工具 测试cmd–》npm -v

3、安装Vue Cli

Vue-cli是一个官方发布的vue.js项目的脚手架，可以快速的创建vue的项目 npm install -g @vue/cli

npm install -g @vue/cli

4、vue ui搭建Vue项目

vue ui

这里的语法校验选项可以不用勾选哈**【Linter/Formatter】**

等待一会儿项目创建成功！

安装项目的依赖：【axios、element-plus等】

Element-plus的中文官网地址：http://element-plus.org/zh-CN/

打开前端的开发工具vscode进行基本的引用：

修改main.js文件中的引用：

import { createApp } from 'vue'
import App from './App.vue'
import router from './router'
import store from './store'
import ElementPlus from 'element-plus'
import 'element-plus/dist/index.css'


createApp(App).use(store).use(router).use(ElementPlus).mount('#app')

改动的地方如下标注：

最后在某个vue组件中引用并测试即可

启动项目进行访问：

在vscode中通过ctrl+j快捷键切换到终端输入指令

npm run serve  # 项目启动

小结

提示：第一小节是基本的入门设置操作，前端Vue也需要了解一些（多写两次基本上就会了），后端的话还是需要一些框架的基本，这样才能更好的入手哦！

本章的第一小节完毕，敬请期待后续更新（可留言需要学习哪方面的内容哈）！如果需要源码或者工具的朋友们可关注微信公众号"锅锅编程生活"或者扫描二维码关注回复关键字/后台留言获取即可！

如：本小节工用到了很多开发工具、node等。如 需要idea直接回复 idea 即可==