# vue3-vite-shop-final

**Repository Path**: qqssww_11/vue3-vite-shop-final

## Basic Information

- **Project Name**: vue3-vite-shop-final
- **Description**: 电商网站期末作业
- **Primary Language**: Unknown
- **License**: Not specified
- **Default Branch**: master
- **Homepage**: None
- **GVP Project**: No

## Statistics

- **Stars**: 0
- **Forks**: 0
- **Created**: 2025-12-30
- **Last Updated**: 2025-12-31

## Categories & Tags

**Categories**: Uncategorized

**Tags**: None

## README

# Vue3+Vite 新闻网站项目

基于Vue3+Vite构建的现代化新闻网站，支持文章发布、评论互动等功能。

## 项目信息

- **作者**：丘斯炜
- **学号**：24001596
- **班级**：24软件技术1班
- **技术栈**：Vue 3 + Vite + TypeScript + Element Plus + Pinia + Vue Router

## 项目特性

### ✅ 已完成的优化功能

1. **导航栏全面升级**
   - 高度调整为90px，宽屏100%铺满
   - 左侧：XX新闻logo（28px+渐变配色）+ "首页/新闻列表"固定按钮
   - 右侧：显示"丘斯炜（24001596）"+ "退出登录"按钮
   - 按钮尺寸放大（宽度≥80px，高度≥40px），hover时高亮
   - 导航栏固定吸顶，滚动时始终显示
   - 移动端适配：汉堡按钮+logo，展开后显示"新闻列表""退出登录"

2. **详情页返回功能**
   - 详情页顶部（标题上方）新增"返回新闻列表"按钮
   - 按钮样式：主色渐变背景+圆角8px+图标（←）+文字
   - 尺寸：宽度≥120px，高度≥40px
   - 响应式适配：移动端居中显示

3. **5篇新闻详情页完全差异化**
   - 每篇新闻标题/正文/图片/发布时间/评论均不重复
   - 5篇新闻主题：
     - AI医疗：《AI辅助诊断技术落地基层医院》（2025-05-10）
     - 碳中和政策：《2025碳中和新政策解读》（2025-05-08）
     - 教育数字化：《高校数字化教学平台全覆盖》（2025-05-05）
     - 新能源汽车销量：《2025Q1新能源汽车销量增长40%》（2025-05-03）
     - 传统文化创新：《非遗手作+直播，年销破千万》（2025-05-01）
   - 每篇详情页包含：作者栏（丘斯炜，学号：24001596，24软件技术1班）、正文（段落分隔+引用块+小标题）、2条测试评论

4. **响应式适配全端验证**
   - PC端（≥1200px）：列表3列布局，导航栏完整显示
   - 平板端（768px-1199px）：列表2列布局，导航栏折叠为"logo+汉堡按钮"
   - 移动端（≤767px）：列表1列布局，导航栏仅显示"logo+汉堡按钮"，输入框/按钮高度≥48px
   - 所有页面无横向滚动条，元素自适应屏幕宽度

5. **API对接预留**
   - 所有接口正确拼接typeIndex（文章typeIndex=1，评论typeIndex=4）
   - 保留"模拟数据开关"，注释/取消注释即可切换
   - 所有API请求携带用户ID（从Pinia中获取）
   - 详细API对接说明见 `API对接说明.md`

6. **真实信息固化**
   - 注册页：默认填充"用户名=24001596、密码=123456、realName=丘斯炜、stuNum=24001596、className=24软件技术1班"
   - 登录页：默认填充学号24001596、密码123456，"游客登录"按钮直接用我的信息登录
   - 发布内容：发布的新闻中明确标注"作者：丘斯炜（学号：24001596，24软件技术1班）"
   - 每篇详情页的评论区，用我的账号发布1条专属评论

## 快速开始

## Recommended IDE Setup

[VS Code](https://code.visualstudio.com/) + [Vue (Official)](https://marketplace.visualstudio.com/items?itemName=Vue.volar) (and disable Vetur).

## Recommended Browser Setup

- Chromium-based browsers (Chrome, Edge, Brave, etc.):
  - [Vue.js devtools](https://chromewebstore.google.com/detail/vuejs-devtools/nhdogjmejiglipccpnnnanhbledajbpd)
  - [Turn on Custom Object Formatter in Chrome DevTools](http://bit.ly/object-formatters)
- Firefox:
  - [Vue.js devtools](https://addons.mozilla.org/en-US/firefox/addon/vue-js-devtools/)
  - [Turn on Custom Object Formatter in Firefox DevTools](https://fxdx.dev/firefox-devtools-custom-object-formatters/)

## Type Support for `.vue` Imports in TS

TypeScript cannot handle type information for `.vue` imports by default, so we replace the `tsc` CLI with `vue-tsc` for type checking. In editors, we need [Volar](https://marketplace.visualstudio.com/items?itemName=Vue.volar) to make the TypeScript language service aware of `.vue` types.

## Customize configuration

See [Vite Configuration Reference](https://vite.dev/config/).

## 快速开始

### 安装依赖

```sh
npm install
```

### 开发模式

```sh
npm run dev
```

访问 http://localhost:5173 查看项目

### 生产构建

```sh
npm run build
```

### 代码检查

```sh
npm run lint
```

## 项目结构

```
news-website/
├── src/
│   ├── api/              # API请求封装
│   │   └── index.ts      # 所有API接口定义（含模拟数据）
│   ├── components/        # 公共组件
│   │   └── NavBar.vue    # 导航栏组件
│   ├── config/            # 配置文件
│   │   └── api.ts        # API配置（BASE_URL、typeIndex等）
│   ├── router/            # 路由配置
│   │   └── index.ts      # 路由定义和守卫
│   ├── stores/            # Pinia状态管理
│   │   └── user.ts       # 用户状态管理
│   ├── views/             # 页面组件
│   │   ├── ArticleListView.vue      # 文章列表页
│   │   ├── ArticleDetailView.vue    # 文章详情页
│   │   ├── ArticleAddView.vue       # 发布文章页
│   │   ├── LoginView.vue            # 登录页
│   │   └── RegisterView.vue         # 注册页
│   ├── App.vue            # 根组件
│   └── main.ts            # 入口文件
├── API对接说明.md         # API对接详细说明
└── README.md              # 项目说明文档
```

## 功能说明

### 1. 用户系统
- **注册**：支持学号、密码、真实姓名、班级等信息注册
- **登录**：支持账号密码登录和游客一键登录
- **用户信息**：自动显示"姓名（学号）"格式

### 2. 文章系统
- **文章列表**：支持分页，响应式布局（PC 3列/平板 2列/移动 1列）
- **文章详情**：支持HTML格式内容，包含图片、引用块、小标题等
- **发布文章**：支持标题、封面、内容（HTML格式）发布

### 3. 评论系统
- **评论列表**：显示文章的所有评论
- **发布评论**：登录用户可发布评论

### 4. 导航系统
- **固定导航栏**：90px高度，固定吸顶
- **首页按钮**：所有页面可见，一键返回新闻列表
- **移动端适配**：汉堡菜单，展开后显示完整功能

## API对接

详细API对接说明请查看 `API对接说明.md` 文件。

**快速切换API地址**：
1. 打开 `src/config/api.ts`
2. 修改 `BASE_API_URL` 为老师的真实API地址
3. 在 `src/api/index.ts` 中取消注释真实API调用代码，注释掉模拟数据

## 默认账号信息

- **学号**：24001596
- **密码**：123456
- **真实姓名**：丘斯炜
- **班级**：24软件技术1班

登录页和注册页已默认填充以上信息，可直接使用。

## 浏览器支持

- Chrome（推荐）
- Edge
- Firefox
- Safari

## 开发工具推荐

- [VS Code](https://code.visualstudio.com/)
- [Vue Language Features (Volar)](https://marketplace.visualstudio.com/items?itemName=Vue.volar)
- [Vue.js devtools](https://chromewebstore.google.com/detail/vuejs-devtools/nhdogjmejiglipccpnnnanhbledajbpd)

## 注意事项

1. 项目当前使用模拟数据，切换真实API请参考 `API对接说明.md`
2. 所有接口会自动拼接typeIndex参数，无需手动添加
3. 用户ID会自动从Pinia store获取，无需手动传入
4. 移动端建议使用Chrome浏览器测试，确保最佳体验

## 更新日志

### 2025-05-10
- ✅ 导航栏全面升级（90px高度、固定吸顶、首页按钮）
- ✅ 详情页返回功能
- ✅ 5篇新闻详情页完全差异化
- ✅ 响应式适配全端验证
- ✅ API对接预留完善
- ✅ 真实信息固化

---

**项目作者**：丘斯炜（24001596，24软件技术1班）