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

以你之姓@ 2021-09-07 06:06 1702阅读 0赞

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

##### （一）前端页面 #####

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

###### 1、login.vue ######

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

![在这里插入图片描述][watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3FxXzQyMjY0NTk3_size_16_color_FFFFFF_t_70 1]

（2）简易登录图如下：

![在这里插入图片描述][watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3FxXzQyMjY0NTk3_size_16_color_FFFFFF_t_70 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`

![在这里插入图片描述][watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3FxXzQyMjY0NTk3_size_16_color_FFFFFF_t_70 3]

###### 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.

![在这里插入图片描述][watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3FxXzQyMjY0NTk3_size_16_color_FFFFFF_t_70 4]

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

###### 4、修改application.properties文件 ######

在src\\main\\resources文件夹中找到application.properties文件配置端口，修改内容如下：

server.port=8443

##### （四）测试 #####

（1）同时运行前后端项目

运行前端项目：在项目文件夹工作区：`npm run dev`

![在这里插入图片描述][watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3FxXzQyMjY0NTk3_size_16_color_FFFFFF_t_70 5]

运行后端项目：

![在这里插入图片描述][watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3FxXzQyMjY0NTk3_size_16_color_FFFFFF_t_70 6]

（2）访问`http://localhost:8080/#/login`,输入用户名:admin,密码：123456

![在这里插入图片描述][watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3FxXzQyMjY0NTk3_size_16_color_FFFFFF_t_70 7]

然后登录，就会跳转到`http://localhost:8080/#/index`  
![在这里插入图片描述][watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3FxXzQyMjY0NTk3_size_16_color_FFFFFF_t_70 8]

[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3FxXzQyMjY0NTk3_size_16_color_FFFFFF_t_70]: /images/20210813/eeb1925d011c47ba99dde67037291d1a.png
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3FxXzQyMjY0NTk3_size_16_color_FFFFFF_t_70 1]: /images/20210813/a2517ed1ec754e438aec6f32d1ce7143.png
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3FxXzQyMjY0NTk3_size_16_color_FFFFFF_t_70 2]: /images/20210813/6a41c24e59884d01b4172ca9d36cde1b.png
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3FxXzQyMjY0NTk3_size_16_color_FFFFFF_t_70 3]: /images/20210813/f71117ddd94440afa8a5f944e92a1a8c.png
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3FxXzQyMjY0NTk3_size_16_color_FFFFFF_t_70 4]: /images/20210813/5bee626d4cee479ea7314a64629320f8.png
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3FxXzQyMjY0NTk3_size_16_color_FFFFFF_t_70 5]: /images/20210813/468df3c4adbf4c4aab9f0743d6a8493e.png
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3FxXzQyMjY0NTk3_size_16_color_FFFFFF_t_70 6]: /images/20210813/655a73e76cad406cafa8ce7899596d34.png
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3FxXzQyMjY0NTk3_size_16_color_FFFFFF_t_70 7]: /images/20210813/7fba56f4b7a9428ab2aeb46129679a80.png
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3FxXzQyMjY0NTk3_size_16_color_FFFFFF_t_70 8]: /images/20210813/2ac6c9f0626e42d885cb8d92f4e48813.png