Express连接MySQL实现CRUD并与模板页面数据交互全指南

最新推荐文章于 2025-11-30 16:29:01 发布
原创 最新推荐文章于 2025-11-30 16:29:01 发布 · 959 阅读 · 12 ·
CC 4.0 BY-SA版权
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
文章标签：

#express #mysql #交互 #数据库 #ejb模板引擎 #CRUD操作 #node.js

文章目录

Express连接MySQL实现CRUD并与模板页面数据交互全指南

在Express应用中，连接MySQL数据库并实现增删改查（CRUD）操作，同时与模板页面进行数据交互，是构建动态Web应用的核心流程。本文将详细介绍从数据库连接、路由设计、CRUD实现到模板数据传递的完整方案，帮助开发者掌握前后端数据交互的关键技术。

一、环境准备与依赖安装

1. 核心依赖

  • express：Web框架
  • mysql2：MySQL客户端（支持Promise和连接池，性能优于旧版mysql）
  • ejs：模板引擎（用于数据渲染，也可替换为Pug等）
  • body-parser：解析表单提交数据（Express 4.16+已内置，可直接使用）

2. 安装命令

npm install express mysql2 ejs

二、MySQL连接配置

使用连接池（Connection Pool）管理数据库连接，提升性能和并发处理能力：

const mysql = require('mysql2/promise');

// 数据库配置
const dbConfig = {
  host: 'localhost',       // 数据库地址
  user: 'root',            // 用户名
  password: 'your_password', // 密码
  database: 'test_db',     // 数据库名
  port: 3306,              // 端口（默认3306）
  waitForConnections: true,
  connectionLimit: 10,     // 最大连接数
  queueLimit: 0
};

// 创建连接池
const pool = mysql.createPool(dbConfig);

// 测试连接
async function testConnection() {
  try {
    const connection = await pool.getConnection();
    console.log('数据库连接成功');
    connection.release(); // 释放连接回池
  } catch (err) {
    console.error('数据库连接失败：', err.message);
  }
}

// 执行SQL查询的通用方法
async function query(sql, params = []) {
  try {
    const [results] = await pool.execute(sql, params);
    return results;
  } catch (err) {
    console.error('SQL执行错误：', err.message);
    throw err; // 抛出错误供上层处理
  }
}

module.exports = {
  query,
  testConnection
};

三、Express应用初始化与路由设计

1. 应用入口文件（app.js）

配置模板引擎、静态资源和路由：

const express = require('express');
const path = require('path');
const { testConnection } = require('./db');
const userRoutes = require('./routes/users');

// 初始化Express
const app = express();
const port = 3000;

// 配置模板引擎（EJS）
app.set('view engine', 'ejs');
app.set('views', path.join(__dirname, 'views')); // 模板文件目录

// 解析表单数据（POST请求）
app.use(express.urlencoded({ extended: true }));
app.use(express.json());

// 静态资源目录（CSS、JS、图片等）
app.use(express.static(path.join(__dirname, 'public')));

// 测试数据库连接
testConnection();

// 注册路由
app.use('/users', userRoutes); // 用户相关CRUD路由
app.get('/', (req, res) => {
  res.redirect('/users'); // 根路径重定向到用户列表
});

// 启动服务器
app.listen(port, () => {
  console.log(`服务器运行在 http://localhost:${port}`);
});

2. 数据库表设计（示例）

创建users表存储用户数据：

CREATE TABLE IF NOT EXISTS users (
  id INT AUTO_INCREMENT PRIMARY KEY,
  name VARCHAR(50) NOT NULL,
  email VARCHAR(100) UNIQUE NOT NULL,
  age INT,
  created_at TIMESTAMP DEFAULT CURRENT_TIMESTAMP
);

四、CRUD操作实现与模板数据交互

以用户管理为例，实现完整的增删改查，并在模板中展示和交互数据。

1. 路由处理（routes/users.js）

const express = require('express');
const router = express.Router();
const db = require('../db');

// 1. 查：获取所有用户并渲染列表页
router.get('/', async (req, res) => {
    try {
        const users = await db.query('SELECT * FROM users ORDER BY created_at DESC');
        // 传递数据到模板（users变量将在EJS中使用）
        res.render('users/list', {
            title: '用户列表',
            users: users,
            message: req.query.message // 用于显示操作结果提示
        });
    } catch (err) {
        res.status(500).send('获取用户失败：' + err.message);
    }
});

// 2. 查：获取单个用户详情
router.get('/:id', async (req, res) => {
    try {
        const [users] = await db.query('SELECT * FROM users WHERE id = ?', [req.params.id]);
        if (users.length === 0) {
            return res.status(404).send('用户不存在');
        }
        res.render('users/detail', {
            title: '用户详情',
            user: users[0]
        });
    } catch (err) {
        res.status(500).send('获取用户详情失败：' + err.message);
    }
});

// 3. 跳转到添加用户表单页
router.get('/add', (req, res) => {
    res.render('users/form', {
        title: '添加用户',
        user: {}, // 空对象，保持表单字段一致性
        action: '/users/add' // 表单提交地址
    });
});

// 4. 增：提交添加用户表单
router.post('/add', async (req, res) => {
    try {
        const {name, email, age} = req.body;
        // 插入数据（使用参数化查询防SQL注入）
        await db.query(
            'INSERT INTO users (name, email, age) VALUES (?, ?, ?)',
            [name, email, age || null]
        );
        // 重定向到列表页并携带成功消息
        res.redirect('/users?message=用户添加成功');
    } catch (err) {
        res.status(500).send('添加用户失败：' + err.message);
    }
});

// 5. 跳转到编辑用户表单页
router.get('/edit/:id', async (req, res) => {
    try {
        const [users] = await db.query('SELECT * FROM users WHERE id = ?', [req.params.id]);
        if (users.length === 0) {
            return res.status(404).send('用户不存在');
        }
        res.render('users/form', {
            title: '编辑用户',
            user: users[0],
            action: `/users/edit/${req.params.id}`
        });
    } catch (err) {
        res.status(500).send('获取编辑数据失败：' + err.message);
    }
});

// 6. 改：提交编辑用户表单
router.post('/edit/:id', async (req, res) => {
    try {
        const {name, email, age} = req.body;
        await db.query(
            'UPDATE users SET name = ?, email = ?, age = ? WHERE id = ?',
            [name, email, age || null, req.params.id]
        );
        res.redirect('/users?message=用户更新成功');
    } catch (err) {
        res.status(500).send('更新用户失败：' + err.message);
    }
});

// 7. 删：删除用户
router.get('/delete/:id', async (req, res) => {
    try {
        await db.query('DELETE FROM users WHERE id = ?', [req.params.id]);
        res.redirect('/users?message=用户删除成功');
    } catch (err) {
        res.status(500).send('删除用户失败：' + err.message);
    }
});

module.exports = router;

2. 模板页面实现（EJS）

（1）用户列表页（views/users/list.ejs）

展示用户列表并提供操作入口：

<% include ../partials/header %>

<div class="container">
  <h1><%= title %></h1>
  
  <!-- 操作结果提示 -->
  <% if (message) { %>
    <div class="alert-success"><%= message %></div>
  <% } %>

  <!-- 添加用户按钮 -->
  <a href="/users/add" class="btn-add">添加新用户</a>

  <!-- 用户列表表格 -->
  <table class="user-table">
    <thead>
      <tr>
        <th>ID</th>
        <th>姓名</th>
        <th>邮箱</th>
        <th>年龄</th>
        <th>创建时间</th>
        <th>操作</th>
      </tr>
    </thead>
    <tbody>
      <% if (users.length > 0) { %>
        <% users.forEach(user => { %>
          <tr>
            <td><%= user.id %></td>
            <td><%= user.name %></td>
            <td><%= user.email %></td>
            <td><%= user.age || '未填写' %></td>
            <td><%= new Date(user.created_at).toLocaleString() %></td>
            <td class="actions">
              <a href="/users/<%= user.id %>" class="btn-view">查看</a>
              <a href="/users/edit/<%= user.id %>" class="btn-edit">编辑</a>
              <a href="/users/delete/<%= user.id %>" class="btn-delete" 
                 onclick="return confirm('确定要删除吗？')">删除</a>
            </td>
          </tr>
        <% }) %>
      <% } else { %>
        <tr>
          <td colspan="6" class="no-data">暂无用户数据</td>
        </tr>
      <% } %>
    </tbody>
  </table>
</div>

<% include ../partials/footer %>
（2）用户表单页（views/users/form.ejs）

用于添加和编辑用户（复用同一表单）：

<% include ../partials/header %>

<div class="container">
  <h1><%= title %></h1>
  
  <!-- 表单：提交到指定action（添加/编辑） -->
  <form action="<%= action %>" method="POST" class="user-form">
    <div class="form-group">
      <label for="name">姓名：</label>
      <input type="text" id="name" name="name" 
             value="<%= user.name || '' %>" required>
    </div>
    
    <div class="form-group">
      <label for="email">邮箱：</label>
      <input type="email" id="email" name="email" 
             value="<%= user.email || '' %>" required>
    </div>
    
    <div class="form-group">
      <label for="age">年龄：</label>
      <input type="number" id="age" name="age" 
             value="<%= user.age || '' %>" min="0">
    </div>
    
    <div class="form-actions">
      <button type="submit" class="btn-save">保存</button>
      <a href="/users" class="btn-cancel">取消</a>
    </div>
  </form>
</div>

<% include ../partials/footer %>
（3）用户详情页（views/users/detail.ejs）

展示单个用户的详细信息：

<% include ../partials/header %>

<div class="container">
  <h1><%= title %></h1>
  
  <div class="user-detail">
    <p><strong>ID：</strong><%= user.id %></p>
    <p><strong>姓名：</strong><%= user.name %></p>
    <p><strong>邮箱：</strong><%= user.email %></p>
    <p><strong>年龄：</strong><%= user.age || '未填写' %></p>
    <p><strong>创建时间：</strong><%= new Date(user.created_at).toLocaleString() %></p>
  </div>
  
  <div class="detail-actions">
    <a href="/users/edit/<%= user.id %>" class="btn-edit">编辑</a>
    <a href="/users" class="btn-back">返回列表</a>
  </div>
</div>

<% include ../partials/footer %>
（4）公共模板组件（示例：views/partials/header.ejs）
<!DOCTYPE html>
<html lang="zh-CN">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title><%= title %> - 用户管理系统</title>
  <link rel="stylesheet" href="/css/style.css">
</head>
<body>

五、数据交互核心逻辑解析

1. 后端向前端（模板）传递数据

通过res.render(template, data)方法将数据传递到模板：

// 传递用户列表和标题
res.render('users/list', { 
  title: '用户列表', 
  users: users, 
  message: '操作成功' 
});

在EJS模板中通过<%= 变量名 %>使用数据：

<h1><%= title %></h1>
<% users.forEach(user => { %>
  <p><%= user.name %></p>
<% }) %>

2. 前端（表单）向后端传递数据

  • 表单提交：通过method="POST"将数据发送到后端路由，后端通过req.body获取：
    <form action="/users/add" method="POST">
  <input name="name" value="张三">
</form>
  • URL参数：通过/users/:id传递路径参数，后端通过req.params.id获取。
  • 查询字符串：通过/users?message=success传递，后端通过req.query.message获取（常用于跳转时传递提示信息）。

3. CRUD操作与页面跳转流程

  • 查询（Read）：直接渲染模板并传递数据库查询结果。
  • 添加/编辑（Create/Update）：
    1. 先渲染表单页（空表单或预填数据）。
    2. 表单提交后，后端处理数据并执行数据库操作。
    3. 操作完成后通过res.redirect跳转到列表页，并携带结果提示。
  • 删除（Delete）：点击删除按钮后，后端执行删除操作，再重定向到列表页。

六、注意事项

1. 防SQL注入

始终使用参数化查询（?占位符），避免直接拼接SQL字符串：

// 安全（参数化查询）
db.query('SELECT * FROM users WHERE id = ?', [req.params.id]);

// 危险（可能导致SQL注入）
db.query(`SELECT * FROM users WHERE id = ${req.params.id}`);

2. 错误处理

  • 数据库操作必须用try/catch捕获错误，避免应用崩溃。
  • 对用户输入进行验证（如邮箱格式、年龄范围），可使用joi等验证库。

3. 连接池管理

  • 无需手动关闭连接，使用pool.execute后连接会自动释放回池。
  • 根据服务器性能调整connectionLimit（建议10-50）。

4. 模板数据安全

  • 使用<%= 变量 %>会自动转义HTML，防止XSS攻击（如用户输入包含<script>标签）。
  • 若需显示原始HTML（如富文本），使用<%- 变量 %>，但需确保内容安全。

七、总结

Express连接MySQL并与模板交互的核心流程可概括为：

  1. 数据库层：通过连接池管理MySQL连接，提供通用查询方法。
  2. 路由层：处理HTTP请求，调用数据库方法执行CRUD操作，通过res.render传递数据到模板。
  3. 视图层：使用EJS模板渲染数据，通过表单和链接与后端交互。

关键技术点包括：参数化查询防注入、连接池提升性能、res.render数据传递、表单提交与重定向。掌握这些技术，可构建安全、高效的动态Web应用，实现数据的完整生命周期管理。

ejs+express+mysql实现的CRUD后台管理源代码.zip
09-10
这是一个基于EJS、Express.js和MySQL数据库实现的CRUD（Create、Read、Update、Delete）后台管理系统源代码项目。这个项目旨在教你如何构建一个基本的Web应用，用于管理和操作数据库中的数据。 首先，EJS是一种轻量...
精选资源
express-mysql-demo：基于node.js + express + mysql实现的restful风格的CRUD简单示例
02-05
基于node.js + express + mysql实现的restful风格的CRUD简单示例 组织结构 ├── app.js -- 应用配置 ├── bin │ └── www -- 项目运行脚本 ├── conf │ └── mysqlConf.js -- mysql配置文件 ├── dao ...
运用express模块实现数据前后端交互(POST)
weixin_59324977的博客
09-14 1214
(这篇文章让自己身份在前后端交换,内容可能会引起不适,建议在大人陪同下观看.) 目录 1.首先将express模块导入,并将方法赋值给app 2.静态资源托管 3.这里post数据传输三种方式 (注意这里在进行post功能是需要设置中间件,目的是为了转换数据格式,可以当做请求头看待) 4.最后监听服务器运行 1.首先将express模块导入,并将方法赋值给app //导入模块 const express = require('express') const app = express(
基于express框架下Node.js+MySQL连接池的数据库增添操作
wuxy720
12-24 6083
题记：这几天一直在学习Node以及关系型数据库的知识，刚刚接触到了express框架，就想利用express框架，实现一个通过ajax操作来向数据库内增添数据的功能。正文：话不多说，现在我们就来一起看看吧！我们需要了解哪些知识，做哪些基本工作！
Express框架使用以及数据库公共操作类整理(Win7下的NodeJs)
weixin_34351321的博客
08-21 146
具体步骤： 1、安装开发工具WebStorm； 2、安装node/npm（下载地址：https://nodejs.org/download/）选择适合你的xxx.mis安装； 3、安装express框架(cmd窗口模式，用npm命令执行：npm install express)； 4、创建nodeJsExpress项目，使用ejs模板； 5、下载node-mssql连接数据库驱动（进...
Vue2+axios+Express+MySQL实现前后端交互
m0_74343097的博客
01-09 892
vue2+axios+Express+MySQL实现前后端交互
使用Node.js、Express、MySQL和EJS构建CRUD接口与热部署实践指南
weixin_36184718的博客
06-11 1053
Node.js是一个基于Chrome V8引擎的JavaScript运行环境，它允许开发者使用JavaScript语言在服务器端执行代码。由于其高效的异步输入/输出模型，Node.js非常适合于构建高性能的网络应用，尤其是那些需要处理大量并发连接的场景。Express是一个轻量级的Web应用框架，它为Node.js提供了简单而灵活的方式来构建Web应用和服务。Express的核心是一个路由系统，通过它可以快速定义处理HTTP请求的回调函数。
2025前端MySQL实战：从CRUD到高性能数据交互
gitblog_00028的博客
09-07 968
你是否还在为前端数据交互性能瓶颈发愁？是否想掌握从基础CRUD到高级优化的全链路技能？本文将通过实战案例，带你系统提升前端MySQL交互能力，读完你将获得： ✅ 3种零代码优化数据库查询的技巧 ✅ 前端与MySQL高效通信的最佳实践 ✅ 基于真实项目的性能调优方案 ## 项目背景与核心价值 [Project-Ideas-And-Resources](https://link.g...
nuxt + express +mysql
xytpp的博客
12-12 827
在 Nuxt.js 项目中创建用于增删改查的前端页面。在项目根目录中创建一个名为 server 的文件夹。在 server 文件夹内创建一个 index.js 文件，用于设置 Express 服务器。在 server 文件夹中创建一个 Sequelize 配置。确保您的开发环境已经安装了 Node.js、npm、MySQL 以及 Vue CLI。步骤 3: 配置 Sequelize 和 MySQL。步骤 1: 创建 Nuxt.js 项目。步骤 4: 创建后端 CRUD 路由。步骤 5: 创建前端页面。
【express-generator】09-第二阶段完结-express+mysql实现CRUD操作
科技改变世界，技术驱动未来。
02-05 1128
关于第二阶段的内容， 前面我们介绍了restful API设计、路由分组、路由重定向。 这篇我们介绍第二阶段的最后内容：CRUD 操作（对数据表的增删改查）。也是本系列的最后一篇。
React + TypeScript 实战：从零实现数据库连接与交互
如沐春风
02-27 1143
在React+TypeScript全栈开发中，推荐采用分层架构： （数据流说明：React→Axios→Express→Database Driver） 2.2 TypeScript双端配置 前端配置 (tsconfig.json)： 后端配置 (server/tsconfig.json)： 注：后端采用CommonJS模块规范以兼容Node.js生态13技术栈： + Connection Pool实现步骤： 创建数据访问层： 特点： ✅ 支持连接池管理与事务控制 ⚠️ 需注意SQL注入防护（建议使用
精选资源
使用node+express+mysql实现一个简单的后台管理（增删改查）
01-04
在本文中，我们将深入探讨如何使用Node.js、Express框架以及MySQL数据库来构建一个基础的后台管理系统，该系统能够实现常见的数据操作：增加、删除、修改和查询（CRUD）。我们将重点讲解每个技术的关键概念和它们...
基于Node.js和Express实现MySQL数据库CRUD操作
从标题“nodeexpressmysqlcrud: 使用Nodejs的模块Expressjs，我们在mysql数据库中创建CRUD事务”可以看出，该应用的核心目标是在Node.js环境下，借助Express框架与MySQL数据库建立连接，并在此基础上完成对数据的增...
宝塔面板实现定时任务删除 logs文件 加条件删除 只删除一个月前的日志
qq_43541326的博客
08-13 2697
进入到计划任务 点击添加任务 默认选择 shell脚本。我这里的shell脚本是 删除当前月以前的时间数据。
MySQL 数据库管理入门：从创建到删除（T1）
aml258__的博客
11-24 862
本文是一份面向新手的MySQL数据库管理入门指南。通过清晰的代码示例与详细的注释，系统性地讲解了数据库的创建、查看、修改、字符集设置与删除等核心操作。不仅提供了“怎么做”，更解释了“为什么”，并附有实战习题与课外思考，帮助读者从零开始，扎实掌握MySQL数据库的生命周期管理。
MySQL中的TRUNCATE TABLE命令
2509_94196880的博客
11-30 167
在MySQL数据库管理中，命令是一个用于快速删除表中所有数据的重要工具。相比常规的DELETE命令，具有显著的性能优势和独特的操作特点。本文旨在深入探讨命令的用法、工作原理以及实际应用中的注意事项。MySQL中的命令是一个功能强大且高效的工具，理解其特性和使用场景有助于我们在日常数据库管理和维护工作中做出正确的决策。务必根据实际情况权衡其优势与风险，确保数据安全和系统稳定。
【MySQL系列文章】Linux环境下安装部署MySQL
2509_94105260的博客
11-29 328
本次安装部署主要针对Linux环境进行安装部署操作,系统位数6464MySQL版本：v5.7.38。
MySQL数据库的数据文件保存在哪？MySQL数据存在哪里
最新发布
2509_94083514的博客
11-30 544
在安装好MySQL数据库使用一段时间后，会产生许多的数据库和数据。那这些数据库的数据文件存放在本地文件夹的什么位置呢一、默认位置MySQL创建的数据库实际上存储在文件系统的一个特定目录中，该目录通常为MySQL的数据目录。这个目录的默认位置依据操作系统和MySQL的安装方式不同而有所差异。、这个目录通常位于，它可能位于是个隐藏文件夹）**其中“X.X”是MySQL的版本号。目录（每个数据库都有一个与其同名的文件夹，而这个文件夹中包含了该数据库的所有表的文件，而其中的文件代表了数据库中的表。
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值