1. TypeScript：强类型入门
- 为什么？ 它让 JavaScript 更加安全，并且对于 Nest.js 和 React 至关重要。
-
要学习的内容：
-
基本类型 (
string,number,boolean,array,any)（任意类型）。 -
函数及类型注释。
-
接口、泛型和实用类型（例如，
Partial,Pick）。 - 类和继承。
-
推荐资源：
- TypeScript 练习
-
里程碑：
- 编写一个简单的 TypeScript 程序来验证用户输入（例如电子邮件和密码）。
此处省略
2. 学习 Git 版本控制系统基础。
- 为什么呢？ 你需要 Git 来管理代码版本并方便团队协作。
-
需要学习的内容：
-
一些基本命令：
clone，add，commit，push。 -
创建和合并分支。
-
解决合并冲突的问题。
-
推荐的学习资源：
- 如果你更倾向于使用图形界面，可以试试 GitHub Desktop。
此处省略内容
3. NestJS: 后端框架
- 是什么？ Nest.js 提供 TypeScript 优先的支持来帮助你构建可扩展的 API。
-
要学习的内容：
-
控制器、服务、模块、依赖注入。
-
REST API 基础：创建、读取、更新和删除（CRUD）操作。
-
通过 DTO 和
class-validator进行验证。 -
推荐资源：
-
里程碑：
- 构建一个简单的 API，用于管理“任务列表”，包括创建、读取、更新和删除任务的端点。
……
4. React：前端开发库
- 为什么？ React 被用来构建现代的基于组件的用户界面。
-
需要掌握的知识点：
-
JSX 语法、props 和状态。
-
React 钩子：
useState、useEffect、useContext。 - 使用
react-router-dom进行基本的路由设置。 -
推荐资源：
- Net Ninja 的 React 基础教程
-
里程碑：
- 创建一个简单的 React 应用程序，展示一个项目列表，并允许添加或删除项目。
省略
5. Chakra UI：一个 UI 框架
- 为什么？ 使用Chakra可以轻松构建美观且易于访问的UI。
-
需要学习的内容：
-
布局组件：
Box，Flex，Grid和Stack。 -
使用Chakra样式属性（如
colorScheme，p，m）对组件进行样式设置。 - 基本主题概念。
-
推荐资源：
- Chakra UI 快速入门（YouTube）
-
里程碑：
- 为“待办事项列表”应用创建一个响应式用户界面。
……
第二步，搭建前后端一体化的Web应用第一步：搭建你的环境
-
安装所需的工具：
- Node.js : 下载
- Docker : 下载
- Nest CLI ：下载 Nest CLI
运行以下命令来全局安装 NestJS CLI 工具：npm install -g @nestjs/cli
第二步：用 Nest.js 来构建后端
- 开始一个新的 Nest.js 项目:
来新建后端点击进入全屏模式。点击退出全屏。
- 创建一个模块并设置API端点：
- 用户例子：
nest 生成用户模块 users
nest 生成用户服务 users
nest 生成用户控制器 users-
定义数据库中的实体:
例如：
@Entity()
export class User {
@PrimaryGeneratedColumn()
id: number;
@Column()
name: string;
@Column()
email: string;
// 用户实体类，包含用户ID、名称和电子邮件
}- 来设置 PostgreSQL 数据库：
- 安装一下 TypeORM 和 PostgreSQL 驱动：
npm install @nestjs/typeorm typeorm pg
这会安装 NestJS 的 TypeORM 和相关的 PostgreSQL 客户端依赖。
- 在
app.module.ts文件中设置 TypeORM 配置：
TypeOrmModule.forRoot({
type: 'postgres',
host: 'localhost',
port: 5432,
username: 'nest_user',
password: 'nest_password',
database: 'nest_db',
autoLoadEntities: true,
synchronize: true,
});
初始化 TypeORM 配置，连接到本地的 PostgreSQL 数据库。
- 添加 Swagger 以 API 文档说明
- 安装 Swagger 插件:，
npm install @nestjs/swagger swagger-ui-express // 安装 NestJS Swagger 和 Swagger UI Express 插件请在 main.ts 文件里配置 Swagger：
import { SwaggerModule, DocumentBuilder } from '@nestjs/swagger';
const config = new DocumentBuilder()
.setTitle('API 文档页面')
.setDescription('全栈应用的 API 描述')
.setVersion('1.0')
.build();
const document = SwaggerModule.createDocument(app, config);
SwaggerModule.setup('api', app, document);步骤三：用 React 做前端开发
- 使用 Vite 创建一个 React 应用
npm create vite@latest 前端项目 -- react-ts切换到全屏 退出全屏
根据提示来设置你的项目。
- 调用后端API：
- 使用 Swagger 生成一个开放API客户端：
```运行以下命令来生成TypeScript Axios客户端代码:
npx openapi-generator-cli generate -i http://localhost:3000/api-json -g typescript-axios -o ./src/generated
该命令会从指定URL生成并输出到指定目录。
在你的 React 应用中，使用客户端获取数据：
import { UsersApi } from './generated';
const api = new UsersApi();
// 获取用户数据
const fetchUsers = async () => {
const users = await api.getUsers();
// 打印用户数据
console.log(users);
};
1. **用 Chakra UI 设计 UI ：**
* 例如用来显示用户的界面：
import { Box, Heading, Text } from '@chakra-ui/react';
// 用户卡片组件
const UserCard = ({ name, email }) => (
<Box p={4} borderWidth={1} borderRadius="lg">
// 显示用户姓名
<Heading size="md">{name}</Heading>
// 显示用户电子邮件
<Text>{email}</Text>
</Box>
);
* * *
### 第四步：用Docker部署所有内容
1. **创建一个名为`docker-compose.yml`的文件:**
version: '3.8'
services:
postgres:
image: postgres:15
environment:
POSTGRES_USER: PostgreSQL用户名 nest_user
POSTGRES_PASSWORD: PostgreSQL密码 nest_password
POSTGRES_DB: nest_db
ports:
- "端口映射: '主机端口:容器端口' 5432:5432"
backend:
build: ./backend
ports: - "端口映射: '主机端口:容器端口' 3000:3000"
depends_on: - "依赖项: 依赖的服务名 postgres"
frontend:
build: ./frontend
ports: - "端口映射: '主机端口:容器端口' 3001:3000"
进入全屏，退出全屏
- 开始所有:
运行 docker-compose up --build 命令来构建并启动 Docker 容器。
点击全屏，然后退出全屏
最后的检查单
- 学习目标：
-
掌握 TypeScript 和 Git。
-
搭建简单的 Nest.js 和 React 项目。
-
练习使用 Chakra UI。
- 开发目标：
-
后端开发使用 Nest.js、Swagger 和 PostgreSQL。
-
前端使用 React、OpenAPI 和 Chakra UI。
-
使用 Docker 完成完整部署。
-
- *
以下声明：写完这份路线图之后，我用AI对其进行了整理，让它更易于阅读。
作者是, Daan Balm
- GitHub: github.com/daanmlab
- 领英: linkedin.com/in/daanbalm
- 个人网站: daan-balm.me
随时随地看视频
