Vue.js ajax

Z时代
2024-01-10
分类：综合

vue

Axios 是一个基于 promise 的 HTTP 库，可以用在浏览器和 node.js 中。axios的github:https://github.com/axios/axios

(1)首先搭建好Maven+SSM的后台架构:

(2)在user.js中书写

var vue = new Vue({
    el: "#app",
    data: {
        user: {id:"",name:"",money:""},
        userList: []
    },
    methods: {
        findAll: function () {
            var _this = this;//此处是将Vue的this对象用_this保存，防止和下面的axious的this对象冲突
            axios.get("/SSM/account/findAll.do").then(function (response) {
                _this.userList = response.data;
                console.log(_this.userList);
            }).catch(function (err) {
                console.log(err);
            });
        },
        findById: function (userid) {
            var _this = this;
            axios.get("/SSM/account/findById.do", {//参数用两组大括号
                params: {
                    id: userid
                }
            }).then(function (response) {
              _this.user = response.data;
                $('#myModal').modal("show");//启用模态窗口来进行显示
            }).catch(function (err) {
            });
        },
        update: function (user) {
            var _this = this;
            axios.post("/SSM/account/update.do",_this.user).then(function (response) {
                _this.findAll();
            }).catch(function (err) {
            });
        }
    },
    created:function(){//当页面加载的时候触发请求，查询所有
        this.findAll();
    }
});