• Stars
    star
    379
  • Rank 113,004 (Top 3 %)
  • Language
    TypeScript
  • Created over 3 years ago
  • Updated over 2 years ago

Reviews

There are no reviews yet. Be the first to send feedback to the community and the maintainers!

Repository Details

🐱 使用 React.js + Nest.js 实现一个简单的 Todo App。

nest-todo

使用 React.js + Nest.js 实现一个简单的 Todo App。

基础账号

测试数据会默认添加 user 和 admin 两个用户,当然还会有 100 多个测试账号,下面是这两个账号的 usernamepassword (密码在入库时做了 digest)。

用户 密码 角色
user user 普通用户
admin admin 管理员

样例

  • 前端:localhost:3000
  • 后端:localhost:4200
  • Swagger 文档:localhost:4200/docs

功能

  • user 和 todo 两个资源的 CRUD 接口
  • 数据库模块:TypeORM x mariadb(不用 mysql 是因为 M1 电脑无法使用 mysql 镜像),数据库迁移,数据库 seed
  • 文件上传模块,使用 Express 的 Multer 实现
  • 配置文件模块,使用 ConfigModule 读取本地 ENV 变量
  • 日志模块,ReportLogger 模拟日志上报
  • 静态资源模块,使用 StaticModule 使现
  • 用户身份验证:local 和 jwt 两种策略
  • 用户角色验证:区分普通用户和管理员两种角色
  • Docker 部署环境
  • Swagger 构建 API 文档
  • WebSocket 实现数据传输
  • Http 模块,http 的转发功能
  • Error 模块,出错时,拦截错误,并按一定格式输出
  • Transform 模块,以规定格式返回数据
  • Task Scheduling 定时推送消息
  • 编写单元测试
  • 编写 e2e 测试

本地运行

使用 docker-compose 的方式来启动 redis, mariadb 2 个容器。

一般来说本地开发都会使用 npm run start 这样的命令来启动项目,就不用放在 docker-compose 里一键启动了。 不过,为了大家也能学习到怎么用 docker-compose 一键本地运行,所以也注释后的脚本放在 docker-compose 里了。

docker-compose -f dev-docker-compose.yml up -d

然后,初始化数据库结构和数据内容。

# 进入后端目录
cd server

# 数据库迁移
npm run migration:run

# 插入初始数据
npm run db:seed

开启后端。

cd server
npm run start:dev

最后,开启前端。

cd client

npm run start

访问 http://localhost:3000 即可。

生产部署(可忽略)

docker-compose -f prod-docker-compose.yml up -d --build

然后再次初始化数据库和数据:

npm run migration:run

npm run db:seed

打开 http://localhost 即可访问。

测试

目前只有 /server Nest.js 的服务有提供测试(毕竟这是个 Nest.js 的练手项目),所以第一步先进入 /server 目录。

cd server # 进入 server

单元测试

Nest.js 提供了 Jest 来写单元测试。

npm run test

e2e 测试

Jest 依然可以用来写 e2e 测试,这里还要配合 supertest 这个库来编写测试用例。

注意:在运行 e2e 测试前,需要先启动缓存和数据库,具体请看上面的 docker 运行。

npm run test:e2e

技术栈

前端

  • React.js
  • Sass
  • TypeScript

后端

  • Nest.js
  • TypeScript
  • TypeORM
  • MariaDB
  • Redis
  • Swagger

More Repositories

1

make-wheels

🔥 🔥 《造轮子》系列小书 —— 带你造 10 个实用的 npm 库 📦
HTML
1,631
star
2

jest-tutorial

🃏《Jest 实践指南》
Shell
766
star
3

overwatch-ui

🎮 A UI library of Overwatch, built with Vue.js
Vue
446
star
4

linter-tutorial

👮‍♀️ 《Linter 上手完全指南》
JavaScript
200
star
5

guitar-tabs-editor

🎸 A portable guitar tabs editor 🎼 based on react.js, inspired by Markdown and LaTex.
JavaScript
128
star
6

codeblock-beautifier

💅 A chrome extension for highlighting codes of Medium Articles
CSS
121
star
7

jest-tutorial-example

🃏《Jest 实践指南》的配套项目
TypeScript
89
star
8

my-react-error-bounday

手把手教你实现 react-error-boundary
TypeScript
61
star
9

ttplayer

用 React + Audio API 实现一个千千静听
TypeScript
48
star
10

weixin-cash

💰 仿微信记账小程序的 React App。
TypeScript
34
star
11

wtf-cli

A command tool for looking up abbreviation.
JavaScript
32
star
12

react-p2p-chatroom

使用 Peer.js 写的一个 React Chat App
JavaScript
21
star
13

react-chord-generator

Generator for generating chords of guitar or ukulele in the form of svg.
JavaScript
21
star
14

my-js-cookie

手把手带你造 js-cookie 轮子
TypeScript
18
star
15

my-copy-to-clipboard

手把手带你造一个 copy-to-clipboard 轮子
TypeScript
14
star
16

leetcode-python

Python solutions to coding questions in Leetcode
Python
13
star
17

my-redux

从 0 到 1 实现一个 redux
TypeScript
13
star
18

qiankun-refactor

一个用来重构的管理后台
JavaScript
11
star
19

ebook-paypal-payment

TypeScript
11
star
20

bigass-micro-app

京东 MicroApp 例子
JavaScript
11
star
21

my-react-infinite-scroller

手把手实现基于 React 的无限滚动
TypeScript
10
star
22

bilibili-activity-page-demo

TypeScript
9
star
23

react-media-recorder

封装一个录音、录像的 React Hook 方法
TypeScript
9
star
24

my-promise-poller

手把手实现 JS 的 Promise 轮训机制
TypeScript
9
star
25

mini-load-micro-app

加载微应用的最小实现
JavaScript
9
star
26

awesome-a-cat-a-dog

This repo is a collection of App: a-cat-a-dog for showing cats 🐱 and dogs 🐶.
HTML
8
star
27

easy-refer

一个方便在北美内推的网站应用
Vue
7
star
28

react-guitar-lyrics

JavaScript
6
star
29

cxk-dance

字符画:蔡徐坤跳舞
Python
6
star
30

mini-jest

Jest 的最小实现
JavaScript
6
star
31

node-autodoc

An API documentation generator driven by unit testing.
JavaScript
6
star
32

qiankun-bigass-app

JavaScript
5
star
33

my-cli

Some Awesome cli tools!
5
star
34

tenet

A VsCode extension for writing code in the inversion world
TypeScript
5
star
35

mini-css-sandbox

实现一个简单的样式隔离沙箱
JavaScript
5
star
36

uci-reg-api

To get class information from UCI REG
TypeScript
5
star
37

video-category-feeds-demo

TypeScript
5
star
38

webrtc-take-photo

JavaScript
5
star
39

sweep-skeleton

扫光骨架屏
TypeScript
5
star
40

my-idb-keyval

手把手带你造一个 idb-keyval 轮子
TypeScript
5
star
41

learn-xlsx

使用 xlsx 实现 Excel 导入导出。
TypeScript
5
star
42

resume

我的个人简历,欢迎查看与 Clone 来生成你的简历。
JavaScript
5
star
43

sketch-book

A demo for sketch book.
JavaScript
4
star
44

react-rxjs-pokemon

React + Rxjs 的 Pokemon 项目
TypeScript
4
star
45

yan-xuan

模仿网易严选
Vue
4
star
46

learn-redux-from-docs

根据 Redux 的垃圾文档来总结如何使用 Redux
TypeScript
4
star
47

haixiangyan

JavaScript
4
star
48

split-wise-react

React 版本的记账软件
JavaScript
4
star
49

my-redux-thunk

手把手实现一个 redux-thunk 中间件
JavaScript
4
star
50

bucket-list

拒绝肥宅从我做起!
3
star
51

number-display-demo

TypeScript
3
star
52

docker-todo

使用 Docker 部署一个简单的 Todo App,包含 client, server, redis, mariadb 四个容器。
JavaScript
3
star
53

static-webapp-typescript-template

A minimum template for building a static web app with TypeScript.
JavaScript
3
star
54

learn-react-hooks

学习 React hooks 的项目
TypeScript
3
star
55

facebook-ui

A UI library is built for Facebook, using React.
TypeScript
2
star
56

mini-js-sandbox

Qiankun 沙箱简单实现
JavaScript
2
star
57

leizixin

2
star
58

keng

坑 🐛
2
star
59

my-mini-books

收录所有我写的小书,欢迎白嫖和 Star~
2
star
60

a-cat-a-dog-react

A Vue App for showing cats 🐱 and dogs 🐶.
TypeScript
2
star
61

overwatch-ui-doc

Documentation website of Overwatch UI library.
Vue
2
star
62

ui-demo

UI 交互 Demo
TypeScript
2
star
63

mini-redux

redux 的简单实现
JavaScript
2
star
64

my-react-contenteditable

手把手实现一个简单的文本编辑器
TypeScript
2
star
65

a-cat-a-dog-ng

An Angular App for showing cats 🐱 and dogs 🐶
TypeScript
2
star
66

electron-demo

Little demo for building electron app
JavaScript
1
star
67

thanos-snap-cli

Randomly delete half of files in current folder
JavaScript
1
star
68

webrtc-video-peer.js

使用 peer.js 来使用 WebRTC
HTML
1
star
69

learn-reduce

学习 reduce 函数
TypeScript
1
star
70

origin-yanxuan

JavaScript
1
star
71

jianshu

CSS
1
star
72

uci-cs-253

Homework of CS 253 in UCI
JavaScript
1
star
73

split-wise-vue

Vue
1
star
74

linter-guide

已改名为 linter-tutorial,请前往 https://github.com/haixiangyan/linter-tutorial 查看
1
star
75

feishu-chatgpt

Go
1
star
76

sea-monster-ui

A very cool ui library built with React.js
JavaScript
1
star
77

split-wise-ruby

A project to learn ruby step by step
Ruby
1
star
78

learn-webpack

学习 Webpack
TypeScript
1
star
79

ant-design-cms

使用 Ant Design 实现的一个管理后台.
TypeScript
1
star
80

sliding-clock

滚动时钟
TypeScript
1
star
81

go-sync

使用 Go 实现手机、电脑同传的软件
JavaScript
1
star
82

translate-chr

Chrome extension for translation
JavaScript
1
star
83

lintcode-java

Solutions for lintcode
Java
1
star
84

my-supertest

手把手实现一个测试接口的框架 supertest
JavaScript
1
star
85

checkin-1point3acres

一键签到一亩三分地
TypeScript
1
star
86

react-adder

TypeScript
1
star
87

vue3-easy-ui

Vue
1
star
88

nest-passport

Nest.js + Passport 的最简单实现,包含各种基本身份验证场景。
TypeScript
1
star
89

react-marquee

制作一个跑马灯
TypeScript
1
star
90

easy-refer-server

项目 easy-refer 的服务器
TypeScript
1
star
91

facebook-ui-doc

TypeScript
1
star
92

a-cat-a-dog-vue

A Vue App for showing cats 🐱 and dogs 🐶.
Vue
1
star
93

hero-list

TypeScript
1
star
94

node-todo

Todo list made with fs module of Node.js
JavaScript
1
star
95

debounce-throttle

debounce 和 throttle 的简单实现
JavaScript
1
star
96

ant-design-lowcode

使用 low code 的方式编辑 ant-design list
1
star
97

flutter_todo

Dart
1
star
98

upload-server

JavaScript
1
star
99

awesome-blogs

收集一些国外优秀博客。
1
star
100

security-demo

A repo for simulating network attacks: XSS, CSRF and DDoS.
JavaScript
1
star