微信小程序与Spring Boot整合开发(微信小程序和spring boot)

本文结合一个示例,探讨Spring Boot和小程序的整合开发与完全云开发的对比。以客户端/服务器的体系结构来划分,第一部分介绍以Spring Boot为服务器(后端),而第二部分以微信小程序(含云开发)为客户端(前端),小程序和Spring Boot的整合方式实现。

1、Spring Boot作为后端开发工具

1●添加依赖

在pom.xml文件中和之间添加Lombok、Spring Data JPA、MySQL驱动依赖,代码如例1所示。

【例1】添加Lombok、Spring Data JPA和MySQL驱动依赖的代码示例。

微信小程序与Spring Boot整合开发(微信小程序和spring boot)

2●创建类Person

在包com.bookcode下创建backend子包,并在com.bookcode.backend包中创建类Person,修改类Person的代码,代码(即创建类后修改过的代码)如例2所示。

【例2】创建类Person的代码示例。

微信小程序与Spring Boot整合开发(微信小程序和spring boot)

3●创建类PersonController

在包com.bookcode.backend中创建类PersonController,代码如例3所示。

【例3】创建类PersonController的代码示例。

微信小程序与Spring Boot整合开发(微信小程序和spring boot)

4● 创建类User

在包com.bookcode.backend中创建类User,代码如例4所示。

【例4】创建类User的代码示例。

微信小程序与Spring Boot整合开发(微信小程序和spring boot)微信小程序与Spring Boot整合开发(微信小程序和spring boot)

5●创建接口UserRepository

在包com.bookcode.backend中创建接口UserRepository,修改接口UserRepository代码,代码如例5所示。

【例5】创建接口UserRepository的代码示例。

微信小程序与Spring Boot整合开发(微信小程序和spring boot)

6●创建类UserController

在包com.bookcode.backend中创建类UserController,代码如例6所示。

【例6】创建类UserController的代码示例。

微信小程序与Spring Boot整合开发(微信小程序和spring boot)微信小程序与Spring Boot整合开发(微信小程序和spring boot)

7●创建配置文件application.yml

在目录src/resources下创建配置文件application.yml,修改配置文件application.yml,代码如例7所示。

【例7】创建配置文件application.yml的代码示例。

微信小程序与Spring Boot整合开发(微信小程序和spring boot)

8● 运行程序

在MySQL数据库(版本为8.0.17)中创建数据库mytest。请注意5.x版MySQL和8.x版MySQL例7中代码略有差异。

运行程序后,在浏览器中输入localhost:8080/person,结果如图1所示。在浏览器中输入localhost:8080/allusers,结果如图2所示。

微信小程序与Spring Boot整合开发(微信小程序和spring boot)

■ 图1 在浏览器中输入localhost:8080/person的结果

微信小程序与Spring Boot整合开发(微信小程序和spring boot)

■ 图2 在浏览器中输入localhost:8080/allusers的结果

2、微信小程序前端开发

1●修改文件app.json

修改文件app.json,代码的修改方法是在语句“"pages/callMySecondFun/callMySecondFun",”之前增加3条语句,增加代码如例8所示。

【例8】向app.json文件增加代码的示例。

微信小程序与Spring Boot整合开发(微信小程序和spring boot)

修改代码后编译程序,自动在目录pages下生成homeofsb、users、listperson 3个子目录,且在这3个子目录(每个子目录对应一个页面)下分别自动生成对应页面的4个文件(如homeofsb.wxml等)。

2● 修改homeofsb页面的wxml、js和json文件

修改文件homeofsb.wxml、homeofsb.js和homeofsb.json。文件homeofsb.wxml修改后的代码如例9所示。

【例9】文件homeofsb.wxml修改后的代码示例。

微信小程序与Spring Boot整合开发(微信小程序和spring boot)

文件homeofsb.js修改后的代码如例10所示。

【例10】文件homeofsb.js修改后的代码示例。

微信小程序与Spring Boot整合开发(微信小程序和spring boot)

文件homeofsb.json修改后的代码如例11所示。

【例11】文件homeofsb.json修改后的代码示例。

微信小程序与Spring Boot整合开发(微信小程序和spring boot)

3●修改listperson页面的wxml、js和json文件

修改文件listperson.wxml、listperson.js和listperson.json。文件listperson.wxml修改后的代码如例12所示。

【例12】文件listperson.wxml修改后的代码示例。

微信小程序与Spring Boot整合开发(微信小程序和spring boot)

文件listperson.js修改后的代码如例13所示。

【例13】文件listperson.js修改后的代码示例。

微信小程序与Spring Boot整合开发(微信小程序和spring boot)微信小程序与Spring Boot整合开发(微信小程序和spring boot)

文件listperson.json修改后的代码如例14所示。

【例14】文件listperson.json修改后的代码示例。

微信小程序与Spring Boot整合开发(微信小程序和spring boot)微信小程序与Spring Boot整合开发(微信小程序和spring boot)

4●修改users页面的wxml、js、json和wxss文件

修改文件users.wxml、users.js、users.json和users.wxss。文件users.wxml修改后的代码如例15所示。

【例15】文件users.wxml修改后的代码示例。

微信小程序与Spring Boot整合开发(微信小程序和spring boot)

文件users.js修改后的代码如例16所示。

【例16】文件users.js修改后的代码示例。

微信小程序与Spring Boot整合开发(微信小程序和spring boot)微信小程序与Spring Boot整合开发(微信小程序和spring boot)

文件users.json修改后的代码如例17所示。

【例17】文件users.json修改后的代码示例。

微信小程序与Spring Boot整合开发(微信小程序和spring boot)

文件users.wxss修改后的代码如例18所示。

【例18】文件users.wxss修改后的代码示例。

微信小程序与Spring Boot整合开发(微信小程序和spring boot)微信小程序与Spring Boot整合开发(微信小程序和spring boot)

5●运行程序

编译程序后模拟器中的输出结果如图3所示。单击图3中的“访问/person的结果”按钮,跳转到listperson页面,模拟器中的输出结果如图4所示。单击图3中的“获取所有user信息”按钮,跳转到users页面,模拟器中的输出结果如图5所示。

微信小程序与Spring Boot整合开发(微信小程序和spring boot)

■ 图3 编译程序后模拟器中的输出结果

微信小程序与Spring Boot整合开发(微信小程序和spring boot)

■ 图4 单击图3中“访问/person的结果”按钮后模拟器中的输出结果

微信小程序与Spring Boot整合开发(微信小程序和spring boot)

■ 图5 单击图3中“获取所有user信息”按钮后模拟器中的输出结果

对比图1和图4,或者图2和图5,可以发现微信小程序前端成功获取了Spring Boot后端的信息。

版权声明:本文内容由互联网用户自发贡献,该文观点仅代表作者本人。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如发现本站有涉嫌抄袭侵权/违法违规的内容, 请发送邮件至 举报,一经查实,本站将立刻删除。