小程序与Spring项目数据交互
上一篇博客刚说了利用Postman来测试Spring Boot项目,测试通过后就可以和小程序进行交互了。
首先要在微信开发者工具里面,点击"详情",勾选上"不校验合法域名、web-view(业务域名)、TLS 版本以及 HTTPS 证书",不然你是连接不到url滴。
controller代码在上一篇博客里面都有,这里就不贴了。
GET请求获取数据
data: {
list:[]
},
/**
* 生命周期函数--监听页面显示
*/
onShow: function () {
//异步传输,每一刻的对象都不一样
var that=this;
wx.request({
url: 'http://localhost:8080/AllStu',
method:"GET",
data:{},//是否有数据传输到服务器
success:function(res){
//stuList与controller中名字相同
var listData=res.data.stuList;
if(listData!=null){
//list=listData;错误写法
that.setData({
list:listData
})
}
}
})
},
1、为什么要用this和that呢?
因为request操作依赖网络,会造成等待,影响用户体验,因此目前只支持异步模式。
我的理解是,你这一刻发出请求,过个几十毫秒才能收到响应,所以要用that先把此刻的状态保存,然后再将收到的数据赋给js文件里面定义的变量。
2、var listData=res.data.stuList;这一句里面的stuList与controller里面的代码是相呼应的,千万不要写错!
3、为什么不写在onload()里面呢?
onload是页面加载,只会被调用一次;
而onshow是页面显示,每次打开页面都会更新一次,比如插入某个数据后再返回,当前页面就会被更新。
4、简单说一下wxml里面对应的代码
<!--动态表格下半部分开始-->
<scroll-view scroll-y="true">
<view>
<block wx:for="{{list}}">
<view>
<text class='column'>{{item.stuID}}</text>
<text class='column'>{{item.name}}</text>
<text class='column'>{{item.phone}}</text>
<view>
<navigator class='link' url='../updateStu/updateStu?stuID='>编辑</navigator>
<navigator class='link'>删除</navigator>
</view>
</view>
</block>
</view>
</scroll-view>
<!--动态表格下半部分结束-->
wx:for是类似于thymeleaf的写法,{{}}是Vue.js的特性之一,毕竟小程序就是基于Vue.js框架来运行的。
{{list}}表示js里面定义的list变量,当我们使用wx.request(object)将请求到的数据赋给list之后,list里面会拥有很多对象,所以要用wx:for循环将每个对象的属性给取出来。
怎么取呢?下面的{{item.stuID}},item就表示list里面的某个对象,stuID就是该对象的某一个属性,这样巴拉巴拉取出来就对了。
POST请求发送数据
frmSubmit是绑定在某个表单上的函数,提交事件发生时,这个函数就会被执行。
frmSubmit:function(e){
//获取表单数据
var frmData=e.detail.value;
wx.request({
url: 'http://localhost:8080/addStu',
method:"POST",
data:JSON.stringify(frmData),
//数据被转换为JSON格式
//{"name":"123","phone":"123456789"}
header:{"Content-Type":"application/json"},
success:function(res){
wx.showToast({
title: '添加成功!',
duration:5000
})
}
})
}
1、JSON.stringify(para)是将某个对象中转换为JSON字符串,转换后类似于这样:{"name":"123","phone":"123456789"}
与其相对的是JSON.parse(para),会逆向将JSON字符串转换为js的对象。
2、header:{"Content-Type":"application/json"}
这一句就和Postman那里差不多,头里面要规定数据传送方式,这里是以JSON字符串形式传送的。
参考资料:
小程序与Spring项目数据交互的更多相关文章
- 【好好编程-技术博客】微信小程序开发中前后端的交互
微信小程序开发中前后端的交互 微信小程序的开发有点类似与普通网页的开发,但是也不尽然相同.小程序的主要开发语言是JavaScript,开发同普通的网页开发有很大的相似性,对于前端开发者而言,从网页开发 ...
- 微信小程序开发工具的数据,配置,日志等目录在哪儿? 怎么找?
原文地址:http://www.wxapp-union.com/portal.php?mod=view&aid=359 本文由本站halfyawn原创:感谢原创者:如有疑问,请在评论内回复 ...
- 微信小程序商城开源项目,Weixin-App-Shop 1.0 版本正式发布!!!
微信小程序商城开源项目,Weixin-App-Shop 1.0 版本正式发布 Weixin-App-Shop 是捷微团队开发的微信小程序商城开源项目,涵盖了微信商城的全部功能,能够快速发布简单易用的小 ...
- 在微信小程序页面间传递数据总结
在微信小程序页面间传递数据 原文链接:https://www.jianshu.com/p/dae1bac5fc75 在开发微信小程序过程之中,遇到这么一些需要在微信小程序页面之间进行数据的传递的情况, ...
- 微信小程序前台的用户数据入库(后台Laravel)
首先 我们可以看到微信小程序官方 文档 wx.login api-login.jpg 通过此图 我们知道 前台要传 一个 code给后台,后台拿到code 并结合appid和appsecret请求 ...
- 微信小程序“信用卡还款”项目实践
小程序概述 11月3日晚,微信团队对外宣布,微信小程序开放公测.开发者可登陆微信公众平台申请,开发完成后可以提交审核,公测期间暂不能发布. 我们前一段时间也进行了小程序开发,现在来对之前的开发体验做一 ...
- 【Alpha】“北航社团帮”小程序v1.0项目展示
目录 1.团队介绍 2.回答一些工程问题 整个项目的目标和预期功能 整个项目的预期典型用户 整个项目的预期用户数量 alpha满足的用户需求 alpha用户量一览 团队分工及经验教训 团队项目管理 时 ...
- 微信小程序豆瓣电影项目的改造过程经验分享
在学习微信小程序开发过程中,一部分的难点是前端逻辑的处理,也就是对前端JS的代码编辑:一部分的难点是前端界面的设计展示:本篇随笔基于一个豆瓣电影接口的小程序开源项目进行重新调整,把其中遇到的相关难点和 ...
- 详解微信小程序开发(项目从零开始)
一.序 微信小程序,估计大家都不陌生,现在应用场景特别多.今天就系统的介绍一下小程序开发.注意,这里只从项目代码上做解析,不涉及小程序如何申请.打包.发布的东西.(这些跟着微信官方文档的流程走就好). ...
随机推荐
- python _、__和__xx__的区别(转)
本位转载自:http://www.cnblogs.com/coder2012/p/4423356.html "_"单下划线 Python中不存在真正的私有方法.为了实现类似于c++ ...
- 九度OJ 1159:坠落的蚂蚁 (模拟、排序)
时间限制:1 秒 内存限制:32 兆 特殊判题:否 提交:1098 解决:277 题目描述: 一根长度为1米的木棒上有若干只蚂蚁在爬动.它们的速度为每秒一厘米或静止不动,方向只有两种,向左或者向右.如 ...
- Bitmaps
核心知识点: 1.Bitmaps是一种特殊的“数据结构”,实质上是一个字符串,操作单元是位. 2.命令: a.setbit:设置值,只能存储0和1,适用二元判断类型 b.getbit:获取值 c.bi ...
- Java for LeetCode 096 Unique Binary Search Trees
Given n, how many structurally unique BST's (binary search trees) that store values 1...n? For examp ...
- Data Structure Binary Search Tree: Inorder Successor in Binary Search Tree
struct node { int val; node *left; node *right; node *parent; node() : val(), left(NULL), right(NULL ...
- nodejs搭建简单的websocket服务端
创建websocket服务端使用了nodejs-websocket ,首先要安装nodejs-websocket,在项目的目录下: npm install nodejs-websocket 1.搭建w ...
- Git 使用初步
官网:https://git-scm.com/ 官方文档:https://git-scm.com/doc 比较简略的资料(对基本概念没有解释很清楚):http://wenku.baidu.com/li ...
- BZOJ 3624 [Apio2008]免费道路:并查集 + 生成树 + 贪心【恰有k条特殊路径】
题目链接:http://www.lydsy.com/JudgeOnline/problem.php?id=3624 题意: 给你一个无向图,n个点,m条边. 有两种边,种类分别用0和1表示. 让你求一 ...
- Intellij IDEA 14代码错误提示如何调出来
- haproxy透传用户ip-方法和原理
为了透传用户ip到后端server, proxy机器需要解决两个问题: 1.在创建到后端server的套接字时, 将用户ip作为套接字的源ip,从而让后端server看到: 2.后端server在回包 ...