简单总结前后端交互的基本原理以及简单实例(SpringBoot+Mybatis+MySQL+微信小程序)


一、前后端交互的基本原理

springboot 小程序对接 后端 小程序和springboot数据交互_前后端交互

二、前后端交互的简单实例(SpringBoot+Mybatis+MySQL+微信小程序)

首先,我们先在MySQL中新建一个名为easydemo01的数据库

springboot 小程序对接 后端 小程序和springboot数据交互_后端_02

并向其中插入含有id,username两个属性的user表,插入字段(0001,彭于晏)。

springboot 小程序对接 后端 小程序和springboot数据交互_后端_03

然后,我们在IDEA上创建一个SpringBoot项目,创建成功后如下。

springboot 小程序对接 后端 小程序和springboot数据交互_前端_04

创建好了以后,我们进行简单的环境搭建,引入Mybatis依赖,创建接口开发需要的目录结构。

springboot 小程序对接 后端 小程序和springboot数据交互_springboot 小程序对接 后端_05


接着,我们配置Mybatis配置文件。

springboot 小程序对接 后端 小程序和springboot数据交互_后端_06


别忘了在主类上添加mapper扫描。

springboot 小程序对接 后端 小程序和springboot数据交互_java_07


到这一步,我们的准备工作基本上完成了,接下来可以正式的进行接口开发了。第一步,创建相应的实体类,这里就是一个简单的user类。

springboot 小程序对接 后端 小程序和springboot数据交互_前后端交互_08

接着,我们在mapper包下新建userMapper接口,在这里写下我们需要的接口函数。

springboot 小程序对接 后端 小程序和springboot数据交互_前后端交互_09

然后,我们在resources下的mybatis.mapper包下创建对应的UserMapper,并写上对应的sql语句。

springboot 小程序对接 后端 小程序和springboot数据交互_java_10


然后,我们就可以开始写Controller层了,如下所示。

springboot 小程序对接 后端 小程序和springboot数据交互_后端_11

这个时候,我们后端基本上已经写好了。完成了以后,我们运行这个SpringBoot项目。

springboot 小程序对接 后端 小程序和springboot数据交互_前端_12

以上完成了以后,我们新建一个微信小程序。

springboot 小程序对接 后端 小程序和springboot数据交互_后端_13

简单的写一个页面用来显示我们从后端获取的数据。

springboot 小程序对接 后端 小程序和springboot数据交互_java_14

绑定点击事件,从后端获取数据。

springboot 小程序对接 后端 小程序和springboot数据交互_前端_15

编译,点击按钮,获取成功!

springboot 小程序对接 后端 小程序和springboot数据交互_前端_16

我们在网页上也能获取到这个数据:

springboot 小程序对接 后端 小程序和springboot数据交互_springboot 小程序对接 后端_17

好了,到这里,相信大家对前后端交互有了一个简单的理解了。