分离式前后端的交互（超详细）

前言

近期首次进军微信小程序的开发，采用前后端分离的开发模式。

本篇主要探究前后端的交互过程，前后端框架由于是初次接触，了解的并不多，写的比较粗糙，仅供初学者参考。

软件环境：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;
    }
}