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官方文档，留在在后面慢慢学习了)
2643
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
