SpringBoot + Vue前后端分离项目实战 || 二：Spring Boot后端与数据库连接

news2024/11/26 4:52:57

系列文章：
SpringBoot + Vue前后端分离项目实战 || 一：Vue前端设计

文章目录

    • 新建Spring后台项目
      • 添加依赖
    • 新建数据库
    • IDEA 连接数据库
    • IDEA 自动创建类实体
    • 定义数据传递至前端的格式

B站视频讲解：2023全网最简单但实用的SpringBoot+Vue前后端分离项目实战

不想看视频可浏览此文章笔记，比较详细

新建Spring后台项目

IDEA file->new->project
在这里插入图片描述

选择 Spring Initializr
在这里插入图片描述

此处不加依赖，直接FINISH
在这里插入图片描述

添加依赖

首先确认本地maven已经配置好，点击File -> Settings 查看Maven
在这里插入图片描述
在这里插入图片描述
在这里插入图片描述

找到pom.xml文件
在这里插入图片描述

直接复制此处需要的依赖

<?xml version="1.0" encoding="UTF-8"?>
<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.0</modelVersion>
    <parent>
        <groupId>org.springframework.boot</groupId>
        <artifactId>spring-boot-starter-parent</artifactId>
        <version>2.7.8</version>
        <relativePath/> <!-- lookup parent from repository -->
    </parent>
    <groupId>com.ums</groupId>
    <artifactId>x-admin</artifactId>
    <version>0.0.1-SNAPSHOT</version>
    <name>x-admin</name>
    <description>Demo project for Spring Boot</description>
    <properties>
        <java.version>1.8</java.version>
    </properties>
    <dependencies>
        <dependency>
            <groupId>org.springframework.boot</groupId>
            <artifactId>spring-boot-starter</artifactId>
        </dependency>

        <dependency>
            <groupId>org.springframework.boot</groupId>
            <artifactId>spring-boot-starter-test</artifactId>
            <scope>test</scope>
        </dependency>

        <!-- web -->
        <dependency>
            <groupId>org.springframework.boot</groupId>
            <artifactId>spring-boot-starter-web</artifactId>
        </dependency>
        <!-- mysql -->
        <dependency>
            <groupId>com.mysql</groupId>
            <artifactId>mysql-connector-j</artifactId>
        </dependency>
        <!-- mybatis-plus -->
        <dependency>
            <groupId>com.baomidou</groupId>
            <artifactId>mybatis-plus-boot-starter</artifactId>
            <version>3.5.2</version>
        </dependency>
        <dependency>
            <groupId>com.baomidou</groupId>
            <artifactId>mybatis-plus-generator</artifactId>
            <version>3.5.2</version>
        </dependency>
        <!-- freemarker -->
        <dependency>
            <groupId>org.freemarker</groupId>
            <artifactId>freemarker</artifactId>
        </dependency>
        <!-- lombok -->
        <dependency>
            <groupId>org.projectlombok</groupId>
            <artifactId>lombok</artifactId>
        </dependency>

        <dependency>
            <groupId>org.springframework.boot</groupId>
            <artifactId>spring-boot-starter-data-redis</artifactId>
            <version>2.2.5.RELEASE</version>
        </dependency>

    </dependencies>

    <build>
        <plugins>
            <plugin>
                <groupId>org.springframework.boot</groupId>
                <artifactId>spring-boot-maven-plugin</artifactId>
            </plugin>
        </plugins>
    </build>

</project>

遇到爆红，点击右侧Maven中刷新按钮，等待IDEA下载依赖即可，多刷新几次，等待
在这里插入图片描述

新建数据库

用navicat链接本地数据库，新建一个数据库xdb
在这里插入图片描述

新建一个 123.txt 文档，将以下SQL命令复制进去后，改名为123.sql

CREATE TABLE `x_user` (
  `id` int(11) NOT NULL AUTO_INCREMENT,
  `username` varchar(50) NOT NULL,
  `password` varchar(100) DEFAULT NULL,
  `email` varchar(50) DEFAULT NULL,
  `phone` varchar(20) DEFAULT NULL,
  `status` int(1) DEFAULT NULL,
  `avatar` varchar(200) DEFAULT NULL,
   `deleted` INT(1) DEFAULT 0,
  PRIMARY KEY (`id`)
) ENGINE=InnoDB AUTO_INCREMENT=3 DEFAULT CHARSET=utf8;

insert into `x_user` (`id`, `username`, `password`, `email`, `phone`, `status`, `avatar`, `deleted`) values('1','admin','123456','super@aliyun.com','18677778888','1','https://wpimg.wallstcn.com/f778738c-e4f8-4870-b634-56703b4acafe.gif','0');
insert into `x_user` (`id`, `username`, `password`, `email`, `phone`, `status`, `avatar`, `deleted`) values('2','zhangsan','123456','zhangsan@gmail.com','13966667777','1','https://wpimg.wallstcn.com/f778738c-e4f8-4870-b634-56703b4acafe.gif','0');
insert into `x_user` (`id`, `username`, `password`, `email`, `phone`, `status`, `avatar`, `deleted`) values('3','lisi','123456','lisi@gmail.com','13966667778','1','https://wpimg.wallstcn.com/f778738c-e4f8-4870-b634-56703b4acafe.gif','0');
insert into `x_user` (`id`, `username`, `password`, `email`, `phone`, `status`, `avatar`, `deleted`) values('4','wangwu','123456','wangwu@gmail.com','13966667772','1','https://wpimg.wallstcn.com/f778738c-e4f8-4870-b634-56703b4acafe.gif','0');
insert into `x_user` (`id`, `username`, `password`, `email`, `phone`, `status`, `avatar`, `deleted`) values('5','zhaoer','123456','zhaoer@gmail.com','13966667776','1','https://wpimg.wallstcn.com/f778738c-e4f8-4870-b634-56703b4acafe.gif','0');
insert into `x_user` (`id`, `username`, `password`, `email`, `phone`, `status`, `avatar`, `deleted`) values('6','songliu','123456','songliu@gmail.com','13966667771','1','https://wpimg.wallstcn.com/f778738c-e4f8-4870-b634-56703b4acafe.gif','0');

CREATE TABLE `x_role` (
  `role_id` int(11) NOT NULL AUTO_INCREMENT,
  `role_name` varchar(50) DEFAULT NULL,
  `role_desc` varchar(100) DEFAULT NULL,
  PRIMARY KEY (`role_id`)
) ENGINE=InnoDB AUTO_INCREMENT=4 DEFAULT CHARSET=utf8mb4;

insert into `x_role` (`role_id`, `role_name`, `role_desc`) values('1','admin','超级管理员');
insert into `x_role` (`role_id`, `role_name`, `role_desc`) values('2','hr','人事专员');
insert into `x_role` (`role_id`, `role_name`, `role_desc`) values('3','normal','普通员工');

CREATE TABLE `x_menu` (
  `menu_id` int(11) NOT NULL AUTO_INCREMENT,
  `component` varchar(100) DEFAULT NULL,
  `path` varchar(100) DEFAULT NULL,
  `redirect` varchar(100) DEFAULT NULL,
  `name` varchar(100) DEFAULT NULL,
  `title` varchar(100) DEFAULT NULL,
  `icon` varchar(100) DEFAULT NULL,
  `parent_id` int(11) DEFAULT NULL,
  `is_leaf` varchar(1) DEFAULT NULL,
  `hidden` tinyint(1) DEFAULT NULL,
  PRIMARY KEY (`menu_id`)
) ENGINE=InnoDB AUTO_INCREMENT=12 DEFAULT CHARSET=utf8mb4;

insert  into `x_menu`(`menu_id`,`component`,`path`,`redirect`,`name`,`title`,`icon`,`parent_id`,`is_leaf`,`hidden`) values (1,'Layout','/user','/user/list','userManage','用户管理','userManage',0,'N',0),(2,'user/user','list',NULL,'userList','用户列表','userList',1,'Y',0),(3,'user/role','role',NULL,'roleList','角色列表','role',1,'Y',0),(4,'user/permission','permission',NULL,'permissionList','权限列表','permission',1,'Y',0);

CREATE TABLE `x_user_role` (
  `id` int(11) NOT NULL AUTO_INCREMENT,
  `user_id` int(11) DEFAULT NULL,
  `role_id` int(11) DEFAULT NULL,
  PRIMARY KEY (`id`)
) ENGINE=InnoDB AUTO_INCREMENT=5 DEFAULT CHARSET=utf8mb4;

insert into `x_user_role` (`id`, `user_id`, `role_id`) values('1','1','1');

CREATE TABLE `x_role_menu` (
  `id` int(11) NOT NULL AUTO_INCREMENT,
  `role_id` int(11) DEFAULT NULL,
  `menu_id` int(11) DEFAULT NULL,
  PRIMARY KEY (`id`)
) ENGINE=InnoDB AUTO_INCREMENT=5 DEFAULT CHARSET=utf8mb4;

右击xdb选择运行SQL文件
在这里插入图片描述

找到123.sql文件后运行
在这里插入图片描述

运行成功
在这里插入图片描述

IDEA 连接数据库

打开src\main\resources\application.yml，如果没有该文件，只有application.property文件，则直接改其后缀为.yml
在这里插入图片描述

写入代码

server:
  port: 9999            # 端口号
spring:
  datasource:
    username: root      # 数据库名
    password: 1234      # 数据库密码
    url: jdbc:mysql:///xdb

  redis:
    port: 6379
    host: localhost

logging:
  level:
    com.ums: debug

IDEA 自动创建类实体

先新建一个package:sys，空包，生成的代码会放在此处
在这里插入图片描述

用Mybatis-plus来自动创建类实体的java代码
在src\test下新建一个java类：CodeGenerator
在这里插入图片描述

然后写上如下代码，代码中有解释

package com.ums;

import com.baomidou.mybatisplus.generator.FastAutoGenerator;
import com.baomidou.mybatisplus.generator.config.OutputFile;
import com.baomidou.mybatisplus.generator.engine.FreemarkerTemplateEngine;

import java.util.Collections;

public class CodeGenerator {
    public static void main(String[] args) {
        String url = "jdbc:mysql:///xdb";       // 与配置文件 一致
        String username = "root";
        String password = "1234";
        String author = "anthony";
        String moduleName = "sys";              // 系统管理的代码包
        String mapperLocation = "D:\\VueProj\\x-admin\\src\\main\\resources\\mapper\\" + moduleName ;
        String tables = "x_menu,x_role,x_role_menu,x_user,x_user_role";     // 与数据库中的表名一致，逗号隔开

        FastAutoGenerator.create(url, username, password)
            .globalConfig(builder -> {
                builder.author(author) // 设置作者
//                        .enableSwagger() // 开启 swagger 模式
//                        .fileOverride() // 覆盖已生成文件
                        .outputDir("D:\\VueProj\\x-admin\\src\\main\\java"); // 指定输出目录
            })

            .packageConfig(builder -> {
                builder.parent("com.ums") // 设置父包名
                        .moduleName(moduleName) // 设置父包模块名
                        .pathInfo(Collections.singletonMap(OutputFile.xml, mapperLocation)); // 设置mapperXml生成路径
            })
            .strategyConfig(builder -> {
                builder.addInclude(tables) // 设置需要生成的表名
                        .addTablePrefix("x_"); // 设置过滤表前缀， x_menu 生成的类实体无 x_ 前缀
            })
            .templateEngine(new FreemarkerTemplateEngine()) // 使用Freemarker引擎模板，默认的是Velocity引擎模板
            .execute();
    }
}

点击run
在这里插入图片描述

生成代码
在这里插入图片描述

定义数据传递至前端的格式

上一节说过，需要记录下前端登录的响应数据格式
现在，后端来构造此格式

{"code":20000,"data":{"token":"admin-token"}}

在src\main下新建一个package: common 然后新建package：vo 再新建一个java类Result
在这里插入图片描述

写入代码，有注释解释

package com.ums.common.vo;


import lombok.AllArgsConstructor;
import lombok.Data;
import lombok.NoArgsConstructor;

@Data
@NoArgsConstructor
@AllArgsConstructor
public class Result<T> {
    private Integer code;       // 成功失败的代码，此处定义2000为成功，2001为失败
    private String message;     // 消息，里面包含数据data
    private T data;             // 未定义的数据形式

    // 此处重载了四个 success 方法，有些能够返回数据，有的只返回代码或信息
    public static <T> Result<T> success() {
        return new Result<>(20000,"success",null);
    }

    public static <T> Result<T> success(T data) {
        return new Result<>(20000,"success",data);
    }

    public static <T> Result<T> success(T data, String message) {
        return new Result<>(20000,message,data);
    }

    public static <T> Result<T> success(String message) {
        return new Result<>(20000,message,null);
    }

    public static<T>  Result<T> fail(){
        return new Result<>(20001,"fail",null);
    }

    public static<T>  Result<T> fail(Integer code){
        return new Result<>(code,"fail",null);
    }

    public static<T>  Result<T> fail(Integer code, String message){
        return new Result<>(code,message,null);
    }

    public static<T>  Result<T> fail( String message){
        return new Result<>(20001,message,null);
    }
}

测试

  1. 先在主程序src\main\java中的XAdminApplication中加入注解@MapperScan("com.ums.*.mapper")
    在这里插入图片描述
  2. 进入UserController写测试代码
    在这里插入图片描述
    package com.ums.sys.controller;

import com.ums.common.vo.Result;
import com.ums.sys.entity.User;
import com.ums.sys.service.IUserService;
import org.springframework.beans.factory.annotation.Autowired;
import org.springframework.web.bind.annotation.GetMapping;
import org.springframework.web.bind.annotation.RequestMapping;
import org.springframework.stereotype.Controller;
import org.springframework.web.bind.annotation.RestController;

import java.util.List;

/**
 * <p>
 *  前端控制器
 * </p>
 *
 * @author anthony
 * @since 2023-06-16
 */
@RestController
@RequestMapping("/user")
public class UserController {
    @Autowired
    private IUserService userService;

    @GetMapping("/all")
    public Result<List<User>> getAllUser() {
        List<User> list = userService.list();
        return Result.success(list,"查询成功");
    }
}
  3. 运行主程序
    在这里插入图片描述
    进入浏览器输入http://localhost:9999/user/all 显示数据则成功
    在这里插入图片描述
    此处数据格式也与前端对接得上

本文来自互联网用户投稿，该文观点仅代表作者本人，不代表本站立场。本站仅提供信息存储空间服务，不拥有所有权，不承担相关法律责任。如若转载，请注明出处：http://www.coloradmin.cn/o/666681.html

如若内容造成侵权/违法违规/事实不符，请联系多彩编程网进行投诉反馈，一经查实，立即删除！

相关文章

DJ4-4 NAT、ICMP、IPv6

DJ4-4 NAT、ICMP、IPv6

目录 一、NAT&#xff1a;网络地址转换 1、工作原理 2、NAT 的限制 二、ICMP 1、ICMP 协议 2、ICMP 类型和代码 3、Traceroute 命令 三、IPv6 地址 1、IPv6 的引入 2、IPv6 的表示 一、NAT&#xff1a;网络地址转换 动机&#xff1a;对外部网络来讲&#xff0c;本地…
阅读更多...
RISC-V处理器的设计与实现——基本指令集

RISC-V处理器的设计与实现——基本指令集

本人小白一枚&#xff0c;在学习FPGA的过程中偶然刷到了tinyriscv这个开源项目&#xff0c;并且自己对计算机体系结构的知识也很感兴趣&#xff0c;所以想参考这个开源项目做一个基于RISC-V指令集的CPU&#xff0c;下面是tinyriscv这个开源项目的地址&#xff0c;本项目很多思路…
阅读更多...
优思学院｜六西格玛倡导者与项目赞助人是什么角色？有何区别？

优思学院｜六西格玛倡导者与项目赞助人是什么角色？有何区别？

倡导者&#xff08;Champion&#xff09;和项目赞助人&#xff08;Sponsor&#xff09;在正式的六西格玛的组织架构中是两个不同的角色&#xff0c;所以希望在这篇文章中解释一下两个角色的区别。 倡导者&#xff08;Champion&#xff09;是负责组织竞争力和增长的董事和高管&…
阅读更多...
quartus 无法识别usb blaster

quartus 无法识别usb blaster

一、Windows无法正常驱动USB-Blaster 问题：驱动问题 解决方法： 右键我的电脑->管理->设备管理器找到设备USB-Blaster，此时是带有黄色感叹号的 3.右键->更新驱动程序软件 4. 选择“浏览计算机以查找驱动程序软件(R)”，如选择自动搜索是不能安装成功的，…
阅读更多...
jQuery 基础语法使用指南

jQuery 基础语法使用指南

&#x1f389;&#x1f389;&#x1f389;点进来你就是我的人了博主主页&#xff1a;&#x1f648;&#x1f648;&#x1f648;戳一戳,欢迎大佬指点! 欢迎志同道合的朋友一起加油喔&#x1f93a;&#x1f93a;&#x1f93a; 目录 1. 引入 jQuery 2. jQuery 语法 3. 选择器 …
阅读更多...
FusionComputeV100R006C10SPC101平台安装win10踩坑记

FusionComputeV100R006C10SPC101平台安装win10踩坑记

生产环境中有一套华为FusionCompute&#xff0c;版本比较老&#xff0c;V100R006C10SPC101&#xff0c;该产品已EOS了&#xff0c;无法升级。因业务需要&#xff0c;需安装Windows10系统&#xff0c;遇到了不少坑&#xff0c;在此记录一下。 一、坑1&#xff1a;Windows10版本…
阅读更多...
CAN总线终端电阻

CAN总线终端电阻

CAN总线终端电阻&#xff0c;一般来说都是120欧姆&#xff0c;实际上在设计的时候&#xff0c;也是两个60欧姆的电阻串起来&#xff0c;而总线上一般有两个120Ω的节点&#xff0c;基本上稍微知道点CAN总线的人都知道这个道理。 但是这两个终端电阻的具体作用是什么呢&#xf…
阅读更多...
迅为视频教程 | RKNPU2 从入门到实践一套搞定！

迅为视频教程 | RKNPU2 从入门到实践一套搞定！

迅为基于瑞芯微RK3568和RK3588处理器设计开发的两款开发板都自带NPU&#xff0c;RK3568自带1T算力的NPU、RK3588自带&#xff16;T算力的NPU&#xff0c;且这两款开发板使用的都是RKNPU2。 &#xff08;RKNPU发展历程&#xff09; RKNPU2较RKNPU1有较大的提升&#xff0c;但市面…
阅读更多...
Unity核心9——3D动画

Unity核心9——3D动画

一、3D 动画的使用 ​ 使用导入的 3D 动画&#xff1a; 将模型拖入场景中为模型对象添加 Animator 脚本为其创建 Animator Controller 动画控制器&#xff08;状态机&#xff09;将想要使用的相关动作&#xff0c;拖入 Animator Controller 动画控制器&#xff08;状态机&…
阅读更多...
Java：时间日期类

Java：时间日期类

文章目录 DateCalendarDate/Time APILocalDateLocalTimeLocalDateTimeZonedDateTime 功能获取标准时间 参考文献 Date 同样位于java.util包下。 在java中&#xff0c;获取时间最简单的方式就是直接实例化Date类。 以自定义格式&#xff0c;取当前的时间日期&#xff1a; Da…
阅读更多...
渗透测试入门指南之小白该如何学习渗透?

渗透测试入门指南之小白该如何学习渗透?

前言&#xff1a; 内容都是精华&#xff0c;如果想要入安全的行&#xff0c;强烈建议仔细阅读。 目录&#xff1a; 渗透测试是什么&#xff1f; 学习渗透测试的战略方针是什么&#xff1f; 学习渗透测试的具体方法是什么&#xff1f; 遇到的各种疑难杂症怎么解决&#xf…
阅读更多...
践行公益担当 | 关爱留守儿童，暖到“心理”

践行公益担当 | 关爱留守儿童，暖到“心理”

农民在中国各个时代都扮演着十分重要的角色&#xff0c;为中国的发展做出了卓越的贡献。随着经济的发展&#xff0c;农民为了改善生活而大规模的进城打工&#xff0c;“留守儿童”成为一个新的社会问题&#xff0c;开始在农村甚至部分城市出现。 全国“留守儿童”达6102.55万&…
阅读更多...
从0到1精通自动化测试，pytest自动化测试框架，测试用例setup和teardown（三）

从0到1精通自动化测试，pytest自动化测试框架，测试用例setup和teardown（三）

目录 一、前言 二、用例运行级别 三、函数式 1、setup_function / teardown_function 2、setup_module / teardown_module 四、类和方法 五、函数和类混合 一、前言 学过 unittest 的都知道里面用前置和后置 setup 和 teardown 非常好用&#xff0c;在每次用例开始前和…
阅读更多...
计算机组成原理-复习大纲（期末版）

计算机组成原理-复习大纲（期末版）

目录 第一章 计算机系统概论 1.1 冯诺依曼型计算机 1.2 计算机的硬件组成 第二章 运算方法和运算器 2.1 ieee754标准、32位浮点数 2.2 补码运算 2.3 运算器的基本结构形式 第三章 存储系统 3.1 主存与cache的地址映射 3.1.1 全相联映射方式 3.1.2 直接映射方式 3.1.3 组相…
阅读更多...
全网最细，web自动化测试实战场景（滚动元素的滚动操作）直接上干g货......

全网最细，web自动化测试实战场景（滚动元素的滚动操作）直接上干g货......

前言 使用 selenium 进行 web 自动化测试对我们来说是个常规操作。用了很多次后&#xff0c;我们经常会抱怨 selenium 封装的操作实在是太少了。 比如说 selenium 没有对页面的滚动提供丰富 API , 有的只有一个孤零零的 location_once_scrolled_into_view 方法&#xff0c;把…
阅读更多...
css 解决多张图片显示时出现的空白间隙问题

css 解决多张图片显示时出现的空白间隙问题

1、出现的间隙 在后端设置富文本时&#xff0c;添加了多张图片&#xff0c;但是到前台展示时&#xff0c;每2张图片直接都会多出一个间隙&#xff1b; 2、空白间隙产生的原因 在网上查阅资料时&#xff0c;发现是由于图片设置了display: inline-block;属性&#xff0c;使图…
阅读更多...
任意分频器电路设计

任意分频器电路设计

目录 任意分频器电路设计 1、任意偶数分频器电路设计 1.2、实验任务 1.3、程序设计 1.3.1、代码如下&#xff1a; 1.3.2、编写仿真 TB 文件 2、任意奇数分频器电路设计 2.1、实验任务 2.2、程序设计 2.2.1、奇数分频电路代码 2.2.2、编写仿真 TB 文件 2.2.3、仿真验…
阅读更多...
关于前端项目安全问题的一些思考

关于前端项目安全问题的一些思考

1.路由守卫&#xff0c;本地路径与本地存储加密后的该用户所有能访问的的路径列表对比&#xff0c;是否有权限&#xff0c;这个要搞个一级页面-二级页面三级页面这种记录下来&#xff0c;后台管理员开启后赋予用户访问某些页面的权限&#xff0c;即能打开相关菜单的权限&#x…
阅读更多...
【吴恩达老师《机器学习》】课后习题2之【逻辑回归(logistic_regression)】

【吴恩达老师《机器学习》】课后习题2之【逻辑回归(logistic_regression)】

逻辑回归-线性可分 用于解决输出标签y为0或1的二元分类问题 判断邮件是否属于垃圾邮件&#xff1f;银行卡交易是否属于诈骗&#xff1f;肿瘤是否为良性&#xff1f;等等。 案例:根据学生的两门学生成绩&#xff0c;建立一个逻辑回归模型&#xff0c;预测该学生是否会被大学录…
阅读更多...
卷积码编码器的结构与表示

卷积码编码器的结构与表示

本专栏包含信息论与编码的核心知识&#xff0c;按知识点组织&#xff0c;可作为教学或学习的参考。markdown版本已归档至【Github仓库&#xff1a;https://github.com/timerring/information-theory 】或者公众号【AIShareLab】回复 信息论 获取。 文章目录 卷积码基础卷积码的…
阅读更多...
推荐文章
最新文章

Copyright @ 2022~2023