Vue+ajxs实现查询修改（全代码）

本文链接：https://blog.csdn.net/lu__lala/article/details/124255283

本文通过新建一个SpringBoot项目，逐步讲解如何利用Vue.js和ajax进行数据查询与修改。涉及实体类的创建、mapper和服务层的定义，直到controller业务层的实现和前端展示页面的设置，最后讨论了不同传值方式的使用。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

新建一个springboot项目搭建好结构

新建一个springboot项目搭建好结构

①实体类

package com.qiu.entity;

import lombok.Data;

@Data
public class Book {
    private Integer bid;
    private String bname;
    private Double bprice;
}

②mapper层

package com.qiu.Mapper;

import com.qiu.entity.Book;
import org.apache.ibatis.annotations.Mapper;
import org.apache.ibatis.annotations.Select;

import java.util.List;

@Mapper
public interface BookMapper {
    @Select("select * from book")
    List<Book> getAll();
}

③service层

package com.qiu.service;

import com.qiu.entity.Book;

import java.util.List;

public interface BookService {
    List<Book> getAll();
}

④serviceImpl层

package com.qiu.service.impl;

import com.qiu.Mapper.BookMapper;
import com.qiu.entity.Book;
import com.qiu.service.BookService;
import org.springframework.beans.factory.annotation.Autowired;
import org.springframework.stereotype.Service;

import java.util.List;
@Service
public class BookImpl implements BookService {
    @Autowired
    BookMapper bookMapper;

    @Override
    public List<Book> getAll() {
        return bookMapper.getAll();
    }
}

⑥controller业务层

import org.springframework.stereotype.Controller;
import org.springframework.web.bind.annotation.RequestMapping;
import org.springframework.web.bind.annotation.ResponseBody;

import java.util.List;

@Controller
public class BooKController {
    @Autowired
    BookService bookService;

    @RequestMapping("to_index")
    public String to_index(){
        return "vue";
    }

    @RequestMapping("getAll")
    @ResponseBody
    public String getAll(){
        List<Book> list=bookService.getAll();
        return JSON.toJSONString(list);
    }
}

⑦展示页面

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <script src="https://cdn.bootcss.com/vue/2.5.17-beta.0/vue.min.js"></script>
</head>
<body>
<div id="app2">
    <!--<button @click="getAll">查询所有</button>-->
    <p v-for="n in result">
        {{n.bid}}~~{{n.bname}}~~{{n.bprice}}
    </p>
    {{result}}
</div>
</body>
<script>
    new Vue({
        el:"#app2",
        data:{
            result:[]
        },
        methods:{
            getAll:function () {
                let that=this;
                //1.创建XMLHttpRequest对象
                xmlHttpRequest = new XMLHttpRequest();
                //2.设置回调函数
                xmlHttpRequest.onreadystatechange = callBack;
                //3.初始化XMLHttpRequest组件
                var url = "getAll";//服务器端URL地址,name为用户名文本框获取的值,true表示异步，false表示同步
                xmlHttpRequest.open("GET", url, true);
                //4.发送请求并且传入参数
                xmlHttpRequest.send(null);
                //Ajax 回调函数
                function callBack() {
                    if (xmlHttpRequest.readyState == 4
                        && xmlHttpRequest.status == 200) {
                        //通过核心对象获取返回值
                        that.result  = JSON.parse(xmlHttpRequest.responseText);
                    }
                }//end of callBack()
            }
        },
        //钩子函数 类似加载事件
        mounted: function () {
              this.getAll();
            }

    })
</script>
</html>

⑧结果

⑨修改传值方式

<table>
    <tr>
        <th>编号</th>
        <th>名称</th>
        <th>价格</th>
        <th>库存</th>
        <th>操作</th>

    </tr>
    <tr v-for="n in result">
        <td>{{n.sid}}</td>
        <td>{{n.sname}}</td>
        <td>{{n.sprice}}</td>
        <td>{{n.snum}}</td>
        <td><button @click="buy(n.sid)">点击购买</button></td>
    </tr>
</table>





 buy:function (sid) {
                alert(sid)
                var snum=prompt("请输入您的购买数量：");
                if(snum!='' && snum!=null){
                    alert(snum)
                    let that=this;
                    //1.创建XMLHttpRequest对象
                    xmlHttpRequest = new XMLHttpRequest();
                    //2.设置回调函数
                    xmlHttpRequest.onreadystatechange = callBack;
                    //3.初始化XMLHttpRequest组件
                    var url = "update?sid="+sid+"&num="+snum;//服务器端URL地址,name为用户名文本框获取的值,true表示异步，false表示同步
                    xmlHttpRequest.open("GET", url, true);
                    //4.发送请求并且传入参数
                    xmlHttpRequest.send(null);
                    //Ajax 回调函数
                    function callBack() {
                        if (xmlHttpRequest.readyState == 4
                            && xmlHttpRequest.status == 200) {
                            //通过核心对象获取返回值
                            that.num = JSON.parse(xmlHttpRequest.responseText);
                            if(that.num=="1"){
                                alert("购买成功！")
                                that.getAll();
                            }
                        }
                    }//end of callBack()
                }
            },