前端栈学习(十六)-Socket
为什么需要 Socket?由于 HTTP 的限制,我们的 CatBook 的 Chat 在每次获取新的聊天时都需要刷新下网页才能加载。
因此,我们需要Socket来教服务器发送会话
什么是 Socket?Socket 是网络通信的一个抽象概念,它提供了服务器和客户端之间双向通信的能力。通过 Socket,客户端和服务器可以持续地交换数据,而不需要像传统 HTTP 请求那样频繁建立和关闭连接。
在 JavaScript 中,最常用的 Socket 技术是 WebSocket 和基于库的实现(如 Socket.IO)
Socket IO
基本用法1socketManager.getIo().emit("event_name", data);
"event_name"是订阅的主题
1socket.on("event_name", someFunction);
someFunction: 当你收到一个这样的 socket 事件时,应该做什么:
(data) => { do something with data ...
前端栈学习(十五)-初识Typescript
TS 项目骨架:weblab-workshops/skeleton at typescript
在线编辑网站: TypeScript: TS Playground - An online editor for exploring TypeScript and JavaScript
静态类型
Arrays
Enums
一般类型
语法糖
函数
异步函数
1-CSS30天挑战-序言
30 天 CSS3 是一个旨在通过每天使用 HTML5 和 CSS3 创建小型项目来帮助您提升编码技能的挑战。
项目列表
第 01 天 - 分层社交媒体图标
第 02 天 - 动画加载器
第 03 天 - 切换 div 时的文字颜色变化
第 04 天 - 带效果的按钮
第 05 天 - 呼吸效果
第 06 天 - 闪电文字效果
第 07 天 - 动画预加载器
第 08 天 - 跳动的心形
第 09 天 - 牛顿摆
第 10 天 - 替换文字动画
第 11 天 - 悬停效果按钮
第 12 天 - 鼠标悬停时填充效果
第 13 天 - 动画加载效果
第 14 天 - 动画文字背景
第 15 天 - 浮动文字效果
第 16 天 - 动画按钮
第 17 天 - 动画加载器
第 18 天 - 烟雾文字效果
第 19 天 - 粒子背景动画
第 20 天 - 按钮动画效果
第 21 天 - 弹跳球
第 22 天 - 动画图标
第 23 天 - 悬停按钮效果
第 24 天 - 动画预加载器
第 25 天 - 动画复选框
第 26 天 - 加载动画效果
第 27 天 - 呼吸效果
第 28 天 - 背景 ...
前端栈学习(十四)-身份验证
不要直接存储密码
直接存储密码容易泄露
解决方法一:使用Hash
解决方法二:使用Google登录
Sessions, Tokens, Cookie
流程客户端通过发送 Cookie,其中包含了 Session ID,服务器利用该 ID 来识别用户的会话信息。具体来说,流程如下:
1. 客户端发送请求
用户访问网站并进行登录操作(例如 /login)。
服务器验证用户凭证(如用户名和密码)后,为用户创建一个会话(Session)。
2. 服务器生成 Session
生成 Session ID:服务器生成一个唯一的 Token(如 mZIYWQyNTkyMz),并将其作为该用户会话的标识。
存储会话数据:服务器会将用户的相关数据(如用户名 username 和用户 ID user_id)与该 Session ID 关联,存储在会话存储(如内存、数据库、Redis 等)中。
例如:
1234567{ "Session ID": "mZIYWQyNTkyMz", "User Info": { ...
前端栈学习(十三)-初识数据库
我们用的是mongoDB
mongoDB的结构
**MongoDB 实例(MongoDB Instance)**:一组数据库
**数据库(Database)**(例如 Catbook 数据库):一组集合,通常对应一个 Web 应用程序
**集合(Collection)**(例如 Stories 集合):一组非常相似的数据。理想情况下,希望给定集合中的所有数据具有相同的结构,即具有相同的键和类型
**文档(Document)**(例如单个故事的数据):一个单独的 JSON 或 JavaScript 对象。应用程序中的单个数据,类似于 SQL 中的行
**字段(Field)**(例如单个故事的 content 属性):我们希望记录其值的属性,JavaScript 对象中的键
MongooseNodeJS允许的MongoDB集成库
Mongoose做了什么
连接到集群(cluster)
创建文档
与数据库交互
创建、读取、更新、删除等操作
MongoDB的集群指的是由多个 MongoDB 实例组成的系统,它们共同存储和管理数据。Mong ...
前端栈学习(十二)-异步控制流
在现代 Web 开发中,异步编程是不可或缺的一部分。本文将结合 Promises 和 async/await 的概念,帮助您深入理解 JavaScript 的异步控制流。
什么是异步编程?在 JavaScript 中,单线程模型限制了它一次只能执行一项任务。如果一个任务需要很长时间才能完成,比如从服务器获取数据,那么这会阻塞其他任务的运行。为了解决这个问题,JavaScript 提供了异步机制,使得可以在等待长时间任务完成的同时继续执行其他代码。
在异步程序中,Promises可以把我们从浪费时间中解脱,让我们运行其他代码
Promises 的基础概念Promise 是什么?Promise 是一种用于管理异步操作的对象。它的状态有三种:
Pending(进行中):初始状态,操作尚未完成。
Fulfilled(已完成):操作成功完成,并返回一个值。
Rejected(已拒绝):操作失败,并返回一个原因。
通过 Promise,我们可以更优雅地处理异步任务,避免回调函数层层嵌套的问题(即”回调地狱”)。
使用 Promise使用 .then 和 .catchPromise ...
前端栈学习(十一)-CSS的显示类型、溢出、动画以及Tailwind库
这篇博客将讨论:
CSS选择器
显示类型
内容溢出
动画
演示网站Tailwind Play
CSS选择器我们有四种不同的CSS选择器
后代选择器(空格)
子选择器(>)
一般兄弟选择器(+)
紧邻兄弟选择器(~)
虽然我们在第一篇博客已经讨论过了
12345678<div class="container"> <section class="child" id="c1"> <div>subchild</div> </section> <div class="child" id="c2">child2</div> <div class="child" id="c3">child3</div> <div class="child" id="c4&quo ...