Vue(idea)连接后台Spring(eclipse),获取到数据并判断是否获取成功

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); })
}