首页 仓库（发现） 帮助
登录
guorui
/
short_url
1
0
派生 0
文件 工单管理 0 合并请求 0 Wiki
浏览代码

上传文件

Signed-off-by: G.R.D <13120277+grdnet@user.noreply.gitee.com>
G.R.D 1 年之前
父节点
d0e70b8f97
当前提交
2f1df0f696
共有 9 个文件被更改，包括 387 次插入 和 0 次删除
分列视图 显示文件统计
  1. 二进制
      __pycache__/app.cpython-311.pyc
  2. 二进制
      app.cpython-311.pyc
  3. 87 0
      app.py
  4. 69 0
      index.html
  5. 37 0
      result.html
  6. 44 0
      static/style.css
  7. 44 0
      style.css
  8. 69 0
      templates/index.html
  9. 37 0
      templates/result.html

二进制
__pycache__/app.cpython-311.pyc
查看文件


二进制
app.cpython-311.pyc
查看文件


+ 87 - 0
app.py
查看文件 

@@ -0,0 +1,87 @@
 
+from flask import Flask, render_template, request, redirect
 
+import pymysql
 
+import random
 
+import string
 
+from flask_bootstrap import Bootstrap
 
+
 
+app = Flask(__name__)
 
+Bootstrap(app)
 
+
 
+# 配置 MySQL 数据库连接
 
+app.config['MYSQL_DATABASE_USER'] = 'root'
 
+app.config['MYSQL_DATABASE_PASSWORD'] = 'guo784512'
 
+app.config['MYSQL_DATABASE_DB'] = 'your_database'
 
+app.config['MYSQL_DATABASE_HOST'] = 'localhost'
 
+app.config['MYSQL_DATABASE_PORT'] = 3306
 
+
 
+# 初始化 MySQL 连接
 
+db = pymysql.connect(
 
+    user=app.config['MYSQL_DATABASE_USER'],
 
+    password=app.config['MYSQL_DATABASE_PASSWORD'],
 
+    database=app.config['MYSQL_DATABASE_DB'],
 
+    host=app.config['MYSQL_DATABASE_HOST'],
 
+    port=app.config['MYSQL_DATABASE_PORT']
 
+)
 
+
 
+def is_short_url_exists(short_url):
 
+    with db.cursor() as cursor:
 
+        cursor.execute("SELECT COUNT(*) FROM urls WHERE short_url = %s", (short_url,))
 
+        result = cursor.fetchone()
 
+        return result[0] > 0
 
+
 
+def generate_unique_short_url():
 
+    current_length = 3
 
+    while True:
 
+        short_url = ''.join(random.choices(string.digits + string.ascii_letters, k=current_length))
 
+        if not is_short_url_exists(short_url):
 
+            yield short_url  # 使用 yield 生成迭代器
 
+            current_length = 4  # 在使用完当前长度后，设置下一次长度为4
 
+
 
+short_url_generator = generate_unique_short_url()
 
+
 
+@app.route('/')
 
+def index():
 
+    return render_template('index.html')
 
+
 
+@app.route('/shorten', methods=['POST'])
 
+def shorten():
 
+    original_url = request.form['url']
 
+
 
+    # 检查原始链接是否已经有对应的短链接
 
+    with db.cursor() as cursor:
 
+        cursor.execute("SELECT short_url FROM urls WHERE original_url = %s", (original_url,))
 
+        result = cursor.fetchone()
 
+        if result:
 
+            existing_short_url = result[0]
 
+            return render_template('result.html', original_url=original_url, short_url=existing_short_url)
 
+
 
+    # 如果没有，生成新的短链接
 
+    short_url = next(short_url_generator)
 
+
 
+    # 将原始URL和短网址保存到数据库
 
+    with db.cursor() as cursor:
 
+        cursor.execute("INSERT INTO urls (original_url, short_url) VALUES (%s, %s)", (original_url, short_url))
 
+        db.commit()
 
+
 
+    return render_template('result.html', original_url=original_url, short_url=short_url)
 
+
 
+@app.route('/<short_url>')
 
+def redirect_to_original(short_url):
 
+    # 从数据库中获取原始URL并重定向
 
+    with db.cursor() as cursor:
 
+        cursor.execute("SELECT original_url FROM urls WHERE short_url = %s", (short_url,))
 
+        result = cursor.fetchone()
 
+        if result:
 
+            original_url = result[0]
 
+            return redirect(original_url)
 
+        else:
 
+            return "Short URL not found."
 
+
 
+if __name__ == '__main__':
 
+    # 创建数据库表
 
+    with app.app_context():
 
+        with db.cursor() as cursor:
 
+            cursor.execute("CREATE TABLE IF NOT EXISTS urls (id INT AUTO_INCREMENT PRIMARY KEY, original_url VARCHAR(255), short_url VARCHAR(255), UNIQUE KEY short_url_unique (short_url))")
 
+            db.commit()
 
+
 
+    app.run(debug=True, port=8082)  # 将端口号改为 8082

+ 69 - 0
index.html
查看文件 

@@ -0,0 +1,69 @@
 
+<!-- templates/index.html -->
 
+
 
+<!DOCTYPE html>
 
+<html lang="zh-CN">
 
+<head>
 
+    <meta charset="UTF-8">
 
+    <meta http-equiv="X-UA-Compatible" content="IE=edge">
 
+    <meta name="viewport" content="width=device-width, initial-scale=1.0">
 
+    <title>短网址生成器</title>
 
+    <link href="https://cdn.bootcdn.net/ajax/libs/twitter-bootstrap/5.3.0-alpha1/css/bootstrap.min.css" rel="stylesheet">
 
+    <style>
 
+        body {
 
+            font-family: Arial, sans-serif;
 
+            margin: 20px;
 
+        }
 
+
 
+        h1, h2, p {
 
+            text-align: center;
 
+        }
 
+
 
+        form {
 
+            max-width: 400px;
 
+            margin: 20px auto;
 
+        }
 
+
 
+        input {
 
+            width: 100%;
 
+            padding: 10px;
 
+            margin: 8px 0;
 
+            box-sizing: border-box;
 
+        }
 
+
 
+        button {
 
+            background-color: #4CAF50;
 
+            color: white;
 
+            padding: 10px 15px;
 
+            border: none;
 
+            border-radius: 5px;
 
+            cursor: pointer;
 
+            width: 100%;
 
+        }
 
+
 
+        button:hover {
 
+            background-color: #45a049;
 
+        }
 
+
 
+        .result {
 
+            margin: 20px;
 
+            padding: 20px;
 
+            border: 1px solid #ddd;
 
+            border-radius: 5px;
 
+        }
 
+    </style>
 
+</head>
 
+<body>
 
+    <div class="container">
 
+        <h1 class="mt-5">短网址生成器</h1>
 
+        <form class="mt-4" action="/shorten" method="post">
 
+            <div class="mb-3">
 
+                <label for="url" class="form-label">输入原始网址:</label>
 
+                <input type="url" id="url" name="url" class="form-control" placeholder="https://example.com" required>
 
+            </div>
 
+            <button type="submit" class="btn btn-primary">生成短网址</button>
 
+        </form>
 
+        {% block content %}{% endblock %}
 
+    </div>
 
+    <script src="https://cdn.bootcdn.net/ajax/libs/bootstrap/5.3.0/js/bootstrap.bundle.min.js"></script>
 
+</body>
 
+</html>

+ 37 - 0
result.html
查看文件 

@@ -0,0 +1,37 @@
 
+<!-- templates/result.html -->

+

+{% extends 'index.html' %}

+

+{% block content %}

+    <div class="result mt-4">

+        <h2 class="mb-4">生成的短网址：</h2>

+        <p class="mb-2">原始网址: {{ original_url }}</p>

+        <p class="mb-2">短网址: <a href="{{ short_url }}" id="shortUrl" target="_blank">{{ short_url }}</a></p>

+        <button class="btn btn-secondary" onclick="copyToClipboard()">复制网址</button>

+    </div>

+

+    <script>

+        function copyToClipboard() {

+            /* 获取要复制的文本 */

+            var copyText = document.getElementById("shortUrl");

+

+            /* 创建临时输入框 */

+            var tempInput = document.createElement("input");

+            tempInput.value = copyText.href;  // 使用 href 属性获取完整的链接

+            document.body.appendChild(tempInput);

+

+            /* 选择临时输入框中的文本 */

+            tempInput.select();

+            tempInput.setSelectionRange(0, 99999); /* For mobile devices */

+

+            /* 尝试复制文本到剪贴板 */

+            document.execCommand("copy");

+

+            /* 移除临时输入框 */

+            document.body.removeChild(tempInput);

+

+            /* 提示复制成功 */

+            alert("已复制到剪贴板: " + copyText.href);

+        }

+    </script>

+{% endblock %}

+ 44 - 0
static/style.css
查看文件 

@@ -0,0 +1,44 @@
 
+body {
 
+    font-family: Arial, sans-serif;
 
+    background-color: #f4f4f4;
 
+    margin: 0;
 
+    padding: 0;
 
+}
 
+
 
+.container {
 
+    max-width: 600px;
 
+    margin: 50px auto;
 
+    background-color: #fff;
 
+    padding: 20px;
 
+    border-radius: 8px;
 
+    box-shadow: 0 0 10px rgba(0, 0, 0, 0.1);
 
+}
 
+
 
+form {
 
+    display: flex;
 
+    flex-direction: column;
 
+    gap: 10px;
 
+}
 
+
 
+label {
 
+    font-weight: bold;
 
+}
 
+
 
+input {
 
+    padding: 8px;
 
+    font-size: 16px;
 
+}
 
+
 
+button {
 
+    padding: 10px;
 
+    font-size: 16px;
 
+    background-color: #007bff;
 
+    color: #fff;
 
+    border: none;
 
+    cursor: pointer;
 
+    border-radius: 4px;
 
+}
 
+
 
+button:hover {
 
+    background-color: #0056b3;
 
+}

+ 44 - 0
style.css
查看文件 

@@ -0,0 +1,44 @@
 
+body {
 
+    font-family: Arial, sans-serif;
 
+    background-color: #f4f4f4;
 
+    margin: 0;
 
+    padding: 0;
 
+}
 
+
 
+.container {
 
+    max-width: 600px;
 
+    margin: 50px auto;
 
+    background-color: #fff;
 
+    padding: 20px;
 
+    border-radius: 8px;
 
+    box-shadow: 0 0 10px rgba(0, 0, 0, 0.1);
 
+}
 
+
 
+form {
 
+    display: flex;
 
+    flex-direction: column;
 
+    gap: 10px;
 
+}
 
+
 
+label {
 
+    font-weight: bold;
 
+}
 
+
 
+input {
 
+    padding: 8px;
 
+    font-size: 16px;
 
+}
 
+
 
+button {
 
+    padding: 10px;
 
+    font-size: 16px;
 
+    background-color: #007bff;
 
+    color: #fff;
 
+    border: none;
 
+    cursor: pointer;
 
+    border-radius: 4px;
 
+}
 
+
 
+button:hover {
 
+    background-color: #0056b3;
 
+}

+ 69 - 0
templates/index.html
查看文件 

@@ -0,0 +1,69 @@
 
+<!-- templates/index.html -->
 
+
 
+<!DOCTYPE html>
 
+<html lang="zh-CN">
 
+<head>
 
+    <meta charset="UTF-8">
 
+    <meta http-equiv="X-UA-Compatible" content="IE=edge">
 
+    <meta name="viewport" content="width=device-width, initial-scale=1.0">
 
+    <title>短网址生成器</title>
 
+    <link href="https://cdn.bootcdn.net/ajax/libs/twitter-bootstrap/5.3.0-alpha1/css/bootstrap.min.css" rel="stylesheet">
 
+    <style>
 
+        body {
 
+            font-family: Arial, sans-serif;
 
+            margin: 20px;
 
+        }
 
+
 
+        h1, h2, p {
 
+            text-align: center;
 
+        }
 
+
 
+        form {
 
+            max-width: 400px;
 
+            margin: 20px auto;
 
+        }
 
+
 
+        input {
 
+            width: 100%;
 
+            padding: 10px;
 
+            margin: 8px 0;
 
+            box-sizing: border-box;
 
+        }
 
+
 
+        button {
 
+            background-color: #4CAF50;
 
+            color: white;
 
+            padding: 10px 15px;
 
+            border: none;
 
+            border-radius: 5px;
 
+            cursor: pointer;
 
+            width: 100%;
 
+        }
 
+
 
+        button:hover {
 
+            background-color: #45a049;
 
+        }
 
+
 
+        .result {
 
+            margin: 20px;
 
+            padding: 20px;
 
+            border: 1px solid #ddd;
 
+            border-radius: 5px;
 
+        }
 
+    </style>
 
+</head>
 
+<body>
 
+    <div class="container">
 
+        <h1 class="mt-5">短网址生成器</h1>
 
+        <form class="mt-4" action="/shorten" method="post">
 
+            <div class="mb-3">
 
+                <label for="url" class="form-label">输入原始网址:</label>
 
+                <input type="url" id="url" name="url" class="form-control" placeholder="https://example.com" required>
 
+            </div>
 
+            <button type="submit" class="btn btn-primary">生成短网址</button>
 
+        </form>
 
+        {% block content %}{% endblock %}
 
+    </div>
 
+    <script src="https://cdn.bootcdn.net/ajax/libs/bootstrap/5.3.0/js/bootstrap.bundle.min.js"></script>
 
+</body>
 
+</html>

+ 37 - 0
templates/result.html
查看文件 

@@ -0,0 +1,37 @@
 
+<!-- templates/result.html -->

+

+{% extends 'index.html' %}

+

+{% block content %}

+    <div class="result mt-4">

+        <h2 class="mb-4">生成的短网址：</h2>

+        <p class="mb-2">原始网址: {{ original_url }}</p>

+        <p class="mb-2">短网址: <a href="{{ short_url }}" id="shortUrl" target="_blank">{{ short_url }}</a></p>

+        <button class="btn btn-secondary" onclick="copyToClipboard()">复制网址</button>

+    </div>

+

+    <script>

+        function copyToClipboard() {

+            /* 获取要复制的文本 */

+            var copyText = document.getElementById("shortUrl");

+

+            /* 创建临时输入框 */

+            var tempInput = document.createElement("input");

+            tempInput.value = copyText.href;  // 使用 href 属性获取完整的链接

+            document.body.appendChild(tempInput);

+

+            /* 选择临时输入框中的文本 */

+            tempInput.select();

+            tempInput.setSelectionRange(0, 99999); /* For mobile devices */

+

+            /* 尝试复制文本到剪贴板 */

+            document.execCommand("copy");

+

+            /* 移除临时输入框 */

+            document.body.removeChild(tempInput);

+

+            /* 提示复制成功 */

+            alert("已复制到剪贴板: " + copyText.href);

+        }

+    </script>

+{% endblock %}