# 25秋软分-前端开发

**Repository Path**: ma-lufeng/ThinkVerse-fronted

## Basic Information

- **Project Name**: 25秋软分-前端开发
- **Description**: 此仓库用于前端开发
- **Primary Language**: Unknown
- **License**: Not specified
- **Default Branch**: main
- **Homepage**: None
- **GVP Project**: No

## Statistics

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

## Categories & Tags

**Categories**: Uncategorized

**Tags**: None

## README

# ThinkVerse 前端项目（Vue3 + Vite）

本仓库为 ThinkVerse 学术成果分享平台的**前端**。实际可运行的前端工程位于 `fronted/` 目录（项目名里虽然写了 fronted，但它就是前端工程根目录）。

---

## 1. 环境要求

- **Node.js**：建议 **16+**（`vite@4` 需要 `^14.18.0 || >=16.0.0`，用 16/18 更稳）
- **npm**：随 Node 自带即可
- **Sass（SCSS 预处理器）**：项目里有页面使用了 `lang="scss"`，需要安装 `sass` 依赖（本仓库已加入 `devDependencies`）
- **后端网关**：开发环境默认通过 Vite 代理转发到 `http://localhost:8080`（见 `fronted/vite.config.js`）；如需自定义可设置 `VITE_PROXY_TARGET` 环境变量

---

## 2. 一键运行（Windows / PowerShell）

在仓库根目录执行：

```bash
cd fronted
npm install
npm run dev
```

启动后：

- **前端地址**：通常是 `http://localhost:3000`
- Vite 配置默认 **端口 3000** 并自动打开浏览器（见 `fronted/vite.config.js`）

---

## 3. 构建与预览（上线前常用）

```bash
cd fronted
npm run build
npm run preview
```

- `build`：打包产物到 `fronted/dist/`
- `preview`：本地预览打包结果（不是开发模式）

---

## 4. 项目入口与运行链路（最重要）

页面渲染主链路如下：

1. `fronted/index.html`：提供 `<div id="app"></div>` 挂载点
2. `fronted/src/main.js`：创建 Vue 应用并注册插件
   - `vue-router`（路由）
   - `pinia`（状态管理）
   - `element-plus`（UI 组件库）
3. `fronted/src/App.vue`：根组件只渲染 `<router-view />`
4. `fronted/src/router/index.js`：定义路由表与路由守卫（登录拦截）

---

## 5. 登录与权限（为什么没登录会被踢去登录页）

路由守卫位于 `fronted/src/router/index.js`：

- 除了 `Login` / `Register` 以外的页面，**若本地没有 `localStorage.token` 会强制跳转到登录页**
- 管理端页面路由带了 `meta: { requiresAdmin: true }`，但当前守卫只做“是否登录”的检查（是否管理员通常在页面逻辑或后端鉴权完成）

本地存储（见 `fronted/src/store/auth.js`）：

- `token`：JWT Token（请求会自动带上）
- `userInfo`：用户信息 JSON
- `userId`：用户 ID（请求会额外带 `X-USER-ID`）

---

## 6. 后端地址/网关配置（请求打到哪里）

所有 API 请求统一由 `fronted/src/utils/request.js` 封装：

- **baseURL**：默认 `"/"`（同源），依赖 Vite 代理把请求转发到网关；生产环境可在构建时注入 `VITE_API_BASE_URL` 为绝对地址
- **请求拦截器**：若有 `token`，自动加请求头：
  - `Authorization: Bearer <token>`
  - `X-USER-ID: <userId>`（如果存在）
- **响应拦截器**：支持后端统一返回结构：
  - 若响应包含 `code`：`code === 200` 时返回 `data`，否则弹错并 reject
  - 若不包含 `code`：直接返回响应体

如果你的后端网关不是 `8080` 或不是本机：

- 开发环境：设置环境变量 `VITE_PROXY_TARGET`（例如 `http://localhost:8080`）
- 生产环境：设置 `VITE_API_BASE_URL`（例如 `http://your-host:8080`）

---

## 7. 目录结构怎么读（快速理解）

`fronted/src/` 下关键目录：

- **`api/`**：接口封装（按业务域拆分）
  - `auth.js`：登录/注册/验证码/用户信息/改密
  - `paper.js`：论文列表、搜索、详情、预览、交互、下载
  - `recommendation.js`：推荐相关接口
  - `search.js`：搜索（高级搜索/全文/分层/建议/健康检查）
  - `admin.js`：后台审核、审计日志、用户列表等
- **`router/`**：路由表与守卫（`index.js`）
- **`store/`**：Pinia store（当前主要是 `auth.js`）
- **`utils/`**：通用工具（当前核心是 `request.js` 请求封装）
- **`views/`**：页面组件（按路由对应）
  - 常规页面：`Home.vue`、`Login.vue`、`Register.vue`、`Paper.vue`、`PaperDetail.vue`、`Recommendation.vue`、`SearchResult.vue`
  - 管理页面：`views/admin/*`
- **`mock/`**：模拟数据（例如 `paperMock.js`，用于接口失败兜底/本地展示）

---

## 8. 路由一览（你能访问哪些页面）

定义于 `fronted/src/router/index.js`：

- `/`：首页 `Home`
- `/login`：登录 `Login`
- `/register`：注册 `Register`
- `/paper`：论文页 `Paper`
- `/paper/:id`：论文详情 `PaperDetail`
- `/recommendation`：推荐页 `Recommendation`
- `/search`：搜索结果 `SearchResult`
- `/admin/review`：审核管理 `ReviewManagement`（按需加载）
- `/admin/audit-logs`：审计日志 `AuditLogs`（按需加载）
- `/admin/permissions`：权限管理 `Permissions`（按需加载）

---

## 9. 常见问题（排查思路）

### 9.1 页面一直跳转到登录页

- 检查浏览器 `localStorage` 是否有 `token`
- 或者先正常走登录接口（见 `src/api/auth.js` 的 `login`）

### 9.2 接口请求失败 / 404 / CORS

- 确认后端网关是否启动，且地址为 `http://localhost:8085`
- 若后端在别的地址：修改 `fronted/src/utils/request.js` 的 `baseURL`
- 当前 Vite 配置里**没有代理**（`vite.config.js` 仅设置端口与 open）

### 9.3 下载接口拿到的是乱码

- `paperAPI.downloadPaper` 使用了 `responseType: 'blob'`，前端需要用 Blob 方式保存文件（一般在页面里做）

---

## 10. 我建议你从哪里开始读代码（入门路线）

1. 先看 `fronted/src/router/index.js`（了解页面与跳转逻辑）
2. 再看 `fronted/src/utils/request.js`（了解请求怎么发、token 怎么带）
3. 最后按功能看 `fronted/src/views/*` 与对应的 `fronted/src/api/*`