前后端连接数据库

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
最后编辑于 ：
©著作权归作者所有,转载或内容合作请联系作者
平台声明：文章内容（如有图片或视频亦包括在内）由作者上传并发布，文章内容仅代表作者本人观点，简书系信息发布平台，仅提供信息存储服务。

推荐阅读更多精彩内容