🐳 前端工程师的后端小实验:Docker + Sequelize 玩转 MySQL API 🚀

嘿,前端战友们!👋 是不是经常遇到这种情况:想自己搞个小项目练练手,却卡在了后端数据库这一步?本地装 MySQL 嫌麻烦,配置环境又头大... 别慌!今天咱们用 Docker 这个 "集装箱"🚢,轻松搞定 MySQL,再用 Sequelize 这个 "翻译官"📜,让 JavaScript 和 MySQL 顺畅对话,最后搭个简单的 API 接口。全程 JS 友好,前端同学也能轻松上手! 本次选用的不是express和sequelize的脚手架工具搭建,更接近原始,express和sequelize脚手架搭建会更快并且更专业,下一篇文章我们将会为大家带来这种方法。

📋 准备工作:工具清单

在开始之前,请确保你的电脑上已经安装了这些工具:

  • Node.js (v14+) 和 npm 🟢
  • Docker (别担心,我们只需要几条命令) 🐳
  • Vscode,当然也可以选择Trae! 💻

第一步:用 Docker 启动 MySQL 数据库 🚀

想象一下,不用复杂配置,一条命令就能拥有一个干净的 MySQL 环境,这就是 Docker 的魅力!

在下面页面配置镜像,docker的下载就靠大家自己啦~

js 复制代码
//镜像配置代码
{
  "builder": {
    "gc": {
      "defaultKeepStorage": "20GB",
      "enabled": true
    }
  },
  "experimental": false,
  "registry-mirrors": [
      "https://docker.1ms.run"
  ]
}
  1. 启动 MySQL 容器 (这一步是关键哦):

在项目根目录下创建docker-compose.yml的配置文件

然后如下进行配置

js 复制代码
  services:
  mysql:
    image: mysql:8.3.0
    command:
      --default-authentication-plugin=mysql_native_password
      --character-set-server=utf8mb4
      --collation-server=utf8mb4_general_ci
    environment:
      - MYSQL_ROOT_PASSWORD=clwy1234 //数据库库的密码
      - MYSQL_LOWER_CASE_TABLE_NAMES=0
    ports:
      - "3306:3306" //自己电脑端口与数据库访问的虚拟端口=>防止冲突
    volumes:
      - ./data/mysql:/var/lib/mysql //数据存放的位置

然后使用魔法咒语:docker-compose up -d 启动!

当然也可以用以下命令进行

css 复制代码
docker run --name my-mysql -e MYSQL_ROOT_PASSWORD=123456 -p 3306:3306 -d mysql:8.0

咱们来拆解一下这个神奇的命令:

  • --name my-mysql:给你的容器起个名字,方便以后操作

  • -e MYSQL_ROOT_PASSWORD=123456:设置 root 用户的密码 (这里用 123456 方便测试,实际项目要复杂点)

  • -p 3306:3306:把容器的 3306 端口映射到本地的 3306 端口

  • -d:让容器在后台运行

  1. 检查容器是否启动成功

    docker ps

如果看到 my-mysql 正在运行,那就成功啦!🎉

第二步:创建项目并安装依赖 🛠️

  1. 新建项目文件夹并初始化
bash 复制代码
mkdir sequelize-mysql-api
cd sequelize-mysql-api
npm init -y
  1. 安装需要的依赖

    npm install express sequelize mysql2

  • express:用来搭建 API 服务器
  • sequelize:ORM 工具,让我们用 JS 操作数据库
  • mysql2:MySQL 的 Node.js 驱动

第三步:配置 Sequelize 连接数据库 🔗

  1. 创建 Sequelize 配置文件db.js
javascript 复制代码
const { Sequelize } = require('sequelize');

// 创建 Sequelize 实例,连接到我们的 MySQL 数据库
const sequelize = new Sequelize(
  'my_api_db',    // 数据库名 (刚才创建的)
  'root',         // 用户名
  '123456',       // 密码
  {
    host: 'localhost',  // 数据库地址 (本地)
    port: 3306,         // 端口号
    dialect: 'mysql'    // 数据库类型
  }
);

// 测试连接是否成功
async function testConnection() {
  try {
    await sequelize.authenticate();
    console.log('✅ 数据库连接成功!');
  } catch (error) {
    console.error('❌ 数据库连接失败:', error);
  }
}

testConnection();

module.exports = sequelize;

第四步:定义数据模型 (Model) 📊

让我们创建一个简单的 User 模型,包含 nameemail 字段。

创建 models/User.js 文件:

php 复制代码
const { DataTypes } = require('sequelize');
const sequelize = require('../db');

// 定义 User 模型
const User = sequelize.define('User', {
  // id 会自动生成,不需要手动定义
  name: {
    type: DataTypes.STRING,  // 字符串类型
    allowNull: false,        // 不允许为 null
    comment: '用户姓名'      // 字段注释
  },
  email: {
    type: DataTypes.STRING,
    allowNull: false,
    unique: true,            // 邮箱必须唯一
    validate: {
      isEmail: true          // 验证是否为邮箱格式
    },
    comment: '用户邮箱'
  }
});

// 同步模型到数据库 (如果表不存在则创建)
User.sync();

module.exports = User;

第五步:搭建 API 接口 🌐

让我们用 Express 来创建一些简单的 CRUD 接口。

创建 app.js 文件:

php 复制代码
const express = require('express');
const User = require('./models/User');
const sequelize = require('./db');

const app = express();
const PORT = 3000;

// 解析 JSON 请求体
app.use(express.json());

// 测试接口
app.get('/', (req, res) => {
  res.send('👋 欢迎来到我的 API!试试访问 /users 吧');
});

// 获取所有用户
app.get('/users', async (req, res) => {
  try {
    const users = await User.findAll();
    res.json(users);
  } catch (error) {
    res.status(500).json({ error: error.message });
  }
});

// 创建新用户
app.post('/users', async (req, res) => {
  try {
    const user = await User.create(req.body);
    res.status(201).json(user);
  } catch (error) {
    res.status(400).json({ error: error.message });
  }
});

// 根据 ID 获取用户
app.get('/users/:id', async (req, res) => {
  try {
    const user = await User.findByPk(req.params.id);
    if (user) {
      res.json(user);
    } else {
      res.status(404).json({ message: '用户不存在' });
    }
  } catch (error) {
    res.status(500).json({ error: error.message });
  }
});

// 更新用户
app.put('/users/:id', async (req, res) => {
  try {
    const [updated] = await User.update(req.body, {
      where: { id: req.params.id }
    });
    if (updated) {
      const updatedUser = await User.findByPk(req.params.id);
      res.json(updatedUser);
    } else {
      res.status(404).json({ message: '用户不存在' });
    }
  } catch (error) {
    res.status(400).json({ error: error.message });
  }
});

// 删除用户
app.delete('/users/:id', async (req, res) => {
  try {
    const deleted = await User.destroy({
      where: { id: req.params.id }
    });
    if (deleted) {
      res.json({ message: '用户已删除' });
    } else {
      res.status(404).json({ message: '用户不存在' });
    }
  } catch (error) {
    res.status(500).json({ error: error.message });
  }
});

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

第六步:启动服务并测试 🧪

  1. 启动我们的 API 服务器

    node app.js

如果一切顺利,你会看到:

arduino 复制代码
✅ 数据库连接成功!
🚀 服务器运行在 http://localhost:3000
  1. 测试接口 (可以用 Postman、curl 或者浏览器):
  • 访问 http://localhost:3000 看看欢迎信息

  • 用 POST 请求到 http://localhost:3000/users 创建用户:

perl 复制代码
{
  "name": "张三",
  "email": "zhangsan@example.com"
}
  • 用 GET 请求到 http://localhost:3000/users 查看所有用户
  • 试试更新和删除接口,感受一下完整的 CRUD 操作!

🎉 恭喜你!

你已经成功:

  1. 用 Docker 启动了一个 MySQL 数据库

  2. 用 Sequelize 连接并操作数据库

  3. 搭建了一套完整的用户 API 接口

这只是一个开始,你可以尝试扩展这个项目:

  • 添加更多模型和关联关系
  • 增加用户认证
  • 实现更复杂的查询逻辑

💡 小提示

  • 停止 Docker 容器:docker stop my-mysql

  • 重新启动容器:docker start my-mysql

  • 查看容器日志:docker logs my-mysql

希望这篇教程对你有帮助!如果有任何问题,欢迎在评论区留言哦~祝你的开发之路越来越顺畅!🚀

相关推荐
猎豹奕叔21 分钟前
JD到家商品系统架构设计演进
后端
阑梦清川33 分钟前
深入理解动静态库和ELF文件格式
后端
猎豹奕叔35 分钟前
面试官:类中两个方法加同步锁,多线程能同时访问吗?
后端
马里奥Mario39 分钟前
电商系统商品三四级页接口性能优化记录存档
后端
koooo~40 分钟前
Vue3中的依赖注入
前端·javascript·vue.js
华农第一蒟蒻1 小时前
谈谈跨域问题
java·后端·nginx·安全·okhttp·c5全栈
绝无仅有1 小时前
面试复盘:哔哩哔哩、蔚来、字节跳动、小红书面试与总结
后端·面试·github
绝无仅有1 小时前
面试经历分享:从特斯拉到联影医疗的历程
后端·面试·github
IT_陈寒2 小时前
JavaScript性能优化:这7个V8引擎技巧让我的应用速度提升了50%
前端·人工智能·后端
细节控菜鸡4 小时前
【2025最新】ArcGIS for JS二维底图与三维地图的切换
javascript·arcgis