【前后端分离】的开发方式是目前WEB开发中的一个大的趋势,随着各种前后端框架的出现,加上REST编程规范慢慢深入人心,前端后端之间通过更加轻量级、简洁高效的JSON作为数据传输格式,使得一切变得开朗起来,前后端分工更加明晰,前端被赋予了更多的功能,从而能分担原来由后端完成的工作,开发人员的学习成本明显下降。
通过VUE+SPringMVC的组合来尝试实现前后端分离的开发模式,下面给出具体的过程。
1.搭建前端
VUE是优秀的前端框架,搭建基于VUE的前端工程需要安装Node.js,并通过NPM包管理工具和VUE-cli脚手架工具来辅助构建前端工程,如下:
# 全局安装 vue-cli
$ npm install --global vue-cli
# 创建一个基于 webpack 模板的新项目
$ vue init webpack my-project
# 安装依赖,走你
$ cd my-project
$ npm install
$ npm run dev
这样我们就构建了一个前段项目的架子my-project,目录结构如下图:
然后再浏览器中可以看到如下的页面:
前端搞定,轮到后端
2.搭建后端
后端是用maven来构建的web项目,在eclipse(使用2017年6月发布的Oxygen)目录结构如下:
其中配置文件主要为pom.xml、web.xml、applicationContext.xml、SpringMVC-servlet.xml,具体内容如下。
pom.xml是maven的配置文件,如下
<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/maven-v4_0_0.xsd">
<modelVersion>4.0.0</modelVersion>
<groupId>my-first-maven-project</groupId>
<artifactId>hello-maven</artifactId>
<version>0.0.1-SNAPSHOT</version>
<name>hello-maven Maven Webapp</name>
<url>http://maven.apache.org</url>
<!-- <properties>
<spring-version></spring-version>
</properties> -->
<!-- dependencyManagement配置有问题 -->
<!-- <dependencyManagement>
<dependencies>
<dependency>
<groupId>junit</groupId>
<artifactId>junit</artifactId>
<version>3.8.1</version>
<scope>test</scope>
</dependency>
https://mvnrepository.com/artifact/org.springframework/spring-webmvc
<dependency>
<groupId>org.springframework</groupId>
<artifactId>spring-webmvc</artifactId>
<version>4.3.10.RELEASE</version>
</dependency>
<dependency>
<groupId>com.fasterxml.jackson.core</groupId>
<artifactId>jackson-databind</artifactId>
<version>2.7.9.1</version>
</dependency>
</dependencies>
</dependencyManagement> -->
<!-- dependencies配置没有问题 -->
<dependencies>
<!-- Junit单元测试依赖包 -->
<dependency>
<groupId>junit</groupId>
<artifactId>junit</artifactId>
<version>3.8.1</