• Springboot之SpringMVC与MyBatis(二)异步迭代商品管理

    文章目录

    创建springboot工程

    Web->Spring Web
    SQL->MyBatis Framework
    SQL->MySQL Driver

    建表
    CREATE TABLE product(id INT PRIMARY KEY AUTO_INCREMENT,title VARCHAR(50),
price DOUBLE(10,2),num INT);

    • 1
    • 2
    连接数据库
    spring.datasource.url=jdbc:mysql://localhost:3306/empdb?characterEncoding=utf8&serverTimezone=Asia/Shanghai&useSSL=false
spring.datasource.username=root
spring.datasource.password=123456

    • 1
    • 2
    • 3

    前端页面

    主页index.html

    在这里插入图片描述

    DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Titletitle>
head>
<body>
<div>
    <h1>商品首页h1>
    <a href="/insert.html">新增商品a>
    <a href="/list.html">商品列表a>
div>
body>
html>

    • 1
    • 2
    • 3
    • 4
    • 5
    • 6
    • 7
    • 8
    • 9
    • 10
    • 11
    • 12
    • 13
    • 14
    商品新增insert.html

    在这里插入图片描述

    DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Titletitle>
head>
<body>
<div>
    <h1>商品首页h1>
    <input type="text" v-model="p.title" placeholder="请输入商品商品标题">
    <input type="text" v-model="p.price" placeholder="请输入商品价格">
    <input type="text" v-model="p.num" placeholder="库存数量">
    <input type="button" value="提交" @click="insert()">
div>
<script src="https://cdn.bootcdn.net/ajax/libs/axios/0.21.1/axios.min.js">script>
<script src="https://cdn.staticfile.org/vue/2.2.2/vue.min.js">script>
<script>
    let v = new Vue({
        el: "body>div",
        data: {
            p:{
                title:"",
                price:"",
                num:""
            }
        },
        methods:{
            insert(){
                axios.post("/insert",v.p).then(function (response) {
                    alert("添加成功!");
                    location.href="/";
                })
            }
        }
    })
script>
body>
html>

    • 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
    商品列表

    在这里插入图片描述

    DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Titletitle>
head>
<body>
<div>
    <h1>商品列表h1>
    <table border="1">
        <tr>
            <td>编号td>
            <td>标题td>
            <td>价格td>
            <td>库存td>
            <td>操作td>
        tr>
        <tr v-for="p in arr">
            <td>{{p.id}}td>
            <td>{{p.title}}td>
            <td>{{p.price}}td>
            <td>{{p.num}}td>
            <td>
                <a :href="'/update.html?id='+p.id" >修改a>
                <a href="javascript:void(0)" @click="del(p.id)" >删除a>
            td>
        tr>
    table>

div>
<script src="https://cdn.bootcdn.net/ajax/libs/axios/0.21.1/axios.min.js">script>
<script src="https://cdn.staticfile.org/vue/2.2.2/vue.min.js">script>
<script>
    let v = new Vue({
        el: "body>div",
        data: {
            arr:[]
        },
        methods:{
            del(id){
                if(confirm("确认删除吗?")){
                    axios.get("/deleteById?id="+id).then(function (response) {
                        alert("删除成功!");
                        location.reload();
                    })
                }

            }
        },
        created:function () {
            axios.get("/select").then(function (response) {
                v.arr=response.data;
            })
        }
    })
script>
body>
html>

    • 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
    商品修改

    在这里插入图片描述

    DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Titletitle>
head>
<body>
<div>
    <h1>修改页面h1>
    <input type="text" v-model="p.id" placeholder="id" readonly>
    <input type="text" v-model="p.title" placeholder="标题">
    <input type="text" v-model="p.price" placeholder="价格">
    <input type="text" v-model="p.num" placeholder="库存">
    <input type="button" value="修改" @click="update()">
div>
<script src="https://cdn.bootcdn.net/ajax/libs/axios/0.21.1/axios.min.js">script>
<script src="https://cdn.staticfile.org/vue/2.2.2/vue.min.js">script>
<script>
    let v = new Vue({
        el: "body>div",
        data: {
            p:{
                id:"",
                title:"",
                price:"",
                num:""
            }
        },
        methods:{
            update(){
                axios.post("/update",v.p).then(function (response) {
                    alert("修改成功!");
                    location.href="list.html";
                })
            }
        },
        created:function () {
            axios.get("/selectById"+location.search).then(function (response) {
                v.p=response.data;
            })
        }
    })
script>
body>
html>

    • 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

    后端代码

    实体类entity
    public class Product {
    private Integer id;
    private String title;
    private Double price;
    private Integer num;

    @Override
    public String toString() {
        return "Product{" +
                "id=" + id +
                ", title='" + title + '\'' +
                ", price=" + price +
                ", num=" + num +
                '}';
    }
	//省略set/get方法
   
}


    • 1
    • 2
    • 3
    • 4
    • 5
    • 6
    • 7
    • 8
    • 9
    • 10
    • 11
    • 12
    • 13
    • 14
    • 15
    • 16
    • 17
    • 18
    • 19
    controller
    @RestController
public class ProductController {
    @Autowired(required = false)
    ProductMapper mapper;

    @RequestMapping("/insert")
    public void insert(@RequestBody Product product){
        System.out.println("product = " + product);
        mapper.insert(product);
    }

    @RequestMapping("/select")
    public List<Product> select(){
       return mapper.select();
    }

    @RequestMapping("/deleteById")
    public void delete(int id){
        System.out.println("id = " + id);
        mapper.delete(id);
    }
    @RequestMapping("/selectById")
    public Product selectById(int id){
        return mapper.selectById(id);
    }

    @RequestMapping("/update")
    public void update(@RequestBody Product product){
        mapper.update(product);
    }
}


    • 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
    mapper
    @Mapper
public interface ProductMapper {
    @Insert("insert into product values(null,#{title},#{price},#{num})")
    void insert(Product product);

    @Select("select * from product")
    List<Product> select();

    @Delete("delete from product where id=#{id}")
    void delete(int id);

    @Select("select * from product where id=#{id}")
    Product selectById(int id);

    @Update("update product set title=#{title},price=#{price},num=#{num} where id=#{id}")
    void update(Product product);
}

    • 1
    • 2
    • 3
    • 4
    • 5
    • 6
    • 7
    • 8
    • 9
    • 10
    • 11
    • 12
    • 13
    • 14
    • 15
    • 16
    • 17
  • 相关阅读:
    学习c#桌面应用编程 --- 我的第一个游戏
    nacos应用
    Object.entries()
    从单体到微服务：使用Spring Boot构建事件驱动的Java应用程序
    [msyql]实战：关于回表的一次查询优化实战
    将Flutter程序打包为ios应用并进行安装使用
    vue使用海康控件开发包——浏览器直接查看海康监控画面
    iOS代码混淆-从入门到放弃
    C++初阶-内存管理
    GDB之解决ptrace反调试手段(八)
  • 原文地址：https://blog.csdn.net/longgetaotao_06/article/details/126821893