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

原创 2017年09月13日 20:18:24

【前后端分离】的开发方式是目前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</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>

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>

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>

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>

作为测试的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;
    }
}

使用jetty的maven插件作为web容器,配置在pom.xml中,在项目所在目录输入下面命令启动后端项目

mvn jetty:run

这里写图片描述

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>

修改后

<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>

准备就绪后查看前端页面,变为

这里写图片描述
数据成功拿到!!!!!!!

4.遇到的坑(经验)

  • NRM
    在使用npm安装依赖包的时候,可以用nrm这个插件来切换npm镜像,非常方便,推荐使用。
  • 跨域
    一般跨域的解决方式为:粗粒度和细粒度
    粗粒度(全局):配置全局允许跨域
    细粒度:在具体API上通过注解配置,如SpringMVC中的@CrossOrigin

5.总结

至此,使用VUE+SpringMVC的方式来实现前后端分离开发就被简单完成了。

版权声明:本文为博主原创文章,未经博主允许不得转载。

前后端分离之VueJS前端

本节接上一篇博客:前后端分离之Java后端代码:https://github.com/jimolonely/vue-jwt-demo前言前端用什么框架都可以,这里选择小巧的vuejs。要实现的功能很简...
  • jimo_lonely
  • jimo_lonely
  • 2017年04月08日 14:07
  • 17308

简单的springMVC+vue.js+axios实现

这段时间学习springMVC以及vue.js,当学习到交互的时候,vue.js在2.0版本时不再对vue-resource.js维护所以使用vue推荐的axios来处理交互。...
  • gezi2015129
  • gezi2015129
  • 2017年03月08日 10:43
  • 6095

使用Springboot和Vue开发的CRM系统,真正前后端分离的微服务架构,BAT互联网公司主流技术的集大成者

框架特点 最新技术(Springboot、MyBatis、Swagger-UI、Vue2.X、bootstrap)前后端分离:前端使用纯HTML编写,方便前后台分工开发移动端访问:使用Swagger...
  • lgcjava
  • lgcjava
  • 2017年07月18日 22:16
  • 12905

spring boot整合vue项目

使用spring boot 整合vue以及中间遇到的坑
  • u014098584
  • u014098584
  • 2017年12月27日 15:03
  • 1252

Java 开发基于Zookeeper,Spring,vue.js的高并发多用户模块化微信商城系统(四) Java微框架Spring Boot的应用

一、简介从最初学习Java这门语言开始,就已经开始接触Spring。在过去的一段时间里,Spring Boot在社区中热度一直很高。Spring Boot不是一门新技术,从本质上来说,Spring B...
  • yanglinjingshu
  • yanglinjingshu
  • 2017年08月14日 15:07
  • 1905

[vue]Spring boot + vue.js框架搭建指南

目前,vue.js和Spring boot技术很火爆,但是两者如何整合在一起呢。本文将给出两者整合的思路。 #...
  • u010536377
  • u010536377
  • 2017年12月30日 12:42
  • 740

Vue传递数据到后台SpringMVC接收解析返回

最近在自学vue,开始以为跟angular大同小异,但是真正使用的时候发现还是很多不一样的地方,可能是因为刚刚开始理解的还不够深入O(∩_∩)O。 下面说说前端jsp怎么和后台交互,后台使用的是spr...
  • huangdi1309
  • huangdi1309
  • 2017年10月16日 17:47
  • 1909

Vue(使用webpack)与java后端(使用springmvc与tomcat8)整合测试与部署方案

最近学习了一下基于vue和webpack的前端开发,于是就想着用Vue重写一遍我个人网站的代码,但是我的后端是老早以前就用java写好的(springmvc),这就涉及到Vue与java后端进行整合开...
  • qq_33256688
  • qq_33256688
  • 2017年11月01日 20:17
  • 1816

利用SpringMVC过滤器解决vue跨域请求

利用SpringMVC过滤器解决vue跨域请求
  • qq_33802316
  • qq_33802316
  • 2017年07月14日 13:42
  • 2027

Vuejs+axios+SpringMVC4.3.7 (三) 发布

之前记录过了 前端是vuejs 后台是springMVC 所以项目发布是把vuejs项目打包编译 放到javaweb项目中(tomcat) 然后问题来了 vuejs...
  • annghi
  • annghi
  • 2018年01月09日 11:46
  • 91
内容举报
返回顶部
收藏助手
不良信息举报
您举报文章:Vue+SpringMVC---前后端分离极简尝试
举报原因:
原因补充:

(最多只允许输入30个字)