成果展示
todo app demo
文件目录
backend
src
1. 创建python环境
bash
mkdir farm-todo
cd farm-todo
bash
mkdir frontend backend
cd backend
bash
python -m venv venv
source venv/bin/activate
bash
pip install "fastapi[all]" "motor[srv]" beanie aiostream
-
安装了FastAPI的所有可选依赖(包括一些web框架常用的依赖库,如
uvicorn
、pydantic
等),使它能够运行完整的API功能。FastAPI是一个用于构建高性能API的Python框架,以异步编程和Python类型注解为基础,易于构建快速而灵活的API。 -
安装Motor库并附带
srv
选项,确保能够使用MongoDB的SRV协议连接字符串。Motor是MongoDB官方的异步驱动程序,与FastAPI等异步框架兼容,可以异步地操作MongoDB数据库,提升处理大量并发请求的效率。 -
安装了Beanie库,它是一个MongoDB的ORM(对象关系映射库),支持Pydantic模型并与Motor集成。Pydantic模型是一种在Python中使用的数据验证和数据结构定义工具。Beanie可以让开发者使用Python对象的形式来定义和操作MongoDB中的数据模型,减少了操作数据库的复杂性。
-
安装了Aiostream库,它提供了异步流处理的工具。这个库可以帮助管理和处理数据流,适用于处理多个并发任务的数据操作,使数据流管理更加方便。
bash
pip freeze > requirements.txt
2. 创建2个文档:Dockerfile和pyproject.toml
Dockerfile: 定义一个用于运行Python应用程序的Docker镜像。
bash
FROM python:3
WORKDIR /usr/src/app
COPY requirements.txt ./
RUN pip install --no-cache-dir --upgrade -r ./requirements.txt
EXPOSE 3001
CMD [ "python", "./src/server.py" ]
- 使用Python 3的官方镜像作为基础镜像,提供了Python 3环境以及相关依赖,这样就不需要手动安装Python。
- 指定容器内的工作目录为
/usr/src/app
。之后的所有命令都会在这个目录中执行。如果目录不存在,Docker会自动创建它。 - 将本地目录中的
requirements.txt
文件复制到工作目录/usr/src/app
中。requirements.txt
包含了应用程序所需的Python依赖库列表。 - 运行
pip install
命令,安装requirements.txt
中列出的所有依赖项。--no-cache-dir
选项可以减少镜像体积,因为不会缓存安装包。--upgrade
确保安装的是最新版本的依赖。 - 声明容器会监听
3001
端口,通常表示应用会在这个端口上提供服务。虽然EXPOSE
不会直接启用端口访问,但它是一个声明性指示,用于告知运行时应该暴露的端口。 - 指定容器启动时的默认命令,这里运行Python脚本
./src/server.py
。当容器启动时,这个命令会被执行,用于启动应用服务器。
这个Dockerfile的作用是创建一个Docker镜像,用于运行一个Python应用程序,依赖于requirements.txt
中列出的库,并在端口3001
上监听请求。
pyproject.toml: 指定了pytest
工具的一个选项,定义了测试时的Python路径。
bash
[tool.pytest.ini_options]
pythonpath = "src"
pytest
是Python的一个常用测试框架,用于运行单元测试、集成测试等。- 将
src
目录添加到PYTHONPATH
中。这样在运行测试时,pytest
可以直接导入src
目录中的模块,而不需要额外的路径配置。
3. 在backend的文件夹之下建立src文件夹,并创建 dal.py和 server.py
dal.py
python
from bson import ObjectId
# ObjectId是MongoDB的默认主键类型,通常用于在查询和处理数据库中的唯一标识符。
from motor.motor_asyncio import AsyncIOMotorCollection
# motor是MongoDB的异步驱动程序,用于与MongoDB进行异步交互。
# AsyncIOMotorCollection是一个集合(collection)对象,提供了对MongoDB集合的异步操作。
from pymongo import ReturnDocument
# ReturnDocument 是pymongo中的常量,用于在更新操作时指定返回更新前或更新后的文档。
from pydantic import BaseModel
# Pydantic的BaseModel类是一个数据验证和数据结构定义工具。
from uuid import uuid4
class ListSummary(BaseModel):
id: str # 文档的唯一标识符,将MongoDB中的ObjectId转换为字符串。
name: str # 文档的名称字段。
item_count: int # 文档中项目的数量字段。
@staticmethod
def from_doc(doc) -> "ListSummary":
return ListSummary(
id=str(doc["_id"]),
name=doc["name"],
item_count=doc["item_count"],
)
# 这是一个静态方法,接受一个MongoDB文档(字典类型)作为参数,
# 并将该文档转换为ListSummary对象。doc通常是从MongoDB集合中查询返回的文档数据。
class ToDoListItem(BaseModel):
id: str
label: str
checked: bool
@staticmethod
def from_doc(item) -> "ToDoListItem":
return ToDoListItem(
id=item["id"],
label=item["label"],
checked=item["checked"],
)
# 将MongoDB中表示单个待办事项的文档(item)转换为ToDoListItem对象。
# 它提取id、label和checked字段,并使用这些字段来创建一个ToDoListItem实例。
class ToDoList(BaseModel):
id: str
name: str
items: list[ToDoListItem]
@staticmethod
def from_doc(doc) -> "ToDoList":
return ToDoList(
id=str(doc["_id"]),
name=doc["name"],
items=[ToDoListItem.from_doc(item) for item in doc["items"]],
)
# 接收一个待办事项列表的MongoDB文档(doc),将其转换为ToDoList对象。
# 方法从doc中提取_id和name字段,并将items字段中的每个待办事项文档
# 通过ToDoListItem.from_doc方法转换为ToDoListItem对象,最终返回一个ToDoList实例。
# 处理对MongoDB中待办事项数据的增删改查操作。
class ToDoDAL:
def __init__(self, todo_collection: AsyncIOMotorCollection):
self._todo_collection = todo_collection
# 返回所有待办事项列表的简要信息(名称和项目数)
async def list_todo_lists(self, session=None):
async for doc in self._todo_collection.find(
{},
projection={
"name": 1,
"item_count": {"$size": "$items"},
},
sort={"name": 1},
session=session,
):
yield ListSummary.from_doc(doc)
# 创建一个新的待办事项列表。
# 插入文档的_id字符串形式。
async def create_todo_list(self, name: str, session=None) -> str:
response = await self._todo_collection.insert_one(
{"name": name, "items": []},
session=session,
)
return str(response.inserted_id)
# 根据ID获取特定待办事项列表的完整信息。
async def get_todo_list(self, id: str | ObjectId, session=None) -> ToDoList:
doc = await self._todo_collection.find_one(
{"_id": ObjectId(id)},
session=session,
)
return ToDoList.from_doc(doc)
# 根据ID删除一个待办事项列表。
async def delete_todo_list(self, id: str | ObjectId, session=None) -> bool:
response = await self._todo_collection.delete_one(
{"_id": ObjectId(id)},
session=session,
)
return response.deleted_count == 1
# 向指定待办事项列表中添加新项目
async def create_item(
self,
id: str | ObjectId,
label: str,
session=None,
) -> ToDoList | None:
result = await self._todo_collection.find_one_and_update(
{"_id": ObjectId(id)},
{
"$push": {
"items": {
"id": uuid4().hex,
"label": label,
"checked": False,
}
}
},
session=session,
return_document=ReturnDocument.AFTER,
)
if result:
return ToDoList.from_doc(result)
# 设置待办事项item的checked状态。
async def set_checked_state(
self,
doc_id: str | ObjectId,
item_id: str,
checked_state: bool,
session=None,
) -> ToDoList | None:
result = await self._todo_collection.find_one_and_update(
{"_id": ObjectId(doc_id), "items.id": item_id},
{"$set": {"items.$.checked": checked_state}},
session=session,
return_document=ReturnDocument.AFTER,
)
if result:
return ToDoList.from_doc(result)
# 从指定待办事项列表中删除一个项目。
async def delete_item(
self,
doc_id: str | ObjectId,
item_id: str,
session=None,
) -> ToDoList | None:
result = await self._todo_collection.find_one_and_update(
{"_id": ObjectId(doc_id)},
{"$pull": {"items": {"id": item_id}}},
session=session,
return_document=ReturnDocument.AFTER,
)
if result:
return ToDoList.from_doc(result)
server.py
python
from contextlib import asynccontextmanager
from datetime import datetime
import os
import sys
from bson import ObjectId
from fastapi import FastAPI, status
from motor.motor_asyncio import AsyncIOMotorClient
# 是MongoDB异步客户端(motor库)来连接数据库。
from pydantic import BaseModel
import uvicorn # 是ASGI服务器,用于运行FastAPI应用。
from dal import ToDoDAL, ListSummary, ToDoList
COLLECTION_NAME = "todo_lists"
MONGODB_URI = os.environ["MONGODB_URI"]
# 从环境变量中获取MongoDB的URI连接字符串。
DEBUG = os.environ.get("DEBUG", "").strip().lower() in {"1", "true", "on", "yes"}
# 从环境变量读取调试模式,接受多种True的写法。
# 这是一个异步上下文管理器,管理FastAPI应用的启动和关闭。
@asynccontextmanager
async def lifespan(app: FastAPI):
# Startup:
client = AsyncIOMotorClient(MONGODB_URI)
# 创建MongoDB异步客户端实例,连接到数据库。
database = client.get_default_database()
# 获取MongoDB数据库实例,默认使用连接字符串中的数据库名称。
# ping命令用于测试MongoDB连接是否正常。pong["ok"] == 1表示连接成功。
pong = await database.command("ping")
if int(pong["ok"]) != 1:
raise Exception("Cluster connection is not okay!")
todo_lists = database.get_collection(COLLECTION_NAME)
# 获取待办事项集合todo_lists。
app.todo_dal = ToDoDAL(todo_lists)
# 将ToDoDAL实例附加到FastAPI应用实例上,便于其他模块使用。
# Yield back to FastAPI Application:
yield
# 暂停上下文管理器,将控制权交给应用,以继续运行其他操作。
# Shutdown:
client.close()
# 应用关闭时,自动关闭MongoDB连接以释放资源。
app = FastAPI(lifespan=lifespan, debug=DEBUG)
# 使用lifespan管理器(在应用启动和关闭时管理数据库连接)。
# debug=DEBUG设定调试模式,使得在调试时更容易看到错误和详细信息。
# 异步获取所有待办事项列表的摘要信息。
@app.get("/api/lists")
async def get_all_lists() -> list[ListSummary]:
return [i async for i in app.todo_dal.list_todo_lists()]
# 用于创建新的待办事项列表,包含列表名称。
class NewList(BaseModel):
name: str
# 用于创建操作成功后的响应,包含列表的id和name。
class NewListResponse(BaseModel):
id: str
name: str
# 接受NewList格式的数据,创建新的待办事项列表。
@app.post("/api/lists", status_code=status.HTTP_201_CREATED)
async def create_todo_list(new_list: NewList) -> NewListResponse:
return NewListResponse(
id=await app.todo_dal.create_todo_list(new_list.name),
name=new_list.name,
)
# 使用列表的唯一标识符list_id获取单个待办事项列表。
# 调用get_todo_list方法,返回一个包含列表详细信息的ToDoList对象。
@app.get("/api/lists/{list_id}")
async def get_list(list_id: str) -> ToDoList:
"""Get a single to-do list"""
return await app.todo_dal.get_todo_list(list_id)
# 根据list_id删除指定的待办事项列表。
# 调用delete_todo_list方法,返回布尔值表示删除是否成功。
@app.delete("/api/lists/{list_id}")
async def delete_list(list_id: str) -> bool:
return await app.todo_dal.delete_todo_list(list_id)
# 用于添加新待办事项的数据模型,包含label字段,表示待办事项的标签(描述)。
class NewItem(BaseModel):
label: str
# 用于返回新添加项的响应模型,包含id和label字段。
class NewItemResponse(BaseModel):
id: str
label: str
# 用于向指定的待办事项列表(list_id)中添加新待办事项items。
@app.post(
"/api/lists/{list_id}/items/",
status_code=status.HTTP_201_CREATED,
)
# 调用create_item方法,将list_id和new_item.label传入。
# 返回更新后的完整待办事项列表ToDoList,包含新的待办事项item。
async def create_item(list_id: str, new_item: NewItem) -> ToDoList:
return await app.todo_dal.create_item(list_id, new_item.label)
# 根据list_id和item_id删除指定待办事项列表中的特定项。
# 返回更新后的ToDoList对象,删除项后更新的列表。
@app.delete("/api/lists/{list_id}/items/{item_id}")
async def delete_item(list_id: str, item_id: str) -> ToDoList:
return await app.todo_dal.delete_item(list_id, item_id)
# 定义更新待办事项item的完成状态所需的数据模型。
# 包含item_id(待办事项item的唯一标识符)和checked_state(布尔值,表示是否已完成)字段。
class ToDoItemUpdate(BaseModel):
item_id: str
checked_state: bool
# 用于更新指定待办事项列表中某个待办事项item的完成状态。
# 返回更新后的ToDoList对象,反映状态变更后的完整列表。
@app.patch("/api/lists/{list_id}/checked_state")
async def set_checked_state(list_id: str, update: ToDoItemUpdate) -> ToDoList:
return await app.todo_dal.set_checked_state(
list_id, update.item_id, update.checked_state
)
class DummyResponse(BaseModel):
id: str
when: datetime
@app.get("/api/dummy")
async def get_dummy() -> DummyResponse:
return DummyResponse(
id=str(ObjectId()),
when=datetime.now(),
)
# 使用ObjectId()生成一个新的唯一标识符并转换为字符串,赋值给id。
# 每个文档在MongoDB数据库中都有一个_id字段,默认情况下,它的值是一个ObjectId。
# 使用datetime.now()获取当前时间并赋值给when。
def main(argv=sys.argv[1:]):
try:
# 使用uvicorn来启动FastAPI应用
uvicorn.run("server:app", host="0.0.0.0", port=3001, reload=DEBUG)
# host="0.0.0.0":让应用在所有可用的网络接口上监听。
# reload=DEBUG:如果DEBUG为True,在代码更改时自动重载应用(适合开发阶段)。
except KeyboardInterrupt:
pass
# 使用try...except来捕获KeyboardInterrupt异常,以便在按下Ctrl+C时优雅地停止服务。
if __name__ == "__main__":
main()
4. 在MONGODB上建立一个cluster,建立.env文件(与backend文件夹同一级),在.env文件中贴上MONGODB_URI
,并在问号前加上todo
。
5. 创建compose.yaml(与backend文件夹同一级)
yaml
name: todo-app
services:
nginx:
image: nginx:1.17
volumes:
- ./nginx/nginx.conf:/etc/nginx/conf.d/default.conf
ports:
- 8000:80
depends_on:
- backend
- frontend
frontend:
image: "node:22"
user: "node"
working_dir: /home/node/app
environment:
- NODE_ENV=development
- WDS_SOCKET_PORT=0
volumes:
- ./frontend/:/home/node/app
expose:
- "3000"
ports:
- "3000:3000"
command: "npm start"
backend:
image: todo-app/backend
build: ./backend
volumes:
- ./backend/:/usr/src/app
expose:
- "3001"
ports:
- "8001:3001"
command: "python src/server.py"
environment:
- DEBUG=true
env_file:
- path: ./.env
required: true
nginx 服务
- 使用 Nginx 1.17 版本的官方镜像。
- 挂载本地
nginx.conf
配置文件到容器中,以覆盖默认配置。使 Nginx 可以按照自定义配置处理请求。 - 将容器的
80
端口映射到主机的8000
端口。这样外部可以通过localhost:8000
访问 Nginx。 - 指定
backend
和frontend
是 Nginx 服务的依赖项。Nginx 启动时,这两个服务应该先启动。
frontend 服务
- 使用
node
版本为22
的镜像。 - 以
node
用户身份运行,避免使用 root 权限以增强安全性。 volumes
:将本地的./frontend/
目录挂载到容器的工作目录中,以便同步代码改动。- 暴露内部
3000
端口给其他 Docker 容器访问。 - 将本地端口
3000
映射到容器的3000
端口,使开发环境可以访问前端应用。 command: "npm start"
:启动前端应用的命令,通常运行开发服务器。
backend 服务
build: ./backend
:使用./backend
目录中的 Dockerfile 来构建该服务的镜像。volumes
:将本地的./backend/
目录挂载到容器中的/usr/src/app
,以便实时更新代码。ports
:将主机的8001
端口映射到容器的3001
端口,使外部可以访问后端 API。environment
:设置环境变量,如DEBUG=true
开启调试模式。
6. 创建nginx文件夹(与backend文件夹同一级),建立nginx.conf文件。
- 静态资源或前端请求通过
/
路由到frontend
服务。 - 后端 API 请求通过
/api
路由到backend
服务的 API。
bash
server {
listen 80;
server_name farm_intro;
location / {
proxy_pass http://frontend:3000;
proxy_set_header Upgrade $http_upgrade;
proxy_set_header Connection "upgrade";
}
location /api {
proxy_pass http://backend:3001/api;
}
}
listen 80
:指定服务器监听在端口80
,这是 HTTP 的默认端口。proxy_pass http://frontend:3000
:将请求转发给名为frontend
的服务,其内部端口为3000
。这里假设frontend
是一个运行在 Docker Compose 中的 Node.js 服务。
7. 切换到frontend文件夹
bash
npx create-react-app .
npm install axios react-icons
create-react-app
是一个官方的 React 脚手架工具,用于快速创建标准的 React 项目结构。axios
是一个用于发送 HTTP 请求的库,常用于从后端 API 获取数据。react-icons
提供了大量常用的图标,可以很方便地在 React 组件中使用。
8. 更新App.js文件
javascript
import { useEffect, useState } from "react";
import axios from "axios";
import "./App.css";
import ListToDoLists from "./ListTodoLists";
import ToDoList from "./ToDoList";
function App() {
const [listSummaries, setListSummaries] = useState(null);
// 存储从 /api/lists 获取的所有待办事项列表的摘要。
const [selectedItem, setSelectedItem] = useState(null);
// 此变量用于存储当前选中的待办事项列表的 ID。
useEffect(() => {
reloadData().catch(console.error);
}, []);
// useEffect 在组件挂载时调用 reloadData 函数,从服务器加载待办事项列表的数据。
async function reloadData() {
const response = await axios.get("/api/lists");
const data = await response.data;
setListSummaries(data);
}
// 通过 axios.get 向 /api/lists 发送请求,从服务器获取所有待办事项列表的摘要信息。
function handleNewToDoList(newName) {
const updateData = async () => {
const newListData = {
name: newName,
};
await axios.post(`/api/lists`, newListData);
reloadData().catch(console.error);
};
updateData();
}
// 接受 newName 作为新列表的名称,发送 POST 请求到 /api/lists,然后刷新数据以更新界面。
function handleDeleteToDoList(id) {
const updateData = async () => {
await axios.delete(`/api/lists/${id}`);
reloadData().catch(console.error);
};
updateData();
}
// 根据 id 向 /api/lists/{id} 发送 DELETE 请求,然后刷新数据。
function handleSelectList(id) {
console.log("Selecting item", id);
setSelectedItem(id);
// 设置 selectedItem 为选中的列表的 id。
}
function backToList() {
setSelectedItem(null);
// 清除 selectedItem 的值,将视图切换回所有待办事项列表的界面。
reloadData().catch(console.error);
}
if (selectedItem === null) {
return (
<div className="App">
<ListToDoLists
listSummaries={listSummaries}
handleSelectList={handleSelectList}
handleNewToDoList={handleNewToDoList}
handleDeleteToDoList={handleDeleteToDoList}
/>
</div>
);
} else {
return (
<div className="App">
<ToDoList listId={selectedItem} handleBackButton={backToList} />
</div>
);
}
}
export default App;
9. 建立ListTodoLists.js文件
javascript
import "./ListTodoLists.css";
import { useRef } from "react";
import { BiSolidTrash } from "react-icons/bi"; // 引入一个垃圾桶图标,用于删除功能的按钮。
function ListToDoLists({
listSummaries, // 待办事项列表的概要信息数组。
handleSelectList, // 处理用户选择特定待办事项列表的函数。
handleNewToDoList, // 处理创建新待办事项列表的函数。
handleDeleteToDoList, // 处理删除指定待办事项列表的函数。
}) {
const labelRef = useRef(); // 用于访问新待办事项列表名称的输入框值。
if (listSummaries === null) {
return <div className="ListToDoLists loading">Loading to-do lists ...</div>;
// 如果 listSummaries 为 null,组件会显示"Loading to-do lists ..."字样,表示数据正在加载。
} else if (listSummaries.length === 0) {
return (
<div className="ListToDoLists">
<div className="box">
<label>
New To-Do List:
<input id={labelRef} type="text" />
</label>
<button
onClick={() =>
handleNewToDoList(document.getElementById(labelRef).value)
// 提交新列表名称。
}
>
New
</button>
</div>
<p>There are no to-do lists!</p>
</div>
);
}
return (
<div className="ListToDoLists">
<h1>All To-Do Lists</h1>
<div className="box">
<label>
New To-Do List:
<input id={labelRef} type="text" />
</label>
<button
onClick={() =>
handleNewToDoList(document.getElementById(labelRef).value)
}
>
New
</button>
// 提供添加新待办事项列表的功能,输入新名称并点击"New"按钮。
</div>
{listSummaries.map((summary) => {
return (
<div
key={summary.id}
className="summary"
onClick={() => handleSelectList(summary.id)}
// 条目点击时会调用 handleSelectList 并传入 summary.id,
// 从而选择该列表并展示详细信息。
>
<span className="name">{summary.name} </span>
<span className="count">({summary.item_count} items)</span>
<span className="flex"></span>
<span
className="trash"
onClick={(evt) => {
evt.stopPropagation(); // 阻止事件冒泡到父元素
handleDeleteToDoList(summary.id);
}}
>
<BiSolidTrash />
// <BiSolidTrash /> 是一个垃圾桶图标,
// 点击时会触发 handleDeleteToDoList 删除该条目。
</span>
</div>
);
})}
</div>
);
}
export default ListToDoLists;
10. 建立ListTodoLists.css文件
css
.ListToDoLists .summary {
border: 1px solid lightgray;
padding: 1em;
margin: 1em;
cursor: pointer;
display: flex;
}
.ListToDoLists .count {
padding-left: 1ex;
color: blueviolet;
font-size: 92%;
}
border: 1px solid lightgray;
:设置浅灰色的 1 像素边框,给每个条目增加视觉边界。cursor: pointer;
:将鼠标悬停在条目上时显示为指针(手型光标),提示用户条目是可点击的。display: flex;
:使用flex
布局,将条目内的内容(如名称、项目计数、垃圾桶图标等)按水平方向排列。.ListToDoLists .count
该选择器为每个待办事项列表的项目计数文本提供样式。color: blueviolet;
:将文本颜色设置为蓝紫色,以突出显示项目计数。
11. 建立ToDoList.js文件
javascript
import "./ToDoList.css";
import { useEffect, useState, useRef } from "react";
import axios from "axios";
import { BiSolidTrash } from "react-icons/bi";
function ToDoList({ listId, handleBackButton }) {
let labelRef = useRef();
const [listData, setListData] = useState(null);
// 获取列表数据
useEffect(() => {
const fetchData = async () => {
const response = await axios.get(`/api/lists/${listId}`);
const newData = await response.data;
setListData(newData);
};
fetchData();
}, [listId]);
// 创建新待办事项
function handleCreateItem(label) {
const updateData = async () => {
const response = await axios.post(`/api/lists/${listData.id}/items/`, {
label: label,
});
setListData(await response.data);
};
updateData();
}
// 删除待办事项
function handleDeleteItem(id) {
const updateData = async () => {
const response = await axios.delete(
`/api/lists/${listData.id}/items/${id}`
);
setListData(await response.data);
};
updateData();
}
// 更新项目状态
function handleCheckToggle(itemId, newState) {
const updateData = async () => {
const response = await axios.patch(
`/api/lists/${listData.id}/checked_state`,
{
item_id: itemId,
checked_state: newState,
}
);
setListData(await response.data);
};
updateData();
}
if (listData === null) {
return (
<div className="ToDoList loading">
<button className="back" onClick={handleBackButton}>
Back
</button>
Loading to-do list ...
</div>
);
}
return (
<div className="ToDoList">
<button className="back" onClick={handleBackButton}>
Back
</button>
<h1>List: {listData.name}</h1>
<div className="box">
<label>
New Item:
<input id={labelRef} type="text" />
</label>
<button
onClick={() =>
handleCreateItem(document.getElementById(labelRef).value)
}
>
New
</button>
// 用户可在输入框输入内容后点击 New 按钮添加项目。
</div>
{listData.items.length > 0 ? (
listData.items.map((item) => {
return (
<div
key={item.id}
className={item.checked ? "item checked" : "item"}
onClick={() => handleCheckToggle(item.id, !item.checked)}
>
<span>{item.checked ? "✅" : "⬜️"} </span>
// 复选框:使用 ✅ 和 ⬜️ 表示项目的完成状态,点击切换状态。
<span className="label">{item.label} </span>
<span className="flex"></span>
<span
className="trash"
onClick={(evt) => {
evt.stopPropagation();
handleDeleteItem(item.id);
}}
>
<BiSolidTrash /> // 垃圾桶图标:点击删除项目。
</span>
</div>
);
})
) : (
<div className="box">There are currently no items.</div>
)}
</div>
);
}
export default ToDoList;
12. 建立ToDoList.css文件
css
.ToDoList .back {
margin: 0 1em;
padding: 1em;
float: left;
}
.ToDoList .item {
border: 1px solid lightgray;
padding: 1em;
margin: 1em;
cursor: pointer;
display: flex;
}
.ToDoList .label {
margin-left: 1ex;
}
.ToDoList .checked .label {
text-decoration: line-through;
color: lightgray;
}
border: 1px solid lightgray;
:为每个待办事项条目添加一个浅灰色边框,分隔不同条目。text-decoration: line-through;
:为已完成的项目添加删除线,表示项目已完成。color: lightgray;
:将文本颜色设置为浅灰色,降低视觉优先级,使已完成的项目明显区分于未完成的项目。
13. 更新index.css文件
javascript
html, body {
margin: 0;
font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', 'Roboto', 'Oxygen',
'Ubuntu', 'Cantarell', 'Fira Sans', 'Droid Sans', 'Helvetica Neue',
sans-serif;
-webkit-font-smoothing: antialiased;
-moz-osx-font-smoothing: grayscale;
font-size: 12pt;
}
input, button {
font-size: 1em;
}
code {
font-family: source-code-pro, Menlo, Monaco, Consolas, 'Courier New',
monospace;
}
.box {
border: 1px solid lightgray;
padding: 1em;
margin: 1em;
}
.flex {
flex: 1;
}
14. 构建服务的镜像
bash
docker-compose up --build
15. 浏览器中使用todo应用程序
localhost:8000