msg: ‘Hello Vue!’
}
}
}
vue-cli会我们的更改进行热更新,再次打开 http://localhost:8080/,界面发生改变:
2.1、后端项目创建
后端项目创建如下:
- 打开Idea,
New Project
,选择Spring Intializr
- 填入项目的相关信息
- SpringBoot版本选择了 2.3.8 , 选择了web 和 MySQL驱动依赖
- 创建完成的项目
- 项目完整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”>
4.0.0
org.springframework.boot
spring-boot-starter-parent
2.3.8.RELEASE
cn.fighter3
demo-java
0.0.1-SNAPSHOT
demo-java
Demo project for Spring Boot
<java.version>1.8</java.version>
org.springframework.boot
spring-boot-starter-web
mysql
mysql-connector-java
runtime
org.springframework.boot
spring-boot-starter-test
test
org.junit.vintage
junit-vintage-engine
org.springframework.boot
spring-boot-maven-plugin
2.3、引入MybatisPlus
如果对MybatisPlus不熟悉,入门可以参考 SpringBoot学习笔记(十七:MyBatis-Plus )
想了解更多可以直接查看官网。
2.3.1、引入MP依赖
com.baomidou
mybatis-plus-boot-starter
3.4.1
由于本实例的数据库表非常简单,只有一个单表,所以这里我们直接将基本的增删改查写出来
2.3.2、数据库创建
数据库设计非常简单,只有一张表。
建表语句如下:
DROP TABLE IF EXISTS user
;
CREATE TABLE user
(
id
int(11) NOT NULL AUTO_INCREMENT,
login_name
varchar(64) CHARACTER SET utf8 COLLATE utf8_general_ci NOT NULL COMMENT ‘登录名’,
user_name
varchar(64) CHARACTER SET utf8 COLLATE utf8_general_ci NOT NULL COMMENT ‘用户名’,
password
varchar(64) CHARACTER SET utf8 COLLATE utf8_general_ci NOT NULL COMMENT ‘密码’,
sex
varchar(8) CHARACTER SET utf8 COLLATE utf8_general_ci NULL DEFAULT NULL COMMENT ‘性别’,
email
varchar(32) CHARACTER SET utf8 COLLATE utf8_general_ci NULL DEFAULT NULL COMMENT ‘邮箱’,
address
varchar(128) CHARACTER SET utf8 COLLATE utf8_general_ci NULL DEFAULT NULL COMMENT ‘地址’,
PRIMARY KEY (id
) USING BTREE
) ENGINE = InnoDB AUTO_INCREMENT = 1 CHARACTER SET = utf8 COLLATE = utf8_general_ci ROW_FORMAT = Dynamic;
SET FOREIGN_KEY_CHECKS = 1;
2.3.3、配置
在application.properties
中写入相关配置:
服务端口号
server.port=8088
数据库连接配置
spring.datasource.driver-class-name=com.mysql.cj.jdbc.Driver
spring.datasource.url=jdbc:mysql://localhost:3306/demo?characterEncoding=utf-8&allowMultiQueries=true&serverTimezone=GMT%2B8
spring.datasource.username=root
spring.datasource.password=root
在启动类里添加 @MapperScan
注解,扫描 Mapper 文件夹:
@SpringBootApplication
@MapperScan(“cn.fighter3.mapper”)
public class DemoJavaApplication {
public static void main(String[] args) {
SpringApplication.run(DemoJavaApplication.class, args);
}
}
2.3.3、相关代码
MP提供了代码生成器的功能,可以按模块生成Controller、Service、Mapper、实体类的代码。在数据库表比较多的情况下,能提升开发效率。官网给出了一个Demo,有兴趣的可以自行查看。
- 实体类
/**
-
@Author: 三分恶
-
@Date: 2021/1/17
-
@Description: 用户实体类
**/
@TableName(value = “user”)
public class User {
@TableId(type = IdType.AUTO)
private Integer id;
private String loginName;
private String userName;
private String password;
private String sex;
private String email;
private String address;
//省略getter、setter等
}
- Mapper接口:继承BaseMapper即可
/**
-
@Author: 三分恶
-
@Date: 2021/1/17
-
@Description: TODO
**/
public interface UserMapper extends BaseMapper {
}
OK,到此单表的增删改查功能已经完成了,是不是很简单。
可以写一个单元测试测一下。
2.3.4、单元测试
@SpringBootTest
class UserMapperTest {
@Autowired
UserMapper userMapper;
@Test
@DisplayName(“插入数据”)
public void testInsert(){
User user=new User(“test1”,“test”,“t123”,“男”,“test1@qq.com”,“满都镇”);
Integer id=userMapper.insert(user);
System.out.printf(id.toString());
}
@Test
@DisplayName(“根据id查找”)
public void testSelectById(){
User user=userMapper.selectById(1);
System.out.println(user.toString());
}
@Test
@DisplayName(“查找所有”)
public void testSelectAll(){
List userList=userMapper.selectObjs(null);
System.out.println(userList.size());
}
@Test
@DisplayName(“更新”)
public void testUpdate(){
User user=new User();
user.setId(1);
user.setAddress(“金葫芦镇”);
Integer id=userMapper.updateById(user);
System.out.println(id);
}
@Test
@DisplayName(“删除”)
public void testDelete(){
userMapper.deleteById(1);
}
}
至此前后端项目基本搭建完成,接下来开始进行功能开发。
====================