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

秒速五厘米 2022-06-08 03:51 1065阅读 0赞

【前后端分离】的开发方式是目前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,目录结构如下图：  
![这里写图片描述][SouthEast]  
然后再浏览器中可以看到如下的页面：  
![这里写图片描述][SouthEast 1]  
前端搞定，轮到后端

## 2.搭建后端 ##

后端是用maven来构建的web项目，在eclipse（使用2017年6月发布的Oxygen）目录结构如下：  
![这里写图片描述][SouthEast 2]  
其中配置文件主要为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>
    
      
    
      
      
    
      
      <dependencies>
            
            <dependency>
              <groupId>junit</groupId>
              <artifactId>junit</artifactId>
              <version>3.8.1</version>
              <scope>test</scope>
            </dependency>
    
            
            <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>
    
    
    
    
    
    
      <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>
    
      
      <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> 
    
    
      
    
      
        <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>
                
            </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配置文件

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">
    
    
    
                            
        
        <context:annotation-config/>    
    
        
        <context:component-scan base-package="com.muxinxin.springmvcdemo">
            <context:include-filter type="annotation" expression="org.springframework.stereotype.Controller"/>
        </context:component-scan>
    
        
        <mvc:annotation-driven/>   
    
         
        <mvc:resources location="/resources/" mapping="/resources/**"/>
    
        
        <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

![这里写图片描述][SouthEast 3]

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

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

![这里写图片描述][SouthEast 4]  
数据成功拿到！！！！！！！

## 4.遇到的坑（经验） ##

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

## 5.总结 ##

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

[SouthEast]: /images/20220608/4c5f425ebf5e42f19d472a3b147c9b49.png
[SouthEast 1]: /images/20220608/2b61d6cf27064158aab96d90045f4dcb.png
[SouthEast 2]: /images/20220608/ee62c0e934a64a2f9b0534b18c203e77.png
[SouthEast 3]: /images/20220608/29af5f432b834de78ed4657449797712.png
[SouthEast 4]: /images/20220608/ee3af5930b3d4dc99ced0bf123d49238.png