# react_todo_list_demo

**Repository Path**: Y_yyyy/react_todo_list_demo

## Basic Information

- **Project Name**: react_todo_list_demo
- **Description**: react的todolist案例
- **Primary Language**: Unknown
- **License**: Not specified
- **Default Branch**: master
- **Homepage**: None
- **GVP Project**: No

## Statistics

- **Stars**: 0
- **Forks**: 0
- **Created**: 2024-10-30
- **Last Updated**: 2024-10-30

## Categories & Tags

**Categories**: Uncategorized

**Tags**: None

## README

# React + Vite

运行条件：1、需要安装一个json-server并执行json-server --watch db.json命令，启动json-server，并保证json-server端口为3000
		 2、node版本v18.17.0  npm版本10.5.0
项目简介：项目基于react18以及ant design设计的页面，数据通过json-server实现前后端通讯流程，并实现了登录流程，mock了全局token，并封装路由守卫实现路由拦截，选择了分页的方式，通过json-server实现每次只查询并展示10条数据，总页数通过直接获取db.json数据总数获取（些许误差）

登录账号：root  密码：root

其他优化：
		1、输入框查询写了防抖函数，减少服务器压力（因为json-server无法实现模糊查询，我通过直接获取所有数据，再手动过滤实现模糊查询）
		2、封装axios，实现了全局的post跟put请求的节流 
		3、路由懒加载，封装路由守卫，在未登录的状态下无法进入todolist页面