本文介绍了SpringBoot项目最基本功能的搭建，以及Vue项目最基本环境搭建，通过一个hello接口实现前后端分离通信

一、开发工具与技术选型

1. idea
2. hbuilder/记事本/webstorm/
3. jdk1.8
4. maven3.6.0
5. springboot 2.x
6. vue2.x

二、后台服务搭建

在搭建后台服务之前，应确保本地电脑已经安装并配置好jdk1.8，并安装idea。

1. 新建项目

• File–new–project
  
• 选择spring initializr
• 填写项目信息
  
• 选择Web-spring web
  
• 修改application.properties。因为vue默认占用8080端口，此处后台服务修改端口为8084
  
• 编写一个controller，对外暴露一个接口。此处只有controller层，返回一个字符串
  

package com.jf.springbootserver.platform.controller;

import org.springframework.web.bind.annotation.RequestBody;
import org.springframework.web.bind.annotation.RequestMapping;
import org.springframework.web.bind.annotation.ResponseBody;
import org.springframework.web.bind.annotation.RestController;

/**
 * @author : zhaochuanzhen
 * @description :
 * @date : 2019/10/8 9:54
 */
@RestController
public class HelloController {

    @RequestMapping(value = "/hello", produces = "application/json;charset=utf-8")
    @ResponseBody
    public String login(@RequestBody User user) {
        return "hello " + user.getUsername() + ";你今年" + user.getAge() + "岁了";
    }
}

• 此处使用User实体类封装

package com.jf.springbootserver.platform.controller;

import java.io.Serializable;

/**
 * @author : zhaochuanzhen
 * @description :
 * @date : 2019/10/7 8:47
 */
public class User implements Serializable {
    private Integer id;
    private String username;
    private Integer age;

    public Integer getId() {
        return id;
    }

    public void setId(Integer id) {
        this.id = id;
    }

    public String getUsername() {
        return username;
    }

    public void setUsername(String username) {
        this.username = username;
    }

    public Integer getAge() {
        return age;
    }

    public void setAge(Integer age) {
        this.age = age;
    }
}

此时一个只有一个接口的后台服务已经搭建完成，在真正的开发中，此服务应该集成MyBatis、Redis、Elasticsearch等等其他的逻辑，可以按照需求自己添加maven配置、并自行配置application.properties。

三、Vue项目搭建

1. Vue环境需要安装两个东西

• NodeJS
• npm

2. 直接搜索下载 NodeJS 即可，安装成功之后，npm 也就有了，链接为：https://nodejs.org/en/。安装成功之后，可以 在 cmd 命令哈验证是否安装成功：
   
3. npm的环境安装完成之后，接下来安装vue的工具

npm install -g vue-cli       # 只需要第一次安装时执行
vue init webpack my-project  # 使用webpack模板创建一个vue项目
cd my-project                #进入到项目目录中
npm install                  # 下载依赖（如果在项目创建的最后一步选择了自动执行npm install，则该步骤可以省略）
npm run dev                  # 启动项目

4. 启动成功之后，访问http://localhost:8080
   
5. 接下来编写Vue的逻辑。首先使用记事本或者其他文本编辑工具进入App.vue，我这里继续使用idea。将内容修改如下

	<template>
  <div id="login">
    <form>
      <label for="username">用户名</label><input type="text" v-model.trim="formData.username" name="username">
      <label for="age">用户名</label><input type="text" v-model.trim="formData.age" name="age">
      <input type="button" value="登录" @click="doLogin">
    </form>
  </div>
</template>

<script>
  import utils from "./utils/utils"

  export default {
    name: 'login',
    data() {
      return {
        formData: {
          username: "",
          age: 0
        }
      }
    },
    methods: {
      doLogin() {
        let success = (response) => {
          alert(JSON.stringify(response.data));
        };
        utils.axiosMethod({
          method: "POST",
          url: "/hello/",
          data: this.formData,
          callback: success
        })
      }
    }
  }
</script>

此处定义了一个表单，POST请求格式，表单有两个输入框，分别是用户名和年龄。

7. app.vue依赖于一个utils.js，需要在app.vue同级目录下创建一个utils文件夹，并且编写utils.js
   

import axios from 'axios'

const utils = {
  axiosMethod: (config) => {
    axios({
      method: config.method,
      url: config.url,
      params: config.params ? config.params : null,
      data: config.data ? config.data : null
    }).then(config.callback).catch(config.catch ? config.catch : () => {
    })
  }
}

export default utils

9. 最后定义路由。进入webpack.config.js，找到devServer标签，修改为：

  devServer: {
    historyApiFallback: true,
    noInfo: true,
    overlay: true,
    proxy: {
      '/hello/*': {
        target: 'http://localhost:8084/',
        secure: false,
        changeOrigin: true
      }
    }
  }

表示hello打头的所有请求，路由到http://localhost:8084这个地址

10. 打开命令行，执行 npm run dev
    
11. 访问http://localhost:8080/
    
12. 此时表示前后端已经调通。