SpringBoot+Vue项目完成之路（二）——前后端连接测试

（一）前端页面

前端页面我是在 Visual Studio Code(简称VS)开发的，打开VS软件，打开之前已经建立好的项目——cotea(这是我的项目名）
打开之后的截图如下：
在这里插入图片描述

1、login.vue

（1）建立login.vue文件：cotea——>src——>compenents——>新建文件，然后命名为login.vue即可

在这里插入图片描述

（2）简易登录图如下：

在这里插入图片描述

代码如下：

<template>
    <div>
        用户名：<input type="text" v-model="loginForm.username" placeholder="请输入用户名"/>
        <br>
        <br>
        密码： <input type="password" v-model="loginForm.password" placeholder="请输入密码"/>
        <br><br>
        <button v-on:click="login">登录</button>
    </div>
</template>

<script>
export default {
    name:'Login',
    data(){
        return{
            loginForm:{
                username:'',
                password:''
            },
            responseResult: []
        }
   },
   methods:{
       login(){
            this.$axios
           .post('/login',{
                username: this.loginForm.username,
                password: this.loginForm.password
            })
            .then(successResponse => {
                if(successResponse.data.code ===200){
                    this.$router.replace({path: '/index'})
                }
            })
            .catch(failResponse => {

            })
       }
    
   }
    
}
</script>

<style scoped>


</style>

2、Index.vue

(1)在src\components中建立新文件夹home:src——>components——>新建文件夹

(2)在新文件夹home中建立Index.vue.用于测试前后端登录成功后的页面跳转，简单写了Hello World

<template>
    <div>
        HelloWorld
    </div>
</template>

<script>
export default {
    name:'Index'
}
</script>

<style scoped>

</style>

（二）前端配置

1、反向代理

(1)修改src\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'
//全局注册，之后可在其他组件中通过 this.$axios 发送数据
Vue.prototype.$axios= axios

Vue.config.productionTip = false

/* eslint-disable no-new */
new Vue({
  el: '#app',
  router,
  components: { App },
  template: '<App/>'
})

(2)安装axios模块

进入项目文件夹工作区，执行npm install -- save axios

在这里插入图片描述

2、页面路由

修改src\router\index.js文件，代码如下：

import Vue from 'vue'
import Router from 'vue-router'
import AppIndex from '@/components/home/Index'
import Login from '@/components/Login'

Vue.use(Router)

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

3、跨域支持

配置这个跨域支持是为了让后端能够访问到前端的资源

找到config\index.js文件在这个文件中找到proxyTable,修改下列内容

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

（三）后端开发

后端开发是在IDEA 2020版本进行开发的，在IDEA上打开我们的项目cotea_idea.

在这里插入图片描述

1、User类

(1)在src\main\java\com\evan\cotea_idea文件夹中，新建一个pojo包

(2)在pojo包中，新建User类

User类中的代码如下：

package com.evan.cotea.pojo;

public class User {
    int id;
    String username;
    String 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;
  }
}

2、result类

Result类是为了构造response,主要是响应码。

(1)在src\main\java\com\evan\cotea_idea文件夹中，新建一个result包

(2)在result包中，新建Result类

Result类中的代码如下：

package com.evan.cotea.result;

public class Result {
    //响应码
    private int code;

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

    public int getCode(){
      return code;
    }

    public void setCode(int code){
      this.code = code;
    }
}

3、LoginController类

Controller是为了响应进行处理部分。为了测试前后端的连接情况，设置的账号：admin 密码：123456

(1)在src\main\java\com\evan\cotea_idea文件夹中，新建一个controller包

(2)在controller包中，新建LoginController类

LoginController类中的代码如下：

package com.evan.cotea.controller;

import com.evan.cotea.result.Result;
import com.evan.cotea.pojo.User;
import org.springframework.stereotype.Controller;
import org.springframework.web.bind.annotation.*;
import org.springframework.web.util.HtmlUtils;
import java.util.Objects;

@Controller
public class LoginController {
    @CrossOrigin
    @PostMapping (value = "api/login")
    @ResponseBody
    public Result login(@RequestBody User requestUser){
      //对html 标签进行转义，防止XSS攻击
      //分别与接收到的User类的username和password进行比较，根据结果的不停Result(不同的响应码)
        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);
        }
    }
}