Vue(idea)连接后台Spring(eclipse)
步骤1:先检查vue(默认端口8080)默认使用的端口是否与eclipse(默认端口8080)一样
如果是!则修改idea端口号重新启动vue
- 找到vue根目录下的config文件下的index.js如图(本地图片上传不了看文字吧)
然后修改如下的地方,大小在从1024到49151之间
port: 这是你要修改的端口
注意main.js中,要把下面两行注释掉,如果没有就跳过
//import VueResource from 'vue-resource';
//Vue.use(VueResource);
步骤2:组件中调用钩子函数
- 先把数据绑定上
<template>
<div id="admin">
<!-- v-model(绑定数据) -->
<span>账号:</span><input type="text" v-model="userId"><br/>
<span>密码:</span><input type="text" v-model="password"><br/>
<!-- 单击按钮触发函数 -->
<button @click="submit()">登陆</button>
</div>
</template>
- 在data中定义需要传到后台的数据,然后使用this.$http.post(url,data, options) url为请求地址 data为传入后台的数据,options为请求选项,然后对获取到的数据进行判定,获取成功就跳转页面,未成功就提示账号密码错误
data:{
userId:'',
password:''
},
methods:{
submit(){
var str = {
userId:this.userId,
password:this.password
};
// 使用post方式数据传输
this.$http.post("http://localhost:8080/login",str,{emulateJSON:true}).then((succes)=>{
console.log(succes.data);
// 登陆成功则跳转index页面,index前提是要加载到路由
if(succes.data.body.你获取的数据=='你想要的数据'){ //数据这样能取到
this.$router.push({path: '/main'});
}
// 失败则不跳转
else{
alert("用户或密码错误");
}
},(err)=>{
console.log(err); })
}