构建基于Vue.js的前后端于一体的开发环境(二)

3.构建服务端

服务端我们构建一个常规的分模块的Spring Boot 项目即可；

用Spring Boot 插件构建服务端项目：

第1步 选择JDK和构建文件加载地址

第2步 设置项目基本参数

构建根项目时type要选择为：Maven POM

第3步 选择项目的起步依赖

我们采用最简单的主流SSM（Spring Mvc + Spring + Mybatis）架构。右上角可以选择Spring Boot的版本，默认情况下会自动选择最新的Release版本。

• DevTools用于开发时的热部署；
• Web引入Web Starter；
• MySql会引入连接数据库的相关库文件；
• 引入MyBatis 的Starter；

为了演示方便后续章节不会真正的去建表和连接数据库，会在DAO层之间返回模拟数据；

至此，父项目我们就构建完成了，下面我们为了项目的简化我们会构建两个Web子项目分别用于构建传统方式使用和工程化使用Vue.js的项目，这两个项目的服务端是完全一致的，具有相同的服务层（service）和模型层（model），这里的分层直接采用最简单的三层结构，实际项目中可以根据具体需要添加其他模块或者分层。

第4步 构建子项目

构建子项目用Maven的插件直接建立Module子项目即可，这里不做赘述，详细请参加git上的具体代码。

服务端项目结构说明：

vue-demo（maven根项目）

       demo-model（数据层，用于模拟数据生成）

       demo-service（服务层，用于处理数据展示的一些逻辑，为了复用演示数据，控制器也放在了这个模块里，正常项目控制器是要放到web项目下面的）

       web-normal（传统方式使用Vue.js的项目）

       web-pro（工程化方式，即用 webpack 管理前端项目的方式，使用Vue.js的项目）

      

项目代码地址： https://gitee.com/derstsea/vue-demo/tree/master