docs: adjust docs (#26)
This commit is contained in:
alinhu1 authored and GitHub committed
1 parent
c85b468f55
commit
0a9ec71b14
41 files changed
+34
-12
No files matched your search
@@ -0,0 +1,8 @@
|
||||
{
|
||||
"label": "完整指南",
|
||||
"position": 3,
|
||||
"link": {
|
||||
"type": "generated-index"
|
||||
}
|
||||
}
|
||||
|
||||
@@ -0,0 +1,7 @@
|
||||
{
|
||||
"label": "访问HTML网页的流程",
|
||||
"position": 1,
|
||||
"link": {
|
||||
"type": "generated-index"
|
||||
}
|
||||
}
|
||||
Binary file not shown.
|
After Width: | Height: | Size: 27 KiB |
Binary file not shown.
|
After Width: | Height: | Size: 16 KiB |
Binary file not shown.
|
After Width: | Height: | Size: 65 KiB |
Binary file not shown.
|
After Width: | Height: | Size: 9.4 KiB |
@@ -0,0 +1,75 @@
|
||||
---
|
||||
sidebar_position: 1
|
||||
---
|
||||
|
||||
# 访问 HTML 网页的流程
|
||||
|
||||
我们将通过 `http-server` 来模拟访问 HTML 网页的过程，从浏览器、网络和服务器这几个方面详细介绍。
|
||||
|
||||
## 创建index.html
|
||||
1. 对于创建`index.html`文件，可以参考[使用VScode](https://idealjs.github.io/full-stack-tutorial/docs/web/hello_world/use_vscode)文档
|
||||
2. 在`index.html`文件输入内容，可以参考[第一个页面(hello world)](https://idealjs.github.io/full-stack-tutorial/docs/web/hello_world/first_page)文档
|
||||
|
||||
## 安装http-server
|
||||
运行以下命令进行安装，其中`-g`代表全局安装
|
||||
```
|
||||
npm install -g http-server
|
||||
```
|
||||
|
||||
## 启动http-server
|
||||
### 1.进入文件夹
|
||||
安装完成并创建好`index.html`文件后，就可以通过以下命令进入包含`index.html`文件的文件夹
|
||||
```
|
||||
cd ~/test
|
||||
```
|
||||
### 2.启动服务
|
||||
在控制台运行以下命令来启动服务
|
||||
```
|
||||
http-server
|
||||
```
|
||||
启动成功后，命令行会输出以下网址
|
||||
|
||||
这时，你可以在浏览器中输入 `http://127.0.0.1:8080` 或者`http://localhost:8080` 来访问你的网页
|
||||
|
||||
## 无痕模式
|
||||
用户可以使用以下快捷键，打开无痕窗口
|
||||
```
|
||||
Ctrl+Shift+N
|
||||
```
|
||||
按下`F12`，进入检查
|
||||
|
||||
|
||||
## 先决条件
|
||||
- 你需要已经安装并启动 `http-server`。
|
||||
|
||||
## 浏览器的工作步骤
|
||||
|
||||
### 1. 建立 TCP 连接
|
||||
浏览器会向 `127.0.0.1:8080` 发送建立 TCP 连接的请求。服务器收到请求后，会确认客户端的身份，然后向客户端回复消息，从而建立起服务器与客户端之间的连接。
|
||||
|
||||
### 2. 发送 GET 请求
|
||||
浏览器会向服务器发送一个路径为 `/` 的 GET 请求。
|
||||
|
||||
|
||||
|
||||
## 服务器的工作步骤
|
||||
|
||||
### 1. 查找文件
|
||||
当服务器接收到浏览器的请求后，就像一位仓库管理员，会在众多文件中查找 `index.html` 文件。
|
||||
|
||||
|
||||
|
||||
### 2. 生成 HTTP 响应
|
||||
服务器找到文件后，会对其进行处理，将其转换为适合在网络中传输的 HTTP 响应，如同把货物包装好以便运输。
|
||||
|
||||
### 3. 发送响应
|
||||
服务器会通过之前与浏览器建立的“运输通道”（TCP 连接），将生成的 HTTP 响应发送给浏览器。
|
||||
|
||||
## 渲染页面
|
||||
|
||||
### 1. 接收资源并渲染
|
||||
- 浏览器接收到资源后解析HTML、CSS和JavaScript
|
||||
- 浏览器根据解析结果构建页面结构
|
||||
|
||||
### 2. 显示页面
|
||||
页面渲染完成后，就会展示给用户。
|
||||
@@ -0,0 +1,7 @@
|
||||
{
|
||||
"label": "react的入门",
|
||||
"position": 4,
|
||||
"link": {
|
||||
"type": "generated-index"
|
||||
}
|
||||
}
|
||||
@@ -0,0 +1,198 @@
|
||||
---
|
||||
sidebar_position: 2
|
||||
---
|
||||
|
||||
# 如何使用react+ts编写前端todo list
|
||||
本文将编写一个简单的前端todo list应用，从进入项目后，逐步实现增加，删除，筛选的功能
|
||||
|
||||
## 先决条件
|
||||
1. 已创建react ts工程
|
||||
|
||||
>**提示**
|
||||
若未创建react ts工程，可以参考[使用vite创建react ts工程](https://github.com/idealjs/full-stack-tutorial/blob/main/docs/react/react_ts.md)文档
|
||||
|
||||
## 项目初始化
|
||||
打开react ts工程
|
||||
|
||||
## 编写todo list结构及功能
|
||||
在`App.tsx`中，通过以下代码，设计结构并实现todo list的功能
|
||||
```
|
||||
//导入依赖
|
||||
import React, { useState } from 'react'
|
||||
import './App.css'
|
||||
|
||||
//定义全局变量，用于生成新数组的id
|
||||
let nextId = 4
|
||||
|
||||
function App() {
|
||||
|
||||
//定义数组
|
||||
const [products, setProducts] = useState([
|
||||
{ name: '吃饭', completed: false, id: 1 },
|
||||
{ name: '睡觉', completed: true, id: 2 },
|
||||
{ name: '打豆豆', completed: true, id: 3 },
|
||||
])
|
||||
const [inputValue, setinputValue] = useState('')
|
||||
|
||||
|
||||
|
||||
//在input中输入的值
|
||||
const handleInputValue = (event: React.ChangeEvent<HTMLInputElement>) => {
|
||||
const value = event.target.value;
|
||||
setinputValue(value)
|
||||
console.log('当前的值', value);
|
||||
|
||||
}
|
||||
|
||||
//在输入框中按下回车键的事件
|
||||
const handleKeyDown = (event: React.KeyboardEvent<HTMLInputElement>) => {
|
||||
if (inputValue === '') {
|
||||
return
|
||||
}
|
||||
if (event.key === 'Enter') {
|
||||
const newProduct = {
|
||||
name: inputValue.trim(),
|
||||
completed: false,
|
||||
id: nextId++
|
||||
}
|
||||
|
||||
setProducts([...products, newProduct]);
|
||||
setinputValue('')
|
||||
console.log(`按下回车键的值:${inputValue}`);
|
||||
}
|
||||
|
||||
}
|
||||
|
||||
//切换completed的状态
|
||||
const CompleteStatus = (id:number)=>{
|
||||
setProducts(
|
||||
products.map((product) =>
|
||||
product.id === id ? {...product,completed: !product.completed} : product)
|
||||
)
|
||||
}
|
||||
|
||||
//筛选功能的实现
|
||||
const [filter,setFilter] = useState<'all'|'active'|'completed'>('all')
|
||||
|
||||
const onShow = products.filter((product) => {
|
||||
if(filter === 'active'){
|
||||
return !product.completed
|
||||
}else if(filter === 'completed'){
|
||||
return product.completed
|
||||
}else{
|
||||
return true
|
||||
}
|
||||
})
|
||||
|
||||
const count = products.filter((product) => !product.completed).length
|
||||
|
||||
//渲染组件
|
||||
return (
|
||||
<>
|
||||
<div>
|
||||
<h1>TODO LIST</h1>
|
||||
<input
|
||||
className="input-todo"
|
||||
type='text'
|
||||
placeholder='您想做点什么'
|
||||
onChange={handleInputValue}
|
||||
onKeyDown={handleKeyDown}
|
||||
value={inputValue}
|
||||
></input>
|
||||
<ul>
|
||||
{/* {TodoItem} */}
|
||||
{onShow.map(product => (
|
||||
<li key={product.id}>{product.name}{' '}
|
||||
<span className={`icon-complete ${product.completed ? 'icon-complete-active' : ''}`}
|
||||
onClick={() => CompleteStatus(product.id)}
|
||||
>
|
||||
</span>{' '}
|
||||
<button onClick={() => {
|
||||
setProducts(products.filter((a) => a.id !== product.id));
|
||||
}}>删除</button>
|
||||
</li>
|
||||
))}
|
||||
|
||||
</ul>
|
||||
<div>
|
||||
<span>还有<span>{count}</span>个未完成</span>
|
||||
<div className='filter-btn-group'>筛选
|
||||
<button onClick={()=> setFilter('all')}>全部</button>
|
||||
<button onClick={()=> setFilter('active')}>未完成</button>
|
||||
<button onClick={()=>setFilter('completed')}>已完成</button>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
</>
|
||||
)
|
||||
}
|
||||
|
||||
export default App
|
||||
```
|
||||
## 设计todo list的样式
|
||||
在`App.css`中，通过以下代码，设计todo list的样式
|
||||
```
|
||||
#root {
|
||||
max-width: 1280px;
|
||||
margin: 0 auto;
|
||||
padding: 2rem;
|
||||
text-align: center;
|
||||
}
|
||||
|
||||
.logo {
|
||||
height: 6em;
|
||||
padding: 1.5em;
|
||||
will-change: filter;
|
||||
transition: filter 300ms;
|
||||
}
|
||||
.logo:hover {
|
||||
filter: drop-shadow(0 0 2em #646cffaa);
|
||||
}
|
||||
.logo.react:hover {
|
||||
filter: drop-shadow(0 0 2em #61dafbaa);
|
||||
}
|
||||
|
||||
@keyframes logo-spin {
|
||||
from {
|
||||
transform: rotate(0deg);
|
||||
}
|
||||
to {
|
||||
transform: rotate(360deg);
|
||||
}
|
||||
}
|
||||
|
||||
@media (prefers-reduced-motion: no-preference) {
|
||||
a:nth-of-type(2) .logo {
|
||||
animation: logo-spin infinite 20s linear;
|
||||
}
|
||||
}
|
||||
|
||||
.card {
|
||||
padding: 2em;
|
||||
}
|
||||
|
||||
.read-the-docs {
|
||||
color: #888;
|
||||
}
|
||||
|
||||
.icon-complete{
|
||||
display: inline-block;
|
||||
width: 20px;
|
||||
height: 20px;
|
||||
border: solid 1px #ddd;
|
||||
border-radius: 50%;
|
||||
}
|
||||
|
||||
.icon-complete-active::after{
|
||||
content: '√';
|
||||
color: green;
|
||||
}
|
||||
```
|
||||
|
||||
## 运行项目
|
||||
按下快捷键`Ctrl + ~`,打开终端，输入以下命令，运行项目
|
||||
```
|
||||
npm run dev
|
||||
```
|
||||
|
||||
@@ -0,0 +1,33 @@
|
||||
---
|
||||
sidebar_position: 1
|
||||
---
|
||||
|
||||
# 使用vite创建react ts工程
|
||||
React 应用程序是由组件组成的。一个组件是 UI（用户界面）的一部分，它拥有自己的逻辑和外观。组件可以小到一个按钮，也可以大到整个页面。
|
||||
|
||||
## 项目初始化
|
||||
### 1. 创建react+ts项目
|
||||
按下快捷键`Ctrl + ~`,打开终端，运行以下命令
|
||||
```
|
||||
npm create vite@latest
|
||||
```
|
||||
|
||||
根据提示，输入项目名字并选择react，再选择TypeScript
|
||||
|
||||
### 2. 打开项目
|
||||
运行以下命令，进入项目
|
||||
```
|
||||
cd react-ts-test1
|
||||
```
|
||||
|
||||
### 3. 安装依赖
|
||||
运行以下命令，安装依赖
|
||||
```
|
||||
npm install
|
||||
```
|
||||
|
||||
### 4. 运行项目
|
||||
输入以下命令,运行项目
|
||||
```
|
||||
npm run dev
|
||||
```
|
||||
Binary file not shown.
|
After Width: | Height: | Size: 64 KiB |
@@ -0,0 +1,7 @@
|
||||
{
|
||||
"label": "vite的入门",
|
||||
"position": 2,
|
||||
"link": {
|
||||
"type": "generated-index"
|
||||
}
|
||||
}
|
||||
@@ -0,0 +1,35 @@
|
||||
---
|
||||
sidebar_position: 1
|
||||
---
|
||||
|
||||
# vite的入门
|
||||
vite 是一个现代化的前端构建工具，旨在提供快速的开发体验和高效的生产构建。
|
||||
|
||||
## 什么是vite
|
||||
访问网站 https://vitejs.cn/vite3-cn/guide/
|
||||
|
||||
## 创建vanilla ts工程
|
||||
### 打开终端
|
||||
使用快捷键`Ctrl+ ~` 打开终端
|
||||
|
||||
### 创建项目
|
||||
1. 输入以下命令，创建项目
|
||||
```
|
||||
npm create vite@latest
|
||||
```
|
||||
2. 根据提示，输入名字并选择vanilla，再选择typescript
|
||||
|
||||
3. 输入以下命令,进入项目
|
||||
```
|
||||
cd vanilla-ts-test
|
||||
```
|
||||
|
||||
4. 输入以下命令安装依赖
|
||||
```
|
||||
npm install
|
||||
```
|
||||
|
||||
5. 输入以下命令运行项目
|
||||
```
|
||||
npm run dev
|
||||
```
|
||||
@@ -0,0 +1,7 @@
|
||||
{
|
||||
"label": "vanilla ts工程",
|
||||
"position": 3,
|
||||
"link": {
|
||||
"type": "generated-index"
|
||||
}
|
||||
}
|
||||
Binary file not shown.
|
After Width: | Height: | Size: 48 KiB |
@@ -0,0 +1,200 @@
|
||||
---
|
||||
sidebar_position: 1
|
||||
---
|
||||
# 如何使用html+ts编写前端todo list
|
||||
|
||||
## 先决条件
|
||||
1. 已创建vanilla ts工程
|
||||
|
||||
>**提示**
|
||||
若未安装vanilla ts工程，可以参考[vite的入门](https://github.com/idealjs/full-stack-tutorial/blob/main/docs/vite/vite.md)文档
|
||||
|
||||
## 项目初始化
|
||||
打开vanilla ts工程
|
||||
|
||||
## 编写HTML结构
|
||||
在`index.html`中，通过以下代码，编写todo list的样式和基本结构
|
||||
```
|
||||
<!DOCTYPE html>
|
||||
<html lang="en">
|
||||
|
||||
<head>
|
||||
<meta charset="UTF-8">
|
||||
<meta name="viewport" content="width=device-width, initial-scale=1.0">
|
||||
<title>Document</title>
|
||||
<style>
|
||||
.icon-complete {
|
||||
display: inline-block;
|
||||
width: 20px;
|
||||
height: 20px;
|
||||
border: solid 1px #ddd;
|
||||
border-radius: 50%;
|
||||
}
|
||||
|
||||
.icon-complete-active {
|
||||
border-color: green;
|
||||
text-align: center;
|
||||
}
|
||||
|
||||
.todo-item {
|
||||
margin-bottom: 5px;
|
||||
}
|
||||
|
||||
.icon-complete-active::after {
|
||||
content: "√";
|
||||
color: green;
|
||||
|
||||
}
|
||||
|
||||
.item-complete .todo-text {
|
||||
color: #999;
|
||||
text-decoration: line-through;
|
||||
}
|
||||
</style>
|
||||
</head>
|
||||
|
||||
<body>
|
||||
<div>
|
||||
<input class="input-todo" type="text" placeholder="您想做点什么?">
|
||||
|
||||
|
||||
<ul class="todo-list">
|
||||
<li class="todo-item">
|
||||
<span class="icon-complete" onclick="onClickCompleteBtn(0)"></span>
|
||||
<span class="todo-text">吃饭</span>
|
||||
<button class="btn-complete">完成</button>
|
||||
<button class="deleted" onclick="deleteItem(0)">删除</button>
|
||||
</li>
|
||||
<li class="item-complete todo-item">
|
||||
<span class="icon-complete icon-complete-active" onclick="onClickCompleteBtn(1)"></span>
|
||||
<span class="todo-text">睡觉</span>
|
||||
<button class="btn-complete">完成</button>
|
||||
<button class="deleted" onclick="deleteItem(1)">删除</button>
|
||||
</li>
|
||||
<li class="item-complete todo-item">
|
||||
<span class="icon-complete icon-complete-active" onclick="onClickCompleteBtn(2)"></span>
|
||||
<span class="todo-text">打豆豆</span>
|
||||
<button class="btn-complete">完成</button>
|
||||
<button class="deleted" onclick="deleteItem(2)">删除</button>
|
||||
</li>
|
||||
</ul>
|
||||
<div>
|
||||
<span>还有<span class="active-num">1</span>个未完成</span>
|
||||
<div class="fliter-btn-group">
|
||||
筛选:
|
||||
<button class="filter-btn filter-btn-all" data-complete="all">全部</button>
|
||||
<button class="filter-btn filter-btn-active" data-complete="false">未完成</button>
|
||||
<button class="filter-btn filter-btn-completed" data-complete="true">已完成</button>
|
||||
<button class="btn-clear">清空</buttosn>
|
||||
</div>
|
||||
|
||||
</div>
|
||||
|
||||
</div>
|
||||
<script src="./src/main.ts">
|
||||
</script>
|
||||
</body>
|
||||
|
||||
</html>
|
||||
```
|
||||
## 编写TypeScript逻辑
|
||||
在`main.ts`中，编写以下代码，实现todo list的功能
|
||||
```
|
||||
//定义接口TodoItem
|
||||
interface TodoItem {
|
||||
name: string;
|
||||
completed: boolean;
|
||||
}
|
||||
|
||||
//初始化数组
|
||||
let list: TodoItem[] = [
|
||||
{ name: '吃饭', completed: false },
|
||||
{ name: '睡觉', completed: true },
|
||||
{ name: '打豆豆', completed: true },
|
||||
];
|
||||
|
||||
//监听在输入框中按下回车键的事件
|
||||
document.querySelector('.input-todo')!.addEventListener('keyup', function (e: Event) {
|
||||
const event = e as KeyboardEvent;
|
||||
const target = event.target as HTMLInputElement;
|
||||
if (!target.value?.trim()) {
|
||||
return;
|
||||
}
|
||||
if (event.key === 'Enter') {
|
||||
const name = target.value;
|
||||
const item: TodoItem = { name, completed: false };
|
||||
list.push(item);
|
||||
render(list);
|
||||
target.value = '';
|
||||
}
|
||||
});
|
||||
|
||||
//实现筛选功能
|
||||
document.querySelectorAll('.filter-btn').forEach((el) => {
|
||||
el.addEventListener('click', filterCompletedStatus);
|
||||
});
|
||||
|
||||
function filterCompletedStatus(e: Event) {
|
||||
const target = e.target as HTMLElement;
|
||||
const completed = target.dataset.complete;
|
||||
|
||||
if (completed === 'all') {
|
||||
render(list);
|
||||
return;
|
||||
}
|
||||
|
||||
const newList = list.filter((item) => item.completed === (completed === 'true'));
|
||||
renderTodoList(newList);
|
||||
}
|
||||
|
||||
document.querySelector('.btn-clear')!.addEventListener('click', () => {
|
||||
list = [];
|
||||
render(list);
|
||||
});
|
||||
|
||||
//切换completed的状态
|
||||
function onClickCompleteBtn(index: number) {
|
||||
list[index].completed = !list[index].completed;
|
||||
render(list);
|
||||
}
|
||||
|
||||
//渲染数组
|
||||
function render(list: TodoItem[]) {
|
||||
UpdateActiveNum();
|
||||
renderTodoList(list);
|
||||
}
|
||||
|
||||
//统计筛选中未完成功能数量
|
||||
function UpdateActiveNum() {
|
||||
const completedNum = list.filter((item) => !item.completed).length;
|
||||
document.querySelector('.active-num')!.innerHTML = completedNum.toString();
|
||||
}
|
||||
|
||||
//实现删除功能
|
||||
function deleteItem(index: number) {
|
||||
list.splice(index, 1);
|
||||
render(list);
|
||||
}
|
||||
|
||||
//渲染html
|
||||
function renderTodoList(list: TodoItem[]) {
|
||||
let html = '';
|
||||
list.forEach((item, index) => {
|
||||
const itemClass = item.completed ? 'item-complete todo-item' : 'todo-item';
|
||||
const spanClass = item.completed ? 'icon-complete icon-complete-active' : 'icon-complete';
|
||||
html += `<li class="${itemClass}">
|
||||
<span onclick="onClickCompleteBtn(${index})" class="${spanClass}"></span>
|
||||
<span>${item.name}</span>
|
||||
<button class="btn-complete">完成</button>
|
||||
<button class="deleted" onclick="deleteItem(${index})">删除</button>
|
||||
</li>`;
|
||||
});
|
||||
document.querySelector('.todo-list')!.innerHTML = html;
|
||||
}
|
||||
```
|
||||
## 运行项目
|
||||
按下快捷键`Ctrl + ~`,打开终端，输入以下命令，运行项目
|
||||
```
|
||||
npm run dev
|
||||
```
|
||||
|
||||
Reference in new issue
Block a user