全栈Web应用开发全流程指南

1. TypeScript：强类型入门

• 为什么？ 它让 JavaScript 更加安全，并且对于 Nest.js 和 React 至关重要。

• 要学习的内容：

• 基本类型 (string, number, boolean, array, any)（任意类型）。

• 函数及类型注释。

• 接口、泛型和实用类型（例如，Partial, Pick）。

• 类和继承。

• 推荐资源：

• TypeScript 手册

• FreeCodeCamp 的 TypeScript 课程

• TypeScript 练习

• 里程碑：

• 编写一个简单的 TypeScript 程序来验证用户输入（例如电子邮件和密码）。

此处省略

2. 学习 Git 版本控制系统基础。

• 为什么呢？ 你需要 Git 来管理代码版本并方便团队协作。

• 需要学习的内容：

• 一些基本命令：clone，add，commit，push。

• 创建和合并分支。

• 解决合并冲突的问题。

• 推荐的学习资源：

• Git 手册

• 如果你更倾向于使用图形界面，可以试试 GitHub Desktop。

此处省略内容

3. NestJS: 后端框架

• 是什么？ Nest.js 提供 TypeScript 优先的支持来帮助你构建可扩展的 API。

• 要学习的内容：

• 控制器、服务、模块、依赖注入。

• REST API 基础：创建、读取、更新和删除（CRUD）操作。

• 通过 DTO 和 class-validator 进行验证。

• 推荐资源：

• Nest.js 文档

• Nest.js 快速入门视频（YouTube）

• 里程碑：

• 构建一个简单的 API，用于管理“任务列表”，包括创建、读取、更新和删除任务的端点。

……

4. React：前端开发库

• 为什么？ React 被用来构建现代的基于组件的用户界面。

• 需要掌握的知识点：

• JSX 语法、props 和状态。

• React 钩子：useState、useEffect、useContext。

• 使用 react-router-dom 进行基本的路由设置。

• 推荐资源：

• React 文档

• Net Ninja 的 React 基础教程

• 里程碑：

• 创建一个简单的 React 应用程序，展示一个项目列表，并允许添加或删除项目。

省略

5. Chakra UI：一个 UI 框架

• 为什么？ 使用Chakra可以轻松构建美观且易于访问的UI。

• 需要学习的内容：

• 布局组件：Box，Flex，Grid 和 Stack。

• 使用Chakra样式属性（如colorScheme，p，m）对组件进行样式设置。

• 基本主题概念。

• 推荐资源：

• Chakra UI 文档

• Chakra UI 快速入门（YouTube）

• 里程碑：

• 为“待办事项列表”应用创建一个响应式用户界面。

……

第一步：搭建你的环境

• 安装所需的工具：

• Node.js : 下载
• Docker : 下载
• Nest CLI ：下载 Nest CLI

运行以下命令来全局安装 NestJS CLI 工具：npm install -g @nestjs/cli

第二步：用 Nest.js 来构建后端

1. 开始一个新的 Nest.js 项目:

       来新建后端

点击进入全屏模式。点击退出全屏。

1. 创建一个模块并设置API端点：

• 用户例子：

nest 生成用户模块 users
nest 生成用户服务 users
nest 生成用户控制器 users

1. 定义数据库中的实体:

   例如：

@Entity()
export class User {
  @PrimaryGeneratedColumn()
  id: number;

  @Column()
  name: string;

  @Column()
  email: string;

  // 用户实体类，包含用户ID、名称和电子邮件
}

1. 来设置 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 数据库。

1. 添加 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 做前端开发

1. 使用 Vite 创建一个 React 应用

npm create vite@latest 前端项目 -- react-ts

切换到全屏 退出全屏

根据提示来设置你的项目。

1. 调用后端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"

进入全屏，退出全屏

1. 开始所有:

运行 docker-compose up --build 命令来构建并启动 Docker 容器。

点击全屏，然后退出全屏

1. 学习目标：

• 掌握 TypeScript 和 Git。

• 搭建简单的 Nest.js 和 React 项目。

• 练习使用 Chakra UI。

  1. 开发目标：

• 后端开发使用 Nest.js、Swagger 和 PostgreSQL。

• 前端使用 React、OpenAPI 和 Chakra UI。

• 使用 Docker 完成完整部署。

• • *

以下声明：写完这份路线图之后，我用AI对其进行了整理，让它更易于阅读。

作者是, Daan Balm

• GitHub: github.com/daanmlab
• 领英: linkedin.com/in/daanbalm
• 个人网站: daan-balm.me