【vue入门】二丶axios实现异步请求

controller层

package com.itheima.web.controller;

import com.itheima.domain.User;
import com.itheima.service.IUserService;
import org.springframework.beans.factory.annotation.Autowired;
import org.springframework.stereotype.Controller;
import org.springframework.web.bind.annotation.RequestBody;
import org.springframework.web.bind.annotation.RequestMapping;
import org.springframework.web.bind.annotation.ResponseBody;

import java.util.List;

/**
 * @author boyi on 2019/12/3
 */
@Controller
@RequestMapping("/user")
@ResponseBody
public class UserController {
    @Autowired
    private IUserService userService;


    @RequestMapping("/findAll.do")
    public List<User> findAll() {
        System.out.println("findAll test!!!");
        return userService.findAll();
    }
    @RequestMapping("/findById.do")
    public User findById(Integer id) {
        return userService.findById(id);
    }
    @RequestMapping("/updateUser.do")
    public void updateUser(@RequestBody User user ) {
        userService.updateUser(user);
    }
}

此处省略了dao service代码

测试dao service代码

import com.itheima.domain.User;
import com.itheima.service.IUserService;
import org.junit.Test;
import org.junit.runner.RunWith;
import org.springframework.beans.factory.annotation.Autowired;
import org.springframework.test.context.ContextConfiguration;
import org.springframework.test.context.junit4.SpringJUnit4ClassRunner;

import java.util.List;

/**
 * 测试业务层和持久层
 * @author boyi on 2019/12/4
 */
@RunWith(SpringJUnit4ClassRunner.class)
@ContextConfiguration(locations = "classpath:applicationContext.xml")
public class UserTest {
    @Autowired
    private IUserService userService;

    @Test
    public void testFindAll() {
        List<User> users = userService.findAll();
        System.out.println(users);
    }

}

user.js

new Vue({
    el: "#app",
    data: {
        user: {
            id: "",
            username: "",
            password: "",
            email: "",
            age: "",
            sex: ""
        },
        userList: []
    },
    methods: {
        findAll: function () {
            var _this = this;
            axios.get('user/findAll.do')
                .then(function (response) {
                    _this.userList = response.data;
                    console.log(response);
                })
                .catch(function (error) {
                    console.log(error);
                })
        },
        findById:function (userid) {
            var _this = this;
            axios.get('user/findById.do',{params:{id:userid}})
                .then(function (response) {
                    _this.user = response.data;
                    $("#myModal").modal("show");
                })
                .catch(function (error) {
                    console.log(error);
                })
        },
        update:function (user) {
            var _this = this;
            axios.post('user/updateUser.do',_this.user)
                .then(function (response) {
                  _this.findAll();
                })
                .catch(function (error) {
                    console.log(error);
                })

        }
    },
    created: function () { //当页面加载时候发送请求，查询所有。
        this.findAll();
    }
});

功能实现展示