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

已于 2023-06-28 10:23:22 修改
阅读量1.1w 收藏 79
点赞数 11
文章标签： spring boot vue.js 数据库
于 2023-06-20 15:54:00 首次发布
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/qq_56039091/article/details/131306802
版权

系列文章：
SpringBoot + Vue前后端分离项目实战 || 一：Vue前端设计
SpringBoot + Vue前后端分离项目实战 || 二：Spring Boot后端与数据库连接
SpringBoot + Vue前后端分离项目实战 || 三：Spring Boot后端与Vue前端连接
SpringBoot + Vue前后端分离项目实战 || 四：用户管理功能实现
SpringBoot + Vue前后端分离项目实战 || 五：用户管理功能后续

文章目录

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>

        <!-- fastjson -->
        <dependency>
            <groupId>com.alibaba.fastjson2</groupId>
            <artifactId>fastjson2</artifactId>
            <version>2.0.7</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 显示数据则成功
    在这里插入图片描述
    此处数据格式也与前端对接得上
Anthony_CH
关注
基于SpringBoot+SpringCloud+Vue前后端分离项目实战 --开篇
天罡gg的专栏
03-07 2万+
如何高效学习Java? 毕业设计项目应该怎么做？入门实战项目应该怎么做？ 做Java开发都应该学习哪些框架技术？ 我想来跟你聊聊为什么要学习此专栏？我们经常说，看一个事儿千万不要直接陷入细节里，你应该先鸟瞰其全貌，这样能够帮助你从高维度理解问题。同样，当你迷茫想努力没有方向时，最事半功倍的方法是：找人带你! 因为过来人，更懂得如何学、如何做、如何少走弯路！ 那今天就给大家带来一门专栏课程，由 天罡gg 和 经海路大白狗 两位实力大牛合力打造的一款专栏，可以让你从0到1快速拥有企业级规范的项目实战经验！
springboot+vue前后端分离项目（后台管理系统
m0_70647189的博客
05-10 2002
2.注册页面这两个页面可以自由切换 3.root登录后的默认页面以及高亮显示 4.几个页面的展示 ![在这里插入图片描述](https://img-blog.csdnimg.cn/04b499bfbfd84b7fbc2e78ebf2c36b28.png?x-oss-process=image/watermark,type_ZmFuZ3poZW5naGVpdG 《大厂前端面试题解析+Web核心总结学习笔记+企业项目实战源码+最新高清讲解视频》无偿开源 徽信搜索公众号【编程进阶路】 k,shadow_1.
springboot+vue前后端分离项目（后台管理系统）
热门推荐
先养只猫的博客
08-13 5万+
学习笔记 学习资源来自于B站良心up 一、所使用的环境配置： 编译器：IDEA 后台框架：SpringBoot Mybatis-Plus 数据库：Mysql8.0 数据库工具：Navicat premium 前端框架：Vue Element UI 引用的富文本编辑器：wangEditor 二、项目简介 这是一个基于SpringBoot和Vue的后台管理系统。 主要功能： 1.实现用户信息的CRUD，以及页面的显示。 2.用户权限的分配，不同权限的用户锁能看到的的界面信息和能进行的操作是不同的。 3.实现图片
基于SpringBoot+Vue的数字资源共享平台设计与实现(源码+文档+部署视频)
最新发布
2401_82797350的博客
09-30 882
✌全网粉丝100W+,CSDN特邀作者、博客专家、CSDN新星计划导师、全栈领域优质创作者，博客之星、掘金/华为云/阿里云/InfoQ等平台优质作者、专注于Java、Python、PHP、小程序、大数据技术领域和毕业项目实战✌
springboot+vue 前后端交互实现（mysql+springboot+vue）
lplovewjm的博客
05-10 3699
vue+springboot+mysql+mybatis简单前后端交互
【原生部署】SpringBoot+Vue前后端分离项目
观止study
01-10 6399
SpringBoot+Vue前后端完全分离项目在linux服务器上环境的搭建与部署，包含JAVA、MySQL、Redis、Nginx、Node.js、Git、Maven的搭建
SpringBoot+Vue 前后端分离开源项目
Gosions的博客
01-10 707
简单介绍 该项目是一个简单的个人博客系统项目，非常适合新手入门。前端使用了vue ，后端springboot。 项目预览地址：Lyu个人博客 github后端地址: https://github.com/zhaoguoshun/Lyu-blog github前端地址：https://github.com/zhaoguoshun/LyuBlog-vue 后端技术栈： springboot mybatis jwt mysql PageHelper分页插件等。 前端技术： Vue elementui m
简单的spring boot+vue前后端分离项目（入门）
qq_62733113的博客
03-30 2964
application.yml文件(初始文件是application.properties,将其改为application.yml）搭建好vue项目之后先使用npm install axios指令安装axios，然后在用到axios的地方引入即可。然后输入账号和密码进行登录（账号：admin密码123456），登录后进入主页面。运行后端项目和前端项目，发现数据库中的信息传到了前端页面，然后可以自己做样式。首先新建一个springboot工程。接着我们搭建后端项目，总体结构如图。
Spring Boot Vue前后端分离开发实战.pdf
04-21
综上所述，文档《Spring Boot Vue前后端分离开发实战.pdf》涵盖了前后端分离的开发模式、Spring Boot和Vue.js的基础知识和使用、开发环境的搭建、前后端交互的实现、项目配置与启动、数据库操作、前端开发的实践等多...
《Vue Spring Boot前后端分离开发实战》源码Vue+Spring Boot前后端分离开发实战教学课件（PPT）
08-09
这本《Vue Spring Boot前后端分离开发实战》的源码提供了深入学习和实践这一技术栈的机会。以下是对其中涉及知识点的详细说明： 1. **Vue.js**：Vue.js是一个轻量级的前端JavaScript框架，以其易学易用、组件化和...
从0开始手把手教学实现SpringBoot+Vue前后端分离后台管理系统
11-21
总的来说，"SpringBoot+Vue前后端分离后台管理系统"的实现涉及多个环节，包括Spring Boot的后端开发、Vue.js的前端构建、RESTful API设计、JWT认证、数据库操作以及测试等。这个项目适合初学者和有一定经验的开发者...
影视评论系统Springboot+Vue（前后端分离）
06-16
总结，这个"影视评论系统Springboot+Vue（前后端分离）"项目提供了完整的前后端代码，适用于学习和实战。开发者可以通过阅读源码，了解Springboot与Vue.js结合的实践方式，以及如何构建一个完整的前后端分离应用。...
创建一个简单的spring boot+vue前后端分离项目
Sunny的博客
08-15 1946
创建一个简单的spring boot+vue前后端分离项目
Springboot+vue前后端分离项目搭建
baijie95
03-08 1435
Springboot+vue前后端分离项目搭建一、准备工作二、项目骨架搭建2.1 后端框架搭建——idea利用Maven搭建springboot项目2.2 前端框架搭建——vue-cli4搭建vue项目安装cnpm安装脚手架清空缓存处理创建项目 一、准备工作 Spring Boot项目开发环境与工具： jdk maven idea Vue项目开发环境： nodejs vscode 后端技术栈： SpringBoot mybatis plus postgresql 前端技术栈： vue elem
Vue前后端交互（整合springboot）
Z_BK9的博客
08-19 2634
Axios 是一个基于 promise 的 HTTP 库，可以用在浏览器和 node.js 中。这些是创建请求时可以用的配置选项。某个请求的响应包含以下信息。
SpringBoot+Vue前后端分离项目，maven package自动打包整合
weixin_30871293的博客
07-15 1651
起因：看过Dubbo管控台的都知道，人家是个前后端分离的项目，可是一条打包命令能让两个项目整合在一起，我早想这样玩玩了。 1. 建立个maven父项目 next 这个作为父工程，next Finish，然后把项目目录的src删除 2. 建立springboot子项目（Module） next next 这里引入模板引擎，是为了能运行前端项...
SpringBoot+Vue前后端分离项目搭建
weixin_46007404的博客
12-28 758
基于spring boot+spring security+JWT、vue2、webpack4的前后端分离项目，开袋即食
Idea+springboot+vue 前后端交互实现
qq_46574738的博客
06-21 1万+
Idea+springboot+vue 前后端交互实现
springboot+vue【前后端分离】博客项目
在下是小白的博客
06-25 1627
springboot+vue【前后端分离】博客项目用到的 centos安装minio springboot配置minio上传下载删除 springboot发送邮件 2. 留言 3. 功能项 4. 更换头像 5. 修改个人信息 6. 内容管理热点是python写的爬虫，部署到服务器，定时爬取数据 博客网站首页.....................
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值