1.安装axios
-
项目创建
项目沿用以前的vuedemo:
参考第一篇博客中:HBuilder配置vue编译环境部分
如果懒于创建,可以在任意项目直接粘贴以下代码,因为我这里用的外部vue.js
这里可以跳过,如果是用于测试,可以照着步骤. -
在项目目录下安装axios(必须)
cnpm install axios --save
前端无需配置,任何端口,因为在后端做了跨域访问设置;
具体参考:【SpringBoot学习 | 4】添加支持CORS跨域访问
2.前端直接撸代码
如果懒于创建,可以在任意项目直接粘贴以下代码,因为我这里用的外部vue.js
直接在html中加入以下代码,运行测试:
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>axios测试</title>
<!--<script src="http://unpkg.com/vue/dist/vue.js"></script>-->
<script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script>
<script src="https://unpkg.com/axios/dist/axios.min.js"></script>
<!--<script type="text/javascript" src="http://remoteserver.com/remote.js"></script>-->
<script type="text/javascript">
window.onload = function(){
var vm = new Vue({
el:'#box',
data:{
msg:'Hello World!',
},
methods:{
test:function(){
//get请求
axios.get('http://localhost:8080/api/user/queryUser',{
params:{
name:'test',
password:'123456'
}
}).then(res=>{
msg=res;
console.log(res);
}).catch(error=>{
console.log(error);
});
}
}
});
}
</script>
</head>
<body>
<div id="box">
<input type="button" @click="test()" value="按钮">
</div>
</body>
</html>
3.测试
提前运行本地springboot后台,
打开html-》点击button-》显示访问信息:
这里在html中手动设置param:name=test,password=123456
(后面就可以用于登陆);返回200即表示成功!
响应成功!
总结
- 配置了springboot跨域访问,可以减少axios跨域访问的难度;
- 作为登录模块,可以优化为网页输入name和password,以及做基本数字检测等;
- 更进一步是后期对返回信息的处理,这里肯定不在登陆页面,跳转到成功界面或失败页面(当然了,vue的跳转也不简单,需要配置vue-router官方文档,留在在后面慢慢学习了)