这篇博客将讨论： 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 ...

Use api Route for Requestsapi.js 1234567891011121314151617181920/*|--------------------------------------------------------------------------| api.js -- server routes|--------------------------------------------------------------------------|| This file defines the routes for your server.|*/const express = require("express");// TODO-1 add routerconst router = express.Router();// TODO-5 migrate api/test endpoint from server.jsrouter.get("/test", (req, res) => ...

什么是服务器？服务器是一个响应客户端请求并提供服务的系统。在 Web 开发中，服务器通过 请求-响应 的模式与客户端通信。 为什么需要服务器？ 文件访问：集中存储和管理文件。 集中化：统一管理数据和业务逻辑。 安全性：通过服务器控制访问权限，保护数据。 服务器如何工作？每个服务器都绑定到计算机上的一个端口（如 80、443）。客户端通过 协议://域名:端口 的方式连接到服务器。 例如： 1http://localhost:3000 localhost 表示本地计算机。 3000 是服务器监听的端口。 使用本机作为服务器实际上，每台计算机都可以运行服务器代码，只需要启动一个服务程序。例如： 12345678910const express = require("express");const app = express();app.get("/", (req, res) => { res.send("Hello, Server!");});app.listen(3000, ...

总结在Workshop2当中，我们完成了这样的一个页面 在这个workshop3当中，我们将给这个页面添加路由和新的评论页面 路由我们主要用<Router />或<Link /> <Router /> 有/的是绝对路径 无/的是相对路径 例子 子路由的路径是相对于其父路由的，而不是整个应用的根路径。具体来说，<DashboardHome path="/" /> 是定义在 <Dashboard> 内部的，它的路径会被解释为相对于 Dashboard 的 path="dashboard"，而不会直接作用于全局的 /。 <Link /> 网络请求我们的最终目的： 当前结构: Feed.js的Story Step 0: 替换 Profile 组件为 Feed 组件 将原本的 Profile 组件替换成 Feed 组件，作为展示故事的主要容器。 Step 1: 声明状态，使用 GET 请求加载所有评论数据 在组件中声明状态，用来 ...

浏览器基础知识网址(URL)学名: 统一资源定位符 组成 网络协议类型:HTTP、HTTPS、FTP等 域名:如www.mudcloud.fun 资源在浏览器中的位置:有时以文件路径形式出现,有时以路由形式出现. 比如我们一看到 URL https://www.sample.com/编程/测试音频.mp3，就知道这是在获取域名为 sample.com 的服务器中，编程文件夹下的 测试音频.mp3 文件。 比如扇贝编程首页的 URL 是 https://www.bailog.top/archives/，其中的 /archives/ 是资源对应的路由，只有提供网络服务这一端知道资源到底在哪里。 锚点:如https://www.bailog.top/2023/12/14/Python-tree递归-tree递归/#总结后面中的#总结，用于定位文章对应的内容。 网络请求浏览器只是一个“中转站”，并没有保存网站内容。我们浏览网页，是在通过浏览器，跟提供资源内容的 服务器 通信。它的实际过程是这样的： 我们在浏览器输入 网址（URL）； 浏览器根据网址，调用我们设备的网络能力，找到 ...

什么时候应该将一个组件拆分成更小的部分？ 组件代码变得太长或难以阅读 先例：建造房屋 就像你不会把整栋房子的设计图都放在一张图纸上，而是会为浴室、主卧、厨房等部分分别做具体的设计图。 React 示例：即使 <Navbar /> 组件在 App.js 中不需要被重用，你也可以把它单独提取出来，这样代码更清晰。 组件包含有自己功能的部分或区块（通常是可重用的） 先例：购物中心 在一个购物中心中，每个商店都有自己的员工、商品等，因此将每个“商店”封装成一个独立的部分是合理的。 React 示例：评论部分应该被渲染成一个可重用的 <Comment /> 组件。 组件承担了太多责任 先例：组织中的领导角色 在一个组织中，角色和任务应该分配给具体的人，而不是一个人承担所有的职责（例如：学术委员会主席、财务主管、运营主管等）。 React 示例：一个表单的提交按钮可能需要处理很多逻辑，因此可以将其提取成一个独立的组件来封装这些逻辑。 状态提升当两个子组件都需要某个状态属性时，将该状态移植到父组件，通过props来传递 React生命周期 触发: <Stea ...

先欠着

摘要编写组件 我们将应用拆分为多个组件，每个组件放在一个独立的文件中。 每个组件都是一个函数，接收 props 作为输入，并返回 JSX（类似 HTML 的代码）。 () 允许我们进入一个 JSX 环境。 在 JSX 环境中，{} 允许我们进入一个迷你 JS 环境。 传递和使用 Props 我们通过 <Post text="I love weblab" /> 将 props 传递给子组件。 在子组件中，我们使用 props.text 来读取传入的 props。 声明 State 状态 使用 const [something, setSomething] = useState(initialValue) 来声明 state 变量。 CSS 样式 React 中使用 className 来替代 HTML 中的 class 属性，以便应用 CSS 样式。 编写组件组件树 首先我们需要先把页面拆分成组件树: React 是一个框架，它允许你将网站拆分成可复用的组件。 这意味着 React 提供了一种方式让你将一个大型的网页 ...