# juejin-web

**Repository Path**: wuppt/juejin-web

## Basic Information

- **Project Name**: juejin-web
- **Description**: 仿掘金前端
- **Primary Language**: Unknown
- **License**: Not specified
- **Default Branch**: master
- **Homepage**: None
- **GVP Project**: No

## Statistics

- **Stars**: 0
- **Forks**: 0
- **Created**: 2026-03-06
- **Last Updated**: 2026-03-06

## Categories & Tags

**Categories**: Uncategorized

**Tags**: None

## README

# 掘金社区 - 前端项目

基于 Nuxt 3 的现代化前端应用，提供流畅的用户体验和精美的界面设计。

## 📦 技术栈

- **框架**: [Nuxt 3.16](https://nuxt.com/) - Vue 3 全栈框架
- **语言**: [TypeScript 5.8](https://www.typescriptlang.org/) - 类型安全
- **样式**: [TailwindCSS 4](https://tailwindcss.com/) - 原子化 CSS
- **状态管理**: [Pinia](https://pinia.vuejs.org/) - Vue 3 官方状态管理
- **HTTP 客户端**: [Ofetch](https://github.com/unjs/ofetch) - 智能请求库
- **代码规范**: ESLint + Prettier

## 🎯 核心特性

### 架构设计
- ✅ 前后端分离架构
- ✅ TypeScript 类型安全
- ✅ 组件化开发
- ✅ 响应式设计
- ✅ SSR 服务端渲染
- ✅ SEO 优化

### 功能模块
- ✅ 用户认证系统 (JWT)
- ✅ 文章浏览/发布/编辑
- ✅ 问答系统
- ✅ 沸点发布
- ✅ 评论互动
- ✅ 私信聊天
- ✅ 关注系统
- ✅ 点赞收藏
- ✅ 等级积分
- ✅ 个人中心

### 性能优化
- ✅ 按需加载
- ✅ 图片懒加载
- ✅ 虚拟滚动
- ✅ 请求缓存
- ✅ 组件懒加载
- ✅ Tree Shaking

### 用户体验
- ✅ 加载骨架屏
- ✅ 错误边界处理
- ✅ Toast 提示
- ✅ 确认对话框
- ✅ 表单验证
- ✅ 无限滚动

## 🚀 开发指南

### 环境准备
```bash
# Node.js >= 18.0.0
node -v

# 安装依赖
npm install

# 启动开发服务器
npm run dev
```

### 项目结构
```
juejin-web/
├── app/                    # 应用源码
│   ├── api/               # API 接口定义
│   ├── components/        # 公共组件
│   ├── composables/       # 组合式函数
│   ├── layouts/          # 布局组件
│   ├── middleware/       # 路由中间件
│   ├── pages/            # 页面组件
│   ├── plugins/          # 插件
│   ├── stores/           # Pinia 状态管理
│   ├── types/            # TypeScript 类型定义
│   └── utils/            # 工具函数
├── assets/                # 静态资源
├── public/               # 公共资源
└── nuxt.config.ts        # Nuxt 配置
```

### 核心目录说明

#### `app/api/` - API 接口
统一管理所有后端接口调用，包含:
- `auth.ts` - 认证相关
- `user.ts` - 用户相关
- `article.ts` - 文章相关
- `question.ts` - 问答相关
- `pin.ts` - 沸点相关
- `comment.ts` - 评论相关
- `message.ts` - 私信相关

#### `app/components/` - 组件库
- `layout/` - 布局组件 (Header, Footer, Sidebar)
- `article/` - 文章组件
- `question/` - 问答组件
- `pin/` - 沸点组件
- `comment/` - 评论组件
- `auth/` - 认证组件

#### `app/stores/` - 状态管理
- `user.ts` - 用户状态
- `article.ts` - 文章状态
- `notification.ts` - 通知状态

#### `app/composables/` - 组合式函数
- `useAuth.ts` - 认证逻辑
- `useAuthState.ts` - 认证状态管理
- `useRequest.ts` - 请求封装
- `useDevTip.ts` - 开发提示

### 开发规范

#### 组件命名
```typescript
// 大驼峰命名
ArticleList.vue
UserCard.vue
CommentItem.vue
```

#### API 调用
```typescript
// 使用定义的 API 接口
const { data } = await useAPI('/articles', {
  method: 'GET',
  query: { page: 1, pageSize: 10 }
})
```

#### 状态管理
```typescript
// 使用 Pinia store
const userStore = useUserStore()
await userStore.login(credentials)
```

## 🔐 认证机制

### JWT Token 管理
- **Access Token**: 短期令牌 (2 小时)
- **Refresh Token**: 长期令牌 (7 天)
- **自动刷新**: Token 过期前自动刷新
- **安全存储**: Cookie 仅存储非敏感信息

### Cookie 存储
```typescript
interface SafeUserInfo {
  nickname: string      // 昵称
  avatar: string | null // 头像
  level: number        // 等级
  gender: number       // 性别:0-未知，1-男，2-女
}
```

## 🎨 头像系统

### 智能头像显示
根据用户性别自动显示不同风格的默认头像:

- **男性**: 蓝色背景，阳光帅气的动漫男孩
- **女性**: 粉色背景，可爱甜美的动漫女孩
- **未知**: 紫色背景，神秘风格的动漫角色

### 头像工具类
```typescript
// 获取用户头像
const avatarUrl = getUserAvatar(uploadedAvatar, gender)

// 获取默认头像
const defaultAvatar = getDefaultAvatar(gender)
```

## 📱 响应式设计

支持多种设备:
- 📱 移动端 (< 640px)
- 📱 平板端 (640px - 1024px)
- 💻 桌面端 (> 1024px)

## 🔧 构建部署

### 开发环境
```bash
npm run dev
```

### 生产构建
```bash
npm run build
npm run preview
```

### Docker 部署
```bash
# 构建镜像
docker build -t juejin-web .

# 运行容器
docker run -p 3000:3000 juejin-web
```

## 🐛 常见问题

### 1. 跨域问题
确保后端配置了正确的 CORS 设置，或者使用 Nuxt 代理。

### 2. SSR Cookie 问题
服务端渲染时，需要手动传递 Cookie 到后端接口。

### 3. 头像显示不一致
确保所有地方都使用 `getUserAvatar` 函数获取头像。

## 📚 学习资源

- [Nuxt 3 文档](https://nuxt.com/docs)
- [Vue 3 文档](https://vuejs.org/)
- [TypeScript 文档](https://www.typescriptlang.org/)
- [TailwindCSS 文档](https://tailwindcss.com/)
- [Pinia 文档](https://pinia.vuejs.org/)

## 🤝 贡献

欢迎提交 Issue 和 Pull Request!

## 📄 开源协议

MIT License