上篇文章：http://www.reibang.com/p/44362d776eb3
在上兩篇文章中，我們已經(jīng)簡單的搭建了一個前端平臺坦胶，這一篇需要搭建一個系統(tǒng)后臺透典，并簡單的實現(xiàn)前后臺連接。
先上圖顿苇，看一下我們要實現(xiàn)的功能：

后臺管理系統(tǒng).png

后臺代碼結構.png

步驟圖.png

步驟圖.png

步驟圖.png

步驟圖.png

步驟圖.png

最后填寫完項目名后點擊Finish就可以了。
eclipse創(chuàng)建項目需要時間叫惊，如果電腦卡的話款青，需要耐心等一下。
剛創(chuàng)建好的項目結構如下：

結構圖.png

編輯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>管理后臺</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文件后蚓耽，整個項目報錯，可以點擊右鍵更新一下包旋炒，有些包沒有下載下來步悠。

更新包.png

更新包.png

下面開始創(chuàng)建resources并添加下面三個配置文件:
application-prod.properties：

server.context-path=/api

application.properties:

server.port=18062
spring.profiles.active=dev

application-dev.properties暫時不需要配置。
這里一定要配好瘫镇，否則前臺請求的時候請求不上鼎兽，這里的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中的代碼很簡單铣除，定義一個getUser方法谚咬，并返回寫死的字符串。前臺來請求到該方法并顯示出來尚粘。

啟動項目.png

后臺已經(jīng)準備就緒择卦，我們啟動項目，然后去調前臺郎嫁。
與上章相比秉继，這里的前端代碼結構略有些變化，分出來了一個api文件夾泽铛，主要來放置我們前端的請求尚辑。

前端項目結構.png

圖片.png

sysUserName我們也需要在data中進行注冊盔腔。這些都是vue的基礎了杠茬。

圖片.png

import axios from 'axios';

let base = '/api/main'

export const GetUser = params => {
  return axios.post(base + '/getUser', params);
}

到這里還沒有結束弛随，我們還需要修改webpack的配置澈蝙，否則前后端是連不上的。
這里有兩種方法撵幽，一種是用nginx跨域灯荧，另外一種就是直接使用webpack的proxyTable進行跨域。這里采用的是第二種盐杂。
config/index.js

圖片.png

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

除了這處配置外逗载，還有一處配置哆窿，這處配置我可以找了N久啊＠髡濉Ｖ壳！
build/dev-server.js

圖片.png

好了擦秽，現(xiàn)在把你瀏覽器的調試工具打開并刷新頁面码荔，就可以看到我們調用請求的結果了。

圖片.png

圖片.png

下篇文章：http://www.reibang.com/p/2b5847ae2842