SSMP整合案例(1) 构建 Spring Boot Vue MySql项目环境

news2024/11/18 1:27:21

前面我们通过
java springboot整合MyBatis做数据库查询操作
java springboot整合MyBatis-Plus 多用点Plus支持一下国人开发的东西吧
java springboot整合Druid数据源配置
大体熟悉了springboot正好第三方应用的操作

那么我们就来写一个基于springboot的SSMP整合案例
其实就是将 spring springboot springMVC MyBatis-Plus 整合在一起

做的案例的就是一个模块的增删改查
做这个东西我们需要掌握 vue+element ui的一个基本开发

在正常开发过程中我们通常是通过手机App 小程序浏览器去访问前端服务，前端访问后端服务器而我们可以部署一个微服务概念用多个服务器处理不同模块的逻辑在这里插入图片描述
但是这里微服务我们还没有讲过就先写简单一点将所有逻辑都写在一个服务上

那么首先呢我们打开本地MySql数据库
这里我选择一个 test数据库你们可以根据自己的情况调整然后新建一个查询语句
在这里插入图片描述
在新的查询语句中编写如下代码

CREATE TABLE IF NOT EXISTS `book`(
   `id` INT UNSIGNED AUTO_INCREMENT,
   `type` INT(2) NOT NULL,
   `name` VARCHAR(200) NOT NULL,
   `description` VARCHAR(200),
   PRIMARY KEY ( `id` )
)ENGINE=InnoDB DEFAULT CHARSET=utf8;

我们这段代码的意思是创建一个book表
其中
主键id 为 INT 数字类型绑定了主键自增表示
然后 type 为数字枚举我们绑上了非空约缚
然后第三个 name 字符串类型我们设置非空
最后一个 description 我们用来当详情设置字符串可以是空的

然后点击运行
在这里插入图片描述
下面就会输出结果

然后我们右键表这个位置点击刷新

新的book表就出来了

这样我们数据库的表就好了

我们在需要创建前端工厂的目录下打开终端
执行

vue create book

创建一个叫 book的vue项目

版本的话这里我们选择vue2
在这里插入图片描述
我们打开vue项目然后在终端输入

npm install element-ui@latest -S

找到 main.js 添加如下代码

import ElementUI from 'element-ui'
import 'element-ui/lib/theme-chalk/index.css';
Vue.use(ElementUI)

在这里插入图片描述
这样我们就创建了一个vue2项目并引入了ElementUI

到java啦那来吧
打开idea 创建一个项目
在这里插入图片描述
项目目录选一下然后 java的版本建议 8 JDK版本选1.8 然后点击 Next

然后注意一下 Spring Boot的版本 2.几即可

然后我们选一下技术
我们要写接口所有 WEB 是需要的

sql下我们加一个 MySql的驱动

不要直接加 MyBatis 了我们要用MyBatis-Plus

选好之后点击 Finish

这样我们的项目就出来了
在这里插入图片描述
还是先看 pom.xml

这里引入了 MVC的启动 MySql的驱动测试的启动
在这里插入图片描述
就还少两个东西

那么我们还是先访问
https://mvnrepository.com/artifact/commons-httpclient/commons-httpclient/3.1
还是在最上面搜索 MyBatis-Plus
在这里插入图片描述
点击第一个进去
版本选择 3.4.3

下来将这一块内容复制

然后复制到 pom.xml 中

然后我们再索索 Druid
这个的话我们要选这个 Spring Boot 的这个

我们用这个 1.2.6的

还是将这个内容复制

放到 pom.xml 中
在这里插入图片描述
然后在src下找到配置文件修改一下名称

改成 yml 格式的

然后我们先在 application.yml 中将端口挂一下