Vue+SpringMVC---前后端分离极简尝试

前后端分离】的开发方式是目前WEB开发中的一个大的趋势，随着各种前后端框架的出现，加上REST编程规范慢慢深入人心，前端后端之间通过更加轻量级、简洁高效的JSON作为数据传输格式，使得一切变得开朗起来，前后端分工更加明晰，前端被赋予了更多的功能，从而能分担原来由后端完成的工作，开发人员的学习成本明显下降。
通过VUE+SPringMVC的组合来尝试实现前后端分离的开发模式，下面给出具体的过程。

1.搭建前端
VUE是优秀的前端框架，搭建基于VUE的前端工程需要安装Node.js，并通过NPM包管理工具和VUE-cli脚手架工具来辅助构建前端工程，如下：
1
# 全局安装 vue-cli
$ npm install --global vue-cli
# 创建一个基于 webpack 模板的新项目
$ vue init webpack my-project
# 安装依赖，走你
$ cd my-project
$ npm install
$ npm run dev
1
2
3
4
5
6
7
8
这样我们就构建了一个前段项目的架子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</version>
          <scope>test</scope>
        </dependency>

        <!-- SpringMVC依赖包 -->
        <dependency>
            <groupId>org.springframework</groupId>
            <artifactId>spring-webmvc</artifactId>
            <version>4.3.10.RELEASE</version>
        </dependency>

        <!-- JSON处理依赖包 -->
        <dependency>
            <groupId>com.fasterxml.jackson.core</groupId>
            <artifactId>jackson-databind</artifactId>
            <version>2.7.9.1</version>
        </dependency>

    </dependencies>

  <build>
    <finalName>hello-maven</finalName>
    <plugins>
        <plugin>        
            <groupId>org.eclipse.jetty</groupId>
            <artifactId>jetty-maven-plugin</artifactId>
            <version>9.2.2.v20140723</version>
        </plugin>
    </plugins>
  </build>
</project>
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
web.xml为整个web应用的配置文件

<!DOCTYPE web-app PUBLIC
 "-//Sun Microsystems, Inc.//DTD Web Application 2.3//EN"
 "http://java.sun.com/dtd/web-app_2_3.dtd" >

<web-app>
  <display-name>My first SpringMVC APP</display-name>

  <!-- Spring应用上下文，理解层次化的ApplicationContext -->
  <context-param>
    <param-name>contextConfigLocation</param-name>
    <param-value>/WEB-INF/configurations/spring/applicationContext*.xml</param-value>
  </context-param>

  <listener>
    <listener-class>org.springframework.web.context.ContextLoaderListener</listener-class>
  </listener> 

  <!-- 配置允许跨域访问 
  <filter-mapping>
    <filter-name>CorsFilter</filter-name>
    <url-pattern>/*</url-pattern>
  </filter-mapping>  -->

  <!-- SpringMVC配置 -->
    <servlet>
        <servlet-name>SpringMVC-dispatcher</servlet-name>
        <servlet-class>org.springframework.web.servlet.DispatcherServlet</servlet-class>
        <init-param>
            <param-name>contextConfigLocation</param-name>
            <param-value>/WEB-INF/configurations/spring/SpringMVC-servlet.xml</param-value>
            <!-- 默认是/WEB-INF/[servlet名字]-servlet.xml -->
        </init-param>
        <load-on-startup>1</load-on-startup>
    </servlet>

    <servlet-mapping>
        <servlet-name>SpringMVC-dispatcher</servlet-name>
        <url-pattern>/</url-pattern>
    </servlet-mapping>
</web-app>
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
applicationContext.xml为Spring配置文件

<?xml version="1.0" encoding="UTF-8"?>
<beans xmlns="http://www.springframework.org/schema/beans"
    xmlns:xsi="http://www.w3.org/2001/XMLSchema-instance"
    xmlns:p="http://www.springframework.org/schema/p"
    xmlns:context="http://www.springframework.org/schema/context"
    xsi:schemaLocation="
        http://www.springframework.org/schema/beans
        http://www.springframework.org/schema/beans/spring-beans.xsd
        http://www.springframework.org/schema/context
        http://www.springframework.org/schema/context/spring-context.xsd
        http://www.springframework.org/schema/mvc
        http://www.springframework.org/schema/mvc/spring-mvc.xsd">

    <!-- 使用注解的依赖注入（DI）管理 -->    
    <context:annotation-config/>

    <!-- 告诉Spring不用管理@controller标记的类 -->
    <context:component-scan base-package="com.muxinxin.springmvcdemo">
        <context:exclude-filter type="annotation" expression="org.springframework.stereotype.Controller"/>
    </context:component-scan>

</beans>
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
SpringMVC-servlet.xml为SpringMVC配置文件

<?xml version="1.0" encoding="UTF-8"?>
<beans xmlns="http://www.springframework.org/schema/beans"
    xmlns:xsi="http://www.w3.org/2001/XMLSchema-instance"
    xmlns:mvc="http://www.springframework.org/schema/mvc"
    xmlns:context="http://www.springframework.org/schema/context"
    xmlns:aop="http://www.springframework.org/schema/aop"
    xmlns:tx="http://www.springframework.org/schema/tx"
    xsi:schemaLocation="http://www.springframework.org/schema/beans 
                        http://www.springframework.org/schema/beans/spring-beans-4.0.xsd 
                        http://www.springframework.org/schema/mvc 
                        http://www.springframework.org/schema/mvc/spring-mvc-4.0.xsd 
                        http://www.springframework.org/schema/context 
                        http://www.springframework.org/schema/context/spring-context-4.0.xsd 
                        http://www.springframework.org/schema/aop 
                        http://www.springframework.org/schema/aop/spring-aop-4.0.xsd 
                        http://www.springframework.org/schema/tx 
                        http://www.springframework.org/schema/tx/spring-tx-4.0.xsd">

<!-- SpringMVC配置 -->                        
    <!-- 激活@required 等注释 -->
    <context:annotation-config/>    

    <!-- 设置使用注解的类所在的jar包 ,DispatcherServlet上下文，只搜索@Controller标记的类-->
    <context:component-scan base-package="com.muxinxin.springmvcdemo">
        <context:include-filter type="annotation" expression="org.springframework.stereotype.Controller"/>
    </context:component-scan>

    <!-- 启动基于注解的HandlerMapping,可以将请求参数绑定到控制器参数 -->
    <mvc:annotation-driven/>   

    <!-- 静态资源配置，css, js, imgs --> 
    <mvc:resources location="/resources/" mapping="/resources/**"/>

    <!-- 配置ViewResolver 
            可以配置多个ViewResolver
            使用order属性排序
            InternalResourceViewResolver放在最后
    -->
    <bean class="org.springframework.web.servlet.view.InternalResourceViewResolver">
        <property name="viewClass" value="org.springframework.web.servlet.view.JstlView"/>
        <property name="prefix" value="/WEB-INF/jsps/"/>
        <property name="suffix" value=".jsp"/>
    </bean>

</beans>
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
作为测试的controller为HelloMvcController.java

package com.muxinxin.springmvcdemo.controller;

import org.springframework.stereotype.Controller;
import org.springframework.web.bind.annotation.CrossOrigin;
import org.springframework.web.bind.annotation.PathVariable;
import org.springframework.web.bind.annotation.RequestMapping;
import org.springframework.web.bind.annotation.RequestMethod;
import org.springframework.web.bind.annotation.ResponseBody;

import com.muxinxin.springmvcdemo.model.Person;

@Controller
@RequestMapping("/hello")
public class HelloMvcController {

    @RequestMapping("/home")
    public String homeHandler(){
        return "home";
    }

    @RequestMapping("/test")
    public String testHandler(){
        return "test";
    }

    /**
     * 使用JSON作为响应内容
     */

    @CrossOrigin(origins="*",maxAge=3600)
    @RequestMapping(value="/getperson/{personID}",method=RequestMethod.GET)
     public @ResponseBody Person getPerson(@PathVariable int personID) {
        Person p = new Person();
        p.setName("Eric");
        p.setSex("male");
        p.setId(personID);
        return p;
    }
}
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
使用jetty的maven插件作为web容器,配置在pom.xml中，在项目所在目录输入下面命令启动后端项目

mvn jetty:run
1

3.结果
对前端APP.vue做如下修改,数据异步请求使用的是Vue官方推荐的axios插件。
修改前

<template>
  <div id="app">
    <img src="./assets/logo.png">
    <router-view></router-view>
  </div>
</template>

<script>
export default {
  name: 'app'
}
</script>
1
2
3
4
5
6
7
8
9
10
11
12
修改后

<template>
  <div id="app">
    <h1>服务端数据为：{{serverData}}</h1>
    <img src="./assets/logo.png" @click="getData()">    
    <router-view></router-view>
  </div>
</template>

<script>
export default {
  name: 'app',
  data () {
    return {
      serverData: 'data from fake server'
    }
  },
  mounted: function () {
    this.getData()
  },
  methods: {
    getData () {
      console.log('-------getData')
      var that = this
 //192.168.1.101为后端IP地址     this.$http.get('http://192.168.1.101:8080/hello/getperson/33333')
                .then(function (response) {
                  console.log(response)
                  console.log(this)
                  that.serverData = response.data
                })
                .catch(function (error) {
                  console.log(error)
                })
    }
  }

}
</script>
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
准备就绪后查看前端页面，变为

数据成功拿到！！！！！！！

4.遇到的坑（经验）
NRM
在使用npm安装依赖包的时候，可以用nrm这个插件来切换npm镜像，非常方便，推荐使用。
跨域
一般跨域的解决方式为：粗粒度和细粒度
粗粒度（全局）：配置全局允许跨域
细粒度：在具体API上通过注解配置，如SpringMVC中的@CrossOrigin
5.总结
至此，使用VUE+SpringMVC的方式来实现前后端分离开发就被简单完成了。
————————————————
版权声明：本文为CSDN博主「trade-off」的原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接及本声明。
原文链接：https://blog.csdn.net/muxinxin880422/article/details/77970535