个人学习站点 个人学习站点
首页
  • 前端文章

    • JavaScript
  • 学习笔记

    • 《JavaScript教程》
    • 《JavaScript高级程序设计》
    • 《ES6 教程》
    • 《Vue》
    • 《React》
    • 《TypeScript 从零实现 axios》
    • 《Git》
    • TypeScript
    • JS设计模式总结
  • HTML
  • CSS
  • 技术文档
  • Nodejs
  • 分享
  • 学习
  • 面试
  • 我的项目
  • 心情杂货
  • 实用技巧
  • 游玩
  • 英语学习
  • 收藏
GitHub (opens new window)

Darren Zhang

前端界的小学生
首页
  • 前端文章

    • JavaScript
  • 学习笔记

    • 《JavaScript教程》
    • 《JavaScript高级程序设计》
    • 《ES6 教程》
    • 《Vue》
    • 《React》
    • 《TypeScript 从零实现 axios》
    • 《Git》
    • TypeScript
    • JS设计模式总结
  • HTML
  • CSS
  • 技术文档
  • Nodejs
  • 分享
  • 学习
  • 面试
  • 我的项目
  • 心情杂货
  • 实用技巧
  • 游玩
  • 英语学习
  • 收藏
GitHub (opens new window)
  • 技术文档

  • GitHub技巧

  • Nodejs

  • 博客搭建

  • 分享

    • 我的分享

      • 分享
      • unicloud初体验
        • 什么是uniCloud?
        • 什么是serverless?
        • uniCloud降低前端掌握后端的门槛
        • uniCloud如何提升10倍开发效率?
          • 开发效率提升,分7个层次:
        • 快速入门
          • 创建账号
          • 创建uniClund项目
          • 简单体验
          • 部署上线
      • docker入门和实践
      • docker相关工具
    • 其他分享

  • 抠图
  • 技术
  • 分享
  • 我的分享
nzjcnjzx
2022-03-05

unicloud初体验

# 什么是uniCloud?

uniCloud 是 DCloud 联合阿里云、腾讯云,为开发者提供的基于 serverless 模式和 js 编程的云开发平台。

uniCloud 的 web控制台地址:https://unicloud.dcloud.net.cn (opens new window)

# 什么是serverless?

serverless是目前很火的概念,它是下一代云技术,是真正的“云”。

传统的云服务,让开发者免于购买实体服务器硬件,改为购买虚拟机。但开发者仍然要自己装操作系统、web服务器、数据库,自己处理热备,自己新购服务器来应对高并发,自己抗DDOS攻击...

这不是成熟的“云”!

真正的云计算,就像用水用电,没有复杂的门槛,即用即有、按需付费。

serverless的云,真正的把计算、存储的能力进行了云化,开发者只需要按量租用这些计算和存储能力,再也不用关心扩容和攻击。

# uniCloud降低前端掌握后端的门槛

前端工程师想掌握后端开发,有6大门槛:

1、学习php、java等非js的语言

uniCloud采用js编写后端服务代码,无需单独学习php或java,甚至也无需提前掌握nodejs。看下uniCloud的api文档即可

2、学习数据库设计

uniCloud推出了 opendb (opens new window) (opens new window),包含了大量的开源数据库模板,常见数据表无需自己设计。通过opendb模板,开发者可以快速掌握数据库设计。

3、学习SQL

SQL在过去也需要单独学习,尤其是复杂的联表查询、Tree查询,掌握很不容易。uniCloud推出了JQL(Javascript Query Language),会js即可掌握数据库查询,更对联表查询、Tree查询提供了非常简便的操作封装

4、学习linux、nginx等系统和三方软件

uniCloud基于serverless,开发者无需了解linux、nginx,无需熟悉负载均衡、大并发处理,不用关心系统补丁和DDoS攻击,只需要用js写好云端业务代码,上传到uniCloud即可。

5、学习服务器运维:熟悉负载均衡、大并发处理。了解各种复杂的云厂商产品目录和报价

uniCloud提供了uni-id (opens new window) (opens new window),无需自己开发账户体系,登录、注册、修改密码、角色权限体系、token管理一应俱全

6、学习系统安全:避免业务安全漏洞(权限漏洞、防SQL注入)、操作系统和三方软件补丁、DDoS等网络攻击

uniCloud在DB Schema (opens new window) (opens new window)中提供了与uni-id (opens new window) (opens new window)的角色权限体系配套的数据权限控制方案。这套方案让小白也不会在权限控制中犯错。在一目了然的权限配置清单中可以轻松发现漏做的事情,比以往在大坨php代码中分析是否存在权限漏洞要简单的多。这套方案还能让多人协作、或项目二次开发变的更容易,因为规范的存在,新人可以轻易读懂老代码的权限体系逻辑。

# uniCloud如何提升10倍开发效率?

uniCloud最吸引人的是,它将开发效率提升了10倍以上。

uniclound

# 开发效率提升,分7个层次:

1、提供众多现成轮子,不用自己写代码

  • 官方维护的插件

    • uni-id:不用再开发用户系统。用户注册、登录(含社交登录、短信验证码登录、App一键登录)、修改或重置密码、token管理、图形验证码、RBAC权限角色系统...所有与用户相关的,不管前端还是云端,代码都是现成的。详见 (opens new window)(opens new window)

    • uniPay:不管微信还是支付宝,不管App、微信小程序、还是支付宝小程序,不管前端还是服务端,一切都现成的,拿来即用。详见 (opens new window)(opens new window)

    • uSearch:云端一体搜索。搜索页面、输入联想、搜索历史记录、热搜词分析提取...一应俱全。详见 (opens new window)(opens new window)

    • uni-starter:云端一体应用快速开发基本项目模版,实现快速搭建一款应用。它集成了很多通用的功能,比如登录注册、头像、设置、拦截器、banner...详见 (opens new window)(opens new window)

    • uniCloud Admin:全端可用的admin后台。自带用户管理、权限管理、角色管理、菜单管理。更有众多admin插件,比如cms插件、

    • banner管理插件、App升级管理插件...详见 (opens new window)(opens new window)

    • uni-file-picker:前端直传uniCloud存储组件。详见 (opens new window)(opens new window)

    • uni-captcha:云端一体图形验证码组件。详见 (opens new window)

  • 社区的优秀插件

    • cms
    • 城市选择
    • banner管理
    • 留言反馈
    • IM
    • 日志管理
    • 敏感词过滤
    • push
    • 图表统计
    • 项目模板
  • 项目模板

电商 博客 排班
网赚合成游戏 社交 预约预订
外卖 短视频 家谱
影视 记账 考勤打卡

...

2、如果没有现成轮子,那么用schema2code (opens new window) (opens new window)代码生成工具,生成数据库的增删改查页面(是直接生成页面,不是生成接口)

  • 通过定义的DB Schema来自动生成增删改查的代码

3、如果schema2code搞不定,需要手写代码,那么使用clientDB (opens new window) (opens new window),将节省80%的服务端开发工作

  • unicloud-db组件可以查询到云端的数据
  • 可以通过JQL (opens new window)的语法查询数据

4、HBuilderX在云端协同中提供工具助力

  • HBuilderX、uni-app、uniCloud是三位一体、高效协同的。
  • HBuilderX提升了uni-app的开发效率,自然也将提升uniCloud的开发效率

5、端和云的语言统一,提高了沟通效率、招聘效率

  • 一个业务模块的前端后端都由一个人负责。开发效率会比以前更高。

6、代码量的减少到原来的十分之一,让code review效率和测试的效率也提升了十倍

  • 代码量的减少到原来的十分之一,这自然可以让code review效率和白盒测试的效率也提升了十倍
  • 黑盒测试中,前后端对不齐的bug、权限漏洞等发生的概率也大幅减少。

7、serverless让开发者专注于业务,无需分心运维

  • 因为serverless的免运维特点,开发商再也不用操心扩容、高并发、ddos攻击、安全漏洞补丁等一系列麻烦事。只需专注于自己的业务。

# 快速入门

# 创建账号

前往控制台 https://unicloud.dcloud.net.cn (opens new window) 进行注册和创建账号

# 创建uniClund项目

使用hbuildx 新建项目选择一个项目模版

	
┌──uniCloud-aliyun                    云空间目录,阿里云为uniCloud-aliyun,腾讯云为uniCloud-tcb
|   |——— cloudfunctions               云函数目录
|   |   │───common                    云函数公用模块目录 详情
|   |   |   └──hello-common           云函数公用模块
|   |   |      │──index.js            公用模块代码
|   |   |      └──package.json        公用模块package.json
|   |   │───uni-clientDB-actions
|   |   │      └──new_action.js       clientDB action代码 详情
|   |   └───function-name             云函数目录
|   |         │──index.js             云函数代码
|   |         └──package.json         包含云函数的配置信息,如url化、定时设置、内存等内容 详情
│   └──database                       云数据目录
│         │──validateFunction         数据库扩展校验函数目录
│         │   └──new_validation.js    扩展校验函数代码 详情
│         │──db_init.json             db_init.json初始化数据库文件,其中不再包含schema 详情
│         └──xxx.schema.json          数据表xxx的DB Schema 详情
根目录
	
#
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20

# 简单体验

1、关于云函数的体验

2、clientDB体验

3、关于schema2code的体验

4、关于jql的体验

5、uni-start框架体验

6、uni-admin框架体验

7、部署应用体验

# 云函数

云函数的语法,是在普通的Node.js基础上补充了uniCloud的专用API

'use strict';
const db = uniCloud.database()
exports.main = async (event, context) => {
	//event为客户端上传的参数
	const collection = db.collection('unicloud-test') // 获取表'unicloud-test'的集合对象
	const res = await collection.limit(10).get() // 获取表中的10条数据,结果为json格式
	return res // 返回json给客户端
};
1
2
3
4
5
6
7
8

# 云数据库

云函数是运行在云端的 JavaScript 代码,是基于 Node.js 的扩展。

在常规的 Node API 基础上,uniCloud的云函数环境内置了uniCloud对象,这个对象内置了网络、数据库等各种API。开发者未学习过 Node.js 也没有关系,只需要看uniCloud的文档,掌握这个uniCloud对象的API即可。

每个云函数是一个js包,在云函数被调用时,由serverless调度系统分配硬件资源启动一个node环境来运行这个云函数

uniCloud提供了一个 JSON 格式的文档型数据库

它是nosql非关系型数据库

# 操作数据库的方式

云数据库支持通过云函数访问,也支持在客户端访问云数据库。

  • 传统方式云函数操作数据库,使用nodejs写云函数、使用传统的MongoDB的API操作云数据库
  • 客户端访问云数据库,称为clientDB。这种开发方式可大幅提升开发效率,避免开发者开发服务器代码,并且支持更易用的jql语法操作数据库,是更为推荐的开发方式
  • 云函数内使用jql语法操作数据库,需要使用jql扩展库。与clientDB写法一致

1、使用传统的api方式操作数据库

// 获取集合的引用
const db = uniCloud.database();
// 获取 `user` 集合的引用
const collection = db.collection('user');
1
2
3
4

# 增

// 单条插入数据
let res = await collection.add({
  name: 'Ben'
})
// 批量插入数据
let res = await collection.add([{
  name: 'Alex'
},{
  name: 'Ben'
},{
  name: 'John'
}])

1
2
3
4
5
6
7
8
9
10
11
12
13

# 删

// 清理全部数据
let res = await collection.get()
res.data.map(async(document) => {
  return await collection.doc(document.id).remove();
});

// 条件查找文档然后直接批量删除
// 删除字段a的值大于2的文档

const dbCmd = db.command
let res = await collection.where({
  a: dbCmd.gt(2)
}).remove()

// 清理全部数据
const dbCmd = db.command
let res = await collection.where({
  _id: dbCmd.exists(true)
}).remove()
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19

# 改

let res = await collection.doc('doc-id').update({
  name: "Hey",
  count: {
    fav: 1
  }
});

// 更新前
{
  "_id": "doc-id",
  "name": "Hello",
  "count": {
    "fav": 0,
    "follow": 0
  }
}
// 更新后
{
  "_id": "doc-id",
  "name": "Hey",
  "count": {
    "fav": 1,
    "follow": 0
  }
}

// 更新数组时,已数组下标作为key即可,比如以下示例将数组arr内下标为1的值修改为 uniCloud
let res = await collection.doc('doc-id').update({
  arr: {
    1: "uniCloud"
  }
})

// 更新前
{
  "_id": "doc-id",
  "arr": ["hello", "world"]
}
// 更新后
{
  "_id": "doc-id",
  "arr": ["hello", "uniCloud"]
}

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

# 查


// 筛选出所有类型为计算机的、内存为 8g 的商品
let res = await db.collection('goods').where({
  category: 'computer',
  type: {
    memory: 8,
  }
}).get()


// 高级查询指令,比如筛选出所有内存大于 8g 的计算机商品
const dbCmd = db.command // 取指令
db.collection('goods').where({
  category: 'computer',
  type: {
    memory: dbCmd.gt(8), // 表示大于 8
  }
})

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19

2、clientDB的开发方式


<unicloud-db v-slot:default="{data, loading, error, options}" collection="concats">
			<view v-if="error">{{error.message}}</view>
			<view v-else>
				<uni-list v-for="item of data">
					<uni-list-item @click="onDel(item.id)" :title="item.name" :note="item.name"></uni-list-item>
				</uni-list>
			</view>
</unicloud-db>



<template>
	<view class="content">
		<input @input="onKeyInput" placeholder="请输入搜索值" />
		<unicloud-db v-slot:default="{data, loading, error, options}" collection="goods" :where="where">
			<view v-if="error">{{error.message}}</view>
			<view v-else>
				
			</view>
		</unicloud-db>
	</view>
</template>

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24

3、使用jql操作数据库

const db = uniCloud.database()

// 使用`jql`查询list表内`name`字段值为`hello-uni-app`的记录
db.collection('list')
  .where('name == "hello-uni-app"')
  .get()
  .then((res)=>{
    // res 为数据库查询结果
  }).catch((err)=>{
    // err.message 错误信息
    // err.code 错误码
  })


// 直接关联多个表为虚拟联表再进行查询,旧写法,目前更推荐使用getTemp进行联表查询
const res = await db.collection('order,book').where('_id=="1"').get() // 直接关联order和book之后再过滤

// 使用getTemp先过滤处理获取临时表再联表查询,推荐用法
const order = db.collection('order').where('_id=="1"').getTemp() // 注意结尾的方法是getTemp,对order表过滤得到临时表
const res = await db.collection(order, 'book').get() // 将获取的order表的临时表和book表进行联表查询


// 条件查询
const res = await db.collection('goods').where(`${new RegExp(searchVal, 'i')}.test(name)`).get()

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

# 部署上线

1、app的部署

安卓、ios

使用云打包进行打包 分别生成apk和ipa文件

ios需要证书

2、发布小程序

使用hbuildx进行打包生成小程序代码

用小程序开发者工具打开,提交到对应平台服务器

3、发布h5

将打包的文件放在静态服务托管中 需要申请固定ip

更详细文档请查看官方文档 (opens new window)

上次更新: 2022/05/07, 18:36:08
分享
docker入门和实践

← 分享 docker入门和实践→

最近更新
01
族谱小程序
01-10
02
2024读书
01-03
03
文件的下载
09-01
更多文章>
Theme by Vdoing | Copyright © 2022-2025 darren Zhang | 鄂ICP备2024032161号
  • 跟随系统
  • 浅色模式
  • 深色模式
  • 阅读模式