课程进度 96% · 第20/20章第20/20章 · 标签 1/4
— 1 —
项目结构与开发流程
目录结构与环境配置
bash
1
my-project/
2
├─ public/
3
├─ src/
4
│ ├─ components/
5
│ ├─ pages/
6
│ ├─ api/
7
│ ├─ store/
8
│ ├─ utils/
9
│ └─ App.jsx
10
├─ .env
11
├─ package.json
12
├─ README.md
开发规范建议
- 统一代码风格（Prettier、ESLint）
- 模块化、组件化开发
- 环境变量分离（.env.development/.env.production）
— 2 —
常见业务模块
登录注册与表单校验：
javascript
1
// 登录表单示例（React）
2
function Login() {
3
const [user, setUser] = React.useState('');
4
const [pwd, setPwd] = React.useState('');
5
const handleSubmit = e => {
6
e.preventDefault();
7
if (!user || !pwd) return alert('请填写完整');
8
// 调用API
9
};
10
return (
11
<form onSubmit={handleSubmit}>
12
<input value={user} onChange={e => setUser(e.target.value)} placeholder="用户名" />
13
<input type="password" value={pwd} onChange={e => setPwd(e.target.value)} placeholder="密码" />
14
<button type="submit">登录</button>
15
</form>
16
);
17
}
列表与分页、文件上传：
javascript
1
// 列表分页（伪代码）
2
const [list, setList] = useState([]);
3
const [page, setPage] = useState(1);
4
useEffect(() => {
5
fetch('/api/list?page=' + page).then(r => r.json()).then(setList);
6
}, [page]);
7
// 文件上传
8
function upload(file) { /* ... */ }
9
<input type="file" onChange={e => upload(e.target.files[0])} />
目录结构ESLintPrettier模块化环境变量