前言
近期首次进军微信小程序的开发，采用前后端分离的开发模式。
本篇主要探究前后端的交互过程，前后端框架由于是初次接触，了解的并不多，写的比较粗糙，仅供初学者参考。
软件环境：HBuilder、IDEA
前端框架：uni-app（uniapp是基于vue框架，所以如果你会vue的话，来学uniapp会很简单）
后端框架：SpringMVC
前端：
1.新建uni-app项目
文件-新建-项目，选择uni-app，这里的模板选择最简单就行，一口吃不了个大胖子
创建完成后就是这个样子，（utils是我自己写的工具类，可忽略）：
说一下重要的文件或文件夹：
pages ：所有的页面存放目录
static ：静态资源目录，例如图片等
unpackage ：就是打包目录，在这里有各个平台的打包文件
App.vue ：是我们的根组件，所有页面都是在App.vue下进行切换的，是页面入口文件，可以调用应用的生命周期函数。
main.js ：是我们的项目入口文件，主要作用是初始化vue实例并使用需要的插件。
manifest.json ：文件是应用的配置文件，用于指定应用的名称、图标、权限等。
pages.json ：文件用来对 uni-app 进行全局配置，决定页面文件的路径、窗口样式、原生的导航栏、底部的原生tabbar 等
uni.scss ：文件的用途是为了方便整体控制应用的风格。比如按钮颜色、边框风格，uni.scss文件里预置了一批scss变量预置。
2.向后端发送请求
下面打开pages里面的index.vue 在里面写访问后端的js：
<script>
export default {//这一块是文件自带的
data() {
return {
title: 'Hello world！'
}
},
onLoad() {},
methods: {}
}
uni.request({
url: 'http://localhost:8080/book/test?id=4', //http://localhost:端口号/后端路径
data: {//参数
type: 3,
id:2,
},
header: {
// 'Content-Type': 'application/x-www-form-urlencoded'
'Content-Type': 'application/json' //自定义请求头信息
},
method:'POST',//请求方式，必须为大写
success: (res) => {
console.log('接口返回------',res);
}
})
</script>后端：
1.打开IDEA，新建项目
File-new-project，选择maven项目：
下面的步骤随便填就可以，最后新项目建好了就是这个样子：
注意建好之后还没有web这一个文件夹，此时还不是web项目，需要进一步操作：
file-project structure-modules-加号-web，后面一路OK就可以了，完事后就和我的文件夹一样了。
2.在pom.xml引入配置：
<dependencies>
<dependency>
<groupId>javax.servlet</groupId>
<artifactId>servlet-api</artifactId>
<version>2.5</version>
</dependency>
<dependency>
<groupId>org.springframework</groupId>
<artifactId>spring-webmvc</artifactId>
<version>5.1.9.RELEASE</version>
</dependency>
<dependency>
<groupId>org.projectlombok</groupId>
<artifactId>lombok</artifactId>
<version>1.18.12</version>
</dependency>
</dependencies>3.在web.xml引入配置：
<!--注意以下内容均写在<web-app>标签内-->
<filter>
<filter-name>encodingFilter</filter-name>
<filter-class>org.springframework.web.filter.CharacterEncodingFilter</filter-class>
<init-param>
<param-name>encoding</param-name>
<param-value>utf-8</param-value>
</init-param>
</filter>
<filter-mapping>
<filter-name>encodingFilter</filter-name>
<url-pattern>/*</url-pattern>
</filter-mapping>
<servlet>
<!--前端控制器 前端的请求将会发送到这里-->
<servlet-name>DispatcherServlet</servlet-name>
<servlet-class>org.springframework.web.servlet.DispatcherServlet</servlet-class>
<init-param>
<param-name>contextConfigLocation</param-name>
<param-value>classpath:applicationContext.xml</param-value>
</init-param>
<load-on-startup>1</load-on-startup>
</servlet>
<!--将前端请求过滤，静态资源或接口将会分别处理-->
<servlet-mapping>
<servlet-name>DispatcherServlet</servlet-name>
<url-pattern>/</url-pattern>
</servlet-mapping>
<!--session 过期时间-->
<session-config>
<!--15分钟-->
<session-timeout>15</session-timeout>
</session-config>4.添加SpringMVC核心配置文件
src-main-resources下，添加两个xml文件：
（1）spring-mvc.xml
<?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:context="http://www.springframework.org/schema/context"
xmlns:mvc="http://www.springframework.org/schema/mvc"
xsi:schemaLocation="http://www.springframework.org/schema/mvc
http://www.springframework.org/schema/mvc/spring-mvc.xsd
http://www.springframework.org/schema/context
http://www.springframework.org/schema/context/spring-context.xsd
http://www.springframework.org/schema/beans
http://www.springframework.org/schema/beans/spring-beans.xsd">
<!--开启注解扫描 起到处理器映射器 handlerMapping 和 处理器适配器 handlerAdapter 的作用-->
<mvc:annotation-driven/>
<!--拦截器 对进入DispatcherServlet的URL进行筛查，如果发现是静态资源的请求，
就将该请求转由Web应用服务器默认的Servlet处理，如果不是静态资源的请求，才由DispatcherServlet继续处理。-->
<mvc:default-servlet-handler/>
<!--扫描该包下所有的注解-->
<context:component-scan base-package="com.magic.controller"/>
</beans>（2）application-Context.xml
<?xml version="1.0" encoding="UTF-8"?>
<beans xmlns="http://www.springframework.org/schema/beans"
xmlns:xsi="http://www.w3.org/2001/XMLSchema-instance"
xsi:schemaLocation="http://www.springframework.org/schema/beans http://www.springframework.org/schema/beans/spring-beans.xsd">
<!--将spring-mvc.xml引入到上下文-->
<import resource="spring-mvc.xml"/>
</beans>5.编写接口获取前端请求
@Controller
@RequestMapping("/book")
public class Book {
//回忆一下前端的url---url: 'http://localhost:8080/book/test?id=4'
@RequestMapping("/test")
@ResponseBody
public String test(String id){//这里的id是url中?后面的内容，名字要一致
System.out.println("来到后端！！");
System.out.println(id);
return id;
}
}6.配置tomcat
来到右上角：
按图示操作：
点击OK
最后点击运行，如果正常的话这里会是一个绿色的对勾：
7.可能出现的问题
如果不是绿色对勾，而是黄色的感叹号，可能是这里的war包没有打好：
删掉它，重新按照如下步骤打一遍，File-Project Structure，然后OK，重新运行项目：
8.打完收工
在tomcat运行的状态下，在HBuilder中运行前端，观察前后端控制台：
文章来源：https://www.toymoban.com/news/detail-858146.html
可以看到后端拿到了前端的请求，前端也获得了来自后端的数据，前后端的交互完成！文章来源地址https://www.toymoban.com/news/detail-858146.html
到了这里，关于分离式前后端的交互（超详细）的文章就介绍完了。如果您还想了解更多内容，请在右上角搜索TOY模板网以前的文章或继续浏览下面的相关文章，希望大家以后多多支持TOY模板网！
