# 课程学习
训练营所给学习指导:
# 阶段要求
在阶段二的界面中,编写相关代码。实现点击提交则更新name值和处理新增和删除title列表,更新操作请用云函数实现完毕。
成果提交:
See More
配置ip(175.24.119.147)到云接入白名单 请将页面功能进行演示,录屏发到训练群内,附带URL地址。
# 在客户端使用云函数
此阶段的功能就是通过客户端JavaScript来实现的,具体文档可以看Web SDK API参考:云函数
我是通过SDK来实现调用云函数的功能的,等有空试试HTTP触发。SDK调用云函数整体的逻辑实际上很简单,照着示例代码改改就是了,但是注意登录鉴权,如果没有登录,则会导致调用失败。
# 作业思路
主要是对阶段二的代码进行修改和完善。
相关功能实现的代码:
See More
exports.main = async (event,context) => {
// 获取云环境中环境变量IP所对应的值id
const ip = JSON.parse(context.environment).ip;
// 访问者IP
const fromIp = event.multiValueHeaders["x-real-ip"][0];
// 如果访问者IP和环境变量中IP相同,则进行集成响应,否则404
if(ip === fromIp){
return {
statusCode: 200,
headers: {
"content-type": "text/html"
},
body: `
<script src="//imgcache.qq.com/qcloud/cloudbase-js-sdk/1.0.3/cloudbase.full.js"></script>
<body>
<div style="text-align: center;margin-top: 5%;">
<input id="name" placeholder="名称name" style="margin-right: 5%;">
<button onclick="changeName()">更新名称</button>
<div style="border:3px solid #a9afaf;margin: 5% 10%;">
<div id="list"></div>
<p><input id="add" placeholder="名称name" style="margin-right: 5%;"><button onclick="addTitle()">添加</button></p>
</div>
<input id="file" type="file" accept="image/*"/>
<button onclick="changeLogo()">更新图片</button>
</div>
</body>
<script>
const app = cloudbase.init({
env: "lime2019-3gbmvzpice4d3b3a"
})
const auth = app.auth()
const db = app.database()
function signInAnonymously() {
auth.anonymousAuthProvider().signIn()
.then((res)=>{
console.log('登陆成功',res);
})
}
signInAnonymously()
getList()
function getList(){
setTimeout(()=>{
console.log('获取title列表')
app.callFunction({
name:"list_title"
}).then(res => {
res = res.result
console.log(res)
let list = document.getElementById("list")
list.innerHTML = ""
for(let index in res){
let title = res[index]
let listitem = document.createElement('div')
//
let item = document.createElement('span')
item.setAttribute('id',title._id)
item.setAttribute('style',"margin-right: 5%;")
item.innerText = title.value
listitem.appendChild(item)
//
let itemdel = document.createElement('button')
itemdel.setAttribute('onclick','deleteTitle("'+title._id+'")')
itemdel.innerText = '删除'
listitem.appendChild(itemdel)
// 将子模块放入list列表中
list.appendChild(listitem)
}
})
},500)
}
function changeName(){
console.log('更新名称开始~~~')
app.callFunction({
name:'update_name',
data:{
name:'lime'
}
}).then((res)=> {
console.log(res.result)
})
}
function addTitle(){
console.log('新增励志话语~~~')
let title = document.getElementById('add').value
app.callFunction({
name:'add_title',
data:{
title:title
}
}).then(res => {
console.log(res)
document.getElementById('add').value = ""
getList()
})
}
function deleteTitle(id){
console.log('删除励志话语~~~')
app.callFunction({
name:'delete_title',
data:{
id:id
}
}).then(res => {
console.log(res)
getList()
})
}
function changeLogo(){
console.log('更新图片开始')
console.log(document.getElementById("file").files[0].name)
app.uploadFile({
cloudPath: document.getElementById("file").files[0].name,
filePath: document.getElementById("file").files[0],
onUploadProgress: function (progressEvent) {
console.log(progressEvent);
var percentCompleted = Math.round((progressEvent.loaded * 100) / progressEvent.total);
}
}).then((result) => {
console.log(result.fileID)
app.callFunction({
name:"update_logo",
data:{
logo:result.fileID
}
}).then(res => {
console.log(res.result)
})
});
}
</script>
`
};
}else{
return "404 NOT FOUND";
}
}
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
110
111
112
113
114
115
116
117
118
119
120
121
122
123
124
125
126
127
128
129
130
131
132
133
134
135
136
137
138
139
140
141
142
143
144
145
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
110
111
112
113
114
115
116
117
118
119
120
121
122
123
124
125
126
127
128
129
130
131
132
133
134
135
136
137
138
139
140
141
142
143
144
145
其中最主要是集成响应中返回的网页js代码
See More
<script>
const app = cloudbase.init({
env: "lime2019-3gbmvzpice4d3b3a"
})
const auth = app.auth()
const db = app.database()
function signInAnonymously() {
auth.anonymousAuthProvider().signIn().then((res)=>{
console.log('登陆成功',res);
})
}
signInAnonymously()
getList()
function getList(){
setTimeout(()=>{
console.log('获取title列表')
app.callFunction({
name:"list_title"
}).then(res => {
res = res.result
console.log(res)
let list = document.getElementById("list")
list.innerHTML = ""
for(let index in res){
let title = res[index]
let listitem = document.createElement('div')
//
let item = document.createElement('span')
item.setAttribute('id',title._id)
item.setAttribute('style',"margin-right: 5%;")
item.innerText = title.value
listitem.appendChild(item)
//
let itemdel = document.createElement('button')
itemdel.setAttribute('onclick','deleteTitle("'+title._id+'")')
itemdel.innerText = '删除'
listitem.appendChild(itemdel)
// 将子模块放入list列表中
list.appendChild(listitem)
}
})
},500)
}
function changeName(){
console.log('更新名称开始~~~')
app.callFunction({
name:'update_name',
data:{
name:'lime'
}
}).then((res)=> {
console.log(res.result)
})
}
function addTitle(){
console.log('新增励志话语~~~')
let title = document.getElementById('add').value
app.callFunction({
name:'add_title',
data:{
title:title
}
}).then(res => {
console.log(res)
document.getElementById('add').value = ""
getList()
})
}
function deleteTitle(id){
console.log('删除励志话语~~~')
app.callFunction({
name:'delete_title',
data:{
id:id
}
}).then(res => {
console.log(res)
getList()
})
}
</script>
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
首先进行匿名登录,登录完成后,获取title集合中信息。然后不同按钮绑定不同的事件,鼠标单击触发相关函数。
另外所有数据库新增、更新、删除操作都是通过云接入来进行的。如获取title文档中数据:
const tcb = require("@cloudbase/node-sdk");
const app = tcb.init({
env:'环境ID'
})
const db = app.database()
exports.main = async (event, context) => {
let result = await db.collection("title").get()
//获取返回的数据结果
return result.data;
};
1
2
3
4
5
6
7
8
9
10
11
2
3
4
5
6
7
8
9
10
11
为什么要使用云函数?
云函数对数据库的操作是管理员级别的权限,而匿名登录,实际上权限是当前用户,所以修改数据可能会报错(数据库权限设置中是没有所有人可写这一项的)。