微信小程序云开发 | 赠、删、改城市名称信息的应用实现

本文涉及的产品
.cn 域名,1个 12个月
简介: 本文实现城市名称的增、删、改(效果同上一篇)。本文使用的工具包括:(1)Spring Boot作为后端开发工具(2)微信小程序前端开发(3)MySQL,数据库(4)Spring Data JPA框架,数据库处理(ORM)(5)Intellij IDEA,集成开发环境

Spring Boot因其轻量级的开发方式而受到用户的追捧,这使得它成为微信小程序后台开发中比较好的开发工具。本文介绍Spring Boot作为微信小程序后台的一个简单应用,对Spring Boot与微信小程序的整合提供一个入门的介绍。若要进行深入的应用还需要对微信小程序和Spring Boot开发有较深入的理解。


1、作为后台的Spring Boot简单应用开发


1●新建项目添加依赖

新建项目,确保在文件pom.xml的和之间添加了Web、Lombok等依赖。

2●新建类

依次在包com.bookcode下创建entity、dao、controller等子包。并在包com.bookcode.entity中创建类City,在包com.bookcode.dao中创建接口CityRepository,在包com.bookcode.controller中创建类CityController和HelloController。

3●修改文件

修改在目录src/main/resources下的配置文件application.properties。

完成上述任务后,整个项目的核心目录和文件结构如图1所示。

image.png

■ 图1 项目的核心目录和文件结构

4●在浏览器中直接访问的结果

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

image.png

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


image.png

■ 图3 在浏览器中输入localhost:8080/listcity后浏览器中的输出结果


2、作为前台的微信小程序简单应用开发


1●新建微信小程序项目文件

依次在目录pages文件中添加hi、hello、list、operation共4个页面,每个页面包括4个文件,如hello.js、hello.wxml、hello.wxss、hello.json为一组文件。项目增加的目录和文件结构如图4所示。

image.png

■ 图4 微信小程序项目增加的目录和文件结构


2●微信小程序项目运行结果

编译微信小程序,并在Nexus 6手机模拟器中显示的首页界面(与hi.wxml文件对应),如图5所示。

image.png

■ 图5 微信小程序项目首页界面


单击图-5中的“访问HelloController”按钮,跳转到如图6所示的界面(与hello.wxml文件对应)。

image.png

■ 图6 单击图5中的“访问HelloController”按钮后跳转到的界面


单击图6中的“访问http://localhost:8080的结果”按钮,在微信小程序开发工具的控制台中输出访问后台Spring Boot得到的内容,如图7所示。对比图7和图2,可以发现两者的内容一致。

image.png

■ 图7 单击图6中的“访问http://localhost:8080的结果”按钮后控制台中输出的返回信息


单击图5中的“调用CityController”按钮,跳转到如图8所示的界面(与list.wxml文件对应)。对比图8和图3,可以发现两者的内容一致。

image.png

■ 图8 单击图5中的“调用CityController”按钮后跳转到的界面


单击图8中的“添加城市”按钮,跳转到如图9所示的界面(与operation.wxml文件对应)。

image.png

■ 图9 单击图8中的“添加城市”按钮后跳转到的界面


在图9的文本框中输入要增加的城市名称(如“北京”)后单击“提交”按钮,结果如图10所示。

image.png

■ 图10 在图9文本框中输入要增加的城市名称后单击“提交”按钮的结果


再次在浏览器中输入localhost:8080/listcity后,结果如图11所示。对比图10和图11,可以发现两者的内容一致,这说明前台微信小程序的操作和后台Spring Boot项目进行了关联,并将操作结果存储到MySQL数据库中。

image.png

■图11 再次在浏览器中输入localhost:8080/listcity后的结果


3、Spring Boot和微信小程序整合的关键点


1●两者整合的关键代码

Spring Boot和微信小程序整合的关键是在微信小程序中访问Spring Boot后台项目提供的服务,两者关联的关键代码如例1所示。

【例1】两者关联的关键代码示例。

image.png

image.png

2●注意事项

微信小程序和服务器进行网络通信的方式包括HTTPS(请注意不是HTTP)和WebSocket等。默认情况下,微信小程序后台只接收HTTPS域名,开发时可以申请此类域名;或者在微信小程序开发工具中进行设置后使用HTTP域名。设置方法:单击工具中“详情”按钮后在“本地设置”页中勾选“不校验合法域名、web-view(业务域名)、TLS 版本以及 HTTPS 证书”复选框;勾选后微信小程序就可以使用访问HTTP域名(如localhost:8080),如图12所示。

image.png

■ 图12 单击“详情”按钮后在“本地设置”页中进行勾选设置

目录
相关文章
|
3月前
|
JSON 小程序 JavaScript
uni-app开发微信小程序的报错[渲染层错误]排查及解决
uni-app开发微信小程序的报错[渲染层错误]排查及解决
771 7
|
3月前
|
小程序 JavaScript 前端开发
uni-app开发微信小程序:四大解决方案,轻松应对主包与vendor.js过大打包难题
uni-app开发微信小程序:四大解决方案,轻松应对主包与vendor.js过大打包难题
783 1
|
3月前
|
小程序 前端开发 测试技术
微信小程序的开发完整流程是什么?
微信小程序的开发完整流程是什么?
183 7
ly~
|
4月前
|
存储 供应链 小程序
除了微信小程序,PHP 还可以用于开发哪些类型的小程序?
除了微信小程序,PHP 还可用于开发多种类型的小程序,包括支付宝小程序、百度智能小程序、抖音小程序、企业内部小程序及行业特定小程序。在电商、生活服务、资讯、工具、娱乐、营销等领域,PHP 能有效管理商品信息、订单处理、支付接口、内容抓取、复杂计算、游戏数据、活动规则等多种业务。同时,在企业内部,PHP 可提升工作效率,实现审批流程、文件共享、生产计划等功能;在医疗和教育等行业,PHP 能管理患者信息、在线问诊、课程资源、成绩查询等重要数据。
ly~
92 6
|
2月前
|
存储 缓存 开发框架
提高微信小程序的应用速度
【10月更文挑战第21天】提高微信小程序的应用速度需要从多个方面入手,综合运用各种优化手段。通过不断地优化和改进,能够显著提升小程序的性能,为用户带来更流畅、更高效的使用体验。
71 3
|
2月前
|
人工智能 小程序 算法
微信小程序地图定位的核心技术与实际应用详解
在移动互联网时代,微信小程序凭借其轻量化和普及性,成为室内地图导航的理想平台。本文探讨了微信小程序在室内定位领域的创新应用,包括蓝牙iBeacon定位、高精度地图构建及AI路径规划等核心技术,及其在购物中心、医院、机场火车站和景区等场景的应用,展示了其为用户带来的高效、智能的导航体验。
128 0
|
3月前
|
缓存 小程序 索引
uni-app开发微信小程序时vant组件van-tabs的使用陷阱及解决方案
uni-app开发微信小程序时vant组件van-tabs的使用陷阱及解决方案
267 1
|
3月前
|
小程序 前端开发 数据安全/隐私保护
微信小程序全栈开发中的身份认证与授权机制
【10月更文挑战第3天】随着移动互联网的发展,微信小程序凭借便捷的用户体验和强大的社交传播能力,成为企业拓展业务的新渠道。本文探讨了小程序全栈开发中的身份认证与授权机制,包括手机号码验证、微信登录、第三方登录及角色权限控制等方法,并强调了安全性、用户体验和合规性的重要性,帮助开发者更好地理解和应用这一关键技术。
99 5
|
3月前
|
小程序 前端开发 JavaScript
微信小程序全栈开发中的PWA技术应用
【10月更文挑战第3天】微信小程序作为新兴应用形态,凭借便捷体验与社交传播能力,成为企业拓展业务的新渠道。本文探讨了微信小程序全栈开发中的PWA技术应用,包括离线访问、后台运行、桌面图标及原生体验等方面,助力开发者提升小程序性能与用户体验。PWA技术在不同平台的兼容性、性能优化及用户体验是实践中需注意的关键点。
78 5
|
3月前
|
小程序 JavaScript API
微信小程序开发之:保存图片到手机,使用uni-app 开发小程序;还有微信原生保存图片到手机
这篇文章介绍了如何在uni-app和微信小程序中实现将图片保存到用户手机相册的功能。
1228 0
微信小程序开发之:保存图片到手机,使用uni-app 开发小程序;还有微信原生保存图片到手机