Vue+SpringBoot+数据库整体开发流程 1

本篇文章通过springboot整合mybatis-plus去实现后端对数据库的增删改查，以及响应给前端的url，让前端获得数据。

 

目录

一、简单搭建一个Vue项目

检查node.js版本

使用vue-cli创建空项目

Vue-cli工程中每个文件夹和文件的用处

二、Mysql数据库

创建数据库

新建表

三、SpringBoot+Mybatis-Plus实现增删改查

创建空项目

配置maven

application.yml配置

pom.xl导入相关依赖

代码的编写

MySQL表绑定到spring boot（实体层）

springboot绑定到mybatis-plus（数据层）

把数据层加工处理成逻辑业务（service服务层）

调用服务层的controller

接口自测

---

一、简单搭建一个Vue项目

检查node.js版本

首先需要自行安装node。

查看node.js版本的两种方式，

node -v
node -version

 查看npm版本，

npm -v

出现版本号则说明安装成功（最新的以官网为准）。

使用npm安装或者升级vue-cli，

1.卸载旧的
npm uninstall vue-cli -g2.安装新的
npm install -g @vue/cli

查看 vue-cli的版本，

vue --version

 

使用vue-cli创建空项目

以管理员身份打开命令行界面，进入任意一个想要创建项目的文件夹，输入命令：vue create命令 +自定义项目名字，

vue create 项目名

此处我的项目名是demo，

上下键选择这个自定义的版本，意味着选择手动配置，然后回车，

按空格键选中，完成后按回车键,

选择vue2的版本回车，也可以根据自己需要选择vue3的版本，

选择y，然后回车键，

选择第一个回车，

选择第一个回车，

是否要把此配置设置为以后建立项目的默认选项，选择N，

按照给出的提示继续输入（下一步有提示失败的做法），

等待安装完成， 

按照给出的提示继续输入（下一步有提示做法），

就可以在当前文件目录下，看到一个叫demo的项目文件夹，

然后使用Vscode打开这个demo文件夹，在Vscode的终端中，输入下列命令就可以运行前端项目，

npm run serve

可以看到项目已经成功运行，

在浏览器输入对应的网址就可以看到界面，可以看到vue的标志。

Vue-cli工程中每个文件夹和文件的用处

• dist 文件夹：默认 npm run build 命令打包生成的静态资源文件，用于生产部署
• node_modules：存放npm命令下载的开发环境和生产环境的依赖包
• public：有的叫assets：存放项目中需要用到的资源文件，css、js、images以及index
• src文件夹：存放项目源码及需要引用的资源文件
• src-api文件夹：放ajax相关操作的代码文件:index.js(相关的接口),ajax.js(封装的axios,拦截器)。有的叫service：自己配置的vue请求后台接口方法
• src-common文件夹：stylus的混合文件.styl，不要写到public也可以
• src-components文件夹：存放vue开发中抽离的一些公共组件
• src-mock文件夹：mock数据存放文件及mock模拟接口（没有后台接口或接口不完整情况下可以模拟后台接口）
• src-pages文件夹：涉及到路由的组件
• src-router文件夹:vue-router，路由器及路由的配置
• src-store文件夹：存放 vue中的状态数据，用vuex集中管理
• App.vue文件：使用标签渲染整个工程的.vue组件
• main.js文件：vue-cli工程的入口文件
• package.json文件：用于 node_modules资源部 和 启动、打包项目的 npm 命令管理
• build 文件夹：用于存放 webpack 相关配置和脚本。开发中仅 偶尔使用 到此文件夹下 webpack.base.conf.js 用于配置 less、sass等css预编译库，或者配置一下 UI 库
• config 文件夹：主要存放配置文件，用于区分开发环境、线上环境的不同，常用到此文件夹下 config.js 配置开发环境的 端口号、是否开启热加载 或者 设置生产环境的静态资源相对路径、是否开启gzip压缩、npm run build 命令打包生成静态资源的名称和路径等

二、Mysql数据库

在创建数据库的时候通常会使用一些可视化的工具来创建数据库和表这些比较方便，使用SQL语句创建的就比较慢。这里要使用的是可视化工具navicat。

此处我以创建数据库demo为例。

创建数据库

（1）打开navicat连接MySQL，输入连接名和用户名密码这些，输入完成后点击确定就好了。

• 连接名：自定义
• 用户名和密码就是自己的MySQL的账号和密码 

（2）右上角右键刚刚新建的连接，然后点击打开连接（完成后会看到之前其他的数据库，不用管它），右键刚刚的新建连接---右键选择新建数据库  ，

• 数据库命名：最好和导入的sql文件名一样
• 字符集：选择utf8的。（mb3和mb4区别就是mb4能表示更多的字符，如果用不到扩容去选择utf8mb4会有点浪费空间）
• 排序规则填写：选择general_ci结尾的（ci：大小写不敏感、cs：区分大小写、bin：以二进制存储并且区分大小写）

新建表

双击创建好的数据库，点击打开数据库，在该数据库下，右键点击新建表，添加表中要定义的字段，创建好后就点击保存。

数据库字段的解释：数据库字段就像是一个表格里的每一列，每一列都有特定的名字，用来存储一种特定的信息。就像你在 Excel 表格中看到的那样，每一列可能存储不同类型的数据，比如名字、年龄、地址等等。

想象你有一个表格，上面有一排排的姓名、年龄和邮箱这些标题，每一列下面填写着不同人的信息。这些列就是数据库表中的字段，它们帮助我们整齐地存储和管理不同种类的数据。

就可以在该数据库的表选项下，看到刚刚创建的表了。

在表中添加一行数据，方便后续操作。

三、SpringBoot+Mybatis-Plus实现增删改查

创建空项目

这种方式创建的时候自动帮我们加载MySQL的依赖和mybatis的依赖，就不用在pom.xml文件里面再去导入了，版本都是跟着springboot父版本来，也一定程度上避免了版本冲突。但是必须在配置文件里面配置数据库的信息，要不然启动报错。

点击idea的文件-->新建-->项目，

跟着步骤走，我这里是JDK17，就选用JDK17的，

因为我的JDK是17的，所以我选择的是3.x版本。（这些都不重要，后续也可以在pom.xml文件中修改的）

Spring Boot 2.x 版本通常建议使用的 JDK（Java Development Kit）版本是 JDK 8、JDK 11 或更高版本，具体取决于 Spring Boot 的子版本。以下是 Spring Boot 2.x 版本与推荐的 JDK 版本的对应关系：

• Spring Boot 2.0.x：推荐使用 JDK 8。
• Spring Boot 2.1.x：推荐使用 JDK 8 或 JDK 11。
• Spring Boot 2.2.x：推荐使用 JDK 8 或 JDK 11。
• Spring Boot 2.3.x：推荐使用 JDK 8、JDK 11 或 JDK 14。
• Spring Boot 2.4.x：推荐使用 JDK 8、JDK 11 或 JDK 15。
• Spring Boot 2.5.x：推荐使用 JDK 8、JDK 11 或 JDK 16。

Springboot3.x系列就要JDK17了。

选择新窗口打开，

配置maven

打开IDEA的设置找maven，直接搜maven，这里面配置好自己的本地maven，

application.yml配置

把这个配置文件application.properties重命名，后缀命名为yml文件。

把application配置文件的后缀改为yml，这样看着更分明一点，具体的端口号默认是8080的。 然后在文件里写入连接数据库的配置，建立和数据库的关联。

把以下的信息粘贴进去yml配置文件里面，但是要根据自己的MySQL数据库名称、账户密码、端口这些来改。

server:port: 80
spring:datasource:driver-class-name: com.mysql.cj.jdbc.Driverurl: jdbc:mysql://127.0.0.1:3306/goldtestusername: rootpassword: 123456
# 接口文档配置
knife4j:enable: trueopenapi:title: "接口文档"version: 1.0group:default:api-rule: packageapi-rule-resources:- com.water.demo.controller

如下，

这样我们的配置就好了。 

pom.xl导入相关依赖

这里面有几个必须的依赖

• web依赖，创建时就已经加入进去了，不用导入（检查一下）
• lombok依赖 ，创建时就已经加入进去了，不用导入（检查一下）
• mybatis-plus的依赖（来源baomidou）
• mysql依赖
• knife4j依赖：接口文档

在pom.xml文件里面导入相关的依赖。如果依赖加入不成功，就要检查自己的maven配置问题了。

<?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.2</version><relativePath/> <!-- lookup parent from repository --></parent><groupId>com.water</groupId><artifactId>demo</artifactId><version>0.0.1-SNAPSHOT</version><name>demo</name><description>demo</description><properties><java.version>1.8</java.version></properties><dependencies><dependency><groupId>org.springframework.boot</groupId><artifactId>spring-boot-starter-jdbc</artifactId></dependency><dependency><groupId>org.springframework.boot</groupId><artifactId>spring-boot-starter-web</artifactId></dependency><dependency><groupId>org.mybatis.spring.boot</groupId><artifactId>mybatis-spring-boot-starter</artifactId><version>2.2.2</version></dependency><dependency><groupId>com.baomidou</groupId><artifactId>mybatis-plus-boot-starter</artifactId><version>3.5.3.1</version></dependency><dependency><groupId>com.mysql</groupId><artifactId>mysql-connector-j</artifactId><version>8.0.33</version><scope>runtime</scope></dependency><dependency><groupId>org.springframework.boot</groupId><artifactId>spring-boot-starter-test</artifactId><scope>test</scope></dependency><dependency><groupId>org.mybatis.spring.boot</groupId><artifactId>mybatis-spring-boot-starter-test</artifactId><version>3.0.3</version><scope>test</scope></dependency><dependency><groupId>org.projectlombok</groupId><artifactId>lombok</artifactId><version>1.18.30</version></dependency><dependency><groupId>cn.hutool</groupId><artifactId>hutool-all</artifactId><version>5.8.11</version></dependency><!--添加热部署--><dependency><groupId>org.springframework.boot</groupId><artifactId>spring-boot-devtools</artifactId><scope>runtime</scope><optional>true</optional></dependency><!--swagger--><dependency><groupId>com.github.xiaoymin</groupId><artifactId>knife4j-openapi2-spring-boot-starter</artifactId><version>4.4.0</version></dependency><!--gson数据--><dependency><groupId>com.google.code.gson</groupId><artifactId>gson</artifactId><version>2.9.1</version></dependency></dependencies><build><plugins><plugin><groupId>org.springframework.boot</groupId><artifactId>spring-boot-maven-plugin</artifactId><!--热部署配置--><configuration><!--fork:如果没有该项配置,整个devtools不会起作用--><fork>true</fork><excludes><exclude><groupId>org.projectlombok</groupId><artifactId>lombok</artifactId></exclude></excludes></configuration></plugin></plugins></build></project>

代码的编写

MySQL表绑定到spring boot（实体层）

在项目下新建一个entity包，再新建一个类。类的命名就是User。

类名和数据库中的表名一样，不过首字母要大写，一个属性类对应一张数据库表。并且，User实体类里面的属性要和数据库中的字段对应  。

springboot绑定到mybatis-plus（数据层）

项目下创建一个mapper包，创建一个接口UserMapper，命名来源是属性类名+mapper，驼峰命名。

到这里就可以使用mybatis-plus内置最原始的增删改查，但是不够灵活，只能做最简单的增删改查。

为什么要创建这个接口呢？为了把springboot获得的属性类再绑定给到mybatis-plus那边，然后绑定的这个接口给其他层调用。

把数据层加工处理成逻辑业务（service服务层）

为什么要这一层？

这一层次叫服务层，也叫业务层。因为上面的数据完全都绑定好了，可以实现增删改查了，但是那只是最原始的，封装的方法都很少，稍微复杂一点的分页查询方法里面都没有，所以要在这一层使用别人封装好的更好的方法以及各种逻辑都可以在这里写。

（1）编写获取内置增删改查方法接口IFeedbackService

项目下创建一个service包，在service包下建立IFeedbackService接口，

这个接口继承了MP（mybatis-plus）封装好的接口，我们需要的各种增删改查方法都在这里面给我们写好了，这个接口编写是为了给后面控制层去调用这个接口里面的增删改查方法。 

（2） 编写自己定义的FeedbackService：

在service包下建立FeedbackService类，

IFeedbackService接口是直接用MP内置的增删改查方法，可以正常用，但是我想对内置的这些增删改查再优化呢，比如数据的加密、数据的校验等逻辑处理。

而且我想根据我自己的需求来去给这些内置的增删改查嵌套或者升级自定义呢？

FeedbackService类的底层是IFeedbackService接口的实现类，也就是说这个类包含了IFeedbackService的接口。还能自定义方法和对mapper数据层的调用，就比IFeedbackService接口的方法更加丰富，用于加上自定义处理繁琐的逻辑数据层。

（3）编写服务层合成逻辑业务FeedbackServiceImpl

在service包下建立impl包，创建FeedbackServiceImpl类 ，

为什么要写这个实现类？因为把FeedbackService和IFeedbackService的方法都拿来这里组成逻辑业务，比如登录、校验、权限等。

为什么不直接用FeedbackService，FeedbackService里面不是也可以定义逻辑方法吗？

FeedbackService自定义类主要用来处理一些对数据比较底层的方法。而FeedbackServiceImpl类里定义的是靠FeedbackService那些小方法组起来的业务。总而言之，这里是业务的成型，调用FeedbackService（主要）+ IFeedbackService（次要）+一些逻辑组成业务。

调用服务层的controller

编写调取业务层的UserController类，

你想要什么，告诉我，控制层会让服务层去弄逻辑业务。要什么数据或者逻辑业务都要通过我控制层，直接找控制层拿就好了。

接口自测

测试的工具可以使用idea自带的，也可以使用postman等请求测试工具。

Knife4j 是一个集 Swagger2 和 OpenAPI3 为一体的增强解决方案，它不仅拥有 Swagger 的所有功能，还做了很多优化和增强，例如：

• 界面更美观： 提供简洁美观的界面，方便用户浏览和使用 API 文档。
• 功能更丰富： 支持接口排序、搜索、分组等功能，支持多种格式输出。
• 易用性更高： 提供了更友好的配置方式，使用起来更加简单方便。

由于我在项目中集成 Knife4j，可以轻松进行接口自测。

启动Spring Boot 应用，在浏览器中访问 http://localhost:8080/doc.html，你就能看到 Knife4j 生成的 API 文档啦！

比如，测试根据id查询建议及其处理结果接口，