前端栈学习(十)-建API实战
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) => ...
前端栈学习-服务器(九)、Node.js和NPM
什么是服务器？服务器是一个响应客户端请求并提供服务的系统。在 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, ...
前端栈学习(八)-react实战之路由与网络请求
总结在Workshop2当中，我们完成了这样的一个页面
在这个workshop3当中，我们将给这个页面添加路由和新的评论页面
路由我们主要用<Router />或<Link />
<Router />
有/的是绝对路径
无/的是相对路径
例子
子路由的路径是相对于其父路由的，而不是整个应用的根路径。具体来说，<DashboardHome path="/" /> 是定义在 <Dashboard> 内部的，它的路径会被解释为相对于 Dashboard 的 path="dashboard"，而不会直接作用于全局的 /。
<Link />
网络请求我们的最终目的：
当前结构:
Feed.js的Story
Step 0: 替换 Profile 组件为 Feed 组件
将原本的 Profile 组件替换成 Feed 组件，作为展示故事的主要容器。
Step 1: 声明状态，使用 GET 请求加载所有评论数据
在组件中声明状态，用来 ...
前端栈学习(七)-APIs_and_Promises
浏览器基础知识网址(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_Lifecycle_and_Hooks
什么时候应该将一个组件拆分成更小的部分？
组件代码变得太长或难以阅读 先例：建造房屋 就像你不会把整栋房子的设计图都放在一张图纸上，而是会为浴室、主卧、厨房等部分分别做具体的设计图。 React 示例：即使 <Navbar /> 组件在 App.js 中不需要被重用，你也可以把它单独提取出来，这样代码更清晰。
组件包含有自己功能的部分或区块（通常是可重用的） 先例：购物中心 在一个购物中心中，每个商店都有自己的员工、商品等，因此将每个“商店”封装成一个独立的部分是合理的。 React 示例：评论部分应该被渲染成一个可重用的 <Comment /> 组件。
组件承担了太多责任 先例：组织中的领导角色 在一个组织中，角色和任务应该分配给具体的人，而不是一个人承担所有的职责（例如：学术委员会主席、财务主管、运营主管等）。 React 示例：一个表单的提交按钮可能需要处理很多逻辑，因此可以将其提取成一个独立的组件来封装这些逻辑。
状态提升当两个子组件都需要某个状态属性时，将该状态移植到父组件，通过props来传递
React生命周期
触发: <Stea ...
前端栈学习(四)-初识react
摘要编写组件
我们将应用拆分为多个组件，每个组件放在一个独立的文件中。
每个组件都是一个函数，接收 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 提供了一种方式让你将一个大型的网页 ...
前端栈学习(三)-JS初实战
项目结构12345678910catbook-react├── food.js├── game.js├── index.html├── input.js├── README.md├── snake.js├── snakeUtils.js└── style.css
index.html123456789101112131415161718<!DOCTYPE html><html lang="en"> <head> <link rel="stylesheet" href="style.css" /> <meta charset="UTF-8" /> <meta name="viewport" content="width=device-width, initial-scale=1.0" /> <meta http-equiv=" ...