【可复制运行】SQL入门：为网页创作者量身打造的数据库操作第一步

“数据库和SQL看起来好复杂……”“总觉得要在黑屏上敲一堆命令，好难接近。”如果你是网页开发人员，这样的感觉或许并不少见。数据库似乎是属于服务器端的领域，感觉离自己很遥远。

但是，如果你可以直接在浏览器上运行SQL，而不需要任何复杂的环境设置，你会不会想试一试呢？

本文就是为像你这样初次接触SQL的网页创作者准备的“体验式入门工具包”。目的只有一个：通过“复制就能运行的代码”，让你亲身感受到SQL的有趣与强大。当你阅读完本篇文章时，相信你已经踏出了操作数据库的第一步，对SQL的畏惧也将转化为期待和兴奋。

SQL和数据库到底是什么？

如果用身边的事物来比喻的话……

我们先从术语整理开始。为了避免技术门槛太高，下面用生活中常见的事物做个比喻：

数据库：就像“Excel 文件”那样，是一个可以存放和管理大量数据的容器。
表（Table）：数据库中的“Excel 工作表”。比如“客户名单”、“商品列表”等，都是以行和列来组织数据。
SQL（结构化查询语言）：是“用来与数据库对话的语言”。就像我们用日语或中文对Excel说“请找出满足某条件的数据”，而SQL则是一种专用语言用来向数据库发出类似的命令。

所以说，掌握SQL，就像掌握了一种“魔法指令”，可以自由地从庞大的数据仓库中提取你想要的信息。

热身运动！先创建一个练习用的表

任何事情都要从准备开始。我们来准备一个练习用的表，名字叫“Users”，里面将存储用户的ID、姓名、年龄和城市等信息。

以下SQL代码将创建该表并插入5条示例数据。现在你只需要浏览了解它的写法即可，不需要完全理解。

示例代码：创建表并插入数据

CREATE TABLE Users (
    id INT PRIMARY KEY,
    name VARCHAR(50),
    age INT,
    city VARCHAR(50)
);

INSERT INTO Users (id, name, age, city) VALUES
(1, '田中', 25, '东京'),
(2, '佐藤', 32, '大阪'),
(3, '铃木', 20, '东京'),
(4, '高桥', 40, '福冈'),
(5, '渡边', 28, '大阪');

SQL基础！使用SELECT提取数据

在SQL中最常用的就是SELECT语句，它用于从表中提取数据，是学习SQL的基础。

比如，我们想获取Users表中的所有数据，写法如下：

示例代码：提取所有数据

SELECT * FROM Users;

来逐条解释一下：

SELECT *：表示“选择所有列”（星号 * 是通配符，意思是“全部”）
FROM Users：表示“从Users表中提取”

是不是很简单？你就是在告诉数据库：“把Users表中所有内容都拿出来！”

进阶应用：只获取你需要的数据

大多数时候我们并不需要所有数据，而是“只想要符合某些条件的数据”。这时就需要使用WHERE子句。

比如，只想看住在东京的用户，可以在SELECT语句中加上WHERE city = '东京'。

示例代码：按条件提取数据

SELECT * FROM Users WHERE city = '东京';

SELECT * FROM Users WHERE age >= 30;

你只需要更换WHERE后的条件，就可以从庞大的数据中提取出你需要的内容，这正是SQL强大的魅力所在。

【正式体验】只用HTML即可运行SQL！

终于等到这一步了！现在，你可以实际体验SQL的运行了。以下是完全可以独立运行的HTML代码，复制它就可以开始操作。

请将代码复制到VSCode等文本编辑器中，并保存为“sql-practice.html”。然后用Chrome等浏览器打开这个文件，你将看到一个属于你的SQL执行环境！

在左边的文本框中输入上面学到的SELECT语句，然后点击“执行SQL”按钮，右边就会显示结果表格。可以自由修改SQL语句试试看！

示例代码：纯HTML即可运行的SQL环境

<!DOCTYPE html>
<html lang="zh">
<head>
    <meta charset="UTF-8">
    <title>SQL 执行环境</title>
    <style>
        body { font-family: sans-serif; display: flex; gap: 20px; padding: 20px; background-color: #f9f9f9; }
        .container { flex: 1; display: flex; flex-direction: column; background-color: #fff; padding: 20px; border-radius: 8px; box-shadow: 0 2px 5px rgba(0,0,0,0.1); }
        textarea { height: 150px; border: 1px solid #ccc; border-radius: 4px; padding: 10px; font-family: monospace; font-size: 14px; margin-top: 10px;}
        button { background-color: #007bff; color: white; border: none; padding: 10px 15px; border-radius: 4px; cursor: pointer; margin-top: 10px; font-size: 16px; }
        button:hover { background-color: #0056b3; }
        table { border-collapse: collapse; width: 100%; margin-top: 10px; }
        th, td { border: 1px solid #ddd; padding: 8px; text-align: left; }
        th { background-color: #f2f2f2; }
        #error { color: #d9534f; font-weight: bold; margin-top: 10px; }
    </style>
    <script src="https://cdnjs.cloudflare.com/ajax/libs/sql.js/1.10.3/sql-wasm.js"></script>
</head>
<body>
    <div class="container">
        <h3>输入 SQL</h3>
        <textarea id="sql-input">SELECT * FROM Users;</textarea>
        <button onclick="executeSql()">执行 SQL</button>
        <div id="error"></div>
    </div>
    <div class="container">
        <h3>执行结果</h3>
        <div id="result-table"></div>
    </div>
    <script>
        let db;
        async function initDb() {
            try {
                const config = { locateFile: filename => `https://cdnjs.cloudflare.com/ajax/libs/sql.js/1.10.3/${filename}` };
                const SQL = await initSqlJs(config);
                db = new SQL.Database();
                const initialSql = `
                    CREATE TABLE Users (id INT, name VARCHAR(50), age INT, city VARCHAR(50));
                    INSERT INTO Users (id, name, age, city) VALUES
                    (1, '田中', 25, '东京'), (2, '佐藤', 32, '大阪'), (3, '铃木', 20, '东京'),
                    (4, '高桥', 40, '福冈'), (5, '渡边', 28, '大阪');
                `;
                db.run(initialSql);
                executeSql();
            } catch (e) { document.getElementById('error').textContent = "初始化数据库失败: " + e.message; }
        }
        function executeSql() {
            const sqlInput = document.getElementById('sql-input').value;
            const errorEl = document.getElementById('error');
            const resultEl = document.getElementById('result-table');
            errorEl.textContent = '';
            resultEl.innerHTML = '';
            try {
                const results = db.exec(sqlInput);
                if (results.length > 0) { resultEl.appendChild(createTable(results[0])); }
            } catch (e) { errorEl.textContent = "错误: " + e.message; }
        }
        function createTable(result) {
            const table = document.createElement('table');
            const thead = document.createElement('thead');
            const tbody = document.createElement('tbody');
            const headerRow = document.createElement('tr');
            result.columns.forEach(col => {
                const th = document.createElement('th');
                th.textContent = col;
                headerRow.appendChild(th);
            });
            thead.appendChild(headerRow);
            result.values.forEach(row => {
                const tr = document.createElement('tr');
                row.forEach(cell => {
                    const td = document.createElement('td');
                    td.textContent = cell;
                    tr.appendChild(td);
                });
                tbody.appendChild(tr);
            });
            table.appendChild(thead);
            table.appendChild(tbody);
            return table;
        }
        initDb();
    </script>
</body>
</html>

必须了解！使用 SQL 时的注意事项

SQL 功能强大，但在 Web 应用中使用时需要特别注意，最重要的问题就是 SQL 注入攻击。

SQL 注入是一种攻击方式，攻击者通过网站输入表单注入恶意 SQL 语句，可能导致数据库被非法操作或数据被盗。

防范的关键在于不要将用户输入直接拼接到 SQL 语句中。在实际开发中，应使用“占位符”机制（Prepared Statements）来安全处理用户输入。

总结：迈出下一步

通过这次“复制即运行”的体验，希望你对 SQL 感到更亲切了。不需要黑色终端，只要用对的“语言”就能让数据动起来。

本文主要介绍了 SELECT 查询，其实还有 UPDATE 更新、DELETE 删除等命令，欢迎在提供的 HTML 环境中尽情尝试。

当你能够熟练使用 SQL 操作数据库时，作为 Web 开发者的能力将得到极大提升！