零基础开发公路工程档案管理软件全流程实操指南

const sqlite3 = require('sqlite3').verbose();
const path = require('path');
const dbPath = path.resolve(__dirname, 'road_archive.db');
const db = new sqlite3.Database(dbPath);
// 初始化数据库表结构
db.serialize(() => {
// 1. 创建工程项目表
db.run(`CREATE TABLE IF NOT EXISTS projects (
id INTEGER PRIMARY KEY AUTOINCREMENT,
project_name TEXT NOT NULL,
contract_section TEXT,  // 合同段
start_stake TEXT,       // 起止桩号
end_stake TEXT,
create_time DATETIME DEFAULT CURRENT_TIMESTAMP
)`);
// 2. 创建档案表
db.run(`CREATE TABLE IF NOT EXISTS archives (
id INTEGER PRIMARY KEY AUTOINCREMENT,
project_id INTEGER,
category TEXT,          // 档案分类：如路基、路面、桥梁
file_name TEXT,
file_path TEXT,
uploader TEXT,
upload_time DATETIME DEFAULT CURRENT_TIMESTAMP,
FOREIGN KEY(project_id) REFERENCES projects(id)
)`);
});
module.exports = db;

3. 编写核心业务接口

在 server 目录下创建 index.js，实现项目增删改查和档案上传功能。以下是完整的后端代码，复制即可使用：

const express = require('express');
const cors = require('cors');
const multer = require('multer');
const path = require('path');
const fs = require('fs');
const db = require('./database');
const app = express();
const PORT = 3000;
app.use(cors());
app.use(express.json());
// 配置文件上传存储目录
const uploadDir = path.join(__dirname, 'uploads');
if (!fs.existsSync(uploadDir)){
fs.mkdirSync(uploadDir);
}
const storage = multer.diskStorage({
destination: (req, file, cb) => {
cb(null, uploadDir);
},
filename: (req, file, cb) => {
// 保持文件原名称，添加时间戳防止重名
const uniqueSuffix = Date.now() + '-' + Math.round(Math.random()  1E9);
cb(null, uniqueSuffix + '-' + file.originalname);
}
});
const upload = multer({ storage: storage });
//  API 接口
// 1. 获取所有项目列表
app.get('/api/projects', (req, res) => {
db.all("SELECT  FROM projects ORDER BY create_time DESC", [], (err, rows) => {
if (err) return res.status(500).json({ error: err.message });
res.json(rows);
});
});
// 2. 新增项目
app.post('/api/projects', (req, res) => {
const { project_name, contract_section, start_stake, end_stake } = req.body;
const sql = "INSERT INTO projects (project_name, contract_section, start_stake, end_stake) VALUES (?, ?, ?, ?)";
db.run(sql, [project_name, contract_section, start_stake, end_stake], function(err) {
if (err) return res.status(500).json({ error: err.message });
res.json({ id: this.lastID });
});
});
// 3. 获取指定项目的档案列表
app.get('/api/archives/:projectId', (req, res) => {
const { projectId } = req.params;
db.all("SELECT  FROM archives WHERE project_id = ? ORDER BY upload_time DESC", [projectId], (err, rows) => {
if (err) return res.status(500).json({ error: err.message });
res.json(rows);
});
});
// 4. 上传档案
app.post('/api/upload', upload.single('file'), (req, res) => {
if (!req.file) return res.status(400).json({ error: "No file uploaded" });
const { project_id, category, uploader } = req.body;
const sql = "INSERT INTO archives (project_id, category, file_name, file_path, uploader) VALUES (?, ?, ?, ?, ?)";
db.run(sql, [project_id, category, req.file.originalname, req.file.filename, uploader], function(err) {
if (err) return res.status(500).json({ error: err.message });
res.json({ message: "File uploaded successfully", id: this.lastID });
});
});
// 启动服务
app.listen(PORT, () => {
console.log(`Server running at http://localhost:${PORT}`);
});

此时，后端服务已搭建完成。在命令行输入 node index.js 即可启动后端。

第二步：前端界面开发

回到项目根目录 road-archive-system，我们使用 Vite 快速构建前端界面。

1. 初始化前端项目

执行以下命令创建 Vue 项目并安装 UI 组件库 Element Plus（用于快速生成美观的表格和表单）：

cd ..
npm create vite@latest client -- --template vue
cd client
npm install
npm install element-plus axios
npm run dev

2. 配置前端入口

修改 client/src/main.js，引入 Element Plus 样式和组件：

import { createApp } from 'vue'
import './style.css'
import App from './App.vue'
import ElementPlus from 'element-plus'
import 'element-plus/dist/index.css'
const app = createApp(App)
app.use(ElementPlus)
app.mount('app')

3. 开发主界面组件

修改 client/src/App.vue。我们将界面分为左右两栏：左侧为工程项目列表，右侧为当前选中项目的档案管理与上传区域。代码如下：

第三步：系统运行与实操验证

代码编写完毕，现在启动整个系统进行实际操作验证。

1. 启动后端服务

打开第一个终端窗口，进入 server 目录：

cd server
node index.js

终端显示 Server running at http://localhost:3000 表示后端启动成功，且会自动在当前目录生成 road_archive.db 数据库文件。

2. 启动前端服务

打开第二个终端窗口，进入 client 目录：

cd client
npm run dev

终端会显示 Local 地址，通常是 http://localhost:5173。使用浏览器访问该地址。

3. 实操演练流程

1. 创建项目：点击界面左上角的“新建项目”按钮。输入项目名称“G105国道改建工程”，合同段“JD-3”，起止桩号“K10+000”至“K20+000”。点击创建，左侧列表会立即刷新。
2. 上传档案：点击左侧刚创建的项目。在右侧“上传新档案”区域，选择分类为“路基工程”，上传人输入“张工”。点击“选择文件”，从电脑中选择一份 PDF 或 Excel 扫描件。点击“确认上传”。
3. 查看归档：上传成功后，下方“已归档列表”会自动刷新，显示刚才上传的文件名、分类、上传人和精确到秒的上传时间。

第四步：生产环境部署建议

以上是开发环境运行。若需在实际工程管理中使用，建议执行以下打包步骤：

• 前端打包：在 client 目录运行 npm run build，这将生成 dist 文件夹。将 dist 文件夹内的所有文件复制到 Nginx 或 Apache 的 Web 根目录。
  上一篇：超实用档案整理历史档案保存解决方案 解决各类机构存量档案痛点

  下一篇： 数字档案馆系统安全审计避坑指南 老手亲测好用的实操思路
  NEWS

  相关信息
  

  用对继承档案管理软件 继承公证材料前置彻底省心又省事儿

  很多人搞继承第一步就错了

  2026年08月17日 06:00:14

  

  太原档案数字化服务流程是怎样的？大概需要多少钱？

  太原档案数字化服务通常包含需求分析、方案制定、现场整理、扫描加工、数据挂接、验收交付等核心流程，费用根据档案数量、纸张状况、数字化标准等因素综合计算，2026年市场价格范围大致在每页0.5元至2元之间...

  2026年08月17日 06:00:14

  

  档案数据维护成本高？四步实现自动化管理，年省百万成本

  一、核心问题拆解：成本高的根源在哪里

  2026年08月17日 06:00:14

  

  档案数字化三类主流安全方案对比及可落地实操全流程指南

  一、三类档案数字化安全方案核心参数对比

  2026年08月17日 06:00:14

  

  咱用上一套靠谱档案管理软件，真的能悄悄增强企业竞争力

  咱踩过的档案大坑，三天三夜能说哭楼下保安大爷

  2026年08月17日 06:00:14

  

  日喀则档案整理实操全流程指南：从分类到归档步骤详解

  一、前期物料与规范确认

  2026年08月17日 06:00:14