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

版权声明:本文为博主原创文章,未经博主允许不得转载。 https://blog.csdn.net/derstsea/article/details/85005036

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

猜你喜欢

转载自blog.csdn.net/derstsea/article/details/85005036