任务23：创建天气信息大屏Django项目-海口c网

任务23：创建天气信息大屏Django项目

article/2025/8/2 4:32:58

任务描述

知识点：

Django

重点：

Django创建项目
Django视图函数
Django路由
Django静态文件
Django渲染模板

内容：

使用PyCharm创建大屏项目
渲染大屏主页

任务指导

1. 使用PyCharm创建大屏项目。

创建weather项目
配置虚拟环境
创建china_weather应用
添加静态文件（相应的css、js、img静态文件和index.html模板文件已在资料中提供）
网站settings.py配置

2. 渲染大屏主页

创建视图函数
添加路由

任务实现

1. 创建Django项目

1）创建项目

通过Anaconda自带的Prompt窗口切换到C盘，然后新建一个名为weather的django项目，代码如下：

django-admin startproject weather

2）配置虚拟环境

通过PyCharm打开该weather项目，在PyCharm中选择文件，设置，然后选择项目解释器，点击添加解释器，如下：

完成后，可以看到，目录中增加了venv文件夹，即为新创建的虚拟环境。需要继续安装环境所需要的库，主要需要添加Numpy、Pandas、Django、PyMySQL、SQLAlchemy（建议使用清华镜像），在PyCharm中选择文件，设置，然后选择项目解释器，点击添加解释器，如下：

根据以上步骤继续完成Pandas、Django、PyMySQL、SQLAlchemy库的安装，并按照下图所要求的版本进行安装，完成后，虚拟环境中便添加了这些库，如下图：

特别注意：为防止后期部署时库版本不兼容出现，一定要按照下面的版本进行安装。

3）创建china_weather应用

然后在PyCharm的终端创建china_weather的应用，执行以下命令：

Django-admin startapp china_weather

4）新建目录，添加静态文件。

在weather项目目录下，新建static和templates目录，分别用来存放静态文件和模板。在static目录中新建css、img和js文件目录，分别用来存放相应的静态文件。目录结构如下：

下载资料文件，解压后，将资料中的js、css和img文件夹里的文件分别对应放置到项目的js、css和img文件目录中，将index.html、地图对照模板.html和词云对照模板.html放到templates文件目录中，如下：

5）网站配置

打开settings.py文件，添加引入os模块：

import os

为了使创建的应用生效，找到INSTALLED_APPS变量，将应用程序china_weather添加到INSTALLED_APPS列表，如下图：

为了使模板生效，找到TEMPLATES，在‘DIRS’中添加如下代码：

os.path.join(BASE_DIR,'templates')

为了使静态文件生效，找到STATIC_URL，在下面添加如下代码：

STATIC_ROOT = os.path.join(BASE_DIR, STATIC_URL)
STATICFILES_DIRS = (# os.path.join(BASE_DIR, STATIC_URL),('css',os.path.join(STATIC_ROOT,'css').replace('\\','/') ),('js',os.path.join(STATIC_ROOT,'js').replace('\\','/') ),('img',os.path.join(STATIC_ROOT,'img').replace('\\','/') ),
)

完成后，保存setting.py文件

2. 渲染大屏主页

打开views.py，创建视图函数，用来登录主页，代码如下：

from django.shortcuts import HttpResponse,render,redirect
import pandas as pd
import numpy as np
from django.utils.safestring import mark_safe
from sqlalchemy import create_engine,textdef login(request):return render(request,'index.html')

备注：引入numpy、pandas库为了后面读取和处理数据使用；引入mark_safe为了django从view向template完整、原生的传递HTML字符串（django默认不渲染此HTML），防止这段字符串里面有恶意攻击的代码；引入create_engine,text是为了后面从MySQL数据库读取数据。

保存views.py文件，然后打开urls.py，配置主页的路由，先引入视图模块：

from china_weather import views

在urlpatterns中添加路由，如下：

path('',views.login),

保存urls.py文件

修改主页模板内容

打开index.html文件，在<!DOCTYPE html>前加上{% load static %}，用来引入静态文件，这样在后面引入模板、js文件、img等时可以方便的获取static文件路径，如下图：

在<head></head>部分引入js文件

		<script src="{% static 'js/wordcount.min.js' %}"></script><script src="{% static 'js/d3.min.js' %}"></script>

修改主页模板（index.html）中title文本和内容，正确配置css、js、img的引入路径（注意，css样式的引用以及img等一些路径要注意修改）：

将body部分的主标题、引入的css样式和js文件做修改，如下：

将body部分当中的标题做修改，如下：

保存所有文件后，在终端输入以下代码：

python manage.py runserver

打开Chrome浏览器，地址栏输入http://127.0.0.1:8000/，页面展示如下：