异步请求-Axios

        异步请求(get,post)------页面直接响应,不再跳转.

        vue向后端发送数据只能发送对象,不能发送数组,因为后端JOSN转化时只能是接受对象的类型,这里后台接受的是Product对象,所以只能是以对象形式发送.

<h1>异步请求h1>
<div>
    <input type="text" v-model="info">
    <input type="button" value="异步get请求" @click="f1()">
    <input type="button" value="异步post请求" @click="f2()">
div>
<script src="https://cdn.staticfile.org/vue/2.2.2/vue.min.js">script>
<script src="https://cdn.bootcdn.net/ajax/libs/axios/0.21.1/axios.min.js">script>
<script>
    let v = new Vue({
        el: "body>div",
        data: {
            info:"",
            let user = {username: "tom", password: "123", nick: "taomu"}
        },
        methods: {
            f1() {
                //发出异步get请求 response代表响应里面有服务器响应数据
                axios.get("/hello?info="+v.info).then(function (response) {
                    //服务器响应会执行此代码
                    //response.data代表服务器响应数据
                    alert(response.data)
                })
            }
 
            f2() {
                //通过js对象将多个值封装在一起
               
                //发出异步post请求      | let user
                axios.post("/postAxios", user).then(function (response) {
                    alert(response.data)
                })
            }
        }
    })
script>

        通过绑定vue方法@click:" f( ) ", 在vue的methods方法中添加Axios请求.

         axios.get("/hello?info="+v.info).then(function (response) {
                    //服务器响应会执行此代码
                    //response.data代表服务器响应数据
                    alert(response.data)
                })

get()中存放请求的路径("/xxx")在后台Controller接受的值，同form表单的 action一样。

。then表示后面跟随的方法,绑定回调函数，并且保证回调函数被执行，里面存放的是方法

response.data代表服务器响应数据，在Controller中 return 返回的值直接发送到response.data。

        @blur="f()">{{info}},鼠标失去焦点位置自动触发方法.

@RestController
public class AxiosController {
    @RequestMapping("/hello")
    public String hello(String info) {
 
        return "Helleo Axios"+info;
    }
}

二、异步请求下的用户注册与登录

Controller层

@RestController
public class UserController {
    @Autowired
    UserMapper mapper;
 
    @RequestMapping("/check")
    public int check(User user) {
        String u = mapper.select(user.getUsername());
        if (u != null) {
            return 1;
        }
        return 2;
    }
 
    @RequestMapping("/reg")
    public String reg(@RequestBody User user) {
        String u = mapper.select(user.getUsername());
        if (u != null) {
            return "用户存在";
        }
        mapper.insert(user);
        return "注册成功";
    }
}

Mapper层

@Mapper
public interface UserMapper {
    @Select("select password from user where username=#{username}")
    String select(String username);
 
    @Insert("insert into user values(null,#{username},#{password},#{nick})")
    void insert(User user);
}

Entity层

        mapper自动将controller接受的值set到sql执行语句中，所以不用添加set方法，get方法mapper需要，所以必须写。

public class User {
    private Integer id;
    private String username;
    private String password;
    private String nick;
 
    public User() {
    }
 
    public User(Integer id, String username, String password, String nick) {
        this.id = id;
        this.username = username;
        this.password = password;
        this.nick = nick;
    }
 
    public Integer getId() {
        return id;
    }
 
    public String getUsername() {
        return username;
    }
 
    public String getPassword() {
        return password;
    }
 
}