好的，下面我来为您介绍使用Spring Boot
搭建增删改查前后端分离页面的步骤：
1. 创建Spring Boot项目
首先，在IDE中创建一个Spring Boot项目，我们可以使用Spring Initializr来快速创建一个基础的Spring Boot项目。
2. 添加依赖
在pom.xml文件中，添加如下依赖：
```xml
<!-- Spring Boot Web依赖 -->
<dependency>
<groupId>org.spring
framework.boot</groupId>
<artifactId>spring-boot-starter-web</artifactId>
</dependency>
<!-- Spring Boot MyBatis依赖 -->
<dependency>
<groupId>org.mybatis.spring.boot</groupId>
<artifactId>mybatis-spring-boot-starter</artifactId>
<version>2.0.1</version>
</dependency>
<!-- MySQL数据库依赖 -->
<dependency>
<groupId>mysql</groupId>
<artifactId>mysql-connector-java</artifactId>
<version>8.0.26</version>
</dependency>
```
3. 创建实体类
在src/main/java目录下创建一个名为"com.example.
demo.
entity"的包，然后创建一个实体类，例如：
```java
package com.example.
demo.
entity;
public class User {
private Long id;
private String name;
private Integer age;
// 省略getter和setter方法
}
```
4. 创建Mapper接口和XML文件
在src/main/java目录下创建一个名为"com.example.
demo.mapper"的包，然后创建一个Mapper接口，例如：
```java
package com.example.
demo.mapper;
import com.example.
demo.
entity.User;
import org.apache.ibatis.annotations.Mapper;
import java.util.List;
@Mapper
public interface UserMapper {
List<User> findAll();
User findById(Long id);
void insert(User user);
void update(User user);
void delete(Long id);
}
```
在resources目录下创建一个名为"mapper"的文件夹，然后在其中创建一个XML文件，例如：
```xml
<?xml version="1.0" encoding="UTF-8"?>
<!DOCTYPE mapper PUBLIC "-//mybatis.org//DTD Mapper 3.0//EN"
"http://mybatis.org/dtd/mybatis-3-mapper.dtd">
<mapper namespace="com.example.
demo.mapper.UserMapper">
<resultMap id="UserMap" type="com.example.
demo.
entity.User">
<id column="id" property="id"/>
<result column="name" property="name"/>
<result column="age" property="age"/>
</resultMap>
<select id="findAll" resultMap="UserMap">
select * from user
</select>
<select id="findById" resultMap="UserMap">
select * from user where id = #{id}
</select>
<insert id="insert">
insert into user(name, age) values(#{name}, #{age})
</insert>
<update id="update">
update user set name = #{name}, age = #{age} where id = #{id}
</update>
<delete id="delete">
delete from user where id = #{id}
</delete>
</mapper>
```
5. 创建Service接口和实现类
在src/main/java目录下创建一个名为"com.example.
demo.service"的包，然后创建一个Service接口，例如：
```java
package com.example.
demo.service;
import com.example.
demo.
entity.User;
import java.util.List;
public interface UserService {
List<User> findAll();
User findById(Long id);
void insert(User user);
void update(User user);
void delete(Long id);
}
```
然后创建一个Service实现类，例如：
```java
package com.example.
demo.service.impl;
import com.example.
demo.
entity.User;
import com.example.
demo.mapper.UserMapper;
import com.example.
demo.service.UserService;
import org.spring
framework.beans.factory.annotation.Autowired;
import org.spring
framework.stereotype.Service;
import java.util.List;
@Service
public class UserServiceImpl implements UserService {
@Autowired
private UserMapper userMapper;
@Override
public List<User> findAll() {
return userMapper.findAll();
}
@Override
public User findById(Long id) {
return userMapper.findById(id);
}
@Override
public void insert(User user) {
userMapper.insert(user);
}
@Override
public void update(User user) {
userMapper.update(user);
}
@Override
public void delete(Long id) {
userMapper.delete(id);
}
}
```
6. 创建Controller
在src/main/java目录下创建一个名为"com.example.
demo.controller"的包，然后创建一个Controller，例如：
```java
package com.example.
demo.controller;
import com.example.
demo.
entity.User;
import com.example.
demo.service.UserService;
import org.spring
framework.beans.factory.annotation.Autowired;
import org.spring
framework.web.bind.annotation.*;
import java.util.List;
@RestController
@RequestMapping("/user")
public class UserController {
@Autowired
private UserService userService;
@GetMapping("/")
public List<User> findAll() {
return userService.findAll();
}
@GetMapping("/{id}")
public User findById(@PathVariable Long id) {
return userService.findById(id);
}
@PostMapping("/")
public void insert(@RequestBody User user) {
userService.insert(user);
}
@PutMapping("/")
public void update(@RequestBody User user) {
userService.update(user);
}
@DeleteMapping("/{id}")
public void delete(@PathVariable Long id) {
userService.delete(id);
}
}
```
7. 编写前端页面
在src/main/resources/static目录下创建一个名为"index.html"的文件，例如：
```html
<!DOCTYPE html>
<html>
<head>
<title>User Management</title>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
</head>
<body>
<h2>User Management</h2>
<table>
<thead>
<tr>
<th>ID</th>
<th>Name</th>
<th>Age</th>
<th>Action</th>
</tr>
</thead>
<tbody id="userList">
</tbody>
</table>
<br>
<form>
<label>Name:</label>
<input type="text" id="name" name="name">
<br>
<label>Age:</label>
<input type="number" id="age" name="age">
<br>
<button type="button" onclick="insert()">Add User</button>
</form>
<script src="https://cdn.bootcdn.net/ajax/libs/jquery/3.6.0/jquery.min.js"></script>
<script>
$(document).ready(function() {
findAll();
});
function findAll() {
$.get("/user/", function(data) {
$("#userList").empty();
$.each(data, function(index, user) {
var row = "<tr><td>" + user.id + "</td><td>" + user.name + "</td><td>" + user.age + "</td><td><button type='button' onclick='findById(" + user.id + ")'>Edit</button><button type='button' onclick='deleteUser(" + user.id + ")'>Delete</button></td></tr>";
$("#userList").append(row);
})
});
}
function findById(id) {
$.get("/user/" + id, function(user) {
$("#name").val(user.name);
$("#age").val(user.age);
$("#id").val(user.id);
});
}
function insert() {
var name = $("#name").val();
var age = $("#age").val();
var user = {name: name, age: age};
$.ajax({
type: "POST",
url: "/user/",
data: JSON.stringify(user),
contentType: "application/json;charset=utf-8",
dataType: "json",
success: function() {
alert("Insert Successfully");
findAll();
$("#name").val("");
$("#age").val("");
}
});
}
function update() {
var id = $("#id").val();
var name = $("#name").val();
var age = $("#age").val();
var user = {id: id, name: name, age: age};
$.ajax({
type: "PUT",
url: "/user/",
data: JSON.stringify(user),
contentType: "application/json;charset=utf-8",
dataType: "json",
success: function() {
alert("Update Successfully");
findAll();
$("#name").val("");
$("#age").val("");
}
});
}
function delete(id) {
$.ajax({
type: "DELETE",
url: "/user/" + id,
success: function() {
alert("Delete Successfully");
findAll();
}
});
}
</script>
</body>
</html>
```
这样，一个
简单的增删改查前后端分离页面就完成了。您可以使用浏览器访问"http://localhost:8080"来查看效果。
232
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
