上篇文章：//www.greatytc.com/p/44362d776eb3
在上两篇文章中，我们已经简单的搭建了一个前端平台，这一篇需要搭建一个系统后台，并简单的实现前后台连接。
先上图，看一下我们要实现的功能：

后台管理系统.png

后台代码结构.png

步骤图.png

步骤图.png

步骤图.png

步骤图.png

步骤图.png

最后填写完项目名后点击Finish就可以了。
eclipse创建项目需要时间，如果电脑卡的话，需要耐心等一下。
刚创建好的项目结构如下：

结构图.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的配置，我们现在就先不管了，这是我后续需要用的。
如果保存pom.xml文件后，整个项目报错，可以点击右键更新一下包，有些包没有下载下来。

更新包.png

更新包.png

下面开始创建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

后台已经准备就绪，我们启动项目，然后去调前台。
与上章相比，这里的前端代码结构略有些变化，分出来了一个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

好了，现在把你浏览器的调试工具打开并刷新页面，就可以看到我们调用请求的结果了。

图片.png

图片.png

下篇文章：//www.greatytc.com/p/2b5847ae2842