django实现手机号归属地查询

news2024/9/23 17:24:23

要在 Django 中创建一个手机归属地查询页面，前端部分通常包括一个输入框用于输入手机号码和一个按钮用于提交查询请求，随后在页面上显示查询结果。

1. 前端页面设计

在 Django 中，创建一个模板文件（例如 phone_location_query.html）

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Phone Number Location Query</title>
    <style>
        body {
            font-family: Arial, sans-serif;
            background-color: #f4f4f4;
            margin: 0;
            padding: 0;
            display: flex;
            justify-content: center;
            align-items: center;
            height: 100vh;
        }
        .container {
            background-color: #fff;
            padding: 20px;
            border-radius: 10px;
            box-shadow: 0 0 10px rgba(0, 0, 0, 0.1);
            width: 300px;
            text-align: center;
        }
        h1 {
            font-size: 24px;
            margin-bottom: 20px;
        }
        input[type="text"] {
            width: 100%;
            padding: 10px;
            margin-bottom: 20px;
            border: 1px solid #ccc;
            border-radius: 5px;
        }
        button {
            padding: 10px 20px;
            background-color: #007bff;
            color: #fff;
            border: none;
            border-radius: 5px;
            cursor: pointer;
        }
        button:hover {
            background-color: #0056b3;
        }
        .result {
            margin-top: 20px;
            font-size: 18px;
        }
        .notice {
            color: #555;
            font-size: 16px;
            margin-top: 20px;
        }
    </style>
</head>
<body>
    <div class="container">
        <h1>Phone Location Query</h1>
        <form method="POST" action="{% url 'phone_location_query' %}">
            {% csrf_token %}
            <input type="text" name="phone_number" placeholder="Enter phone number" required>
            <button type="submit">Check Location</button>
        </form>
        {% if location %}
        <div class="result">
            <strong>Location:</strong> {{ location }}
        </div>
        {% elif error %}
        <div class="result">
            <strong>Error:</strong> {{ error }}
        </div>
        {% else %}
        <div class="notice">
            Please enter a phone number to check its location.
        </div>
        {% endif %}
    </div>
</body>
</html>

2. 视图（View）代码

pip install phone

并调用 phone 库（你之前提到的首选库）来查询归属地。以下是一个简单的视图函数示例：

from django.shortcuts import render
from phone import Phone

def phone_location_query(request):
    location = None
    error = None
    
    if request.method == 'POST':
        phone_number = request.POST.get('phone_number')
        try:
            phone = Phone()
            info = phone.find(phone_number)
            location = info.get('province', 'Unknown') + " " + info.get('city', '')
        except Exception as e:
            error = str(e)
    
    return render(request, 'phone_location_query.html', {
        'location': location,
        'error': error,
    })

3. URL 路由

确保你已经在 urls.py 中为这个视图配置了路由：

from django.urls import path
from .views import phone_location_query

urlpatterns = [
    path('phone-location/', phone_location_query, name='phone_location_query'),
]