Life has its own fate, and meeting may not be accidental.

0%

vue-cli反向代理以及axios使用

准备早点把毕业设计写了,之后实习轻松点。写个小说APP玩玩,平常看小说什么的最烦的就是遇到广告了= =。准备后端用jsoup,前端用vue。到时候给账号的话就我一个个分配吧(不想太多人用,毕竟来源准备爪巴那些不正规的网站的源),不想写注册了,或者注册时候要一个邀请码啥的。

在config->index.js下更改proxyTable

1
2
3
4
5
6
7
8
9
proxyTable: {
'/api': { //使用"/api"来代替"http://[ip]:[port]"
target: 'http://[ip]:[port]', //源地址
changeOrigin: true, //改变源
pathRewrite: {
'^/api': '/api' //路径重写
}
}
},

运行端口和我的springboot装起来了本地的8080冲突了,所以换成了8084

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
<script>
import axios from 'axios'
export default {
//单页面中不支持前面的data:{}方式
data() {
//相当于以前的function data(){},这是es5之前的写法,新版本可以省略掉function
return{
user:{
username:'',
password:'',
//为了登录方便,可以直接在这里写好用户名和密码的值
}
}
},
beforeRouteEnter (to,from,next) {
window.document.body.style.backgroundColor= '#DCDFE6';
next();
},
beforeRouteLeave (to,from,next) {
window.document.body.style.backgroundColor= '';
next();
},
methods:{
doLogin(){//一点击登录按钮,这个方法就会执行
if(this.user.username == ""||this.user.password == ""){
alert("输入用户名或者密码")
}
else{
axios.post('/api/conter/register',JSON.stringify({
// username: this.user.username,
// password: this.user.password
userDto: this.user
})).then(
response =>{
alert(response.data)
}
).catch(
err =>{
alert(err)
}
)
}
// alert(JSON.stringify(this.user))
//可以直接把this.user对象传给后端进行校验用户名和密码
}
}
}
</script>

前端是以user对象传输的,后端试了好久,发现还是Map<string,Object> 好获得值.

1
2
3
4
@RequestMapping("/register")
public String register(@RequestBody Map<String,userDto> map){
User user= new User();
System.out.println(map.get("userDto").getUsername());