开发者学堂课程【云开发 Web 应用训练营:web 实战营第3课：应用接上后端存储能力】学习笔记，与课程紧密联系，让用户快速学习知识。
课程地址：https://developer.aliyun.com/learning/course/911/detail/14415
web 实战营第3课：应用接上后端存储能力
目录
一.函数计算部署原理
二.创建 RDS 实例
三.用 oss 上传和展示图片
四.Midway Serverless MySQL 数据库
五.云开发平台集成了 NAS 功能
六.head 内的配置
一.函数计算部署原理
基础原理
阿里云网络分地域，每个用户可以创建虚拟网络。
用 RDS 数据库实现 Todolist
主要用到函数计算，云开发平台把代码直接部署到函数计算上，生成一个临时域名。
阿里云网络分地域，一个地域可以看成一个内网，用户可以创建自己虚拟网络，可以和其他用户网络来区分隔离。函数计算本身是一个公用的虚拟网络
链路
二.创建 RDS 实例
效果
资源准备
创建 VPC 和交换机
登录 VPC 控制台
规划了网络网段
创建 RDS 实例
1.在 RDS 下创建一个数据库，获得数据库名·
2.创建账号，获得用户名密码
3.添加白名单，交换机的 IP 段
4.登录数据库建表，参考代码 readme
表格代码
CREATE TABLE 'todo`(
'id" bigint( 20）NOT NULL AUTO_INCREMENT
,'todo varchar( 255) NOT NULL,
'status` int(11)NOT NULL,
'gmt_create’timestamp NOT NULLDEFAULT CURRENT_TIMESTAMP ON UPDATE
CURRENT__TIMESTAMP,
）ENGINE=InnoDB DEFAULT CHARSET=utf8;
应用的环境配置会在运行的时候注入到环境变量中去
将数据库名称填入应用配置中去
创建安全组
安全组 ecs 的功能（网卡）属于服务器，是一个虚拟防火墙
允许3306入方向流量
MySQL 基础端口是3306
云开发平台:
·创建应用．解决方案为:Midway Serverless MySQL 数据库示例·
应用环境管理．设置 woc. vswitch，安全组。
应用配置管理．设置数据库地址，数据库名．数据库端口，数据库用户名密码.
MIDwAY_RDS_HOST : RDS 实例内网地址
MIDWAY_RDS_DBNAME ∶数据库名 MIDWAY_RDS_USERNAME ∶数据库用户名MIDwAY_RDS_PASSwORD ∶数据库密码- MIDwAY_RDS_PORT ; RDS 实例内网端口
存储效果
NRAS 本地路径: worikbanch_nas_path＝/wnt/wbreWrmteFle NAS本地路轻:J/mnt/wb,存在！
当前文件长度:184
NAS 本地路径: workbonch_ras path ＝/rmnt/wb
2020-12-24 09:23:56的函数计算服务写入！2020-12-24 09:24:31函数计算服务写入！2020-12-24 09:24:38函数计算服务写入！
三.用 oss 上传和展示图片
用户在网站上传图片如何展示
原理
云开发平台函数计算本身是无法接受图片上传
OSS 通过公网往外上传再读取数据，提供了临时上传加密
阶段一、资源准备:
创建 OSS-bucket
Bucket 可以认为存储文件的集合
设置跨域
打开自己的 OSS Bucket 概览页，在「基础设置」中找到「跨域访间」
设置权限，公共读
需要临时授权
创建 ram 子账号，AK，SK，授权 OSS 访问
·阶段二、云开发平台:
创建应用，解决方案为︰空应用(Nodejs/FC)
添加静态页面 index.html 。添加接口 osstoken.is.
应用配置管理,
- OSSBUCKET : OSS 的 bucket 名称
OSSDIR :日录
REGION :地域
AKID : ak
AKSK : sk
如果你的数据库中没有 todo 的表,可以参考如下键表spl来创建
‘’’SQL
CREATE TABLE ‘todo’(
‘id ‘bigint(20) NOT NULL AUTO_ INCREMENT,
‘todo’ varchar(255) NOT NULL,
‘statusint’(11) NOT NULL,
‘gnt_ create' timestamp NOT NULL DEFAULT CURRENT TIMESTANP ON UPDATECURRENT TIMESTAMP ,
PRIMARY KEY ( ‘id’ )
)ENGINE=InnoDB DEFAULT CHARSET=utf8;
Ja
exports . dbConfig . {
host: process . env.MIDWAY RDS HOST,
port: process. env MIDWAY RDS_ PORT II 3306,
Database: process. env MIDWAY RDS_ DBNAME,
username:process . env MIDWAY RDS_ USERNAME,
password: process . env MIDWAY RDS PASSWORD
};
return exports;
};
四.Midway Serverless MySQL 数据库
云开发平台:
创建应用，解决方案为: Midway Serverless MySQL 数据库示例:
应用环境管理，设置 vpc，vswitch, 安全组。
应用配置管理，设置数据库地址，数据库名，数据库端口，数据库用户名密码。
● MIDWAY_ RDS_ HOST : RDS 实例内网地址
● MIDWAY_ RDS_ DBNAMET :数据库名
●MIDWAY RDS USERNAME :数据库用户名
●MIDWAY_ RDS_ PASSWORD :数据库密码
●MIDWAY RDS_ PORT : RDS 实例内网端口
五.云开发平台集成了 NAS 功能:
Nsa 可以理解为网盘
基础原理
函数计算访问 VPC 需要设置
需要在 VPC 准备需要用的资源，在云开发平台进行部署、访问和测试。
步骤
●创建应用，解决方案为:空应用(Java/FC)
●应用环境管理，设置 vpc, vswitch, 安全组，NAS。
●应用配置管理，设置 NAS 环境。
nas mount path : nas挂载地址
部署，访问/file
阶段一、资源准备:
创建 OSS-bucket
设置跨域
设置权限，公共读
创建 ram 子账号，AK, SK, 授权 OSS 访问
阶段二、云开发平台:
创建应用，解决方案为:空应用(Nodejs/FC)
添加静态页面 index.html , 添加接口 osstoken.is 应用配置管理，
OSSBUCKET : OSS的bucket 名称
OSSDIR:目录
REGION: 地域
AKID: ak
AKSK: sk
<?php
function handler($event, $context) [
Sconfig = array(
"dir' => getenv('OSSDIR'), 11 Lft8*
bucket => getenv('OSSBUCKET),// Bucket 8#
'region' = getenv('REGION),/l OSS FFCER Region
accessKeyld' = getenv('AKID'),// TÊßEG Access key ID
accessKeySecret' => getenv('AKSK'),/1 Access key secret
'expAfter => 3600, 11签名失效时间，秒
'maxSize' => 1048576000 1IeRtR-
);
Shost . https://' . $config['bucket] . 'oss-' . Sconfig[region'] . .aliyuncs.com';
Snow = strtotime('now);
SexpireTime = $now + $config expAfter];
Sexpiration . gmdate('Y-m-dITH;í:slZ, SexpireTime);
Spolicy = array(
expiration" => Sexpiration,
conditions" => array(
array( content-length-range", 0, $config['maxSize]),
六.head 内的配置
标签页 icon 图标
图标的文件名要求以 favicon.ico 命名，文件需要与 index.html 文件同级存储
使用方法：<link rel="shortcut icon" href="favicon.ico" type="image/x-icon"
CSS 分级引入
css 文件设置需要根据功能进行分层管理：目的是为了提取出多个页面公共的部分，提供多个 HTML 同时引用。
公共的部分也可以划分范围：有的是所有网站能用的，有的是某几个网站公共的部分
CSS 常见的分层组织：清除默认样式的 CSS 、网站的公共样式 CSS 、每个页面独有的 CSS
注意书写顺序，引入多层 css 时，需要按照后面的层叠前面的 css 进行设置，使用页面独有的样式层叠公共的样式
清除默认样式
使用范围：所有的网站都能用
命名的习惯：reset.css
引入时作为第一层引入
注意：reset.css 文件写完后不允许再次更改
公共样式
使用范围：单独的一个网站所有的页面、几个页面
制作方法：找到公共部分，划分成不同的模块分别进行.css 文件的书写
命名习惯：common.css 或者模块名. css
公共文件中的类名一般不要在其他的 css 文件中再用
引入顺序：一般在 reset.css 的后面，单独样式文件的前面
页面独有样式
使用范围：单独的一个 HTML 页面
命名习惯：一般与 HTML 的文件名保持一致，如果拆分的更细致可以使用多个单词的拼写，例如 index_banner.css
引入顺序：所有公共样式的后面
注意：使用单独样式文件去层叠前面公共样式时，需要注意选择器权重
