前面我們已經完成了前端項目 DEMO 的構建，這一篇文章主要目的如下：
①打通前后端之間的聯系，為接下來的開發打下基礎
②登錄頁面的開發（無數據庫情況下）

文章目錄

• 一、后端項目創建
• • 1.1. 項目/包名稱
  • 1.2. web依賴
  • 1.3. 運行 Application.java
• 二、登錄頁面開發
• • 2.1. 關于前后端結合
  • 2.2. 前端頁面開發
  • • 2.2.1. Login.vue
    • 2.2.2. AppIndex.vue
  • 2.3. 前端相關配置
  • 2.4. 配置頁面路由
  • 2.5. 跨域支持
  • 2.6. 運行項目
• 三、后端開發
• • 3.1. User 類
  • 3.2. Result 類
  • 3.3. LoginController
  • 3.4. 修改端口
  • 3.5. 測試項目

一、后端項目創建

在 IDEA 中新建項目，選擇 Spring Initializr，點擊 Next

1.1. 項目/包名稱

1.2. web依賴

最后是項目名稱和項目地址，Finish 后等待項目自動初始化即可。

1.3. 運行 Application.java

訪問 http://localhost:8080，發現彈出了錯誤頁面，OK，這就對了，因為我們啥頁面都沒做啊。

二、登錄頁面開發

2.1. 關于前后端結合

注意我們的項目是前后端分離的，這里的結合意思不是就不分離了，是如何把這倆分離的項目串起來用。

前面提到過前后端分離的意思是前后端之間通過 RESTful API 傳遞 JSON 數據進行交流。不同于 JSP 之類，后端是不涉及頁面本身的內容的。

在開發的時候，前端用前端的服務器（Ngix），后端用后端的服務器（Tomcat），當我開發前端內容的時候，可以把前端的請求通過前端服務器轉發給后端（稱為反向代理），這樣就能實時觀察結果，并且不需要知道后端怎么實現，而只需要知道接口提供的功能，兩邊的開發人員（兩個我）就可以各司其職啦。

艾瑪做一個完整的教程真不容易，遇到的每個知識點感覺都能講一堆。上次的文章被一位老哥反問是不是太著急了，也不知道是什么意思，我自己反思可能是講的不夠細吧，這里我就再啰嗦一下講兩句 正向代理 和 反向代理。

正向代理就是，你要訪問一個網站，比如“谷弟弟”，然后發現訪問不到，于是你訪問了一個能訪問到“谷弟弟”的代理服務器，讓它幫你拿到你想瀏覽的頁面。

反向代理就是，你訪問了一個網站，你以為它是“谷弟弟”，但其實它是“谷姐”，“谷姐”知道你其實是想找她弟，就取回“谷弟弟”的內容給你看。作為用戶的你，是不知道有這個過程的，這么做是為了保護服務器，不暴露服務器的真實地址。

知乎上有張神圖可以描述這兩種過程

2.2. 前端頁面開發

2.2.1. Login.vue

首先我們開發登錄頁面組件，右鍵 src\components 文件夾，New -> Vue Component，命名為 Login，如果沒有 Vue Component 這個選項，可以選擇新建一個 File，命名為 Login.vue 即可。

代碼如下：

<template><div>用戶名:&nbsp;<input type="text" v-model="loginForm.username" placeholder="請輸入用戶名"/><br><br>密&nbsp;&nbsp;&nbsp;&nbsp;碼:&nbsp;<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>

<template> 標簽中隨便寫了一個登錄的界面， methods 中定義了登錄按鈕的點擊方法，即向后端 /login 接口發送數據，獲得成功的響應后，頁面跳轉到 /index。因為之前我們設置了默認的 URL，所以請求實際上發到了 http://localhost:8443/api/login。

2.2.2. AppIndex.vue

右鍵 src\components 文件夾，新建一個 directory，命名為 home，再在 home 下新建一個 AppIndex.vue ，即首頁組件，這里暫時不做過多開發，先隨便寫個 Hello World。

<template><div>Hello World!</div> </template><script> export default {name: 'AppIndex' } </script><style scoped></style>

2.3. 前端相關配置

設置反向代理
修改 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，以安裝這個模塊。

2.4. 配置頁面路由

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

2.5. 跨域支持

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

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

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

注意如果不是在最后的位置，大括號外需要添加一個逗號。

2.6. 運行項目

執行 npm run dev，或雙擊 dev（start 也一樣）腳本，查看登錄頁面效果。

注意地址是 localhost:8080/#/login ，中間有這個 # 是因為 Vue 的路由使用了 Hash 模式，是單頁面應用的經典用法，但連尤雨溪本人都覺得不太好看，所以可以在路由配置中選擇使用 History 模式，但會引發一些問題，需要在后端作出處理，所以這里先不更改，之后我單獨寫一篇關于這個的文章。

教程的內容簡化了一下，我做的是這個樣子的。。。

呃，總之這個頁面的功能都是一樣的。

三、后端開發

3.1. User 類

在 Login.vue 中，前端發送數據的代碼段為

.post('/login', {username: this.loginForm.username,password: this.loginForm.password})

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

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

package com.gblfy.wj.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;} }

3.2. Result 類

Result 類是為了構造 response，主要是響應碼。新建 result 包，創建 Result 類，代碼如下:

package com.gblfy.wj.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;}}

實際上由于響應碼是固定的，code 屬性應該是一個枚舉值，這里作了一些簡化。

3.3. LoginController

Controller 是對響應進行處理的部分。這里我們設定賬號是 admin，密碼是 123456，分別與接收到的 User 類的 username 和 password 進行比較，根據結果返回不同的 Result，即不同的響應碼。前端如果接收到成功的響應碼（200），則跳轉到 /index 頁面。

在 wj 下新建 controller 包，新建 LoginController 類，代碼如下：

package com.gblfy.wj.controller;import com.gblfy.wj.pojo.User; import com.gblfy.wj.result.Result; 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")@ResponseBodypublic 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);}} }

最后，在 src\main\resources 文件夾下找到 application.yml文件配置端口，即加上 server.port=8443（初始應該是空白的，后期還要配置數據庫等）

3.4. 修改端口

application.yml

server:port: 8443

3.5. 測試項目

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

npm run dev

后端項目啟動端口8443：

看到此圖說明前端項目啟動成功：

看到此圖說明后端項目啟動成功：

測試：
輸入用戶名密碼
admin/123456
如果賬號密碼正確，機會跳轉index首頁，如下圖所示：

通過這篇文章，希望大家可以直觀地感受到前后端分離項目中前后端的過程，之后的功能開發基本思路就是在后端開發 Controller，在前端開發不同的組件，這個順序可以隨意。實際的項目應該是前后端人員根據功能需求約定好接口，然后齊頭并進，以提高開發效率。

接下來一段時間需要寫的內容大概有以下這些：

• 數據庫的引入
• 后端攔截器的配置
• 部署項目時會遇到的一些坑
• 使用 Element 輔助前端開發
• 公共組件的開發

創作挑戰賽新人創作獎勵來咯，堅持創作打卡瓜分現金大獎

總結

以上是生活随笔為你收集整理的Vue + Spring Boot 项目实战（四）：前后端结合测试（登录页面开发）的全部內容，希望文章能夠幫你解決所遇到的問題。

如果覺得生活随笔網站內容還不錯，歡迎將生活随笔推薦給好友。