好的，让我们开始吧。
首先，我们需要创建一个React + TypeScript的项目。你可以使用Create React
App来搭建项目框架。在命令行中输入以下命令：
```
npx create-react-
app my-todo-
app --template typescript
```
这将会创建一个React + TypeScript的项目，并且会自动安装相关的依赖包。
接下来，我们需要安装一些额外的依赖包。在命令行中输入以下命令：
```
npm install --save axios @types/axios
npm install --save-dev concurrently nodemon
```
这些包分别是：
- `axios`：用于发送HTTP请求到后端服务器。
- `@types/axios`：TypeScript类型定义文件。
- `concurrently`：用于同时启动前端和后端服务器。
- `nodemon`：用于自动重新启动服务器。
接下来我们来写代码：
首先，在`src`文件夹下创建一个名为`components`的文件夹，并在其中创建一个名为`TodoList.tsx`的文件。这个文件是我们的主要组件，它将渲染整个应用程序。
```tsx
import React, { useState, useEffect } from 'react';
import axios from 'axios';
interface Todo {
id: number;
title: string;
completed: boolean;
}
const TodoList: React.FC = () => {
const [todos, setTodos] = useState<Todo[]>([]);
const [newTodo, setNewTodo] = useState('');
useEffect(() => {
axios.get('/api/todos').then(response => {
setTodos(response.data);
});
}, []);
const handleNewTodoKeyDown = (event: React.KeyboardEvent<HTMLInputElement>) => {
if (event.key === 'Enter' && newTodo) {
axios.post('/api/todos', { title: newTodo, completed: false }).then(response => {
setTodos(todos => [...todos, response.data]);
setNewTodo('');
});
}
};
const handleTodoClick = (id: number) => {
const todo = todos.find(todo => todo.id === id);
if (todo) {
axios.put(`/api/todos/${todo.id}`, { ...todo, completed: !todo.completed }).then(response => {
setTodos(todos => todos.map(todo => (todo.id === response.data.id ? response.data : todo)));
});
}
};
return (
<div>
<ul>
{todos.map(todo => (
<li key={todo.id}>
<button onClick={() => handleTodoClick(todo.id)}>{todo.completed ? '✓' : ' '}</button>
{todo.title}
</li>
))}
</ul>
<input type="text" placeholder="What needs to be done?" value={newTodo} onChange={event => setNewTodo(event.target.value)} onKeyDown={handleNewTodoKeyDown} />
</div>
);
};
export default TodoList;
```
这个组件包含一个`Todo`接口，它定义了一个代表待办事项的对象。它还包含一个`TodoList`组件，它使用`useState`钩子来管理待办事项列表和新待办事项的状态。我们还使用了`useEffect`钩子来在组件加载时从后端服务器获取待办事项列表。
在`TodoList`组件中，我们定义了两个事件处理程序：`handleNewTodoKeyDown`和`handleTodoClick`。`handleNewTodoKeyDown`在用户按下回车键并且输入了新待办事项时调用，它使用`axios`来向后端服务器发送POST请求来创建新待办事项，并将其添加到待办事项列表中。`handleTodoClick`在用户点击待办事项的复选框时调用，它使用`axios`来向后端服务器发送PUT请求来更新待办事项的状态。
最后，我们通过一个简单的表单来渲染待办事项列表和新待办事项的输入框。
接下来，在`src`文件夹下创建一个名为`index.tsx`的文件，它将渲染我们的应用程序。
```tsx
import React from 'react';
import ReactDOM from 'react-dom';
import TodoList from './components/TodoList';
ReactDOM.render(<TodoList />, document.getElementById('root'));
```
这个文件只是简单地引入了`TodoList`组件并将其渲染到页面上。
现在，我们需要为我们的应用程序创建一个后端服务器。在项目根目录下创建一个名为`server`的文件夹，并在其中创建一个名为`server.
js`的文件。这个文件将使用`Koa`框架来创建一个HTTP服务器，并将待办事项存储到一个
JSON文件中。
```
js
const Koa = require('koa');
const Router = require('@koa/router');
const bodyParser = require('koa-bodyparser');
const fs = require('fs');
const path = require('path');
const
app = new Koa();
const router = new Router();
const TODOS_FILE = path.join(__dirname, 'todos.
json');
let nextTodoId = 1;
function getNextTodoId() {
return nextTodoId++;
}
function readTodos() {
try {
const data = fs.readFileSync(TODOS_FILE);
return
JSON.parse(data);
} catch (error) {
return [];
}
}
function writeTodos(todos) {
fs.writeFileSync(TODOS_FILE,
JSON.stringify(todos));
}
router.get('/api/todos', ctx => {
const todos = readTodos();
ctx.body = todos;
});
router.post('/api/todos', bodyParser(), ctx => {
const todo = {
id: getNextTodoId(),
title: ctx.request.body.title,
completed: ctx.request.body.completed
};
const todos = readTodos();
todos.push(todo);
writeTodos(todos);
ctx.body = todo;
});
router.put('/api/todos/:id', bodyParser(), ctx => {
const id = Number(ctx.params.id);
const todos = readTodos();
const index = todos.findIndex(todo => todo.id === id);
if (index >= 0) {
const todo = { ...todos[index], ...ctx.request.body };
todos[index] = todo;
writeTodos(todos);
ctx.body = todo;
} else {
ctx.throw(404, 'Todo not found');
}
});
app.use(router.routes());
app.use(router.allowedMethods());
app.listen(3001);
console.log('Server listening on http://localhost:3001');
```
这个文件包含了一个名为`server`的函数，它使用`Koa`框架来创建一个HTTP服务器。我们还定义了三个路由：`/api/todos`、`/api/todos/:id`和`/`。这些路由将分别处理获取待办事项列表、创建新待办事项和更新待办事项的请求。
我们使用`fs`模块来读取和写入待办事项
JSON文件，并使用`nextTodoId`变量来跟踪下一个待办事项的ID。
最后，我们使用`
app.listen`方法来启动服务器，它将在端口3001上监听请求。
现在我们需要
修改`package.
json`文件来配置`concurrently`和`nodemon`，以便我们可以同时启动前端和后端服务器，并且当我们
修改后端服务器文件时，它会自动重新启动服务器。
```
json
{
"name": "my-todo-
app",
"version": "0.1.0",
"private": true,
"dependencies": {
"@testing-library/jest-dom": "^5.11.4",
"@testing-library/react": "^11.1.0",
"@testing-library/user-event": "^12.1.10",
"@types/jest": "^26.0.15",
"@types/node": "^12.0.0",
"@types/react": "^17.0.0",
"@types/react-dom": "^17.0.0",
"axios": "^0.21.1",
"react": "^17.0.2",
"react-dom": "^17.0.2",
"react-scripts": "4.0.3",
"typescript": "^4.1.2",
"
web-vitals": "^1.0.1"
},
"scripts": {
"start": "concurrently \"npm run start:client\" \"npm run start:server\"",
"start:client": "react-scripts start",
"start:server": "nodemon server/server.
js",
"build": "react-scripts build",
"test": "react-scripts test",
"eject": "react-scripts eject"
},
"devDependencies": {
"@koa/router": "^10.0.0",
"concurrently": "^6.0.2",
"nodemon": "^2.0.7"
}
}
```
我们将`start`
脚本修改为同时启动前端和后端服务器。我们还添加了两个新的
脚本：`start:client`和`start:server`，用于分别启动前端和后端服务器。
最后，我们需要将静态资源(html,
js,css等)
编译到node.
js的静态资源目录中。在`package.
json`文件中添加以下配置：
```
json
{
"name": "my-todo-
app",
"version": "0.1.0",
"private": true,
"dependencies": {...},
"scripts": {
"start": "concurrently \"npm run start:client\" \"npm run start:server\"",
"start:client": "react-scripts start",
"start:server": "nodemon server/server.
js",
"build": "react-scripts build && mv build ../server/static",
"test": "react-scripts test",
"eject": "react-scripts eject"
},
"devDependencies": {...}
}
```
这个配置将在执行`npm run build`命令时，使用`react-scripts build`命令将React应用程序
编译为静态资源，并使用`mv`命令将
编译后的静态资源移动到`server/static`目录中。
现在，我们已经完成了所有的代码编写和配置。在命令行中输入以下命令来启动应用程序：
```
npm start
```
这将同时启动前端和后端服务器。在浏览器中访问`http://localhost:3000`，你将看到一个待办事项列表。你可以通过在输入框中输入新的待办事项并按下回车键来创建新的待办事项，也可以通过点击待办事项前面的复选框来切换待办事项的状态。所有的
数据都将保存在一个
JSON文件中，这个文件位于`server/todos.
json`中。
1646
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
