一、说明
1、vue里定义的Router是前端路由，而axios属于ajax是请求后端接口用的。故，axios无法用来请求页面，而可以用来请求后端接口。
详情参考 axios文档，http://www.axios-js.com/zh-cn/docs/
二、实现
1、引入vue以及axios
<!-- 引入vue.js -->
<script src="js/vue.js"></script>
<!-- 引入axios.js -->
<script src="https://unpkg.com/axios/dist/axios.min.js"></script>
2、实现脚本控制按钮
<script>
new Vue({
el:'#app',
template:`
<div>
<button @click="login">发送</button>
</div>
`,
data(){
return{
}
},
methods:{
login:function() {
axios.post('/login', { //get|post可选，用对象{ }传递数据，如果不传递数据，可缺省{ }。get方式参数也可以拼接在url中
username: 'chy', //通常是获取表单数据，$('#xxx').val
password: 'abcd'
}).then(function (response) { //处理后台返回的数据。
console.log("test:::::");
console.log(response); //response是后台返回的整个响应
console.log("test!!!");
console.log(response.data); //.data才是后台返回的数据
}).catch(function (error) { //发生错误时的处理
console.log(error);
});
}
}
})
</script>
3、后端接受请求
@RequestMapping("/login")
public void login() throws IOException {
String command = "cmd.exe /c cd"
+ " E:\\projects\\python\\smarthome\\venv\\Include "
+ "&& start python main.py";
Process p = Runtime.getRuntime().exec(command);
}
附：完整代码
index.html
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8" />
<title></title>
<!-- 引入vue.js -->
<script src="js/vue.js"></script>
<!-- 引入axios.js -->
<script src="https://unpkg.com/axios/dist/axios.min.js"></script>
</head>
<body>
<div id="app"></div>
<script>
new Vue({
el:'#app',
template:`
<div>
<button @click="login">发送</button>
</div>
`,
data(){
return{
}
},
methods:{
login:function() {
axios.post('/login', { //get|post可选，用对象{ }传递数据，如果不传递数据，可缺省{ }。get方式参数也可以拼接在url中
username: 'chy', //通常是获取表单数据，$('#xxx').val
password: 'abcd'
}).then(function (response) { //处理后台返回的数据。
console.log("test:::::");
console.log(response); //response是后台返回的整个响应
console.log("test!!!");
console.log(response.data); //.data才是后台返回的数据
}).catch(function (error) { //发生错误时的处理
console.log(error);
});
}
}
})
</script>
</body>
</html>