（三）前后端整合

前后端之間通過 RESTful API 傳遞 JSON 數據進行交流。

采用swagger2進行接口文檔管理。

Login.vue

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

AppIndex.vue

<template>
    <div>
      Hello World!
    </div>
</template>

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

<style scoped>

</style>

設置反向代理

修改 src\main.js 代碼如下：

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/>'
})

因為使用了新的模塊 axios，所以需要進入到項目文件夾中，執行 npm install --save axios，以安裝這個模塊。個人喜歡使用yarn進行安裝。

配置頁面路由

修改 src\router\index.js 代碼如下

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

根據具體情況進行跨域配置

為了讓后端能夠訪問到前端的資源，需要配置跨域支持。

在 config\index.js 中，找到 proxyTable 位置，修改為以下內容

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

 

后端如何接收這個 JS 對象呢？我們很自然地想到在需要創建一個形式上一致的 Java 類。

打開我們的后端項目 wj，首先在 src\main\java\com\evan\wj 文件夾（就是你自己的 web 項目的包）下，新建一個 pojo 包（package），然后新建 User類，代碼如下

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

因為只是測試階段，簡單的寫個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;
    }

}

LoginController

@Controller
public class LoginController {

    @CrossOrigin
    @PostMapping(value = "api/login")
    @ResponseBody
    public Result login(@RequestBody User requestUser) {
    // 對 html 標簽進行轉義，防止 XSS 攻擊
        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);
        }
    }
}

這里我們設定賬號是 admin，密碼是 123456，分別與接收到的 User 類的 username 和 password 進行比較，根據結果返回不同的 Result，即不同的響應碼。

測試項目

同時運行前端和后端項目，訪問 localhost:8080/#/login，輸入用戶名 admin，密碼 123456

 

可能有什么遺忘，或者缺少什么，如果有問題歡迎留言