原文链接

上传文件一般不会直接存在服务器目录下，这样不好扩展，一般我们会用阿里云的 OSS（Object Storage Service）对象存储服务，它会自己做弹性扩展，所以存储空间是无限的。

OSS 对象存储是在一个 bucket 桶下，存放多个文件。

它是用 key-value 存储的，没有目录的概念，阿里云 OSS 的目录只是用元信息来模拟实现的。

上传文件后，我们能拿到文件 URL，但生产环境下我们不会直接用 OSS 的 URL 访问，而是会开启 CDN，用网站域名访问，最终回源到 OSS 服务。因此还需要开通 CDN 服务

不管在哪里上传，都需要 acessKeyId 和 acessKeySecret。

这个是阿里云的安全策略，因为直接用用户名密码，一旦泄漏就很麻烦，而 acessKey 泄漏了也可以禁用。而且建议用 RAM 子用户的方式生成 accessKey，这样可以最小化权限，进一步减少泄漏的风险。

客户端直传 OSS 的方式不需要消耗服务器的资源，但是会有泄漏 acessKey 的风险，所以一般都是用服务端生成临时的签名等信息，然后用这些信息来上传。

一、Typora

（PS：若使用 Obisidian 也大同小异）

二、PicGo

下载链接：https://molunerfinn.com/PicGo/

1. 图床设置

需要填 6 个表单项

1）图床配置名（这个可以随便填）

2）KeyId

3）KeySecret

4）Bucket

5）存储区域

6）存储路径

别着急，具体怎么填在下一步

2. PicGo设置

推荐把 “时间戳重命名” 打开

三、阿里云 OSS

1）在 阿里云官网 找到 对象存储 OSS，并选择立即开通

2）创建 Bucket 存储桶

• Bucket 名称就是 PicGo 配置中要填的 Bucket
• Endpoint 就是 PicGo 配置中要填的 存储区域（比如 oss-cn-hangzhou）（.aliyuncs.com不需要填）

3）创建 AccessKey ID 和 AccessKey Secret

• AccessKey ID 就是 PicGo 配置中要填的 KeyId
• AccessKey Secret 就是 PicGo 配置中要填的 KeySecret

4）在 Bucket 中新建目录

• 目录 就是 PicGo 配置中要填的 存储路径

四、测试

进阶操作

• 为图床增加自定义域名

  • 该域名需要进行 ICP 备案
  • 同时最好已经获取 SSL证书

• 使用 RAM 访问控制

  • 创建用户，选择开通 OpenAPI，获取 AccessKey ID 和 AccessKey Secret
  • 别忘了给该用户添加上有关 OSS 的权限（例如：管理对象存储服务（OSS）权限）

FAQ

1）Mac系统安装PicGo时打开报错：“PicGo.app”已损坏，无法打开。 你应该将它移到废纸篓。

解决办法，打开终端输入以下内容，””为安装路径，默认是以下路径

1	sudo xattr -d com.apple.quarantine "/Applications/PicGo.app"

按照提示输入电脑锁屏密码回车即可

2）都配置好了，但还是上传报错

确认存储区域，就是上面的 Endpoint 的地址 ，比如你的是，oss-cn-beijing.aliyuncs.com 那么这里就是 “oss-cn-beijing”，去掉阿里云的后缀

原文链接

按钮级别权限控制，怎么做？使用v-if ？可以，但不够通用。

要做权限控制，肯定需要一个code，无论是权限码还是角色码都可以，一般后端会一次性返回，然后全局存储起来就可以了

文章作者提供了三个思路

1. 函数方式

   本质上就是通过v-if，只不过是通过一个统一的权限判断方法hasPermission

2. 组件方式

   使用Authority包裹需要权限控制的按钮即可，该按钮需要的权限码通过value属性传入

3. 指令方式

   v-auth

ps：评论区有其他见解

使用装饰器配置权限标识

前端无非就是调用后端权限状态集合，根据集合控制相应dom是否渲染，怎么实现都行，麻烦的就是状态集合的约定和维护，要有严格的规范和约定。
而且，真正的权限控制只让前端处理是不严谨，后端同时也要确保相应业务功能接口的无权访问，这就要把ui、权限码、api三者关联维护起来，这就考验团队整体素质了。

挑战52天背完小猪佩奇

小猪佩奇 第一季 英文版 Peppa Pig

B 站-挑战52天背完小猪佩奇，必看flag！

谁能想象一个已经毕业过了四六级的打工人，还在这里看小猪佩奇…

顺带恢复一下我颓掉的英语记忆

Day1 Muddy Puddle

• younger brother/older brother 弟弟/哥哥（常用，little brother/big brother 更亲密更形容小孩子）

• It’s stopped raining. 雨停了（此处是现在完成时，it has 省略为 it’s）

• go and play 去玩（有时下意识会 go to play）

• have a lot of fun 玩得很开心

• Guess what we’ve been doing 猜猜我们刚才在做什么（现在完成进行时 have been doing sth. 描述刚才某段时间的一直做的事）

• Have you been watching television? 你们刚刚一直在看电视吗？

• You’ve been junmping in muddy puddles. 你们刚才在泥坑里跳

• Look at the mess you’re in. 看看你们有多脏（you are in）

• when we’ve cleaned up 当我们清理干净（when+现在完成时态的句式很常见）

Day2 Mr.Dinosaur Is Lost

• George’s favourite toy is Mr. Dinosaur. 乔治最喜欢的玩具是恐龙先生

• Sometimes, George likes to scare Peppa with Mr.Dinosaur. 有时，乔治喜欢用恐龙先生去吓佩奇

• at breakfast time/at lunch time/at supper time 在早饭/午饭/晚饭时间

• at dinner time（正餐，比较丰盛，美国常指晚饭，英国常指午饭）

• at bath time 洗澡时间

• When George goes to bed, Mr.Dinosaur is tucked up in bed with him. 当乔治睡觉的时候，恐龙先生和他睡在一起（tuck sb in/tuck sb up in bed 给某人盖被子）

• throw sth. up in the air and catch sth. when it falls back down

• try and guess 猜猜看（有时下意识会 try to guess）

• George doesn’t know where Mr.Dinosaur is. 乔治不知道恐龙先生在哪里（宾语从句）

• It is a job for detetive 侦探登场

• George always has Mr.Dinosaur have bath with him.（have sb do… 让某人做）

• Mr.Dinosaur isn’t anywhere. 恐龙先生哪儿都没有

• I was going to say that. 我正准备说这个呢

• You do love to throw Mr.Dinosaur in the air. 你确实喜欢把恐龙先生扔到空中（do 表示强调）

• There he is. 他在那儿

• It’s nice to have you back. 很高兴你回来了

Day3 Best Friend

• Suzy Sheep has come to play with Peppa. 小羊苏西来找佩奇玩

• Why don’t you go and play in your bedroom?

• So does George. 乔治也是（So do I 我也是 等同于 I do,too）

• (我也是，表否定时，Neither do I === I don’t,either , Neither am/can I, Me neither)

• Peppa and Suzy want to play on their own. 佩奇和苏西想要自己玩

  • on one’s own 不需要别人帮助 自觉自立自强，靠自己的感觉，与能力有点关系
  • by oneself 没有人陪同，表示一个人

• I’am a tiny little fairy princess. 我是一位小小仙女公主

• I am going to wave my magic wand. 我要挥舞我的魔法棒

• turn sb. into sth. 把某人变成某物 turn you into a frog 把你变成🐸

• will 和 be going to(be gonna) 的区别

  • 表将来时
    • will 聊天过程中的瞬时意愿
    • be going to 一般是经过思考规划的意愿
  • 表推测（一些细微差别）
    • will 表推测 觉得未来会发生 I think you will win
    • be going to 表推测 马上会发生 You are gonna lose. It’s going to rain.

• Someone needs to lick out the bowl. 需要帮忙舔干净这个碗

• Who’s gonna be the sick person? 谁来当病人呢？

• take one’s temperature 量某人体温

• I have a sore tummy. 我肚子有点痛 I have a sore head/stomach/throat 我头/胃/嗓子疼 === My stomach hurts.

• That tickles! 这好痒啊 That hurts. 好痛

• I hear it rumbling. 我听到隆隆叫

Day4 Polly Parrot

• granny/granpa 奶奶/爷爷

• What’s this called? 这叫什么？（例如喝了某饮料，不知道它叫什么）

• That’s what parrots do. 鹦鹉就是这样的 （That’s what dads do. 这是父亲该做的事）

• Have you finished your cake？

• Are you sure you’ve completely finished your chocolate cake? （宾语从句）

• Off you go. 去吧（但说话并不客气）

• George is a little bit shy. 乔治有一点点害羞

• Peppa and George are pretending to be parrots. 佩奇和乔治在假装他们是鹦鹉 （**pretend to do sth.**）

• Peppa is thinking of something else to say to Polly Parrot. （think of + sth. / think + 句子）

  • think of 简单地想 ps.Think of a number bewteen 1 and 10
  • think about 深入地思考 ps.What are you thinking about?

Day5 Hide and Seek

• When is it my turn to be happy. 什么时候轮到我快乐

• George has found somewhere to hide just in time. （just in time 正好，刚刚好 ）

• Here I come. 我来啦 （Genshin Impact. Here I come! 原神启动！）(对某个地方说我来了)

• What can it be? 这会是什么呢？

• Come over here. 过来 （距离远一点的 过来）come here.

Day6 The Playgroup

• playgroup 幼儿游戏班 kindergarten 幼儿园（正经的幼儿园）

• look forward to doing sth. 期待做某事

• There’ll be you and Mr.Dinosaur there to keep him company. 你和恐龙先生会陪在他身边的。（to keep him company 不定时短语，对主语的附加说明）

• brilliant 太棒了

• Shall we show George how can we paint pictures? 让我们给乔治看看我们是怎么画画的好吗？

• flower 花 petal 花瓣 stalk 茎 leaf 叶 leaves

• How’s / How are xx going? xx怎么样？

Day7 Mummy Pig at Work

• mum 英式 mom 美式
• Can we go and watch Mummy work on her computer? （看某人做某事用 watch）
• lap （坐下来的大腿，laptop computer 笔记本电脑，放在大腿上的电脑，desktop computer 台式电脑，放在桌子上）thigh 大腿
• The computer is not meant to do that. （be meant to sth. 本应该是做某事）
• What’s it? 怎么了？啥事？
• mend the computer 修电脑
• I am a bit of an expert at these things. 看来我是这方面的专家
• What on earth is going on? 现在究竟是什么情况？

Day8 Piggy in the Middle

• That’s how to catch the ball. 要这样才可以接到球 （=== You should catch the ball like this.）
• That’s what you did. 你刚刚是这样做的
• What a cheeky little piggy Peppa is. （naughty 顽劣 cheeky 淘气active 好动的 ）
• I’m just teasing you. 我只是在逗你 (tease)
• I’ve been feeling a lot of stress lately 最近我感到很大压力（现在完成进行时）
• Not really. 不太 xx （委婉的 No）
• Here’s your coffee. （你要的咖啡）
• Can you give me a hand? （你能帮帮我吗？）

Day9 Daddy Loses His Glasses

• Daddy Loses His Glasses （标题用的是一般现在时）
• Everything looks a bit soft and fuzzy. 所有东西看起来都有点模糊的。（soft 柔软的 轮廓不清的 fuzzy 模糊的）
• Have you seen my phone? 见到我手机了吗？（找东西或找人的时候，问别人有没有见过一般都用现在完成时）
• it make him very grumpy. 这让他很焦躁
• This is ridiculos. 真荒谬
• pillow 枕头 slipper 拖鞋
• bump into 撞到 knock over 碰倒
• You were sitting on them all the time! 原来你一直都坐在眼镜的上面（用过去进行时 + all the time 更适合当前语境，表达“原来”两字的意思）

Day10 Gardening

• 介词
  • in + 大地方（国家、城市）
  • at + 小地方（at the library）有时候也可以用 in
  • on + 道路
• What do we do? （通常等同于 What should we do? 我们应该做什么？）
• Exactly. 确实，没错
• We wait for it to grow. （wait for sb. to do sth. 等待某人做某事，注意 wait for）
• Why aren’t you eating? 你怎么不吃啊？（当你觉得对方应该在做某件事，但是 他没有做的时候也会用现在进行时）
• Next time you come,the seed will have growed into a plant. （时间状语从句，主将从现）（，… 好久没听到“主将从现”这个词了哈哈）

Day11 Hiccups

• hiccup 打嗝 n v （I have/get hiccups now. ）
• not while 接条件 表示没有这个条件你可以做你说的事
• You have done it all wrong. 你做的都是错的
• stick your tongue out 伸出舌头（stick out 伸出）
• turn around 转圈
• You must be given a shock. 你必须得被吓一跳
• This is just pretend scaring you. 这只是假装吓你 （这里 pretend 是作形容词）
• I’m not as little as George, I can drink as quickly as I want （**as…as…**像某人的某个特征）
• spoil the game 破坏这场游戏

Day12 Bicycles

• Let’s race to Daddy’s pumpkin.
• We have to be very careful not to bump into it. 小心别撞到它
• Watch out for my pumpkin. 小心我的南瓜
• stabilizer 辅助轮（小孩自行车后的）
• Are you coming? 你要不要来?（常用）No, I will stay here.
• Will you come? 你来吗？
• You’ve never done it before. 你之前从没这么干过
• Don’t let go. 别放手（Let go of me. 放开我 Let go of my hair. 放开我的头发）
• Keep pedalling. 继续踩踏板 （pedal 踏板 n.v.）
• for ages = for a long time 一段时间
• I’m going to win! 我要赢了！
• I squashed your pumpkin. 我压坏你的南瓜了

Day13 Secrets

• That’s all your guess. Used up! 你所有的猜测机会都用完了 （完整是 I have used up）
• What do you got there? 你手里拿着的是什么？（或者 What you got there? === What have you got there?）
• I’ll never guess. 我永远也猜不到
• On the count of three 我数到三
• I’ve got nothing else. 我什么都没有了（have got 习惯这么写）
• doughnut 甜甜圈
• Are you goint to.. 你想要..

Day14 flying a kite

• 快

  • fast 速度快 （run fast）
  • quickly 快导致时间少（don’t drink juice too quickly）

• No matter how fast you run, if there isn’t any wind, the kite won’t fly. 无论你跑多快..

• We’ll just have to wait, until the wind picks up a bit. （我们必须等，等到稍微来点风）

• I don’t want you coverd in mud. （我不想你们搞得浑身是泥）

  I think/know that + 句子 （比较正常）

  但如果是 I don’t want that you are coverd in mud. 显得怪，会误以为两句话

  I don’t want you coverd in mud. （其中 cover in mud 即补充说明 you）

  I don’t want you to get hurt. I don’t want you teaching me.

• Nonsense 胡说 I know exactly how heavy I am. 我很知道我多重

• Now that we are all in muddy, 既然现在（使用 that 表示既然的意味在里面）

• I suppose so. 我想是这样的 （更委婉 比起）

Day15 Picnic

• picnic blanket 野餐垫
• This spot looks very nice. 这地方看起来不错 (与place相比 spot更精准的一块地方)
• This looks like just the spot for our picnic!
• have a nap 小睡一下
• I certainly don’t want to run a around. 我可不想跑来跑去
• I thought you wanted to run around a bit. 你不是想到处跑跑吗
• they’ve had enough 他们已经吃够了
• So much for … …也就这么多了 （so much for your knowledge!你的才学也就这么多了！）
• if there’s any cake left over 如果有剩下的蛋糕
• What a fuss. 别大惊小怪
• All you have to do is sit here and be quiet 你要做的就是坐着并保持安静
• Scram 滚开 get it off me 从我身上走开
• Daddy is running too fast for the wasp to catch him. （以至于黄蜂抓不到他）
• I didn’t believe you would actually do it.
• You’re most welcome. 不要那么客气 （You’re most welcome to come 非常欢迎你来）

Day16 Musical Instruments

• tidy the house 整理房子
• used to 从前、以前常常（在某些语境下，暗含“常常”的意思）(通常代表现在已经不是这样了)
• didn’t used to 从前不..
• This is the violin I used to play when I was a little. 这是我小时候拉的小提琴
• I haven’t play it for a long time. 我很久没拉了
• I haven’t told her yet. 我还没和她说呢
• I hope I haven’t forgotten how.. 我希望我还没忘记如何..(拉小提琴)
• Bravo! 太棒了
• accordion 手风琴
• I think I used to be able to play it. 我记得我以前可以演奏这个的。
• Just stick to the accordion. 你还是接着拉你的手风琴吧 （stick to 坚持做某事的意味）
• Even if I say so myself 不是我自夸

Day17 Forgs and Worms and Butterflies

• What a coincidence 真巧
• Peppa is playing at being a butterfly. 佩奇在扮演一只蝴蝶
• First, you have to lie down on the ground. Then you wriggle around. 躺在地上，扭来扭去 （wriggly 蠕动的）
• Frogs aren’t as pretty as butterflies or **as wriggly as worms. **
• I like frogs the best. === I like frogs best

Day18 Dressing Up

• now for.. 现在到了..时间
• George is getting a bit bored. 乔治正逐渐变得无聊（be getting + adj 很常用）
• I’m nearly finished. 我马上做完了 === I’m nearly done.
• All done. 搞定，做完了
• I’m here to break up with you. / for your wedding. 我来这是和你分手的/我来这上参加你的婚礼的（常用）
• You really have us fooled. 你真把我们骗了（重点在我们被骗了）
• You can’t have the door closed （重点在门被关了）=== You can’t close the door

Day19 New Shoes

• I’m sure we can find them.
• Now I haven’t got any shoes to wear. === I don’t have any shoes to wear
• Poor Peppa. Your shoes were a bit old. 可怜的佩奇
• They make you look very beauty.
• I don’t want to ever take them off. （ === I don’t want to take them off forever. 常用 ever = at any time 表任何时间） Don’t ever tell me what you did.
• I don’t think you wanna go in there. 你最好别进去
• even for me，即使是我
• Peppa is in her pajamas 穿着她的睡衣
• It has been raining all night. （现在完成）
• She doesn’t want to get her shoes wet. 不想把鞋弄湿（get 常用 get my hands dirty）

Day20 Fete

• Today is the day of the school fete. （fete 用的少，amusement park 游乐园）

• the bouncy castle 充气城堡 （bouncy 有弹性的）

• there isn’t time.

• there aren’t any clothes

• I‘ve got to get my license renewed

• How do you know? 你怎么知道？

• Tigers creep very slowly 爬

• lick sth. clean 舔干净

• Let’s get you all balloon. 每个人都有气球

• I’ve got all those. 我全都有

• Most important of all 最重要的是

• I don’t seem to have any dinosaur balloon. 我似乎没有

• You don’t seem to like it.

• I’ve got an idea.

• could we have two of the long ballons?

• Can anyone guess what it is?

• kangaroo 袋鼠 giraffe 长颈鹿

• This is the best day ever. 这是最棒的一天（ever 常用 ）

Day46 End.

test

Typora Markdown

目录规划

• 知识库
  • 计算机网络
• 工作

  • 简历

  • 面试

  • LeetCode

• 阅读
• 随笔
• 旅游

图床

评论

图文

音乐

视频

一、初识Hexo

1._config.yml

了解_config.yml配置文件的参数信息。网站的 配置 信息，可以在此配置大部分的参数。

2.生成文章

1

hexo new "post title with whitespace"

生成草稿

1

hexo new draft "draft test"

预览草稿（直接使用 hexo server 是无法看到草稿的）

1

hexo server --draft

3.生成静态文件

1

hexo g

4.部署

1

hexo d

二、配置

开启文章资源文件夹

1

post_asset_folder = true

三、分类

1

hexo new page categories

四、搜索

• hexo-generator-searchdb 用于搜索

1

npm install hexo-generator-searchdb --save

然后将以下配置复制到你博客根目录下的 _config.yml 里:

1
2
3
4
5

# hexo-generator-searchdb
search:
  path: search.xml
  field: post
  format: html

• hexo-generator-feed 用于生成 RSS 订阅

1

npm install hexo-generator-feed --save

然后将以下配置复制到你博客根目录下的 _config.yml 里:

1
2
3
4
5
6
7
8
9

feed:
  type: atom
  path: atom.xml
  limit: 20
  hub:
  content:
  content_limit: 140
  content_limit_delim: " "
  order_by: -date

云计算服务通常分为三个基本类型：

• 基础设施即服务（IaaS）：提供虚拟化的计算资源，如虚拟机、存储空间、网络等。
• 平台即服务（PaaS）：提供应用程序开发和部署的平台，包括操作系统、数据库管理系统、开发工具等。
• 软件即服务（SaaS）：提供通过互联网访问的应用软件，客户无需安装即可使用这些应用。

云服务器 ECS

云服务器ECS（Elastic Compute Service）是提供可弹性伸缩的计算能力的IaaS级别云计算服务。即虚拟的物理服务器，由服务商搭建维护，用户按需租赁使用。

用户可以通过互联网远程访问这些虚拟化的计算资源，并且可以根据业务需求快速地调整资源配置，例如CPU、内存、硬盘空间等。ECS消除了传统物理服务器的硬件投资和维护成本，提供了灵活、高效、可靠的计算服务。

PS：不同厂商对云计算服务有不同的叫法，

• 阿里云 叫 云服务器 ECS（Elastic Compute Service）
• 腾讯云 叫 云服务器 CVM（Cloud Virtual Machine）
• 移动云 叫 云主机 ECS

云服务器 ECS 由什么组成？

云服务器通常包含实例、镜像、块存储、安全组、快照、网络等功能组件。

• 实例：等同于一台虚拟服务器，内含 vCPU、内存、操作系统、网络额配置、磁盘等基础计算组件。
• 镜像：等同于“装机盘”，为 ECS 实例提供操作系统和预装的软件。
• 块存储：分布式数据存储设备。
• 安全组：一种虚拟防火墙，划分安全隔离区域，实现网络访问控制
• 快照：某一时间点云盘的实时副本，常用于数据备份/恢复、应用容灾、制作镜像等。
• 网络：主要是有专有网络 VPC，在逻辑上可彻底隔离的云上私有网络。

以下是移动云的例子

实例：提供各种实例规格（CPU、内存），不同 CPU 内存比，从“1核2G”到“80核1280G”，移动云的通用型s5云主机规格，s5.large.2，vCPU 2 个，内存 4GB，s5.xlarge.2则是 4C8G

镜像：是用于创建 ECS 的模板。支持多种 Windows 和 Linux 操作系统，可以选择公共镜像、私有镜像（已部署好业务的 ECS 可创建为自定义镜像，镜像文件.qcow2）

块存储：移动云的云硬盘，有多种类型：容量型、性能型、性能优化型、高性能型

网络：虚拟私有云 VPC（Virtual Private Cloud）基于先进的SDN 技术，为云服务器、云容器、云数据库等云上资源构建隔离、私密的虚拟网络环境，使用户能够构建独立的网络空间。支持子网管理（子网是由一组IP地址组成的地址池，每个子网相当于一个分布式虚拟交换机），支持多网卡功能（创建云主机时系统自动创建一个虚拟网卡，为云主机提供虚拟网络功能）应用场景

专有宿主机 DDH

专有宿主机 （Dedicated Host，简称DDH）是专为企业用户定制优化的解决方案。具有物理资源独享、部署更灵活、配置更丰富、性价比更高等特点。专有宿主机为单租户独享物理资源，同时宿主机上可以灵活创建ECS云服务器，并和其他ECS云服务器一样，可以挂载云盘，可以通过VPC联通，具有高度的灵活性和使用便捷性。

负载均衡 SLB

负载均衡（Server Load Balancer，简称SLB）是云原生时代应用高可用的基本要素。是一种对流量进行按需分发的服务。通过将流量分发到不同的后端服务来扩展应用系统的服务吞吐能力，消除单点故障并提升应用系统的可用性。

弹性公网

弹性公网IP EIP（Elastic IP Address）是独立的公网IP资源，可与专有网络VPC类型的云服务器ECS、NAT网关、ENI网卡、私网负载均衡SLB绑定，并可以动态解绑满足灵活管理的要求。弹性公网IP可以给在云上部署的网站提供Internet访问服务。

EIP 与 ECS固定公网IP 的区别

下表描述了EIP与ECS固定公网IP的区别。

产品优势

EIP的优势如下：

• 独立购买与持有
  您可以单独持有一个EIP，作为您账号下一个独立的资源存在，无需与其它计算资源或存储资源绑定购买。
• 弹性绑定
  您可以在需要时将EIP绑定到指定的资源上，在不需要时将EIP解绑并释放，避免不必要的计费。
• 灵活配置的网络能力
  您可以根据业务需求随时调整EIP的带宽峰值，带宽峰值的修改即时生效。
• 计费灵活、成本低
  多种计费策略，支持包年包月、按固定带宽和按使用流量计费。EIP加入共享带宽后可以降低带宽成本。

虚拟私有云 VPC

虚拟私有云VPC（Virtual Private Cloud，简称VPC）是一个公共云计算资源的动态配置池，需要使用加密协议、隧道协议和其他安全程序，在民营企业和云服务提供商之间传输数据。一个VPC基本上把提供商的多租户架构变成单租户架构。

每个专有网络都由至少一个私网网段、一个虚拟路由器和至少一个交换机组成。

NAT 网关

NAT网关（NAT Gateway，简称NAT）提供公网NAT和私网NAT两种功能。公网NAT网关通过自定义SNAT、DNAT规则可为云上服务器提供对外公网服务、及主动访问公网能力；私网NAT网关(也即VPC NAT网关)可使VPC内的ECS实例通过私网地址转换服务，实现VPC与VPC之间、及VPC与线下IDC互访能力。

SSL 证书

SSL证书（Secure Sockets Layer证书）是一种安全协议，用于在互联网上的服务器和浏览器之间建立加密链接。这意味着所有在服务器和浏览器之间传输的数据都是加密的，这有助于保护敏感信息免受黑客攻击，如信用卡信息、登录凭据和个人信息等。

SSL证书的工作原理是通过使用公钥和私钥来加密数据。当用户访问使用SSL的网站时，浏览器和服务器会进行一个称为”握手”的过程，以建立一个加密连接。SSL证书还包含了证书持有人的身份信息，并由第三方机构（证书颁发机构，CA）签发和验证，以确保用户访问的网站是合法的。

可以在阿里云，申请免费证书，但免费证书的签发有效期是 3 个月（之前是 12 个月），到期要重新申请。

PS：在宝塔面板中添加 SSL 证书的密钥（key）和证书（pem），并打开强制 HTTPS，别忘了安全组里要开放 https（443）端口

对象存储 OSS

对象存储 OSS（Object Storage Service）是一款海量、安全、低成本、高可靠的云存储服务，提供最高可达 99.995 % 的服务可用性。多种存储类型供选择，全面优化存储成本。

创建 react

https://zh-hans.react.dev/learn/start-a-new-react-project

React 入门

JSX

JavaScript 和XML的缩写

在 JS 中编写 HTML 模板结构

通过 Babel 编译 成 JS

组件化开发模式

组件类型

• 函数式组件
• 类式组件

React 面向组件编程

组件三大核心属性

state

props

propType 用于对 prop 的类型和必要性的限制

refs

组件内的标签可以定义ref属性来标识自己，可以通过 ref 获取某个 dom 元素的值

• 字符串形式的 ref （不推荐），从 this.refs 中取节点

• 回调函数形式的 ref

  1	<input ref={c => this.input1 = c } type="text" placeholder="点击按钮提示数据"/>

  把 ref 所处的当前的节点放到组件实例的 input1 属性中

函数柯里化（高阶函数）

生命周期钩子

• constructor 构造器
• componentWillMount 组件将要挂载
• render 渲染
• componentDidMount 组价挂载完毕
• componentWillUnmount 组价将要卸载

生命周期（新）

React 应用（脚手架）

全局安装脚手架

1

npm i -g create-react-app

组件化编码流程

1. 拆分组件
2. 实现静态组件
3. 实现动态组件
   1. 动态显示初始化数据
      1. 数据类型
      2. 数据名称
      3. 保存在哪个组件？
   2. 交互

1
2
3

<Item {...todo}></Item>
// 等价于
<Item id={todo.id} name={todo.name} ></Item>

状态在哪里，操作状态的方法就在哪里

组件通信

父 -> 子

通过 props

子 -> 父

通过 回调函数，父组件把函数传给子组件，子组件在合适的时候，调用该函数，将值传入该函数

兄弟组件之间通信

消息订阅与发布

1
2
3

1) import PubSub from 'pubsub-js' //引入
2) PubSub.subscribe('delete', function(msg,data){ }); //订阅
3) PubSub.publish('delete', data) //发布消息

React ajax

第三方 ajax 库 axios

1

import axios from axios

脚手架配置代理

实现跨域请求

中间代理 没有 ajax 引擎，而是通过请求转发的形式，不存在跨域问题，能获取返回的数据

多个不同代理，要编写 setupProxy.js 配置具体代理规则

后端 跨域用 cors

React 路由

Redux

创建 react 项目

1

npx create-react-app react-basic

index.js

App.js

useState

数据驱动视图

直接修改原对象 是无法改变视图的

需要替换整个对象

组件样式

拓展：tailwind 样式是什么？

浏览器插件：React Developer Tools

利用 lodash 实现排序

_.ordeBy

1

npm install classnames

连续结构赋值 + 重命名

1
2
3
4
5
6
7
8
9
10

let obj = {
 a: {
 	b: {
 	 c: 1
 	}
 }
}

const {a:{b:{c:data}}} = obj;
console.log(data);

GitHub 搜索用户名

https://api.github.com/search/users?q=junglexs

Markdown教程

快捷键

• 生成代码块 option + command + C
• 源码模式 command + /
• 标题 comand + 1 或 2 、 3、 4
• 查找 comand + F
• 超链接 command + K
• 查找并替换 option + command + F
• 无序列表 option + command + U 或 - + tab
• 有序列表 option + command + L 或 1. + tab
• 代码 control + `
• 代码块 option + command + C
• 引用 option + command + Q
• 放大/缩小 shift + command + = / shift + command + -

语法与文本内容冲突

使用反斜杠\来将这些字符进行转义

1

*\*这样里面的文字就不会加粗了\*\*

使用多个反引号来创建代码块

如果你发现转义字符不起作用（例如，在某些Markdown解析器中可能会有差异），另一个方法是使用更多的反引号来创建代码块，并在里面放置你的代码

1

`` control + ` ``