# 云数据库
云数据库是 CloudBase 提供的核心功能之一,提供基础读写、聚合搜索、数据库事务、实时推送等功能。
# 课程学习
训练营所给的学习指导:
# 阶段要求
创建集合,名称分别为name,title,user,三个集合分别是如下结构,在开始任务前请建立数据集合并填充数据:
See More
name集合,有一个id为name的文档,value为值,time为更新时间
title集合,有多个文档,id系统生成,value为页面中显示的积极的话,time为更新时间
user集合,有多个文档,id是云开发用户id,indue为第一次访问的时间。
在任务一的页面中,匿名登录并调用数据库api,将name和title的数据展示到页面中,其中title有多个,在取出时只取一个,完全随机(请完全使用数据库api完成,随机取出)
在匿名访问时,判断是否为新用户,可通过user集合用户id来判断,如果存在则返回加入时间从早到晚的排名为第几个用户,整个集合文档数量为共几人。
如果用户不存在,则将用户id和时间添加到user集合,并返回数据。
# 云数据库使用
每个云开发环境下有且只有一个数据库实例,数据库实例中,可以创建多个集合。
调用方式:
- 用户端(如 Web 网页、小程序、Flutter)调用
- 通过用户端调用时,需要先进行云开发的登录鉴权,然后以用户的身份进行数据库的读写操作。
- 服务端(如服务器、云函数)调用
- 通过服务端调用时,需要在 SDK 初始化参数中,填入腾讯云密钥(SecretID 和 SecretKey),然后以管理员身份进行数据库的读写操作。
权限控制:用户端与服务端是以不同的身份和权限调用云数据库的。
- 服务端调用
- 服务端上,是以管理员身份调用云数据库的,拥有读取、写入、修改、删除任意数据的权限。
- 所以服务端又称管理端。
- 用户端调用
- 用户端上,需要进行登录鉴权之后,以当前用户的身份调用云数据库,受到数据库权限的控制。
- 云数据库支持四种基础的数据库权限,如下:
还有很多其他的内容,可以去云数据库官方文档查看。
# 登录鉴权
CloudBase 提供跨平台的登录鉴权功能,您可以基于此为自己的应用构建用户体系。同时,CloudBase 登录鉴权还是保护您的服务资源的重要手段,CloudBase 对用户端发来的每一个请求,都会进行身份和权限的检查,避免您的资源被恶意攻击者消耗或者盗用。
用户体系,包括但不限于:
- 为用户分配全局唯一的身份标识 uid;
- 储存和管理用户个人信息;
- 关联多种登录方式;
- 管理用户对数据、资源的访问权限;
- 用户行为的收集和分析。
登录鉴权方式:
- 匿名登录
- 邮箱登录
- 微信授权登录
- 自定义登录
- 用户名密码登录
- 微信小程序登录
- 短信验证码登录
开启匿名登录与自定义登录:
# 作业思路
在云开发环境数据库中创建集合:
在集合中添加文档:
修改集合权限:
前端页面
See More
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <title>腾讯云开发</title> <script src="//imgcache.qq.com/qcloud/cloudbase-js-sdk/1.0.3/cloudbase.full.js"></script> </head> <body> <div style="text-align: center;margin-top: 10%;"> <h1>欢迎来到<span id="name"></span>的网站</h1> <p id="title"></p> <p>你是第<span id="order"></span>位访问者</p> <p>共有<span id="number"></span>位访问者</p> </div> </body> <script src="./asset/index.js"></script> </html>
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18js文件
See More
const app = cloudbase.init({
env: "lime2019-3gbmvzpice4d3b3a"
});
const auth = app.auth();
const db = app.database();
let uid = null
// 匿名登录
async function login(){
await auth.anonymousAuthProvider().signIn().then((res)=>{
auth.getLoginState().then(loginState=>{
uid = loginState.user.uid
db.collection('user').where({
_id:uid
}).get().then(res => {
if(res.data.length >0 ){
console.log('已存在!')
}else{
db.collection('user').add({
_id:loginState.user.uid,
indue:db.serverDate()
})
}
})
// 获取网站名字
db.collection('name').where({
_id:"name"
}).get().then(res => {
document.getElementById("name").innerHTML=res.data[0].value;
})
// 获取积极的话
db.collection('title').get().then(res => {
// 随机获取一条
let index = Math.floor(Math.random() * (res.data.length) )
document.getElementById("title").innerHTML=res.data[index].value;
})
// 获取已访问人数
db.collection('user').count().then( res => {
document.getElementById("number").innerHTML=res.total;
})
// 获取用户是第几位访问者
db.collection('user').orderBy("indue","asc").get().then(res => {
console.log(res.data)
for(let i =0 ;i<res.data.length;i++){
if(res.data[i]._id === uid){
document.getElementById("order").innerHTML=i+1;
}
}
})
console.log("登录成功!",loginState.user.uid)
})
}).catch((err)=>{
console.log("登录失败",err);
})
}
login();
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
上传到静态网站根目录,可参考静态网站部署
最后效果: