当前位置: 首页 > backend >正文

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

任务描述

知识点

  • 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/,页面展示如下:

http://www.xdnf.cn/news/10449.html

相关文章:

  • 【BootLoader】之stm32F407实现bootloader相关问题
  • Python+MongoDb使用手册(精简)
  • python打卡day42
  • 学习日记-day20-6.1
  • 【AI论文】推理语言模型的强化学习熵机制
  • Cocos 打包 APK 兼容环境表(Android API Level 10~15)
  • 从线性代数到线性回归——机器学习视角
  • 获取 HTTP 请求从发送到接收响应所花费的总时间
  • 什么是缺页中断(缺页中断详解)
  • 基于微信小程序的垃圾分类系统
  • 西瓜书第十章——聚类
  • 思科设备网络实验
  • 鸿蒙OSUniApp集成WebAssembly实现高性能计算:从入门到实践#三方框架 #Uniapp
  • 开发指南120-表格(el-table)斑马纹
  • 无法运用pytorch环境、改环境路径、隔离环境
  • Python编程基础(二)| 列表简介
  • 【Redis】笔记|第4节|Redis数据安全性分析
  • 数据类型与推断:TypeScript 的基础
  • wordpress免费主题网站
  • ASP.NET Core SignalR 身份认证集成指南(Identity + JWT)
  • Spring Boot,注解,@ConfigurationProperties
  • 手拆STL
  • 【Redis技术进阶之路】「原理分析系列开篇」分析客户端和服务端网络诵信交互实现(服务端执行命令请求的过程 - 时间事件处理部分)
  • Selenium的底层原理
  • 鸿蒙OSUniApp声纹识别与语音验证:打造安全可靠的跨平台语音应用#三方框架 #Uniapp
  • 第14讲、Odoo 18 实现一个Markdown Widget模块
  • 网络攻防技术一:绪论
  • 如何编写GitLab-CI配置文件
  • 【Linux】Linux文件系统详解
  • Linux 简单模拟实现C语言文件流