实现 "mysql url 太长" 的步骤

1. 创建数据库表

首先，我们需要创建一个数据库表来存储URL。可以使用以下SQL语句创建一个名为urls的表：

CREATE TABLE urls (
    id INT AUTO_INCREMENT PRIMARY KEY,
    url VARCHAR(1000) NOT NULL
);

这个表有两个字段，id和url。id是一个自增的唯一主键，url是用来存储URL的字段。

2. 编写后端代码

接下来，我们需要编写后端代码来处理URL的存储和查询。下面是一个使用Node.js和Express框架的示例代码：

const express = require('express');
const mysql = require('mysql');

const app = express();

// 创建数据库连接
const connection = mysql.createConnection({
    host: 'localhost',
    user: 'root',
    password: 'password',
    database: 'your_database'
});

// 连接数据库
connection.connect((err) => {
    if (err) {
        console.error('Database connection failed: ' + err.stack);
        return;
    }
    console.log('Connected to database.');
});

// 处理POST请求，将URL存储到数据库中
app.post('/urls', (req, res) => {
    const url = req.body.url;
    const sql = 'INSERT INTO urls (url) VALUES (?)';

    connection.query(sql, [url], (err, result) => {
        if (err) {
            console.error('Database query error: ' + err.stack);
            res.status(500).send('Error saving URL to database.');
            return;
        }
        res.status(200).send('URL saved to database.');
    });
});

// 处理GET请求，从数据库中获取URL列表
app.get('/urls', (req, res) => {
    const sql = 'SELECT * FROM urls';

    connection.query(sql, (err, results) => {
        if (err) {
            console.error('Database query error: ' + err.stack);
            res.status(500).send('Error fetching URLs from database.');
            return;
        }
        res.status(200).send(results);
    });
});

// 启动服务器
app.listen(3000, () => {
    console.log('Server is running on port 3000.');
});

上述代码使用了Express框架来创建一个简单的服务器，并使用mysql模块与MySQL数据库进行交互。代码中包含了两个路由处理函数，一个用于将URL存储到数据库中，另一个用于从数据库中获取URL列表。在路由处理函数中，我们使用了connection.query()方法来执行SQL查询。

3. 编写前端代码

最后，我们需要编写前端代码来发送请求给后端，并展示URL列表。以下是一个使用HTML和JavaScript的简单示例：

<!DOCTYPE html>
<html>
<head>
    <title>URL Shortener</title>
</head>
<body>
    URL Shortener
    <input type="text" id="urlInput" placeholder="Enter a URL">
    <button onclick="saveUrl()">Save</button>
    <ul id="urlList"></ul>

    <script>
        // 发送POST请求，将URL保存到数据库中
        function saveUrl() {
            const urlInput = document.getElementById('urlInput');
            const url = urlInput.value;

            fetch('/urls', {
                method: 'POST',
                headers: {
                    'Content-Type': 'application/json'
                },
                body: JSON.stringify({ url: url })
            })
            .then(response => response.text())
            .then(message => {
                console.log(message);
                urlInput.value = '';
                fetchUrls();
            })
            .catch(error => console.error(error));
        }

        // 发送GET请求，从数据库中获取URL列表
        function fetchUrls() {
            fetch('/urls')
            .then(response => response.json())
            .then(urls => {
                const urlList = document.getElementById('urlList');
                urlList.innerHTML = '';

                urls.forEach(url => {
                    const listItem = document.createElement('li');
                    listItem.textContent = url.url;
                    urlList.appendChild(listItem);
                });
            })
            .catch(error => console.error(error));
        }

        // 页面加载完成后，获取并展示URL列表
        document.addEventListener('DOMContentLoaded', fetchUrls);
    </script>
</body>
</html>

上述代码包含一个输入框和一个保存按钮，用户可以在输入框中输入URL并点击保存按钮。点击保存按钮后，会向后端发送POST请求，将URL保存到数据库中。页面加载完成后，会向后端发送GET请求，获取URL列表并展示在页面上。

总结

通过以上步骤，我们成功地实现了将URL存储到MySQL数据库中，并