# 第四次作业

**Repository Path**: double-smile/fourth-assignment

## Basic Information

- **Project Name**: 第四次作业
- **Description**: No description available
- **Primary Language**: Unknown
- **License**: Not specified
- **Default Branch**: master
- **Homepage**: None
- **GVP Project**: No

## Statistics

- **Stars**: 0
- **Forks**: 0
- **Created**: 2023-10-26
- **Last Updated**: 2023-10-28

## Categories & Tags

**Categories**: Uncategorized

**Tags**: None

## README

# 第四次作业

# 第三部分基于uniCloud的简易备忘录

#### 3.1uniCloud

##### 3.1.1 什么是uniCloud

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

[uniCloud的web控制台地址](https://unicloud.dcloud.net.cn/pages/login/login)

![](D:\gitee\fourth-assignment\picture\1.png)

##### 3.1.2uniCloud体系构成

基本概念的阐释：

云计算中讨论的服务包括三个层次的服务：

* 基础设施即服务(IaaS)
* 平台即服务(PaaS)
* 软件即服务(SaaS)

![](D:\gitee\fourth-assignment\picture\2.png)

为了更好的理解，如下图分别所示：

![](D:\gitee\fourth-assignment\picture\3.png)

![](D:\gitee\fourth-assignment\picture\4.png)

![](D:\gitee\fourth-assignment\picture\5.png)

- uniCloud是DCloud在阿里云和腾讯云的serverless服务上封装而成的。

**Serverless** 是云计算的一种模型 。以平台即服务（PaaS）为基础，无服务器运算提供一个微型的架构，终端客户不需要部署、配置或管理服务器服务，代码运行所需要的服务器服务皆由云端平台来提供 。具有以下特点：

1）无需用户自身去维护操作系统。开发人员只需要编写云函数，选择触发云函数运行的事件就可以完成工作。

2）Serverless 无服务器让开发者关注于构建产品中的应用，而不需要管理和维护底层技术栈，且比传统云计算更为便宜。

3）传统云计算按照预留的资源收费，而无服务器按照函数执行时间收费。这也意味着细粒度的管理方式。在无服务器框架上使用资源只需为实际运行时间付费。这与传统云计算收费方式形成对比，后者用户需要为有闲置时间的计算机付费 。

4）Serverless 被誉为“开发新应用最快速的方式，同时也是总成本最低的方式”

- uniCloud包含IaaS层（由阿里云和腾讯云提供硬件和网络）和PaaS层（由DCloud提供开发环境）。
-  开发者可以自主选择uniCloud的硬件和网络资源的供应商，在阿里云版和腾讯云版之间切换。
- 开户和付费虽然通过DCloud渠道，但实际上开发者自动在云厂商处建立了账户和充值了余额。价格是云厂商的标准定价，DCloud只获取云服务厂商的返佣。
- 开发时虽使用DCloud的工具，但应用上线时，手机端是直连阿里云或腾讯云的serverless，不经由DCloud的服务器。

##### serverless详解

serverless是下一代云技术，是真正的“云”。serverless在国外兴起，但国内的发展速度已经超过了国外。微信、支付宝、百度、抖音、快应用联盟都上线了自己的serverless云开发。目前国内已经有超过60万开发者在使用serverless云开发，包括腾讯、阿里、DCloud的很多自有业务都在使用。

- 传统的云服务，让开发者免于购买实体服务器硬件，改为购买虚拟机。但开发者仍然要自己装操作系统、web服务器、数据库，自己处理热备，自己新购服务器来应对高并发，自己抗DDOS攻击...  这不是成熟的“云”！
- 真正的云计算，就像用水用电，没有复杂的门槛，即用即有、按需付费。简单回顾下用电的历史。几十年前，很多单位都有专门管电的工程师，当单位的电力负荷不够时，就需要找这个管电的工程师扩容发电机。现在这个管电工程师的岗位已经淘汰了，电已经变成随用随取、按需付费了。
-  传统云模式下，开发商仍然需要一个管服务器的工程师，当用户量激增或被攻击时，甚至需要半夜把工程师叫醒来扩容。这当然不合理。
- serverless的云，真正的把计算、存储的能力进行了云化，开发者只需要按量租用这些计算和存储能力，再也不用关心扩容和攻击。
- 开发者不再有“服务器”的概念，因为没有一台具体的机器。就像现在的你再也找不到自己的发电机一样。当用户量激增时，开发者什么都不用做，系统自动承载更高并发。开发者只需要按照对资源的消耗付费即可。
-  开发者写好云端业务代码，即js编写的云函数，通过HBuilderX部署到uniCloud上即可。
- 云端庞大的serverless资源池，有无数个node进程待命。当手机用户发起请求时，serverless系统会调配闲置的资源来运行开发者相应的云函数。serverless，让一个不懂服务器运维的开发者，可以只处理自己的业务，再不用关心热备、负载、增容、DDOS等事情。

#### 3.2开发准备

##### 1.创建项目前必须登录HBuilde X账号，如下

![](D:\gitee\fourth-assignment\picture\6.png)

如上图，登录成功后可进行uniCloud项目创建

没要账号需先行**注册**

##### 2.目前阿里云可以免费使用

注册[阿里云](https://cn.aliyun.com/)账户并实名制，如果不实名制将不可以关联云服务空间

#### 3.3创建uniCloud项目

![](D:\gitee\fourth-assignment\picture\7.png)

创建项目完成后，保证**已经登录**的情况下，关联云空间，如下图：

![](D:\gitee\fourth-assignment\picture\8.png)

可以点击新建或关联已有云空间，下图中新建云空间例子：

![](D:\gitee\fourth-assignment\picture\9.png)

点击新建按钮后，如下图：

![](D:\gitee\fourth-assignment\picture\10.png)

免费空间目前只能申请一个，如下图：

![](D:\gitee\fourth-assignment\picture\11.png)

关联选定的云空间，如下图

![](D:\gitee\fourth-assignment\picture\12.png)

关联成功如下图：

![](D:\gitee\fourth-assignment\picture\13.png)

##### 3.3.1云数据库

首先打开uniCloud Web控制台，如下图

![](D:\gitee\fourth-assignment\picture\14.png)

创建数据库表和我已经添加了数据如下图

![](D:\gitee\fourth-assignment\picture\15.png)

##### 3.3.3项目中创建云函数

在cloudfunctions文件夹上右键，选择“新建云函数/云对象”，如下图

![16](D:\gitee\fourth-assignment\picture\16.png)

选择"云函数"，函数名填写：CloudGetData,如下图

![](D:\gitee\fourth-assignment\picture\17.png)

创建后，在函数目录cloudfunctions下为该云函数生成对应的CloudGetData子目录，修改CloudGetData子目录下的index.js文件，修改为，如下图

![](D:\gitee\fourth-assignment\picture\18.png)

客户的传值包括：type 和 id，如果type为 'all‘ 说明要求获得全部备忘录的值，否则只获取一条其 _id字段 等于参数id的那条记录

之后，将第二部分简易备忘录bwl工程中的utils文件夹和static文件夹及子目录中的内容拷贝到当前工程中，如下图所示

![](D:\gitee\fourth-assignment\picture\19.png)

最后，删除 pages 目录下的 index 文件夹及其下的文件和pages.json下有关index有关的内容

##### 3.3.4创建list页面

1.创建list页面，如下图：

![](D:\gitee\fourth-assignment\picture\20.png)

2.拷贝原来的list.vue代码(来自第二部分简易备忘录)到当前页面文件中。

由于list页面使用了uni-card插件，因此到插件市场下载，并安装该插件到当前工程的uni_modules目录下，如下图：

![](D:\gitee\fourth-assignment\picture\21.png)

![](D:\gitee\fourth-assignment\picture\22.png)

![](D:\gitee\fourth-assignment\picture\23.png)

![](D:\gitee\fourth-assignment\picture\24.png)

**同样的方法，添加**uni-forms、uni-fab、uni-easyinput、uni-data-select和uni-nav-bar控件到当前工程中，过程略。

3.在methods中，修改getData方法，如下：

![]()![25](D:\gitee\fourth-assignment\picture\25.png)

运行后，界面如下

![]()![26](D:\gitee\fourth-assignment\picture\26.png)

##### 3.3.5创建detail页面

![](D:\gitee\fourth-assignment\picture\26.png)

![](D:\gitee\fourth-assignment\picture\27.png)

拷贝原来的detail.vue代码(来自第二部分简易备忘录)到当前页面文件中。

##### 3.3.5.1修改数据noteItem的定义 

![](D:\gitee\fourth-assignment\picture\28.png)

在method中，删除原来函数getTheItemFormStorage() 的定义，并新增getTheItemFromCloud 函数的定义，如下：

![](D:\gitee\fourth-assignment\picture\29.png)

##### 3.3.5.2修改onLoad

在当前页面的 onLoad(option) 方法中，修改代码，将：

​        this.getTheItemFormStorage() 替换为：this.getTheItemFromCloud()  

此时，detail页面加载时，会调用云函数getTheItemFromCloud()，该函数需要传递data参数，如下：

![](D:\gitee\fourth-assignment\picture\30.png)

type值固定为'one'，表示 detail.vue中要获得一条备忘录记录，但是该条备忘录记录的id值需要从list.vue页面中的cardClick函数传递到 detail.vue中来，因此还需要修改 list.vue中，method中的 cardClick(index) 函数。

##### 3.3.5.3修改list.vue中的传值

![](D:\gitee\fourth-assignment\picture\31.png)

在detail.vue页面中，为了获取到选择的那条备忘录记录的id值，需要修改detail.vue中的两个地方，data中增加数据定义noteId，以及在 onLoad方法中将得到id并赋值给 this.noteId 

具体如下，首先修改data 部分，如下代码所示：

![](D:\gitee\fourth-assignment\picture\32.png)

##### 3.3.5.4再次修改detail.vue中的onLoad

![33](D:\gitee\fourth-assignment\picture\33.png)

在list页面，点击当前备忘录记录，如下图：

![](D:\gitee\fourth-assignment\picture\34.png)

转到detail页面,如下图：

![](D:\gitee\fourth-assignment\picture\35.png)

#### 3.3.6更新数据

添加一个普通原函数CloudUpdateData，用于更新数据

![](D:\gitee\fourth-assignment\picture\36.png)

 CloudUpdateData目录下，index.js的代码修改如下：

![](D:\gitee\fourth-assignment\picture\37.png)

type值为’add‘，’update‘和'delete' 分别对应，新增，更新 和 删除。

getTheStorage从缓存中获得数据，这里无需使用，因为在 detail.vue的onLoad事件中，已经调用了this.getTheItemFromCloud()  返回了当前记录。所以，formSubmit()方法修改为如下：

![](D:\gitee\fourth-assignment\picture\38.png)

上述代码中，this.setTheStorage(theType, hintMessage)

仍然是写入本地缓存，因此需要修改，增加云函数的调用，不再写入本地缓存，因此代码修改为：

![](D:\gitee\fourth-assignment\picture\39.png)

至此，可以测试修改和增加备忘录（修改已有记录的标题和内容，以及状态；并且新增一条备忘录）。运行效果如下所示：

![](D:\gitee\fourth-assignment\picture\40.png)

最后，修改删除功能对应的delNote()函数，修改如下所示：

![](D:\gitee\fourth-assignment\picture\41.png)

删除功能在云函数 CloudUpdateData()中。

至此，请大家尝试使用删除功能，删除已有备忘录记录。