frontEnd
<!doctype html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport"
content="width=device-width, user-scalable=no, initial-scale=1.0, maximum-scale=1.0, minimum-scale=1.0">
<meta http-equiv="X-UA-Compatible" content="ie=edge">
<title>Document</title>
</head>
<body>
<table>
<tHead>
<tr>
<td>序号</td>
<td>名字</td>
<td>操作</td>
</tr>
</tHead>
<tBody id="tbody">
</tBody>
</table>
<div>
<input type="number" id="input_id">
<input id="input_name">
<button onclick="add()">添加</button>
<br>
<input type="number" id="update_id">
<input id="update_name">
<button onclick="upd()">更改</button>
</div>
</body>
<script>
let names = []
let tbody = document.querySelector('#tbody')
let str =''
function add(){
let id = document.getElementById('input_id').value
let name=document.getElementById('input_name').value
var myHeaders = new Headers();
myHeaders.append("Content-Type", "application/json");
var raw = JSON.stringify({"id":id,"name":name});
fetch("http://127.0.0.1:8001/books", {method: 'POST', headers: myHeaders, body: raw, redirect: 'follow'})
.then(response => response.text())
.then(result => {
console.log(result)
getBooks()
});
}
function upd(){
let update_name=document.querySelector("#update_name").value
let update_id=document.querySelector("#update_id").value
var myHeaders = new Headers();
myHeaders.append("Content-Type", "application/json");
var raw = JSON.stringify({"name":update_name});
//raw 未加工的 //JSON.stringify() 该函数的作用是:系列化对象系列化对象说白了就是把对象的类型转换为字符串类型
fetch("http://127.0.0.1:8001/books/"+update_id, { method: 'PUT', headers: myHeaders, body: raw, redirect: 'follow'})
.then(response => response.text())
.then(result => {console.log(result)
getBooks()
});
}
function remove(id){
fetch("http://127.0.0.1:8001/books/"+id, {method: 'DELETE'})
.then(response => response.text())
.then(result => {console.log("返回值："+result)
getBooks()
});
}
function show(){
for (let i=0;i<names.length;i++){
str=str+`
<tr>
<td>${names[i].id}</td>
<td>${names[i].name}</td>
<td><button onclick="remove(${names[i].id})">删除</button></td>
</tr>
` //str=str``模板字符串
}
tbody.innerHTML=str //在tbody里添加str模板字符串中的内容
str=''//为了避免做删除，添加，更新操作时有原数据叠加
}
function getBooks(){
fetch("http://localhost:8001/books")
.then(resp=>resp.json())
.then(rs=>{
names = rs
show()
})
}
getBooks()
</script>
</html>
backend
BookController
package mybatis.demo04.controller;
import mybatis.demo04.entitis.Book;
import mybatis.demo04.mapper.BookMapper;
import org.springframework.web.bind.annotation.*;
import javax.annotation.Resource;
import java.util.List;
@RestController
public class BookController {
@Resource
private BookMapper bookMapper;
@GetMapping(value = "books")
public List<Book> findAllbook(){
return bookMapper.findAllbook();
}
@CrossOrigin
@PostMapping(value = "/books")
public Book insertbook(@RequestBody Book book){
bookMapper.insertbook(book);
return book;
}
@CrossOrigin
@DeleteMapping(value = "/books/{id}")
public Book deletebook(@PathVariable("id") Integer id){
bookMapper.deletebook(id);
return new Book();
}
@CrossOrigin
@PutMapping(value = "/books/{id}")
public Book updatebook(@RequestBody Book book,@PathVariable("id") Integer id){
book.setId(id);
bookMapper.updatebook(book);
return book;
}
}
BookMapper
package mybatis.demo04.mapper;
import mybatis.demo04.entitis.Book;
import org.apache.ibatis.annotations.Mapper;
import java.util.List;
@Mapper
public interface BookMapper {
List<Book> findAllbook();
int insertbook(Book book);
int deletebook(Integer id);
int updatebook(Book book);
}
BookMapper.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="cn.lnfvc.mapper.BookMapper">
<select id="findById" resultType="cn.lnfvc.pojo.Book">
select * from books where id = #{id}
</select>
<select id="findAllBooks" resultType="cn.lnfvc.pojo.Book">
select * from books;
</select>
<insert id="insert" parameterType="cn.lnfvc.pojo.Book">
insert into books values (#{id},#{name})
</insert>
<delete id="delete" >
delete from books where id = #{id}
</delete>
<update id="update" parameterType="cn.lnfvc.pojo.Book">
update books set name = #{name} where id = #{id}
</update>
</mapper>
mabatis-config.xml
<?xml version="1.0" encoding="UTF-8" ?>
<!DOCTYPE configuration
PUBLIC "-//mybatis.org//DTD Config 3.0//EN"
"http://mybatis.org/dtd/mybatis-3-config.dtd">
<configuration>
<mappers>
<mapper resource="mapping/BookMapper.xml"></mapper>
</mappers>
</configuration>
连接数据库
use test;
create table books(id int auto_increment primary key,name varchar(20)); //创建表格
insert into books(name) values("hxd"); //插入数据
项目图
7f3085ff24d3608419e48527aabb4c5.png
结果图
a29875eda5411827cdc79a738dbf174.png
