一、环境准备与项目初始化

在开始开发农产品加工企业档案软件之前，必须先配置好基础的运行环境。本教程采用 Node.js 作为后端运行环境，Vue 3 配合 Element Plus 作为前端界面，SQLite 作为轻量级数据库，确保系统部署简单、维护成本低。

1. 安装 Node.js

请访问 Node.js 官网下载并安装 LTS 版本（推荐 v16 或 v18 版本）。安装完成后，打开终端（CMD 或 PowerShell），输入以下命令验证安装是否成功：

node -v
npm -v

2. 创建项目目录

在电脑上新建一个文件夹，命名为 agri-archive-system。进入该文件夹，在终端中执行以下命令初始化后端项目：

npm init -y

该命令会生成一个 package.json 文件，用于管理项目依赖。

3. 安装后端核心依赖

我们需要安装 Express（Web 框架）、SQLite3（数据库）、CORS（跨域处理）和 Body-Parser（请求体解析）。执行以下命令：

npm install express sqlite3 cors body-parser

二、后端服务与数据库搭建

后端主要负责数据存储和 API 接口提供。我们将创建一个 server.js 文件，在其中完成数据库初始化和接口编写。

1. 创建数据库文件与表结构

在项目根目录下新建 server.js，复制以下完整代码。该代码会自动创建一个名为 database.sqlite 的本地数据库文件，并建立 products 表，用于存储农产品档案信息（包括产品名称、批次号、加工日期、原料来源、质检结果和负责人）。

const express = require('express');
const sqlite3 = require('sqlite3').verbose();
const cors = require('cors');
const bodyParser = require('body-parser');
const app = express();
const PORT = 3000;
// 中间件配置
app.use(cors());
app.use(bodyParser.json());
// 初始化数据库
const db = new sqlite3.Database('./database.sqlite', (err) => {
if (err) {
console.error('数据库连接失败:', err.message);
} else {
console.log('已连接 SQLite 数据库');
}
});
// 创建数据表
db.run(`CREATE TABLE IF NOT EXISTS products (
id INTEGER PRIMARY KEY AUTOINCREMENT,
product_name TEXT NOT NULL,
batch_number TEXT NOT NULL,
process_date TEXT NOT NULL,
source TEXT NOT NULL,
quality_status TEXT NOT NULL,
manager TEXT NOT NULL
)`, (err) => {
if (err) {
console.error('创建表失败:', err.message);
} else {
console.log('数据表检查完成');
}
});
// API 路由：获取所有档案
app.get('/api/products', (req, res) => {
const sql = "SELECT  FROM products ORDER BY id DESC";
db.all(sql, [], (err, rows) => {
if (err) {
res.status(400).json({ "error": err.message });
return;
}
res.json({ "data": rows });
});
});
// API 路由：添加档案
app.post('/api/products', (req, res) => {
const { product_name, batch_number, process_date, source, quality_status, manager } = req.body;
const sql = "INSERT INTO products (product_name, batch_number, process_date, source, quality_status, manager) VALUES (?,?,?,?,?,?)";
const params = [product_name, batch_number, process_date, source, quality_status, manager];
db.run(sql, params, function (err) {
if (err) {
res.status(400).json({ "error": err.message });
return;
}
res.json({ "message": "success", "id": this.lastID });
});
});
// API 路由：删除档案
app.delete('/api/products/:id', (req, res) => {
const sql = "DELETE FROM products WHERE id = ?";
const params = [req.params.id];
db.run(sql, params, function (err) {
if (err) {
res.status(400).json({ "error": err.message });
return;
}
res.json({ "message": "deleted", changes: this.changes });
});
});
// 启动服务器
app.listen(PORT, () => {
console.log(`服务器运行中，访问地址: http://localhost:${PORT}`);
});

2. 启动后端服务

在终端输入以下命令启动后端：

node server.js

当终端显示“服务器运行中”且“已连接 SQLite 数据库”时，说明后端启动成功。请保持该终端窗口开启，不要关闭。

三、前端界面开发

前端部分我们将使用 Vue 3 和 Element Plus 构建一个单页面应用。为了实现零门槛操作，我们直接通过 CDN 引入相关库，无需配置 Webpack 或 Vite。

1. 创建前端文件

在项目根目录下新建一个名为 index.html 的文件。这个文件将包含所有的前端逻辑、样式和结构。

2. 编写前端代码

将以下完整代码复制到 index.html 中。该代码实现了数据表格展示、新增/编辑档案弹窗、表单验证以及与后端 API 的交互。

农产品加工档案管理

 新增档案

四、系统运行与功能测试

至此，所有的代码编写工作已完成。接下来进行系统启动和功能验证。

1. 启动后端服务

确保在终端中已经执行了 node server.js。如果之前关闭了终端，请重新进入项目目录执行该命令。

2. 打开前端页面

直接在文件管理器中双击 index.html 文件，它会在默认浏览器中打开。或者，在浏览器地址栏输入该文件的绝对路径（例如 file:///C:/Users/Admin/agri-archive-system/index.html）。

3. 功能测试步骤

• 新增测试： 点击右上角的“新增档案”按钮，在弹窗中输入产品名称（如“有机苹果酱”）、批次号（如“PC20231101”）、选择日期、输入原料来源、选择质检结果为“合格”并输入负责人。点击“确认”，表格中应立即出现该条数据。
• 状态展示： 观察表格中的“质检结果”列，如果是“合格”，应显示为绿色标签；如果是“不合格”，显示为红色标签。
• 删除测试： 点击表格右侧操作列的“删除”按钮，弹出确认框后点击“确认”，该行数据应被移除。
• 持久化测试： 刷新浏览器页面，刚才添加的数据依然存在，证明 SQLite 数据库存储成功。

4. 常见问题排查

如果打开页面后数据为空白且无法新增，请按 F12 打开浏览器开发者工具，查看 Console 控制台是否有报错。常见错误是后端未启动或端口冲突。确保 server.js 正在运行，且 index.html 中的 API 地址 http://localhost:3000 与后端监听端口一致。