Weather app using Django - Python

我们的任务是使用 Django 创建一个 Weather 应用程序,让用户可以输入城市名称并查看当前天气详细信息,例如温度、湿度和压力。我们将通过设置一个 Django 项目,创建一个视图来从 OpenWeatherMap API 获取数据,并设计一个简单的模板来显示结果。我们将逐步实现核心功能来构建一个有效的天气应用程序。

前置条件

  1. Django的安装
  2. 创建新的新项目

基本安装

创建一个虚拟环境安装packages

pip install Django

Step 1: 创建 Django 项目

启动一个名为 weather 的新 Django 项目:

django-admin startproject weather

Step 2: 导航到项目目录

cd weather

Step 3: 创建 Django 应用

创建一个名为 main 的应用程序:

python manage.py startapp main

目录结构应如下所示:

Step 4: 将主应用程序添加到设置

打开 weather/settings.py 并将 'main' 添加到INSTALLED_APPS列表中:

Step 5: Configure URLs

编辑 weather/urls.py 以包含待办事项应用程序视图:

复制代码
from django.contrib import admin
from django.urls import path, include


urlpatterns = [
    path('admin/', admin.site.urls),
    path('', include('main.urls')),
]

Step 6: 定义主应用程序的 URL

创建 main/urls.py 并添加:

复制代码
from django.urls import path
from . import views

urlpatterns = [
         path('', views.index),
]

Step 7: Create the View

编辑 main/views.py 以获取和处理天气数据:注意:从 "OpenWeatherApp" 获取您的 API 密钥 将 views.py 中的"your_api_key_here"替换为您的实际 API 密钥。

Step 7: Create the Template

使用此内容创建 main/templates/main/index.html:

复制代码
<!DOCTYPE html>
<html lang="en" dir="ltr">

<head>
  <meta charset="utf-8" />
  <title>weather</title>
  <!-- Latest compiled and minified CSS -->
  <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.4.0/css/bootstrap.min.css" />

  <!-- jQuery library -->
  <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.4.1/jquery.min.js"></script>

  <!-- Latest compiled JavaScript -->
  <script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.4.0/js/bootstrap.min.js"></script>
</head>

<body>
  <nav class="row" style="background: green; color: white;">
    <h1 class="col-md-3 text-center">weather</h1>
  </nav>

  <br /><br />

  <center class="row">
    <form method="post" class="col-md-6 col-md-offset-3">
      {% csrf_token %}
      <div class="input-group">
        <input type="text" class="form-control" name="city" placeholder="Search" />
        <div class="input-group-btn">
          <button class="btn btn-default" type="submit">
            <i class="glyphicon glyphicon-search"></i>
          </button>
        </div>
      </div>
    </form>
  </center>

  <div class="row">
    {% if country_code and coordinate and temp and pressure and humidity %}
    <div class="col-md-6 col-md-offset-3">
      <h3>Country Code: {{ country_code }}</h3>
      <h5>Coordinate: {{ coordinate }}</h5>
      <h5>Temperature: {{ temp }}</h5>
      <h5>Pressure: {{ pressure }}</h5>
      <h5>Humidity: {{ humidity }}</h5>
    </div>
    {% endif %}
  </div>
</body>

</html>

Step 9: Make Migrations (Optional)

运行迁移以保持您的环境更新(即使此应用程序没有模型):

python manage.py makemigrations

python manage.py migrate

Step 10: Run the Server

启动 Django 开发服务器:

python manage.py runserver

Open your browser at "http://127.0.0.1:8000/", enter a city name, and check the weather!

相关推荐
澡点睡觉14 分钟前
【golang长途旅行第32站】反射
开发语言·后端·golang
用户61204149221314 分钟前
C语言做的排队叫号系统
c语言·后端·敏捷开发
小磊哥er17 分钟前
【办公自动化】学习使用Python库让视频剪辑自动化
python
IT_陈寒33 分钟前
3年Java开发经验总结:提升50%编码效率的7个核心技巧与实战案例
前端·人工智能·后端
Victor3562 小时前
Redis(26)Redis的AOF持久化的优点和缺点是什么?
后端
Victor3562 小时前
Redis(27)如何对Redis进行备份和恢复?
后端
chian-ocean5 小时前
Bright Data 代理 + MCP :解决 Google 搜索反爬的完整方案
人工智能·python
你的人类朋友9 小时前
【操作系统】Unix和Linux是什么关系?
后端·操作系统·unix
AndrewHZ9 小时前
【python与生活】如何用Python写一个简单的自动整理文件的脚本?
开发语言·python·生活·脚本·文件整理
binbinaijishu8810 小时前
Python爬虫入门指南:从零开始的网络数据获取之旅
开发语言·爬虫·python·其他