微信小程序
1)wx:for 实现循环列表
2)wx.request实现网络请求
3) 实现点击保姆项目后跳转到详情页面
4) 实现详情页面显示
wx:for实现循环列表
在页面的js中添加:
data{
//保姆数组
nannies:[{…},{…}]
}
在需要循环出现的标签上添加:
wx:for 填写的是循环的数组名
wx:for-item:自己起的变量名
在循环的标签纸可以使用{{变量名.属性}}实现数据的绑定
…
{{nanny.name}}
wx.request实现网络请求
在页面加载后请求网络:
onLoad:function(options){
//将页面this对象赋值给变量,因为i在request方法中this对象会改变
var _this = this;
//请求后台Servlet
wx.request({
url:"http://localhost:8080/MyNanny/findAllNannies.do",
success(res){
console.log("后台数据");
console.log(res.data);
//使用从后台返回的数组替换本地数组
_this.setData({nannies:res.data});
}
});
},
图片:
在服务器的WebContent目录下新建images目录存放保姆图片
页面中绑定:
多表内连接查询
能查询多张表之间,有关系的数据
–内连接查询
–1、select后面可以添加两张表的列
–2、from后面使用“,”将多张表连到一起
–3、on后面写上两张表连接的关系 主表.主键= 子表.外键
select t.work_type_name , w.nanny_id from tb_work w inner jion tb_work t
on w.work_type_id = t.work_type_id where w.nanny_id = 1;
保姆工作类型查询
/**
*工作类型
*/
public class WorkType{
private int work_type_id;
private String work_type_name;
...
}
/*
*保姆工作数据库实现
*/
实现点击保姆项目后跳转到详情页面
1)点击实践如何设置
在页面js中添加
//自定义点击事件
clickNanny:function(event){
console.log(event);
},
在页面wxml中带wx:for的view上添加bindtap
bintap=“clickNanny”
2)点击后如何获得当前的保姆信息
在wx:for的view上添加data-实现数据绑定:
data-nanny="{{nanny}}"
在点击事件中使用
event.currentTarget.dataset.nanny
这里nanny和data-后的名字一致
3)如何跳转详情页面同时带上保姆数据
4)如何在详情页面接受保姆数据实现数据绑定
在点击保姆事件后添加:
//跳转到保姆详情页面
//传参时,需要将对象转换为JSON字符串:JSON.stringify
wx.navigateTo({
url:'../details/details?nanny='+JSON.stringify(event.currentTarget.dataset.nanny)
});
在保姆详情页面的js的onload事件中读取参数,同时给页面的data变量赋值
/*
*页面的初始数据
*/
data:{
//用于数据绑定的变量
nanny:null
}
/*
*生命周期函数--监听页面加载
*/
onLoad:function(options){
//读取前面页面传过来的JSON参数
console.log(options.nanny);
//把JSON字符串转换为对象
var nanny2 = JSON.parse(options.nanny);
console.log(nanny2.name);
//把对象赋值给data中的变量
this.setData({nanny:nanny2});
},
页面实现数据绑定:
{{nanny.name}}