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

收集整理了一份《2024年最新物联网嵌入式全套学习资料》，初衷也很简单，就是希望能够帮助到想自学提升的朋友。

如果你需要这些资料，可以戳这里获取

需要这些体系化资料的朋友，可以加我V获取：vip1024c （备注嵌入式）

一个人可以走的很快，但一群人才能走的更远！不论你是正从事IT行业的老鸟或是对IT行业感兴趣的新人

都欢迎加入我们的的圈子（技术交流、学习资源、职场吐槽、大厂内推、面试辅导），让我们一起学习成长！

        <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配置文件

<?xml version="1.0" encoding="UTF-8"?>

<!-- 使用注解的依赖注入（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)
 that.serverData = response.data
 })
 .catch(function (error) {
 console.log(error)
 })
 }
 }

}
</script>

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

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

4.遇到的坑（经验）

• NRM
  在使用npm安装依赖包的时候，可以用nrm这个插件来切换npm镜像，非常方便，推荐使用。
• 跨域
  一般跨域的解决方式为：粗粒度和细粒度

收集整理了一份《2024年最新物联网嵌入式全套学习资料》，初衷也很简单，就是希望能够帮助到想自学提升的朋友。

如果你需要这些资料，可以戳这里获取

需要这些体系化资料的朋友，可以加我V获取：vip1024c （备注嵌入式）

一个人可以走的很快，但一群人才能走的更远！不论你是正从事IT行业的老鸟或是对IT行业感兴趣的新人

都欢迎加入我们的的圈子（技术交流、学习资源、职场吐槽、大厂内推、面试辅导），让我们一起学习成长！

望能够帮助到想自学提升的朋友。**
[外链图片转存中…(img-VP4LTW3g-1715795273487)]
[外链图片转存中…(img-c4CQQ5yg-1715795273487)]

如果你需要这些资料，可以戳这里获取

需要这些体系化资料的朋友，可以加我V获取：vip1024c （备注嵌入式）

一个人可以走的很快，但一群人才能走的更远！不论你是正从事IT行业的老鸟或是对IT行业感兴趣的新人

都欢迎加入我们的的圈子（技术交流、学习资源、职场吐槽、大厂内推、面试辅导），让我们一起学习成长！