Vue+SpringMVC---前后端分离极简尝试_springmvc+vue前后端分离，2024年最新金九银十旗开得胜

-->

junit junit 3.8.1 test

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

hello-maven org.eclipse.jetty jetty-maven-plugin 9.2.2.v20140723

web.xml为整个web应用的配置文件

My first SpringMVC APP contextConfigLocation /WEB-INF/configurations/spring/applicationContext*.xml org.springframework.web.context.ContextLoaderListener

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

applicationContext.xml为Spring配置文件

<!-- 使用注解的依赖注入（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>

```

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)


![img](https://p3-xtjj-sign.byteimg.com/tos-cn-i-73owjymdk6/b391a7b3bfa346608f9077becfb7b1d7~tplv-73owjymdk6-jj-mark-v1:0:0:0:0:5o6Y6YeR5oqA5pyv56S-5Yy6IEAg5py65Zmo5a2m5Lmg5LmL5b-DQUk=:q75.awebp?rk3s=f64ab15b&x-expires=1771856416&x-signature=o0s1duDI4AQZfOxY%2BC%2BbvK3lghE%3D)
![img](https://p3-xtjj-sign.byteimg.com/tos-cn-i-73owjymdk6/9d87aed22f4e496c9c3b4b125ddfe92a~tplv-73owjymdk6-jj-mark-v1:0:0:0:0:5o6Y6YeR5oqA5pyv56S-5Yy6IEAg5py65Zmo5a2m5Lmg5LmL5b-DQUk=:q75.awebp?rk3s=f64ab15b&x-expires=1771856416&x-signature=WnT1h5do6JWGcLv4hnvVWfhL%2FlQ%3D)

**既有适合小白学习的零基础资料，也有适合3年以上经验的小伙伴深入学习提升的进阶课程，涵盖了95%以上物联网嵌入式知识点，真正体系化！**

**由于文件比较多，这里只是将部分目录截图出来，全套包含大厂面经、学习笔记、源码讲义、实战项目、大纲路线、电子书籍、讲解视频，并且后续会持续更新**

**[如果你需要这些资料，可以戳这里获取](https://gitee.com/vip204888)**