【node期末作业开发】Node.js+MySQL 实现销售信息管理系统的增删改查（附源码）

程序猿_极客2026-01-01 8:41

作品介绍：

网页作品简介

本作品是基于 Node.js+MySQL 技术栈开发的销售信息管理系统模板，包含 5 个核心页面：首页、添加记录页、删除记录页、修改记录页、查询记录页。整体设计围绕销售数据管理场景，实现了从销售记录增删改查到操作日志留存的完整流程，适合作为 Node.js 课程期末作业或小型数据管理系统入门学习案例。

网页作品编辑

此作品为销售数据管理主题网站设计题材，代码采用学生水平的 Node.js+MySQL+HTML+CSS 布局制作，结构清晰易懂。作品下载后可使用任意代码编辑软件（如：VS Code、WebStorm、HBuilder、Sublime、Notepad++ 等）进行修改编辑，无需复杂环境配置，通过 Node.js 运行环境 + MySQL 集成环境（如 XAMPP、phpStudy）即可快速运行调试。

网页作品技术

技术栈涵盖 Node.js 开发核心知识点：

后端：Node.js 原生 HTTP 服务器搭建、MySQL 数据库交互、文件系统（fs）操作、表单数据解析（formidable）前端：Div+CSS 布局、原生 JavaScript 表单交互、动态 HTML 表格生成功能实现：导航栏功能跳转、表单数据提交、数据库增删改查、操作日志自动记录其他：数据库连接管理、进程退出资源释放、动态页面响应、错误友好提示所有代码均包含详细注释，覆盖 Node.js 入门到数据库操作的关键知识点，便于初学者理解和二次开发。

获取完整源码

如需完整源码及数据库脚本，可关注并私信获取，或在评论区留言交流技术问题。

作品运行截图：

一、项目前言

在日常的销售业务中，高效管理销售记录是提升工作效率的关键。本文将手把手教你搭建一个基于 Node.js 和 MySQL 的销售信息管理系统，该系统具备销售记录的增删改查（CRUD）核心功能，同时支持操作日志自动记录，代码结构清晰、功能完整，可直接作为 Node.js 期末作业或小型实战项目参考。

二、项目核心信息

2.1 项目简介

本项目是轻量级的销售信息管理系统，前端通过纯 HTML/CSS 构建交互页面，后端基于 Node.js 原生 HTTP 模块搭建服务器，结合 MySQL 8.0 实现数据的持久化存储，支持销售记录的添加、删除、修改、查询，并自动记录所有数据库操作日志，满足小型企业 / 个人的销售数据管理需求。

2.2 技术栈

技术领域 核心技术 作用说明
前端 HTML5 + CSS3 + JavaScript 构建交互页面、表单提交
后端 Node.js（HTTP 模块 + fs 模块） 搭建 HTTP 服务器、处理请求、文件操作
数据库 MySQL 8.0 存储销售记录数据
辅助库 mysql2、formidable 数据库连接、表单数据解析

2.3 项目结构

复制代码 
sales-management-system/
├── index.html          # 系统首页（功能菜单）
├── insert.html         # 添加销售记录页面
├── delete.html         # 删除销售记录页面
├── update.html         # 修改销售记录页面
├── select.html         # 查询销售记录页面
├── server.js           # 核心HTTP服务器（处理所有请求）
├── package.json        # 项目依赖配置
├── book.txt            # 操作日志文件（自动生成）
└── README.md           # 项目说明文档

三、数据库设计与创建

3.1 表结构设计

在基础字段（商品名、价格、销售数量、客户电话）之外，新增销售日期 和客户姓名两个字段，满足更完整的销售信息管理需求：

字段名 数据类型 约束 说明
id INT 主键、自增 记录唯一标识
product_name VARCHAR(100) 非空 商品名
price FLOAT 非空 商品价格
quantity INT 非空 销售数量
customer_phone VARCHAR(20) 非空 客户电话号码（字符串避免超长）
sale_date DATE 非空 销售日期
customer_name VARCHAR(100) 非空 客户姓名（自定义字段）

四、前端页面开发（部分代码）

4.1 首页（index.html）

核心功能：展示系统名称、功能菜单，作为所有操作的入口。

html 复制代码 
<!DOCTYPE html>
<html lang="zh-CN">
<head>
    <meta charset="UTF-8">
    <title>销售信息管理系统-首页</title>
    <style>
        * { margin: 0; padding: 0; box-sizing: border-box; }
        body { padding: 20px; font-family: "Microsoft Yahei"; }
        h1 { color: #2c3e50; margin-bottom: 30px; }
        .menu a { 
            display: inline-block; 
            padding: 10px 20px; 
            margin: 0 10px 20px 0;
            background: #3498db;
            color: white;
            text-decoration: none;
            border-radius: 4px;
        }
        .menu a:hover { background: #2980b9; }
        .desc { color: #666; margin-top: 20px; }
    </style>
</head>
<body>
    <h1>销售信息管理系统</h1>
    <div class="menu">
        <a href="/insert">添加销售记录</a>
        <a href="/delete">删除销售记录</a>
        <a href="/update">修改销售记录</a>
        <a href="/select">查询销售记录</a>
    </div>
    <div class="desc">
        <p>欢迎使用销售信息管理系统，点击上方菜单可进行对应操作！</p>
    </div>
</body>
</html>

4.2 添加记录页面（insert.html）

核心功能：表单提交新的销售记录，字段与数据库表一一对应。

html 复制代码 
<!DOCTYPE html>
<html lang="zh-CN">
<head>
    <meta charset="UTF-8">
    <title>添加销售记录</title>
    <style>
        body { padding: 20px; font-family: "Microsoft Yahei"; }
        h1 { color: #2c3e50; margin-bottom: 20px; }
        .form-item { margin: 15px 0; }
        label { display: inline-block; width: 120px; }
        input { 
            padding: 8px; 
            width: 300px; 
            border: 1px solid #ddd;
            border-radius: 4px;
        }
        button { 
            padding: 10px 20px; 
            background: #2ecc71;
            color: white;
            border: none;
            border-radius: 4px;
            cursor: pointer;
        }
        button:hover { background: #27ae60; }
        .back { 
            display: inline-block; 
            margin-left: 20px;
            color: #3498db;
            text-decoration: none;
        }
    </style>
</head>
<body>
    <h1>添加销售记录</h1>
    <form action="/insert" method="POST">
        <div class="form-item">
            <label>商品名：</label>
            <input type="text" name="product_name" required>
        </div>
        <div class="form-item">
            <label>价格：</label>
            <input type="number" step="0.01" name="price" required>
        </div>
        <div class="form-item">
            <label>销售数量：</label>
            <input type="number" name="quantity" required>
        </div>
        <div class="form-item">
            <label>客户电话：</label>
            <input type="tel" name="customer_phone" required>
        </div>
        <div class="form-item">
            <label>销售日期：</label>
            <input type="date" name="sale_date" required>
        </div>
        <div class="form-item">
            <label>客户姓名：</label>
            <input type="text" name="customer_name" required>
        </div>
        <div class="form-item">
            <button type="submit">提交添加</button>
            <a href="/" class="back">返回首页</a>
        </div>
    </form>
</body>
</html>

4.3 删除记录页面（delete.html）

核心功能：通过记录 ID 删除指定销售记录。

html 复制代码 
<!DOCTYPE html>
<html lang="zh-CN">
<head>
    <meta charset="UTF-8">
    <title>删除销售记录</title>
    <style>
        body { padding: 20px; font-family: "Microsoft Yahei"; }
        h1 { color: #2c3e50; margin-bottom: 20px; }
        .form-item { margin: 15px 0; }
        label { display: inline-block; width: 120px; }
        input { 
            padding: 8px; 
            width: 300px; 
            border: 1px solid #ddd;
            border-radius: 4px;
        }
        button { 
            padding: 10px 20px; 
            background: #e74c3c;
            color: white;
            border: none;
            border-radius: 4px;
            cursor: pointer;
        }
        button:hover { background: #c0392b; }
        .back { 
            display: inline-block; 
            margin-left: 20px;
            color: #3498db;
            text-decoration: none;
        }
    </style>
</head>
<body>
    <h1>删除销售记录</h1>
    <form action="/delete" method="POST">
        <div class="form-item">
            <label>记录ID：</label>
            <input type="number" name="id" required>
        </div>
        <div class="form-item">
            <button type="submit">确认删除</button>
            <a href="/" class="back">返回首页</a>
        </div>
    </form>
</body>
</html>

4.4 修改记录页面（update.html）

核心功能：先通过 ID 定位记录，再修改指定字段（支持部分字段修改）。

html 复制代码 
<!DOCTYPE html>
<html lang="zh-CN">
<head>
    <meta charset="UTF-8">
    <title>修改销售记录</title>
    <style>
        body { padding: 20px; font-family: "Microsoft Yahei"; }
        h1 { color: #2c3e50; margin-bottom: 20px; }
        .form-item { margin: 15px 0; }
        label { display: inline-block; width: 120px; }
        input { 
            padding: 8px; 
            width: 300px; 
            border: 1px solid #ddd;
            border-radius: 4px;
        }
        button { 
            padding: 10px 20px; 
            background: #f39c12;
            color: white;
            border: none;
            border-radius: 4px;
            cursor: pointer;
        }
        button:hover { background: #d35400; }
        .back { 
            display: inline-block; 
            margin-left: 20px;
            color: #3498db;
            text-decoration: none;
        }
    </style>
</head>
<body>
    <h1>修改销售记录</h1>
    <form action="/update" method="POST">
        <div class="form-item">
            <label>记录ID：</label>
            <input type="number" name="id" required>
        </div>
        <div class="form-item">
            <label>新商品名：</label>
            <input type="text" name="product_name">
        </div>
        <div class="form-item">
            <label>新价格：</label>
            <input type="number" step="0.01" name="price">
        </div>
        <div class="form-item">
            <label>新销售数量：</label>
            <input type="number" name="quantity">
        </div>
        <div class="form-item">
            <label>新客户电话：</label>
            <input type="tel" name="customer_phone">
        </div>
        <div class="form-item">
            <label>新销售日期：</label>
            <input type="date" name="sale_date">
        </div>
        <div class="form-item">
            <label>新客户姓名：</label>
            <input type="text" name="customer_name">
        </div>
        <div class="form-item">
            <button type="submit">提交修改</button>
            <a href="/" class="back">返回首页</a>
        </div>
    </form>
</body>
</html>

4.5 查询记录页面（select.html）

核心功能：支持多条件查询（全部 / 商品名 / 客户电话 / 销售日期）。

html 复制代码 
<!DOCTYPE html>
<html lang="zh-CN">
<head>
    <meta charset="UTF-8">
    <title>查询销售记录</title>
    <style>
        body { padding: 20px; font-family: "Microsoft Yahei"; }
        h1 { color: #2c3e50; margin-bottom: 20px; }
        .form-item { margin: 15px 0; }
        label { display: inline-block; width: 120px; }
        select, input { 
            padding: 8px; 
            width: 300px; 
            border: 1px solid #ddd;
            border-radius: 4px;
        }
        button { 
            padding: 10px 20px; 
            background: #9b59b6;
            color: white;
            border: none;
            border-radius: 4px;
            cursor: pointer;
        }
        button:hover { background: #8e44ad; }
        .back { 
            display: inline-block; 
            margin-left: 20px;
            color: #3498db;
            text-decoration: none;
        }
    </style>
</head>
<body>
    <h1>查询销售记录</h1>
    <form action="/select" method="POST">
        <div class="form-item">
            <label>查询条件：</label>
            <select name="condition" id="condition">
                <option value="all">查询所有记录</option>
                <option value="product_name">按商品名查询</option>
                <option value="customer_phone">按客户电话查询</option>
                <option value="sale_date">按销售日期查询</option>
            </select>
        </div>
        <div class="form-item">
            <label>查询值：</label>
            <input type="text" name="value" placeholder="查询所有则留空">
        </div>
        <div class="form-item">
            <button type="submit">执行查询</button>
            <a href="/" class="back">返回首页</a>
        </div>
    </form>
</body>
</html>

五、后端服务器开发（部分server.js）

核心功能：搭建 HTTP 服务器、处理前端请求、操作 MySQL 数据库、记录操作日志。

javascript 复制代码 
// 导入核心模块和第三方库
const http = require('http');
const fs = require('fs');
const path = require('path');
const mysql = require('mysql2');
const formidable = require('formidable');

// 1. 配置数据库连接（修改为自己的MySQL信息）
const connection = mysql.createConnection({
    host: 'localhost',
    user: 'root',          // 你的MySQL用户名
    password: 'your_password',  // 你的MySQL密码
    database: 'sales',
    charset: 'utf8mb4'
});

// 2. 连接数据库
connection.connect((err) => {
    if (err) {
        console.error('数据库连接失败：', err.message);
        return;
    }
    console.log('数据库连接成功！');
});

// 3. 写入操作日志到book.txt
function writeOperationLog(operation, sql) {
    const now = new Date().toLocaleString('zh-CN'); // 获取当前时间（格式：2025/12/31 12:00:00）
    const logContent = `${operation}-${now}-${sql}\n`;
    // 追加写入日志文件（不存在则自动创建）
    fs.appendFile(path.join(__dirname, 'book.txt'), logContent, 'utf8', (err) => {
        if (err) console.error('日志写入失败：', err.message);
    });
}

// 4. 生成表格HTML（用于展示查询/操作后的结果）
function generateTable(data) {
    if (!data || data.length === 0) return '<p style="color:#666;">暂无数据</p>';
    
    // 表头
    const headers = ['ID', '商品名', '价格', '销售数量', '客户电话', '销售日期', '客户姓名'];
    let tableHtml = `
        <table border="1" cellpadding="8" cellspacing="0" style="border-collapse: collapse; margin: 20px 0;">
            <tr style="background: #f5f5f5;">
                ${headers.map(head => `<th>${head}</th>`).join('')}
            </tr>
    `;
    // 数据行
    data.forEach(row => {
        tableHtml += '<tr>';
        tableHtml += `<td>${row.id}</td>`;
        tableHtml += `<td>${row.product_name}</td>`;
        tableHtml += `<td>${row.price}</td>`;
        tableHtml += `<td>${row.quantity}</td>`;
        tableHtml += `<td>${row.customer_phone}</td>`;
        tableHtml += `<td>${row.sale_date}</td>`;
        tableHtml += `<td>${row.customer_name}</td>`;
        tableHtml += '</tr>';
    });
    tableHtml += '</table>';
    return tableHtml;
}

// 5. 读取HTML文件并返回
function readHtmlFile(filePath, res) {
    fs.readFile(filePath, 'utf8', (err, content) => {
        if (err) {
            res.writeHead(404, { 'Content-Type': 'text/html; charset=utf8' });
            res.end('<h1>404 页面未找到</h1>');
            return;
        }
        res.writeHead(200, { 'Content-Type': 'text/html; charset=utf8' });
        res.end(content);
    });
}

// 6. 处理HTTP请求
const server = http.createServer((req, res) => {
    const { method, url } = req;
    res.setHeader('Content-Type', 'text/html; charset=utf8');

    // 6.1 处理GET请求（返回前端页面）
    if (method === 'GET') {
        switch (url) {
            case '/':
                readHtmlFile(path.join(__dirname, 'index.html'), res);
                break;
            case '/insert':
                readHtmlFile(path.join(__dirname, 'insert.html'), res);
                break;
            case '/delete':
                readHtmlFile(path.join(__dirname, 'delete.html'), res);
                break;
            case '/update':
                readHtmlFile(path.join(__dirname, 'update.html'), res);
                break;
            case '/select':
                readHtmlFile(path.join(__dirname, 'select.html'), res);
                break;
            default:
                res.writeHead(404);
                res.end('<h1>404 页面未找到</h1>');
        }
        return;
    }

    // 6.2 处理POST请求（增删改查操作）
    if (method === 'POST') {
        const form = new formidable.IncomingForm();
        form.parse(req, (err, fields) => {
            if (err) {
                res.writeHead(500);
                res.end('<h1>表单解析失败</h1><a href="/">返回首页</a>');
                return;
            }
            
                    // 写入日志
                    writeOperationLog('查', selectSql);
                    // 返回查询结果
                    const table = generateTable(data);
                    res.end(`
                        <h1>查询结果（共${data.length}条）：</h1>
                        ${table}
                        <a href="/select">重新查询</a> | <a href="/">返回首页</a>
                    `);
                });
            }

            // 未知接口
            else {
                res.writeHead(404);
                res.end('<h1>404 接口未找到</h1>');
            }
        });
    }
});

// 7. 启动服务器
const PORT = 8080;
server.listen(PORT, () => {
    console.log(`服务器已启动，访问地址：http://localhost:${PORT}`);
});

// 8. 进程退出时关闭数据库连接
process.on('SIGINT', () => {
    connection.end();
    console.log('数据库连接已关闭，服务器退出');
    process.exit(0);
});

六、项目配置与运行

6.1 初始化项目

  1. 新建项目文件夹sales-management-system，将上述所有文件放入；
  2. 初始化package.json：
javascript 复制代码 
npm init -y

  1. 安装依赖：

    npm install mysql2 formidable

  2. 修改package.json，添加启动脚本：

    "scripts": {
    "start": "node server.js"
    }

6.2 配置数据库

打开server.js，修改数据库连接信息：

复制代码 
const connection = mysql.createConnection({
    host: 'localhost',
    user: 'root',          // 替换为你的MySQL用户名
    password: '123456',    // 替换为你的MySQL密码
    database: 'sales',
    charset: 'utf8mb4'
});

6.3 启动项目

复制代码 
npm start

启动成功后，浏览器访问http://localhost:8080即可使用系统。

七、功能测试

功能 操作步骤 预期结果
添加记录 首页→添加销售记录→填写所有字段→提交 记录添加成功，页面显示所有销售记录表格
删除记录 首页→删除销售记录→输入存在的 ID→提交 记录删除成功，页面显示剩余记录表格
修改记录 首页→修改销售记录→输入 ID + 要修改的字段→提交 记录修改成功，页面显示更新后所有记录表格
查询记录 首页→查询销售记录→选择条件（如商品名）+ 输入值→提交 页面显示符合条件的查询结果表格
日志记录 执行任意操作后，查看项目根目录的book.txt 日志文件按操作类型-时间-SQL语句格式记录（如：增 - 2025/12/31 12:00:00-INSERT...）

八、关键知识点解析

8.1 核心技术亮点

  1. 原生 HTTP 服务器 ：不依赖 Express 等框架，使用 Node.js 内置http模块搭建服务器，理解底层请求处理逻辑；
  2. 参数化思想：修改记录时只更新有值的字段，避免无效更新；
  3. 日志自动记录 ：所有数据库操作自动写入book.txt，便于审计和问题排查；
  4. 动态 HTML 生成：后端拼接表格 HTML 返回前端，无需前端框架即可展示结构化数据。

8.2 优化建议（拓展）

  1. SQL 注入防护 ：当前 SQL 直接拼接参数存在注入风险，可改为mysql2的参数化查询（?占位符）；
  2. 前端美化：引入 Bootstrap/CSS 框架优化页面样式，添加表单验证（如手机号格式、价格范围）；
  3. 分页查询：当数据量较大时，实现分页功能（LIMIT/OFFSET）；
  4. 错误处理增强：添加更友好的错误提示，如 "价格不能为负数""客户电话格式错误" 等；
  5. 连接池优化 ：使用mysql2.createPool替代单连接，提高并发处理能力。

九、总结

关键点回顾

  1. 本系统基于 Node.js 原生模块 + MySQL 实现，完整覆盖销售记录的增删改查，满足小型数据管理场景需求；
  2. 前端通过纯 HTML 表单提交请求，后端解析后操作数据库，操作结果以表格形式返回，交互清晰；
  3. 自动记录操作日志，符合企业级数据管理的审计要求，代码可直接作为 Node.js 期末作业提交。

项目价值

该项目是 Node.js 入门的经典实战案例，既掌握了 HTTP 服务器、文件操作、数据库交互等核心技能，又理解了前后端交互的基本逻辑，在此基础上可快速扩展为带用户登录、权限控制、数据导出的完整系统。

相关推荐
X.Ming 同学2 小时前
深度解析 Qt 自定义图表视图：频谱图 的设计与高级功能拓展
服务器·网络·数据库
liliangcsdn2 小时前
MySQL存储字节类数据的方案示例
java·前端·数据库
qq_366086222 小时前
sql server 整数转百分比
运维·服务器·数据库
oMcLin2 小时前
如何排查 Linux 系统服务器的性能故障问题：使用 `top`、`htop`、`iostat` 等工具
linux·服务器·数据库
Howrun7772 小时前
Linux进程通信---4---信号量System V & POSIX
linux·数据库
鸽芷咕2 小时前
金仓数据库性能优化全景指南：从 SQL 精调到多核 CPU 高效利用
数据库·oracle·性能优化·金仓数据库
IT届小白2 小时前
探讨：20 万数据量下ROW_NUMBER和GROUP BY两条 SQL 性能差异分析（查 10 条 / 查所有）
数据库·mysql
wusp19942 小时前
Django 迁移系统全指南：从模型到数据库的魔法之路
数据库·mysql·django
TDengine （老段）2 小时前
TDengine GROUP BY 与 PARTITION BY 使用及区别深度分析
大数据·开发语言·数据库·物联网·时序数据库·tdengine·涛思数据
热门推荐
01GitHub 镜像站点02Linux下V2Ray安装配置指南03jdk21下载、安装（Windows、Linux、macOS）04Claude Code Skills 实用使用手册05从快手“12·22”直播攻击事件看：一次教科书式的业务层饱和攻击06UV安装并设置国内源072025 最新教程：注册并切换到美区 Apple ID08【踩坑笔记】50系显卡适配的 PyTorch 安装09电脑检测软件—图吧工具箱10Google Antigravity Agent 编辑器操作教程