基于django的前端天气预报网站

引言

前不久让做个简单网站项目，没学过框架和超文本语言的我有点慌，不过通过自学还是有惊无险的完成了，效果还算不错，完整性也很高但也有缺点，写个博客希望对初学或者有兴趣的人有所帮助，少踩一些坑，也希望大家有选择性的阅读。

源码分析网址

https://blog.csdn.net/qq_45723638/article/details/108718465

项目效果

好的，那么不多说先展示下项目

使用的版本和库

python 3.7
django2.1
pyecharts 1.6.2（如果此版本不对可能会导致图表数据无法更新）
以及爬虫相关（requests,bs4）

当然，此处涉及的爬虫内容很简单，即使没有使用过爬虫的人仍然可以做出项目

关于django版本问题也不用担心，此项目涉及的内容2.x与3.x版本是兼容的

中国天气网的接口设置

这个不做硬性要求，大家可以自己去找

接口1（json格式）
例："北京": "http://www.nmc.cn/f/rest/real/54511",
http://www.nmc.cn/f/rest/real/+城市代码

http://www.nmc.cn/f/rest/province/ABJ（可以找到城市代码）
http://www.nmc.cn/f/rest/province/（可以找到省份代码）

接口2
天气网详情页（爬取网页源码获取信息）
{
    "名字": "北京",
    "链接": "http://www.weather.com.cn/weather/101010100.shtml"
 }

跟据你想要做到的程度你需要看的内容

一篇博客往往我们并不是全都看一遍，做项目也是不一定照着别人的照搬，那么根据需要程度的不同下面我来说一说我的项目

基础的django(包含主页和简单的搜索页面)以及配置问题

在此推荐b站教程：
django配置及主页搜索页面教程

当然，我也会简单的说一说。
django的项目主要需要四个步骤：

1. 注册app（相当于将你的项目加入django框架中）
2. 配置路由，将你的网页地址写入urls.py中于是网站可以实现跳转
3. 写好方法，即在views.py中写函数获取你需要传入网页的信息，然后传入你的网页中
4. 搭建网页，在templates文件夹（自己创建）中写好html文件

以上内容在视频教程中都有，细节也讲得不错，那么我再提一提几点重要的：

• 有些地方希望不要太过于深究，以实现最终项目为主，比如涉及到{ {x}}，{% x %}，这类所谓模板引擎的时候先使用，当项目扩展后需要更多的知识就往下看吧
• 网页前端的布局和格式需要慢慢调整，一些参数可以使得你的网页更美观：
  #拉开边距
  #换行  #文本添加空格更多的可以百度查找
• 涉及的base.html可以看做是类中的父类，其他网页建立在base.html的基础上
• 项目使用了bootstrap4(有中文文档，初学者能很快上手的前端工具)对于其中卡片布局，需要使用
  ，来进行列布局，或者使用class="card-deck" class="card-columns"进行排列，下面附我的项目代码，你会发现使用了class="card-columns"即使卡片尺寸不同但是排列却不会乱

<div class="card-columns">
            {% for x in api %}
            
                <div class="card border-primary mb-3 text-center max-width: 18rem;">
                    <img class="card-img-top" src="{
      {x.图片}}" alt="Card image cap">
                    <div class="card-body text-success">
                        <form method="POST" action="{% url 'city' %}">
                            {% csrf_token %}
                            <input name="city" type="hidden" value={
      {x.城市}}>
                            <button type="submit" class="btn btn-outline-success btn-lg">{
    {x.城市}}button>
                        form>
                        <br>
                    <p class="card-text">温度:{
    {x.温度}}℃ 天气:{
    {x.天气}} 体感温度:{
    {x.体感温度}}℃<br>湿度:{
    {x.湿度}}%  降水量:{
    {x.降水量}}mm<br>风向:{
    {x.风向}}  风力:{
    {x.风力}}p>
                    <p class="card-text"><small class="text-muted">更新时间:  {
    {x.更新时间}}small>p>
                div>
                
            div>
            {% endfor %}
        div>

进一步优化主页，模板引擎和轮播图

模板引擎

在视频中或者说在最基础的主页制作中已经使用了少量的模板引擎，下面推荐大家比较全的django模板介绍

以我的经验来说，数据处理尽量在传入网页前进行处理，在html文件中不要过多使用{% if %}{% endif %} {% for %}{% endfor %}最好条件语句判断空与非空（类似异常处理）而数据遍历用于一个循环解决，且模板引擎的逻辑与python逻辑没有区别，可以大胆使用

关于传入数据

因为在html中显示数据的逻辑与python逻辑相同，对数据的处理就可以用python的方式，因为项目较简单数据量不算太大我使用本地json存储接口，数据则是实时爬取的，我采用的方式主要是传入列表字典，这种形式在最大程度上保留了数据的顺序（相较于字典套字典）处理起来比较方便，当然，这是个人习惯问题，下面是三个城市的列表字典

[
  {
    "名字": "北京",
    "链接": "http://www.weather.com.cn/weather/101010100.shtml"
  },
  {
    "名字": "海淀",
    "链接": "http://www.weather.com.cn/weather/101010200.shtml"
  },
  {
    "名字": "朝阳",
    "链接": "http://www.weather.com.cn/weather/101010300.shtml"
  }
 ]

关于轮播图（也适用其他组件）

（轮播图方法详见bootstrap4中文文档）
我在项目过程中是遇上了轮播图不滚动的问题，翻遍google和百度也没找到解决方法，最后是通过换javascrint和css版本解决的。

<link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.3.1/css/bootstrap.min.css" integrity="sha384-ggOyR0iXCbMQv3Xipma34MD+dH/1fQ784/j6cY/iJTQUOhcWr7x9JvoRxT2MZw1T" crossorigin="anonymous">

<script src="https://code.jquery.com/jquery-3.3.1.slim.min.js" integrity="sha384-q8i/X+965DzO0rT7abK41JStQIAqVgRVzpbzo5smXKp4YfRvH+8abtTE1Pi6jizo" crossorigin="anonymous">script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.14.7/umd/popper.min.js" integrity="sha384-UO2eT0CpHqdSJQ6hJty5KVphtPhzWj9WO1clHTMGa3JDZwrnQq4sF86dIHNDz0W1" crossorigin="anonymous">script>
<script src="https://stackpath.bootstrapcdn.com/bootstrap/4.3.1/js/bootstrap.min.js" integrity="sha384-JjSmVgyd0p3pXB1rRibZUAYoIIy6OrQ6VrjIEaFf/nJGzIxFDsf4x0xIM+B07jRM" crossorigin="anonymous">script>

网页中的这些就是涉及版本的问题，需要注意，至于轮播图（包括其他组件）的具体使用多去看bootstrap4文档

django简单方法加载本地图片

1. 项目下新建static文件夹
2. 将图片放入文件夹，在html中引用

<div class="carousel-item">
    {% load static %}
    
    <div class="carousel-caption d-none d-md-block text-body">
    <h5>词云图h5>
    div>
div>

对于这个问题我面向百度查找了很多但其实还是需要读django的官方文档，答案都在那里。

导航页设计

导航页的设计并没有什么复杂的点，主要是bootstrap下拉菜单的使用，当然不要忘记在urls中添加页面路由还有设置跳转导航页的接口。个人理解用户的操作是多样且不确定性的，网站多提供接口跳转和反馈，增加能极大提升用户体验。

按钮问题

例如图中显示绿色的按钮一般来说是跳转至设置的链接，但为了减少工作量和极大程度利用我的城市页面我将按钮设置成了POST的方法，给出代码

<form method="POST" action="{% url 'city' %}">
    {% csrf_token %}
    <input name="city" type="hidden" value={
      {x.景点}}>
    <button type="submit" class="btn btn-outline-success btn-lg btn-block" mr-5><span class="float-left">{
    {x.景点}}span><span>天气情况: {
    {x.天气}}         气温: {
    {x.气温}}span><span class="float-right">旅游指数:{
    {x.旅游指数}}span>button>
form>

type=“hidden”,使得点击按钮实际上是进行了一次搜索，极大减少了我的工作量

加载界面

这里主要涉及django的页面自动跳转，将其加入你的html，新建一个wait.html就可以实现了，我的加载动画。

可视化与城市页面

这里我使用了pyecharts制作的图表来表示温度曲线，pyecharts教程，注意版本一定要对。可以看到我仅仅添加了一种图表，其实添加其他表的思路也是一样的会了一种其他不难实现。
pyecharts渲染出来是html文件可以将它的body部分取出来插入html中（注意要把css和js添加到你的网页中）在网页中就实现了数据的可视化。

当然，我同样使用了词云图，关于如何制作就不多说了，给个链接：
https://blog.csdn.net/wuShiJingZuo/article/details/104935631

现存缺点

• 主页的加载很慢，因为我的主页图片是爬取的原图，且图片较多

  • 更改方法：
    • 1.先加载缩略图，再加载原图
    • 2.ajax加载
    • 3.多线程爬取

• 缺少后端，总的来说只是一个前端的展示，添加本地的信息很不方便

来自2021年的助攻：重新运行了一下项目，突然发现主页是臃肿的，不明智的，一个网站如果需要上线，主页的应该是简洁美观的，此项目主页布局不错但不应以爬虫这种效率低的方式访问大量较大的图片。省会城市的展示固然不错，但起码图片应该由本地上传（服务器中）而不是临时请求（方便维护不容易出错）或者采用省流技术（如上述改进方法）

引用的链接

django配置及主页搜索页面教程：
https://www.bilibili.com/video/BV1KJ41117HL
django 跳转页面 html：
https://blog.csdn.net/weixin_37989267/article/details/105764242
loading页面:
https://www.cnblogs.com/gaoquanquan/p/9169490.html
Django 标签过滤器(模板引擎):
https://blog.csdn.net/annao6693/article/details/102205624
pyecharts教程:
https://www.cnblogs.com/awesometang/p/12330742.html
词云：
https://blog.csdn.net/wuShiJingZuo/article/details/104935631

源码分析网址：
https://blog.csdn.net/qq_45723638/article/details/108718465