# study
**Repository Path**: zzssheng/study
## Basic Information
- **Project Name**: study
- **Description**: No description available
- **Primary Language**: Unknown
- **License**: Not specified
- **Default Branch**: master
- **Homepage**: None
- **GVP Project**: No
## Statistics
- **Stars**: 0
- **Forks**: 0
- **Created**: 2026-08-24
- **Last Updated**: 2026-09-11
## Categories & Tags
**Categories**: Uncategorized
**Tags**: None
## README
# zzs 学习项目
前后端分离的全栈学习项目：
| 目录 | 说明 | 技术栈 |
|------|------|--------|
| `django_zzs/` | 后端 API 服务 | Django 5.2 + SimpleUI + SQLite |
| `vue_zzs/` | 前端应用 | Vue 3 + Vite + TypeScript + Vue Router |
```
study/
├── django_zzs/ # Django 后端
│ ├── config/ # 项目配置（settings / urls / wsgi / asgi）
│ ├── manage.py
│ ├── pyproject.toml # uv 依赖清单
│ ├── uv.lock
│ └── db.sqlite3 # SQLite 数据库（已 gitignore）
└── vue_zzs/ # Vue 前端
├── src/
│ ├── assets/ # 静态资源
│ ├── components/ # 通用组件
│ ├── pages/ # 页面
│ ├── router/ # 路由
│ ├── App.vue
│ └── main.ts
├── index.html
├── package.json
└── vite.config.ts # 别名 @ -> src
```
---
## 一、后端（django_zzs）
### 环境要求
- Python **3.11+**
- [uv](https://docs.astral.sh/uv/)（Python 包管理器，替代 pip/venv）
### 安装依赖
```bash
cd django_zzs
uv sync
```
首次执行会自动创建 `.venv` 虚拟环境并安装 `pyproject.toml` 中声明的依赖。
> 如果后续新增了依赖，只需在 `pyproject.toml` 中修改并重新执行 `uv sync`，或直接执行 `uv add <包名>`。
### 初始化数据库
首次运行前执行迁移，创建数据表：
```bash
uv run python manage.py migrate
```
### 创建超级管理员（用于登录后台）
```bash
uv run python manage.py createsuperuser
```
按提示输入用户名、邮箱、密码即可。
### 启动开发服务器
```bash
uv run python manage.py runserver
```
- 默认地址：
- 后台管理：（已集成 SimpleUI 美化）
- 代码改动后会自动热重载，无需手动重启
### 其他常用命令
```bash
uv run python manage.py makemigrations # 根据模型变更生成迁移文件
uv run python manage.py migrate # 应用迁移
uv run python manage.py startapp <名称> # 创建新 app（见下文）
uv run python manage.py shell # 进入交互式 Python 环境
uv run python manage.py check # 检查配置是否有问题
```
---
## 二、前端（vue_zzs）
### 环境要求
- Node.js **22.18+ 或 24.12+**（见 `package.json` engines 字段）
- [pnpm](https://pnpm.io/)（安装：`npm install -g pnpm`）
### 安装依赖
```bash
cd vue_zzs
pnpm install
```
### 启动开发服务器（热更新）
```bash
pnpm dev
```
- 默认地址：
- 修改代码自动刷新页面
### 构建生产版本
```bash
pnpm build
```
产物输出到 `dist/` 目录，构建前会自动执行类型检查。
### 预览构建产物
```bash
pnpm preview
```
### 其他常用命令
```bash
pnpm type-check # 仅做 TypeScript 类型检查
pnpm build-only # 仅构建，不执行类型检查
```
### 开发小贴士
- 路径别名：`@` 指向 `src/`，例如 `import App from '@/App.vue'`
- 新增页面：在 `src/pages/` 下新建 `.vue` 文件，并在 `src/router/` 中注册路由
---
## 三、前后端联调
开发时前端和后端分别运行：
```bash
# 终端 1：后端
cd django_zzs
uv run python manage.py runserver
# 终端 2：前端
cd vue_zzs
pnpm dev
```
前端通过 API 请求后端时，需要在 `vite.config.ts` 中配置代理，避免跨域。示例（按需修改）：
```ts
// vue_zzs/vite.config.ts
export default defineConfig({
plugins: [vue()],
server: {
proxy: {
'/api': {
target: 'http://127.0.0.1:8000',
changeOrigin: true,
},
},
},
})
```
之后前端即可用 `/api/...` 访问后端接口。
---
## 四、如何添加新的 Django app
假设要新增一个名为 `blog` 的 app，步骤如下：
### 1. 创建 app
在 `django_zzs` 目录下执行：
```bash
cd django_zzs
uv run python manage.py startapp blog
```
生成目录结构：
```
blog/
├── migrations/ # 数据库迁移文件
├── __init__.py
├── admin.py # 后台管理注册
├── apps.py # app 配置
├── models.py # 数据模型
├── tests.py # 测试
└── views.py # 视图
```
### 2. 注册到 settings
打开 `config/settings.py`，在 `INSTALLED_APPS` 列表中加入 `'blog'`：
```python
INSTALLED_APPS = [
'simpleui',
# ... Django 内置 app
'blog', # 新增
]
```
### 3. 定义数据模型
编辑 `blog/models.py`，例如：
```python
from django.db import models
class Post(models.Model):
title = models.CharField(max_length=100)
content = models.TextField()
created_at = models.DateTimeField(auto_now_add=True)
def __str__(self):
return self.title
```
### 4. 生成并应用迁移
```bash
uv run python manage.py makemigrations blog
uv run python manage.py migrate
```
### 5. 编写视图并配置路由
在 `blog/views.py` 中写视图，然后创建 `blog/urls.py`：
```python
# blog/urls.py
from django.urls import path
from . import views
urlpatterns = [
path('list/', views.post_list, name='post_list'),
]
```
最后在 `config/urls.py` 中挂载：
```python
from django.urls import include, path
urlpatterns = [
path('admin/', admin.site.urls),
path('blog/', include('blog.urls')), # 新增
]
```
### 6. 注册后台管理（可选）
编辑 `blog/admin.py`，让模型出现在 SimpleUI 后台：
```python
from django.contrib import admin
from .models import Post
@admin.register(Post)
class PostAdmin(admin.ModelAdmin):
list_display = ('title', 'created_at')
```
### 7. 验证
```bash
uv run python manage.py runserver
```
访问 查看效果，或进入 管理数据。
---
## 五、常见问题
| 问题 | 解决方法 |
|------|----------|
| `uv: 无法识别命令` | 安装 uv：`pip install uv` 或 `winget install astral-sh.uv` |
| `pnpm: 无法识别命令` | `npm install -g pnpm` |
| 端口被占用 | `runserver 8001` / `pnpm dev --port 5174` 换端口启动 |
| 数据库文件被改动想重置 | 删除 `django_zzs/db.sqlite3` 后重新 `migrate` + `createsuperuser` |
docker compose up -d --build
docker compose exec backend python manage.py createsuperuser
docker compose build
docker images
docker compose push
docker compose up -d --pull always