axios-商品列表

最新推荐文章于 2024-07-28 23:35:29 发布

新子-存在了

最新推荐文章于 2024-07-28 23:35:29 发布

阅读量554

点赞数

分类专栏： java异步文章标签： servlet java 前端

本文链接：https://blog.csdn.net/m0_69712602/article/details/126789419

版权

java异步专栏收录该内容

6 篇文章 0 订阅

订阅专栏

本文详细介绍了如何使用SpringMVC和Vue.js实现商品管理系统的商品列表展示、删除和修改功能。通过创建HTML页面、Vue组件和控制器方法，实现了商品数据的异步加载、删除确认、修改提交等操作，涉及Ajax、Axios、Vue生命周期方法和MyBatis映射器。

摘要由CSDN通过智能技术生成

1.步骤:

1.商品列表步骤:

在首页中添加商品列表超链接请求地址为/list.html
创建list.html页面, 页面中添加表格, 并且让表格和arr数组进行绑定, 在页面中添加created方法,在方法中向/select地址发出异步请求获取所有商品的数据, 把得到的数据直接赋值给arr数组, 由于页面内容和数组进行了绑定所以页面会自动显示出查询到的数据
在ProductController里面创建select方法处理/select请求, 方法中调用mapper的select方法返回值为List集合里面装着Product对象, 把得到的集合直接响应给客户端,SpringMVC框架当发现响应的内容为自定义对象或集合时会先转成JSON格式的字符串,然后通过网络传输给客户端,而客户端当发现传递过来的是JSON格式的字符串时Axios框架会自动将JSON格式字符串转成数组或JS对象
实现mapper里面的select方法

2.删除商品步骤:

在list.html页面中添加一列每一行商品信息的后面加上删除超链接废掉超链接的跳转功能,给超链接添加点击事件, 点击时调用del 方法把需要删除的商品id传递过去
在del方法中发出异步的get请求请求地址为/delete?id=xxx 服务器响应后刷新页面
在ProductController中创建delete方法处理/delete请求, 方法中调用mapper的deleteById方法把接收到的id传递过去
实现mapper里面的deleteById方法

3.修改商品步骤:

在list.html页面中删除按钮的前面添加修改超链接, 请求地址为/update.html?id=xxx
创建update.html页面, 在页面中准备4个文本框和一个按钮, 让文本框和product对象进行双向绑定, 在页面中添加created方法,实现进入页面后立即向/selectById?id=xxx地址发出请求请求到的数据为自定义的商品对象(JS对象) 把对象赋值给Vue中和页面进行双向绑定的对象,页面会自动发生改变
在ProductController中添加selectById方法处理/selectById请求, 接收传递过来的id, 然后调用mapper中的selectById方法返回值为Product对象把对象直接响应给客户端
实现mapper里面的selectById方法
在update.html页面中,给修改按钮添加点击事件, 点击后调用update方法
实现update方法在方法中向/update地址发出异步post请求把双向绑定的product对象传递给服务器
在ProductController里面添加update方法处理/update请求, 调用mapper的update方法把接收到的product对象传递过去
实现mapper里面的update方法

2.新建首页index.html

在 resources 目录下 static 中新建

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
</head>
<body>
    <h1>商品管理系统(异步版)</h1>
    <a href="/list.html">商品列表</a>
</body>
</html>

3.新建商品列表list.html

在 resources 目录下 static 中新建

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
</head>
<body>
    <div>
        <table border="1">
            <caption>商品列表</caption>
            <tr>
                <th>id</th>
                <th>标题</th>
                <th>价格</th>
                <th>库存</th>
                <th>操作</th>
            </tr>
            <tr v-for="p in arr">
                <td>{{p.id}}</td>
                <td>{{p.title}}</td>
                <td>{{p.price}}</td>
                <td>{{p.num}}</td>
                <!--javascript:void(0) 废掉超链接的跳转功能-->
                <!--需要跳转的话就不废掉超链接-->
                <!--属性里面出现变量 必须使用属性绑定,也就是再属性前面加:
                加完:后属性的值就变成javaript代码了-->
                <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("/delete?id="+ id).then(function (response) {
                            alert("删除成功!")
                            location.reload();//刷新页面,删除后的表格会有空的位置,需要刷新
                        })
                    }

                }
            },
            created:function(){
                //此方法是vue对象的一个生命周期方法,创建vue对象时,此方法会自动调用,
                //通常情况下把刚刚进入页面需要做的事情,写在此方法中
                //发出异步请求获取数据
                axios.get("/select").then(function (response) {
                    //服务器响应的数据为装着多个商品信息的数组
                    v.arr = response.data;
                })
            }
        })
    </script>
</body>
</html>

4.新建update.html

在 resources 目录下 static 中新建

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
</head>
<body>
<div>
    <h1>修改商品页面</h1>
    <!--只读 readonly-->
    <input type="text" v-model="p.id" placeholder="id" readonly>
    <input type="text" v-model="p.title" placeholder="title">
    <input type="text" v-model="p.price" placeholder="price">
    <input type="text" v-model="p.num" placeholder="num">
    <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 () {
                //通过修改商品的id查询商品的所有信息
                //location.search =  '?id=5'
                axios.get("/selectById"+location.search).then(function (response) {
                    //把通过id查询到的商品对象复制给vue里面的变量,页面会自动发生改变
                    v.p=response.data;
                })
            }
        })
    </script>
</body>
</html>

5.新建Product实体类

在entity包下新建

package cn.detu.boot08.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 +
                '}';
    }

    public Integer getId() {
        return id;
    }

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

    public String getTitle() {
        return title;
    }

    public void setTitle(String title) {
        this.title = title;
    }

    public Double getPrice() {
        return price;
    }

    public void setPrice(Double price) {
        this.price = price;
    }

    public Integer getNum() {
        return num;
    }

    public void setNum(Integer num) {
        this.num = num;
    }
}

6.新建ProductController

在controller包下新建

package cn.detu.boot08.controller;

import cn.detu.boot08.entity.Product;
import cn.detu.boot08.mapper.ProductMapper;
import org.springframework.beans.factory.annotation.Autowired;
import org.springframework.web.bind.annotation.RequestBody;
import org.springframework.web.bind.annotation.RequestMapping;
import org.springframework.web.bind.annotation.RestController;

import java.util.List;

@RestController
public class ProductController {
    @Autowired(required = false)
    ProductMapper mapper;

    @RequestMapping("/select")
    public List<Product> select(){
        //把查询到的list集合直接响应给客户端
        return mapper.select();
    }

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

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

7.新建ProductMapper

在mapper包下新建

package cn.detu.boot08.mapper;

import cn.detu.boot08.entity.Product;
import org.apache.ibatis.annotations.*;

import java.util.List;

@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 deleteById(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);
}