上篇文章：http://www.itdecent.cn/p/44362d776eb3
在上兩篇文章中，我們已經(jīng)簡單的搭建了一個(gè)前端平臺(tái)，這一篇需要搭建一個(gè)系統(tǒng)后臺(tái)，并簡單的實(shí)現(xiàn)前后臺(tái)連接。
先上圖，看一下我們要實(shí)現(xiàn)的功能：
我們要實(shí)現(xiàn)的功能很簡單，就是去后臺(tái)請求一個(gè)登錄的數(shù)據(jù)，但是我們這里還不涉及登錄等功能，所以這個(gè)數(shù)據(jù)是后臺(tái)寫死的，這里只探究如何使前后臺(tái)能夠銜接上。
首先，我們需要搭建后臺(tái)代碼，先來看一下整個(gè)代碼結(jié)構(gòu)吧：
我使用的編輯工具是eclipse，先來搭建maven項(xiàng)目：
右鍵：
最后填寫完項(xiàng)目名后點(diǎn)擊Finish就可以了。
eclipse創(chuàng)建項(xiàng)目需要時(shí)間，如果電腦卡的話，需要耐心等一下。
剛創(chuàng)建好的項(xiàng)目結(jié)構(gòu)如下：
編輯pom.xml文件
<project xmlns="http://maven.apache.org/POM/4.0.0" xmlns:xsi="http://www.w3.org/2001/XMLSchema-instance"
xsi:schemaLocation="http://maven.apache.org/POM/4.0.0 http://maven.apache.org/xsd/maven-4.0.0.xsd">
<modelVersion>4.0.0</modelVersion>
<groupId>demo.ptt</groupId>
<artifactId>console</artifactId>
<version>0.0.1-SNAPSHOT</version>
<packaging>jar</packaging>
<name>console-web</name>
<description>管理后臺(tái)</description>
<properties>
<project.build.sourceEncoding>UTF-8</project.build.sourceEncoding>
<java.version>1.8</java.version>
</properties>
<parent>
<groupId>org.springframework.boot</groupId>
<artifactId>spring-boot-starter-parent</artifactId>
<version>1.5.4.RELEASE</version>
</parent>
<dependencies>
<!-- test -->
<dependency>
<groupId>org.springframework.boot</groupId>
<artifactId>spring-boot-starter-test</artifactId>
<scope>test</scope>
</dependency>
<!-- 熱部署 -->
<dependency>
<groupId>org.springframework.boot</groupId>
<artifactId>spring-boot-devtools</artifactId>
<optional>true</optional>
</dependency>
<!-- jpa -->
<dependency>
<groupId>org.springframework.boot</groupId>
<artifactId>spring-boot-starter-data-jpa</artifactId>
</dependency>
<!-- mysql -->
<dependency>
<groupId>mysql</groupId>
<artifactId>mysql-connector-java</artifactId>
</dependency>
<dependency>
<groupId>commons-dbcp</groupId>
<artifactId>commons-dbcp</artifactId>
</dependency>
</dependencies>
<build>
<plugins>
<plugin>
<groupId>org.springframework.boot</groupId>
<artifactId>spring-boot-maven-plugin</artifactId>
</plugin>
</plugins>
</build>
</project>
其中jpa和mysql的配置，我們現(xiàn)在就先不管了，這是我后續(xù)需要用的。
如果保存pom.xml文件后，整個(gè)項(xiàng)目報(bào)錯(cuò)，可以點(diǎn)擊右鍵更新一下包，有些包沒有下載下來。
下面開始創(chuàng)建resources并添加下面三個(gè)配置文件:
application-prod.properties：
server.context-path=/api
application.properties:
server.port=18062
spring.profiles.active=dev
application-dev.properties暫時(shí)不需要配置。
這里一定要配好，否則前臺(tái)請求的時(shí)候請求不上，這里的server.port=18062是配置端口號。
App.java
package demo.ptt.console;
import org.springframework.boot.SpringApplication;
import org.springframework.boot.autoconfigure.SpringBootApplication;
@SpringBootApplication
public class App {
public static void main(String[] args) {
SpringApplication.run(App.class, args);
}
}
MainController.java
package demo.ptt.console.controllers;
import org.springframework.web.bind.annotation.PostMapping;
import org.springframework.web.bind.annotation.RequestMapping;
import org.springframework.web.bind.annotation.RestController;
@RestController
@RequestMapping("main")
public class MainController {
@PostMapping("getUser")
public String getUser() {
return "彭婷婷(管理員)";
}
}
controller中的代碼很簡單，定義一個(gè)getUser方法，并返回寫死的字符串。前臺(tái)來請求到該方法并顯示出來。
后臺(tái)已經(jīng)準(zhǔn)備就緒，我們啟動(dòng)項(xiàng)目，然后去調(diào)前臺(tái)。
與上章相比，這里的前端代碼結(jié)構(gòu)略有些變化，分出來了一個(gè)api文件夾，主要來放置我們前端的請求。
Main.vue中，
sysUserName我們也需要在data中進(jìn)行注冊。這些都是vue的基礎(chǔ)了。
這里請求方法的路徑指的就是我們新建的api文件夾下的路徑。
api/main/main.js
import axios from 'axios';
let base = '/api/main'
export const GetUser = params => {
return axios.post(base + '/getUser', params);
}
到這里還沒有結(jié)束，我們還需要修改webpack的配置，否則前后端是連不上的。
這里有兩種方法，一種是用nginx跨域，另外一種就是直接使用webpack的proxyTable進(jìn)行跨域。這里采用的是第二種。
config/index.js
'/api' : {
target : 'http://localhost:18062',
changeOrigin: true,
pathRewrite : {
'^/api' : '/'
}
}
除了這處配置外，還有一處配置，這處配置我可以找了N久啊?。?！
build/dev-server.js
好了，現(xiàn)在把你瀏覽器的調(diào)試工具打開并刷新頁面，就可以看到我們調(diào)用請求的結(jié)果了。
剩下的就簡單了，我們在前端把之前寫死的登錄人信息修改掉，就好了。
嚯嚯嚯嚯，真的是找了很多資料，才終于把前后端連通啊?。。?
