异步请求(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;
}
}