Vue+SpringMVC---前後端分離極簡嘗試

【前後端分離】的開發方式是目前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,目錄結構如下圖：

Vue+SpringMVC---前後端分離極簡嘗試

然後再浏覽器中可以看到如下的頁面：

Vue+SpringMVC---前後端分離極簡嘗試

前端搞定，輪到後端

2.搭建後端

後端是用maven來建構的web項目，在eclipse（使用2017年6月釋出的Oxygen）目錄結構如下：

Vue+SpringMVC---前後端分離極簡嘗試

其中配置檔案主要為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=)
    @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中，在項目所在目錄輸入下面指令啟動後端項目

Vue+SpringMVC---前後端分離極簡嘗試

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>

準備就緒後檢視前端頁面，變為

Vue+SpringMVC---前後端分離極簡嘗試

資料成功拿到！！！！！！！

4.遇到的坑（經驗）

NRM

在使用npm安裝依賴包的時候，可以用nrm這個插件來切換npm鏡像，非常友善，推薦使用。
跨域

一般跨域的解決方式為：粗粒度和細粒度

粗粒度（全局）：配置全局允許跨域

細粒度：在具體API上通過注解配置，如SpringMVC中的@CrossOrigin

5.總結

至此，使用VUE+SpringMVC的方式來實作前後端分離開發就被簡單完成了。

Vue+SpringMVC---前後端分離極簡嘗試

1.搭建前端

2.搭建後端

3.結果

4.遇到的坑（經驗）

5.總結

繼續閱讀

SpringMVC常見注釋的簡述

前後端分離之跨域問題

SSM架構（二）------------表現層的SpringMVC

沒救了! 困擾程式員一輩子的5個魔咒, 改掉比登天還難！

[轉]如何成長為一名全棧工程師全棧工程師

underscore模闆功能的使用和學習

vue3 transitionvue3 transition元件和vue2 transition元件

CSS之折疊菜單

web開發之前後端渲染

vue學習筆記day12 vue的生命周期

JavaScript的那些坑之事件代理事件代理事件階段

ACS基本配置-權限等級管理

vue （vue2.0）使用總結(從大體結構總結)

父子元件間傳值的實作父子元件間傳值的實作

vue搭建過程及出現問題

手把手教你配置：Jenkins+Github+Webhook +Nginx自動化打包部署Vue項目