django实现手机号归属地查询

要在 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'),
]

4. 功能说明

  • 输入框:用户可以在此输入手机号码。
  • 提交按钮:用户点击按钮提交查询请求。
  • 结果显示:根据查询结果,页面会显示手机号码的归属地,或者在出错时显示错误信息。

5. 进一步优化

例如表单验证(如正则表达式校验手机号码格式)、更详细的归属地信息、异步请求(AJAX)来避免页面刷新等。

在这里插入图片描述

在这里插入图片描述

评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包

打赏作者

少陽君

谢谢老板的拿铁

¥1 ¥2 ¥4 ¥6 ¥10 ¥20
扫码支付:¥1
获取中
扫码支付

您的余额不足,请更换扫码支付或充值

打赏作者

实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值