前后端分离，利用vue结合Springboot实现登录接口的制作并通过测试

1---前端利用vue制作登录界面并与后台通信

2---前端

工程中引入vue-router和axios依赖，可以参考我之前的博客

3---components文件夹下建立制作登录页，Login.vue

4--components下建立home文件夹，制作跳转页：AppIndex.vue

5---router文件夹下，修改index文件，

import Vue from 'vue'
import Router from 'vue-router'
import AppIndex from "../components/home/AppIndex";
import Login from "../components/Login";

Vue.use(Router)

export default new Router({
  routes: [
    {
      path: '/login',
      name: 'Login',
      component: Login
    },
    {
      path: '/index',
      name: 'AppIndex',
      component: AppIndex
    }
  ]
})

6---整体App.vue组件：

7---main.js文件，进行修改后：

// The Vue build version to load with the `import` command
// (runtime-only or standalone) has been set in webpack.base.conf with an alias.
import Vue from 'vue'
import App from './App'
import router from './router'

// 设置反向代理，前端请求默认发送到 http://localhost:8443/api
var axios=require('axios')
axios.defaults.baseURL='http://localhost:8443/api'

Vue.prototype.$axios = axios
Vue.config.productionTip = false
/*作用是阻止vue 在启动时生成生产提示。*/

/* eslint-disable no-new */
new Vue({
  el: '#app',
  router,                /*router 代表该对象包含 Vue Router，并使用项目中的路由*/
  components: { App },   /*components 表示该对象包含的 Vue 组件，*/
  template: ''     /*template 是用一个字符串模板作为 Vue 实例的标识使用，类似于定义一个 html 标签*/
})

8---在config文件夹下中的index.js文件中添加如下：

 proxyTable: {
      '/api':{
        target: 'http://localhost:8443',
        changeOrigin: true,
        pathRewrite:{
          '^/api':''
        }
      }
    },

9---前端测试：

 

10---后台设计：

11---pom文件依赖如下：

    4.0.0
    
        org.springframework.boot
        spring-boot-starter-parent
        2.2.1.RELEASE
         
    
    com.evan
    wj
    0.0.1-SNAPSHOT
    wj
    Demo project for Spring Boot

    
        1.8
    

    
        
            org.springframework.boot
            spring-boot-starter-web
        

        
            org.springframework.boot
            spring-boot-starter-test
            test
            
                
                    org.junit.vintage
                    junit-vintage-engine
                
            
        
    

    
        
            
                org.springframework.boot
                spring-boot-maven-plugin
            
        
    

12---application.properties设计

server.port=8443

13---LoginController类设计：

package com.evan.wj.controller;

import com.evan.wj.pojo.User;
import com.evan.wj.result.Result;
import org.springframework.stereotype.Controller;
import org.springframework.web.bind.annotation.CrossOrigin;
import org.springframework.web.bind.annotation.PostMapping;
import org.springframework.web.bind.annotation.RequestBody;
import org.springframework.web.bind.annotation.ResponseBody;
import org.springframework.web.util.HtmlUtils;

import java.util.Objects;

/**
 * Created by NanTian
 * on 2019/11/22 11:53
 */
@Controller
public class LoginController {


    @CrossOrigin
    @PostMapping(value = "api/login")
    @ResponseBody
    public Result login(@RequestBody User requestUser) {
        String username = requestUser.getUsername();
        username = HtmlUtils.htmlEscape(username);

        if (!Objects.equals("admin", username) || !Objects.equals("123456", requestUser.getPassword())) {
            String message = "账号或者密码错误！";
            System.out.println("test");
            return new Result(400);
        } else {
            return new Result(200);
        }
    }

}

14---User类设计

package com.evan.wj.pojo;

/**
 * Created by NanTian
 * on 2019/11/22 11:49
 */
public class User {
    private int id;
    private String username;
    private String password;

    @Override
    public String toString() {
        return "User{" +
                "id=" + id +
                ", username='" + username + '\'' +
                ", password='" + password + '\'' +
                '}';
    }

    public User() {
    }

    public User(int id, String username, String password) {
        this.id = id;
        this.username = username;
        this.password = password;
    }

    public int getId() {
        return id;
    }

    public void setId(int id) {
        this.id = id;
    }

    public String getUsername() {
        return username;
    }

    public void setUsername(String username) {
        this.username = username;
    }

    public String getPassword() {
        return password;
    }

    public void setPassword(String password) {
        this.password = password;
    }
}

15---工具类设计：Result

package com.evan.wj.result;

/**
 * Created by NanTian
 * on 2019/11/22 11:50
 */
public class Result {
    private int code;



    public Result() {
    }

    public Result(int code) {
        this.code = code;
    }

    public int getCode() {
        return code;
    }

    public void setCode(int code) {
        this.code = code;
    }
    @Override
    public String toString() {
        return "Result{" +
                "code=" + code +
                '}';
    }
}

16---启动类：

package com.evan.wj;

import org.springframework.boot.SpringApplication;
import org.springframework.boot.autoconfigure.SpringBootApplication;

@SpringBootApplication
public class WjApplication {

    public static void main(String[] args) {
        SpringApplication.run(WjApplication.class, args);
    }

}

17---总体效果如下：测试通过