0%

为数据库操作添加前端页面

等我把js学好了就把返回数据的页面做出来,现在将就看吧

本文章基于:

  • Spring Boot
  • MySQL
  • Mybatis
  • Freemaker

假定读者已经阅读以下两篇文章:

  • Spring Boot + Freemaker 整合

  • IDEA+Spring Boot+Mybatis+MySQL整合

现在我们要做的就是把这两个项目杂糅起来

建立项目与配置

按照这样建立项目

在这里插入图片描述

然后添加依赖

pom.xml
1
2
3
4
5
6
7
8
9
10
11
12
<!-- 添加 MyBatis -->
<dependency>
<groupId>org.mybatis.spring.boot</groupId>
<artifactId>mybatis-spring-boot-starter</artifactId>
<version>1.3.2</version>
</dependency>
<!-- 添加 MySQL -->
<dependency>
<groupId>mysql</groupId>
<artifactId>mysql-connector-java</artifactId>
<version>8.0.19</version>
</dependency>

配置application.properties

src/main/resources/application.properties
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
# 配置Freemaker
spring.freemarker.template-loader-path=classpath:/templates
spring.freemarker.cache=false
spring.freemarker.charset=UTF-8
spring.freemarker.check-template-location=true
spring.freemarker.content-type=text/html
spring.freemarker.expose-request-attributes=false
spring.freemarker.expose-session-attributes=false
spring.freemarker.request-context-attribute=request
spring.freemarker.suffix=.ftl
# 配置数据库连接
spring.datasource.url=jdbc:mysql://localhost:3306/demo?useUnicode=true&characterEncoding=utf8&serverTimezone=Asia/Shanghai
spring.datasource.username=root
spring.datasource.password=root
spring.datasource.driver-class-name=com.mysql.cj.jdbc.Driver
mybatis.type-aliases-package=com.example.demo.mapper

没错就是把两个的配置丢在一起

源程序

把上面两篇文章做出来的东西复制粘贴就好啦

目录结构如下:

  • src
    • main
      • java
        • com.example.demo
          • entity
            • User.java
          • mapper
            • UserMapper.java
          • web)
            • Hellocontroller.java
            • UserController.java
          • DemoAppication.java
      • resources
        • static
        • templates
          • index.ftl
        • application.properties

index.html中的内容复制覆盖index.ftl中,然后把html删掉,没有用了

UserController.java 中的方法注解用两种:

1
2
@GetMapping
@PostMapping

这决定了你在index.ftl中的表单用什么方式传递数据
修改对应的方法
实在不放心可以看一下源代码(有个两三个地方的注释看一下):

User.java
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
package com.example.demo.entity;

public class User {
private int id;
private String name;
private String gender;

public int getId() {
return id;
}

public void setId(int id) {
this.id = id;
}

public String getName() {
return name;
}

public void setName(String name) {
this.name = name;
}

public String getGender() {
return gender;
}

public void setGender(String gender) {
this.gender = gender;
}

@Override
public String toString() {
return "User{" +
"id=" + id +
", name='" + name + '\'' +
", gender='" + gender + '\'' +
'}';
}
}


​```java UserMapper.java
package com.example.demo.mapper;

import com.example.demo.entity.User;
import org.apache.ibatis.annotations.*;
import org.springframework.stereotype.Repository;

import java.util.List;

@Repository
public interface UserMapper {
@Select("SELECT * FROM user")
List<User> getAll();

@Select("select * from user where id=#{id}")
List<User> getById(int id);//万一有相同id...还是list输出吧

@Insert({"insert into user(id,name,gender) values(#{id},#{name},#{gender})"})
void install(User user);

@Update({"update user set name=#{name},gender=#{gender} where id=#{id}"})
void Update(User user);

@Delete("delete from user where id=#{id}")
void delete(int id);
}
Hellocontroller.java
1
2
3
4
5
6
7
8
9
10
11
12
package com.example.demo.web;

import org.springframework.stereotype.Controller;
import org.springframework.web.bind.annotation.RequestMapping;

@Controller
public class Hellocontroller {
@RequestMapping(value = "/")
public String index() {
return "index";
}
}
UserController.java
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
package com.example.demo.web;

import com.example.demo.entity.User;
import com.example.demo.mapper.UserMapper;
import org.springframework.beans.factory.annotation.Autowired;
import org.springframework.web.bind.annotation.*;

import java.util.List;

@RestController
public class UserController {
@Autowired
private UserMapper userMapper;

@GetMapping("/getAll")
public List<User> getAll() {
return userMapper.getAll();
}

//@RequestMapping(value = "/install", method = RequestMethod.POST, produces = "application/json;charset=UTF-8")
@PostMapping("/install")
public List<User> install(User user) {
userMapper.install(user);
return userMapper.getAll();
}

@PostMapping("/delete")
public List<User> delete(int id) {
userMapper.delete(id);
return userMapper.getAll();
}

@PostMapping("/update")
public List<User> update(User user) {
userMapper.Update(user);
return userMapper.getAll();
}

@PostMapping("/get")
public List<User> get(int id) {
return userMapper.getById(id);//这里对应的也改一下
}

//这里原来有个GetMapping("/")的,避免和Hellocontroller冲突

}
DemoAppication.java
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
package com.example.demo;

import org.mybatis.spring.annotation.MapperScan;
import org.springframework.boot.SpringApplication;
import org.springframework.boot.autoconfigure.SpringBootApplication;

@MapperScan("com.example.demo.mapper")
@SpringBootApplication
public class DemoApplication {

public static void main(String[] args) {
SpringApplication.run(DemoApplication.class, args);
}

}
index.ftl 才学前端没几天,着实不好看
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>数据库demo</title>

<style>
h1 {
text-align: center;
}

.left {
text-align: right;
}

table {
background: lightpink;
border-radius: 10px;
margin: 0 auto;
border: coral 5px solid;
}
</style>
</head>
<body>

<div class="main">
<div class="install">
<h1>提交信息</h1>
<form action="/install" method="post">
<table>
<tr>
<td class="left">ID(仅数字):</td>
<td class="right"><input type="text" name="id"></td>
</tr>
<tr>
<td class="left">姓名:</td>
<td class="right"><input type="text" name="name"></td>
</tr>
<tr>
<td class="left">性别:</td>
<td><input type="radio" name="gender" value="男">
<input type="radio" name="gender" value="女">&emsp;&emsp;&nbsp;
<input type="submit" value="提交">
</td>
</tr>
</table>
</form>
</div>

<div class="delete">
<h1>删除</h1>
<form action="/delete" method="post">
<table>
<tr>
<td class="left">ID(仅数字):</td>
<td class="right"><input type="text" name="id"></td>
<td><input type="submit" value="删除"></td>
</tr>
</table>
</form>
</div>

<div class="update">
<h1>修改数据</h1>
<form action="/update" method="post">
<table>
<tr>
<td class="left">待修改数据的ID(仅数字):</td>
<td class="right"><input type="text" name="id"></td>
</tr>
<tr>
<td class="left">更新姓名:</td>
<td class="right"><input type="text" name="name"></td>
</tr>
<tr>
<td class="left">更新性别:</td>
<td><input type="radio" name="gender" value="男">
<input type="radio" name="gender" value="女">&emsp;&emsp;&nbsp;
<input type="submit" value="提交">
</td>
</tr>
</table>
</form>
</div>

<div class="get">
<h1>精确查询</h1>
<form action="/get" method="post">
<table>
<tr>
<td class="left">待查询数据的ID(仅数字):</td>
<td class="right"><input type="text" name="id"></td>
<td><input type="submit" value="查询"></td>
</tr>
</table>
</form>
</div>

<div class="getAll">
<h1>查询全部<br>
<form action="/getAll" method="get">
<input type="submit" value="查询数据">
</form>
</h1>
</div>
</div>
</body>
</html>

完成!

-----------看到底线啦 感谢您的阅读-------------