资产登记网站：一个全栈项目的结构与实现
以前在学校的某个部门做勤工助学，某天上级突然说想要一套“知识产权管理系统”。具体需求没细讲——甚至没明确说要网页还是小程序（后来看别的学院搞了小程序）。总之，就是需要老师上传材料，我们去审批。于是我开始动手。
功能
凭自己理解，设计了如下流程：
- 老师登录后可以提交知识产权材料（专利、软著等），支持多文件上传（最多10个，每个50MB）。
- 提交后，审批人（我们）看到待审批列表，可以“通过”或“驳回”，并填写意见。
- 系统会自动发送消息通知，比如“您的申请已通过”。
- 基础的用户管理（增删查改）也做了。
技术栈
- 后端：Node.js + Express + TypeScript + SQLite（开发时用）
- 前端：Vue 3 + Pinia + Vite
- 安全：自签名 SSL 证书，强制 HTTPS（显得安全）
- 文件存储：本地 uploads 目录
开发时在自己的笔记本上，懒得重新配置 MySQL，直接用 SQLite 省事。后面如果要部署到服务器，会换成 MySQL。
运行截图
几个印象深刻的坑
1. 登录从“工号”改成了“手机号”
按常理想，学校老师应该用工号登录。结果被告知：“很多老师连自己工号都不知道，用手机号吧。”
于是把登录字段从 employeeId 改成 phone，用户表加了一个 phone 列，工号只当备用标识。
2. 自签名证书的信任问题
为了“假装安全”，用 OpenSSL 生成了自签名证书，启用了 HTTPS。
但老师们打开浏览器时会提示“您的连接不是私密连接”。我只能挨个说：“点高级 → 继续访问”。后来想想，还不如直接用 HTTP。
3. 文件上传大小限制
默认 Express 解析 body 有大小限制。老师传的 PDF 常超过默认值，导致 413 错误。
解决：配置 express.json({ limit: '50mb' }) 和 express.urlencoded({ extended: true, limit: '50mb' })，同时调整了 nginx 的上传限制。
4. 密码加密
用户密码不能明文存。用了 bcrypt 做哈希加盐。但领导提出“要能找回密码”，我说哈希不可逆，只能重置。最后做了重置密码功能（手动操作，没有邮件服务）。
5. SQLite 并发写入问题
SQLite 默认不支持高并发写入，好在老师数量少，访问量低，勉强能用。偶尔更新状态时报 SQLITE_BUSY，加了一个重试循环解决。
结局
项目赶在毕业前交了上去。领导没实际看过界面（金融博士，不懂技术栈），只能期待下一个勤工助学的同学会用我的代码。
这玩意代码加依赖快 300MB，就不直接扔博客了。上传 GitHub？恐怕真的会成为黑历史。
结构树
asset-registration-website
├── 📁 backend/ 后端服务代码（Node.js + TypeScript）
│ ├── 📁 src/ 后端源代码目录
│ │ ├── 📁 config/ 配置文件（环境变量、数据库连接配置等）
│ │ ├── 📁 controllers/ 控制器层（处理用户注册、提交材料等业务逻辑）
│ │ ├── 📁 middleware/ 中间件目录（如 auth.ts 用于身份认证与权限校验）
│ │ ├── 📁 models/ 数据模型定义（对应 User、Submission 等数据库表结构）
│ │ ├── 📁 routes/ 路由定义（映射 auth、collections、submissions 等接口）
│ │ ├── 🔷 app.ts Express 应用实例创建与中间件配置
│ │ ├── 🔷 database.ts 数据库连接初始化（SQLite）
│ │ └── 🔷 server.ts 服务器启动入口（监听端口）
│ ├── 📁 uploads/ 用户上传的文件存放目录（带时间戳命名）
│ ├── 📄 database.sqlite SQLite 本地数据库文件
│ └── 🟨 package.json 后端项目依赖与脚本配置（含 tsconfig 等编译配置）
│
├── 📁 frontend/ 前端代码（Vue 3 + TypeScript）
│ ├── 📁 src/ 前端源代码目录
│ │ ├── 📁 api/ API 请求封装（调用 auth、collection、upload 等后端接口）
│ │ ├── 📁 components/ 可复用的 Vue 组件（如 NavigationBar.vue 顶部导航栏）
│ │ ├── 📁 router/ 路由管理（含 guards.ts 路由守卫，控制页面跳转与鉴权）
│ │ ├── 📁 stores/ Pinia 状态管理（管理 auth 登录状态、notification 通知等）
│ │ ├── 📁 types/ TypeScript 类型定义（如 collection.ts 收集任务接口）
│ │ ├── 📁 views/ 页面级组件
│ │ │ ├── 📄 Login.vue 登录页面
│ │ │ ├── 📄 Home.vue 首页
│ │ │ ├── 📄 Publish.vue 发布收集任务页面（管理者用）
│ │ │ ├── 📄 FillForm.vue 填写收集表单页面
│ │ │ ├── 📄 Approval.vue 审批页面（上级审核提交内容）
│ │ │ └── 📄 ... 其他页面（Assets、FileManager、Notifications 等）
│ │ ├── 📄 App.vue 根组件（包含整体布局与路由出口）
│ │ └── 🔷 main.ts 前端应用入口（创建并挂载 Vue 实例）
│ ├── 🌐 index.html HTML 模板入口
│ └── 🟨 package.json 前端项目配置与依赖（含 Vite、TS 等构建配置）