使用 Vue+axios+springboot 跨域实现登录

使用vue-cli搭建Vue项目

进入项目创建的文件夹,打开cmd

vue init webpack 项目名称

使用编辑器打开项目

进入src>components文件夹下创建Login.vue
login.vue

<template>
  <div>
      用户名:<input type="text" v-model="user.username" placeholder="请输入用户名" />
      <br/>
      密码：<input type="password" v-model="user.userpassword" placeholder="请输入密码" />
      <br/>
      <input type="button" value="Login" @click="login">
      <br/>
    </div>
</template>

在index.js中添加路由

import Login from '@/components/Login'
export default new Router({
  routes: [
    {
      path: '/login',
      name: 'Login',
      component: Login
    }
  ]
})

修改App.vue

<template>
  <div id="app">
    <router-view/>
  </div>
</template>

使用Axios

在Login.vue中引入axios

import axios from 'axios'

配置axios如下：

export default {
  name: 'Login',
  data() {
    return {
      user:{
        username: '',
        userpassword: ''
      }
    }
  },
  methods: {
    login() {
      axios({
        method: 'post',
        url: '/api/login',
        data: {
          username: this.user.username,
          userpassword: this.user.userpassword
        }
      })
      .then(res => {
        alert(res.data);
      })
    }
  }
}

实现跨域

前端页面默认端口为8080，由于模拟跨域将后端服务器端口设置为8081
在index.js中找到dev下的proxyTable，将其修改为：

proxyTable: {
      "/api": {  //配置后则可以使用'/api'代替'http://127.0.0.1:8081'
        target: "http://127.0.0.1:8081",//请求的后端服务器地址，暂时为本地8081端口
        changeOrigin: ture // 将其设为true表示允许跨域
      }
    },

设置完毕则可将axios的url设置为/api/login

后端代码

这里后台使用springboot
实体类User.java

public class User {
    private String username;
    private String userpassword;
    //getter and setter   
}

控制层LoginController.java

@Controller
public class LoginController {
    @RequestMapping(value = "/api/login",method = RequestMethod.POST,produces = "application/json;charset=UTF-8")
    @ResponseBody
    public String login(@RequestBody User user){
      if(!Objects.equals("admin",user.getUsername())||!Objects.equals("123456",user.getUserpassword())){
            return "Login Failed";
        }else{
            return "Login success";
        }
    }
}

由于默认端口为8080，在application.properties中更改端口：

server.port=8081

先启动后台，在Vue前端项目的terminal中输入：

npm run dev

然后地址栏输入 http://localhost:8080/#/login 即可