#tcb-study
##云开发作业 第五章
###将教程范例的cloudtohttp函数使用sdk的getTempFileURL进行替换。
####实现思路：新增异步函数getImgurl一次性取回所有的图链接，在客户端js（index.js和admin.js中对应的地方也要改为异步）中循环取出，考虑到图库可能被修改，在前端加判断给没图的设置为默认图片
【腾讯云开发学习小结】######本地函数 util.js index.js admin.js
async function getImgurl(src) {
//console.log(typeof(src));
//console.log(src);
//这里的src不是拆开传进来
if(srchttps://www.it610.com/article/==""){
return "";
}
let imgs = await cloud.getTempFileURL({
fileList: src
}).then(res=>{
return res
})
return imgs;
}...
let urls = await getImgurl(tempitem.imgs);
//一次性取回所有的图链接
for(let u in urls.fileList){
let img = document.createElement('img');
//判断一下有没有失效，如果图片丢了就换张默认的上去
if(urls.fileList[u].code === 'SUCCESS') {
img.src = https://www.it610.com/article/urls.fileList[u].tempFileURL;
} else {
img.src ='https://tse4-mm.cn.bing.net/th/id/OIP.dsanUfCFTpQjPIE7rY7W6AHaHZ?pid=Api&rs=1';
}
//img.src = https://www.it610.com/article/urls.fileList[u].tempFileURL;
img.setAttribute('onclick','previewnetimg("'+img.src+'")');
itemimages.appendChild(img);
}
...
##云开发作业 第四章
###将教程范例（意见反馈平台DEMO）中的管理端部分的列表加载变成实时数据库监听形式触发。
####实现思路：新增watch函数用来监听数据库，列表刷新还用原来的方法
######本地函数 admin.js
/**
* 监听意见表变化
*/
function watch(){
const _ = db.command
const watcher = cloud.database().collection('tpark').where({
//因为是监听的整个表，条件是编的，请随意
_openid: _.neq('X')
}).watch({
onChange:function(res){
console.log('res');
//用户端有新提交时，看看数据变化
console.log(res);
initlist();
},
onError:function(err){
console.error('the watch closed because of error', err)
}
});
//这里的watcher可以关闭，绑定到页面的按钮上，比如“我现在不想工作”，就可以把这个给关掉
//watcher.close()
}
###用户端列表加载云函数适配超过100条的场景，采用promise all的形式进行改造，使其可以支持超过100条。
####实现思路：用户端数据获取改造参考的init-admin云函数，同样也是新增watch函数用来监听
######云函数 init-user
const db = cloud.database();
const _ = db.command;
const MAX_LIMIT = 100;
exports.main = async (event, context) => {
const auth = cloud.auth().getUserInfo();
const uid = auth.uid;
let res = {};
//意见反馈数据集合总数
const countResult = await db.collection('tpark').count();
const total = countResult.total;
const batchTimes = Math.ceil(total / MAX_LIMIT);
console.log(batchTimes);
const tasks = []
//取数据
for (let i = 0;
i < batchTimes;
i++) {
const promise = await db.collection('tpark').where({
_openid:uid
}).skip(i * MAX_LIMIT).limit(MAX_LIMIT).orderBy('adddue', 'desc').get();
tasks.push(promise);
}
//数据拼接
//https://developer.mozilla.org/zh-CN/docs/Web/JavaScript/Reference/Global_Objects/Array/Reduce
res.list = (await Promise.all(tasks)).reduce((acc, cur) => {
return {
data: acc.data.concat(cur.data),
errMsg: acc.errMsg,
}
}).data;
res.code = 0;
return res;
};
######本地函数 index.js
/**
* 加载意见列表（调用云函数：init-user）
*/
function initlist(){
//实时监听
//collection监听方法是将有变化的数据集的新增数据追加到原数据集合中
//如果按课程提供的代码，展示结果有点辣眼前
//所以统一用云函数取数据来刷新列表
cloud.callFunction({
name: 'init-user'
})
.then((res) => {
refreshlist(res.result.list);
});
}/**
* 监听意见表变化
*/
function watch(){
const watcher = cloud.database().collection('tpark').where({
_openid:uid
}).watch({
onChange:function(res){
initlist();
},
onError:function(err){
console.error('the watch closed because of error', err)
}
});
}大概是大前天吧，想把腾讯云主机改造一下，结果在官网发现了这个QQ群的WEB训练营的广告，因为进得比较晚，没赶上直播课，就把录播课程下载下来大概看了一下，顺手把这期的做业也做了。
没啥正经开发经验，磕磕绊绊地总算是按题目要求完成了。
这里先把部分代码和思路放上来做个临时记录，后续还是得优化一下代码，起码让自己用起来舒服。
老师说这期完结会有礼品，好期待，正好有个想法打算用代码实现出来，感觉用云开发的方式实现会更有意思。
慢慢来吧，这个小项目从现在开始，算是启程了。
#活动链接：云开发零基础训练营
