标签: 前端转后端

1. 字符串函数

-- CONCAT：拼接（≈ + 或模板字符串）
SELECT CONCAT(first_name, ' ', last_name) AS full_name FROM users;

Mr.Ding大约 4 分钟

索引 & 事务（对比前端思维）

一、索引（Index）

1. 什么是索引？

-- 没有索引时，查询会逐行扫描（≈ for 循环找）
SELECT * FROM users WHERE name = '小明';
-- 如果 users 有 100 万行，就要比较 100 万次

Mr.Ding大约 5 分钟

MySQL 学习路线 — 前端开发者视角

为什么前端要学数据库？

场景	以前（纯前端）	加上数据库
数据存储	LocalStorage / JSON 文件	MySQL 持久化
接口数据	写死 mock 数据	真实 CRUD
全栈能力	调后端接口	自己写接口+查数据
面试	只有前端知识	全栈竞争力

Mr.Ding大约 1 分钟

Java 操作 MySQL（JDBC / MyBatis 入门）

1. JDBC — 基础连接（类似 mysql2）

<!-- pom.xml -->
<dependency>
    <groupId>com.mysql</groupId>
    <artifactId>mysql-connector-j</artifactId>
    <version>8.2.0</version>
</dependency>

Mr.Ding大约 4 分钟

多表 JOIN（对比前端数据关联）

1. 为什么需要 JOIN？

// 前端：分开存储关联数据
const users = [
    { id: 1, name: '小明' },
    { id: 2, name: '小红' },
];

const orders = [
    { id: 101, user_id: 1, amount: 100, product: '键盘' },
    { id: 102, user_id: 2, amount: 200, product: '鼠标' },
    { id: 103, user_id: 1, amount: 150, product: '显示器' },
];

// 前端关联方式：find 串联
function getUserOrders(userId) {
    return orders.filter(o => o.user_id === userId);
}

// 要显示"用户名 + 订单信息"：
const result = orders.map(order => {
    const user = users.find(u => u.id === order.user_id);
    return {
        用户名: user?.name,
        商品: order.product,
        金额: order.amount,
    };
});

Mr.Ding大约 3 分钟

Node.js 操作 MySQL（mysql2 实战）

1. 安装与连接

npm install mysql2

const mysql = require('mysql2/promise');  // 使用 Promise 版本（推荐）

// 连接配置（类似前端请求的 baseURL + 鉴权）
const pool = mysql.createPool({
    host: 'localhost',      // 数据库主机
    port: 3306,             // MySQL 默认端口
    user: 'root',           // 用户名
    password: '123456',     // 密码
    database: 'my_app',     // 数据库名
    waitForConnections: true,
    connectionLimit: 10,    // 连接池大小
    queueLimit: 0,
});

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

Mr.Ding大约 3 分钟

查询进阶（对比 JS reduce/groupBy）

1. 聚合函数（≈ JS reduce）

// 前端：统计订单数据
const orders = [
    { id: 1, customer: '小明', amount: 100, status: 'completed' },
    { id: 2, customer: '小红', amount: 200, status: 'completed' },
    { id: 3, customer: '小刚', amount: 150, status: 'pending' },
];

const total = orders.reduce((s, o) => s + o.amount, 0);           // 总金额
const count = orders.length;                                        // 订单数
const avg = total / count;                                          // 平均金额
const max = Math.max(...orders.map(o => o.amount));                 // 最大金额
const min = Math.min(...orders.map(o => o.amount));                 // 最小金额

Mr.Ding大约 3 分钟

SQL 基础（对比前端思维）

1. 从 JSON 到数据表

// 前端：JS 数组存数据
const users = [
    { id: 1, name: "小明", age: 25, city: "北京" },
    { id: 2, name: "小红", age: 23, city: "上海" },
    { id: 3, name: "小刚", age: 28, city: "北京" },
];

Mr.Ding大约 3 分钟

表设计与数据类型（对比 TypeScript/JSON）

1. 数据类型对照

数值类型

INT            -- 整数（-21亿~21亿）≈ JS Number 整数部分
BIGINT         -- 大整数 ≈ BigInt
DECIMAL(10,2)  -- 精确小数（金额用！）≈ toFixed(2) 但更精确
FLOAT / DOUBLE -- 浮点数（精度有损失）
TINYINT        -- 小整数（0~255），常用作布尔值

Mr.Ding大约 4 分钟

缓存实战（对比前端缓存策略）

1. Redis 缓存的基本模式

// 前端：还记得请求缓存吗？
const cache = new Map();

async function fetchUser(id) {
    if (cache.has(id)) {
        return cache.get(id);          // 缓存命中
    }
    const data = await api.getUser(id); // 查数据库
    cache.set(id, data);               // 写入缓存
    return data;
}

Mr.Ding大约 4 分钟