参照教程链接：https://blog.csdn.net/qq_53846367/article/details/149773032
本教程使用所有软件版本：ubuntu20.04，pycharm 25.2 ，spark 3.4.2 ，hadoop 3.4.1， MySQL8.0.35，Navicat for MySQL15

一，Pycharm内的项目初始化

首先创建Django文件

接下来安装Django和pyspark

pip install django pyspark

在当前根目录下，初始化 Django 项目

django-admin startproject "基于spark的空气质量数据分析可视化系统" .

测试Djabgo服务器是否能启动成功

python manage.py runserver

成功能看到

复制链接到浏览器，看到下图代表Djabgo服务器启动成功

之后打开settings.py,把LANGUAGE_CODE和TIME_ZONE这两处按下图修改

页面变成中文

提前安装一些依赖

在打开的文件内创建requirementsDjango.txt

在requirementsDjango.txt内粘贴以下内容

asgiref==3.5.2
async-generator==1.10
attrs==22.1.0
backports.zoneinfo==0.2.1
certifi==2022.6.15
cffi==1.15.1
cryptography==37.0.4
cycler==0.11.0
Django==3.1.14
fonttools==4.34.4
h11==0.13.0
idna==3.3
jieba==0.42.1
kiwisolver==1.4.4
matplotlib==3.5.2
mysqlclient==2.2.4
numpy==1.23.1
outcome==1.2.0
packaging==21.3
pandas==1.4.3
Pillow==9.2.0
pycparser==2.21
PyMySQL==1.0.2
pyOpenSSL==22.0.0
pyparsing==3.0.9
PySocks==1.7.1
python-dateutil==2.8.2
pytz==2022.1
six==1.16.0
sniffio==1.2.0
sortedcontainers==2.4.0
sqlparse==0.4.2
snownlp==0.12.3
tqdm==4.66.4
trio==0.21.0
trio-websocket==0.9.2
tzdata==2022.1
urllib3==1.26.11
wordcloud==1.8.2.2
wsproto==1.1.0
requests==2.31.0
lxml==4.9.3

接下来在刚刚打开的文件夹内继续打开venv,再打开Scripts，在上方路径框内输入cmd以进入系统终端

进入到终端后依次执行

activate.bat
 
 
pip install -r ../../requirementsDjango.txt

安装完成后，重启Django服务器,看到下图代表所需依赖已全部安装成功

最后在settings.py内按照下图修改，密码是自身mysql设置的密码

同时在mysql分别创建下图连接和数据库

二，爬虫初始化及代码编写

数据接口

http://www.tianqihoubao.com/
 
http://www.tianqihoubao.com/aqi/beijing-202301.html
 
http://www.tianqihoubao.com/aqi/城市-日期.html

新建目录，名为spiders

继续在spiders下新建名为spiderAQI.py的文件

接下来就是编写spiderAQI.py

import csv
import time
import requests
from bs4 import BeautifulSoup
 
 
 
class AqiSpider:
    def __init__(self,cityname,realname):
        self.cityname = cityname
        self.realname = realname
        self.headers = {
            "User-Agent":"Mozilla/5.0 (Windows NT 10.0; x64) AppleWebKit/537.36 (KHTML,like Gecko) Chrome/104.0.0.0 Safari/537.36)"
        }
 
    def send_request(self):
 
        url = "https://www.tianqihoubao.com/aqi/beijing-202301.html"
 
        response = requests.get(url,headers=self.headers,timeout=60)
        time.sleep(2)
 
        print(response.text)
 
if __name__ == '__main__':
 
    AS = AqiSpider('beijing','北京')
    AS.send_request()
 

运行spiderAQI.py，出现下图结果代表成功爬取数据，可与下方网页对比数据是否匹配，https://www.tianqihoubao.com/aqi/beijing-202301.html

至此爬虫初始化已完成，接下来开始补全spiderAQI.py剩余代码

import csv
import time
import requests
from bs4 import BeautifulSoup
 
 
 
class AqiSpider:
    def __init__(self,cityname,realname):
        self.cityname = cityname
        self.realname = realname
        self.headers = {
            "User-Agent":"Mozilla/5.0 (Windows NT 10.0; x64) AppleWebKit/537.36 (KHTML,like Gecko) Chrome/104.0.0.0 Safari/537.36)"
        }
 
        self.f = open(f'data.csv', 'a', encoding='utf-8-sig', newline='')
        self.writer = csv.DictWriter(self.f, fieldnames=[
            'city',
            'date',
            'airQuality',
            'AQI',
            'rank',
            'PM2.5',
            'PM10',
            'SO2',
            'NO2',
            'CO',
            'O3',
        ])
        self.writer.writeheader()
 
    def send_request(self,year,month):
 
        url = f"https://www.tianqihoubao.com/aqi/{self.cityname}-"+str(year)+str("%02d"%month)+".html"
 
        response = requests.get(url,headers=self.headers,timeout=60)
        time.sleep(2)
 
        # print(response.text)
        #响应码200为成功
        print(f"响应状态码:{response.status_code}")
        self.parse_response(response.text)
 
 
 
 
 
    def parse_response(self,response):
        soup = BeautifulSoup(response,"html.parser")
        tr = soup.find_all("tr")
 
        for j in tr[1:]:
            td = j.find_all("td")
            Date = td[0].get_text().strip()#日期
            Quality_level = td[1].get_text().strip()#空气质量等级
            AQI = td[2].get_text().strip()
            AQI_rank = td[3].get_text().strip()
            PM25 = td[4].get_text().strip()
            PM10 = td[5].get_text().strip()
            SO2 = td[6].get_text().strip()
            NO2 = td[7].get_text().strip()
            CO = td[8].get_text().strip()
            O3 = td[9].get_text().strip()
            print(Date,Quality_level,AQI,AQI_rank,PM25,PM10,SO2,NO2,CO,O3)
            data_dict = {
                'city':self.realname,
                'date':Date,
                'airQuality':Quality_level,
                'AQI':AQI,
                'rank':AQI_rank,
                'PM2.5':PM25,
                'PM10':PM10,
                'SO2':SO2,
                'NO2':NO2,
                'CO':CO,
                'O3':O3,
            }
 
            break
 
 
 
 
 
 
    def run(self):
        for month in range(1,13):
            print(f"正在爬取{2023}年{month}月的数据")
            self.send_request(2023,month)
            break
 
if __name__ == '__main__':
    cityList= ['beijing','tianjin','shanghai','chongqing','guangzhou','shenzhen','hangzhou','shenyang','nanjing',
               'changsha','nanchang']
    nameList = ['北京','天津','上海','重庆','广州','深圳','杭州','沈阳','南京','长沙','南昌']
    city_dict = dict(zip(cityList,nameList))
    print(city_dict)
    for k,v in city_dict.items():
 
        AS = AqiSpider(k,v)
        #AS.run()
        break
 

看到生产了data.csv文件，这一步就成功

接下来再添加spiderAQI.py代码，以检验爬取的数据是否能保存到csv文件内

import csv
import time
import requests
from bs4 import BeautifulSoup
 
 
 
class AqiSpider:
    def __init__(self,cityname,realname):
        self.cityname = cityname
        self.realname = realname
        self.headers = {
            "User-Agent":"Mozilla/5.0 (Windows NT 10.0; x64) AppleWebKit/537.36 (KHTML,like Gecko) Chrome/104.0.0.0 Safari/537.36)"
        }
 
        self.f = open(f'data.csv', 'a', encoding='utf-8-sig', newline='')
        self.writer = csv.DictWriter(self.f, fieldnames=[
            'city',
            'date',
            'airQuality',
            'AQI',
            'rank',
            'PM2.5',
            'PM10',
            'SO2',
            'NO2',
            'CO',
            'O3',
        ])
        #self.writer.writeheader()
 
    def send_request(self,year,month):
 
        url = f"https://www.tianqihoubao.com/aqi/{self.cityname}-"+str(year)+str("%02d"%month)+".html"
 
        response = requests.get(url,headers=self.headers,timeout=60)
        time.sleep(2)
 
        # print(response.text)
        #响应码200为成功
        print(f"响应状态码:{response.status_code}")
        self.parse_response(response.text)
 
 
 
 
 
    def parse_response(self,response):
        soup = BeautifulSoup(response,"html.parser")
        tr = soup.find_all("tr")
 
        for j in tr[1:]:
            td = j.find_all("td")
            Date = td[0].get_text().strip()#日期
            Quality_level = td[1].get_text().strip()#空气质量等级
            AQI = td[2].get_text().strip()
            AQI_rank = td[3].get_text().strip()
            PM25 = td[4].get_text().strip()
            PM10 = td[5].get_text().strip()
            SO2 = td[6].get_text().strip()
            NO2 = td[7].get_text().strip()
            CO = td[8].get_text().strip()
            O3 = td[9].get_text().strip()
            print(Date,Quality_level,AQI,AQI_rank,PM25,PM10,SO2,NO2,CO,O3)
            data_dict = {
                'city':self.realname,
                'date':Date,
                'airQuality':Quality_level,
                'AQI':AQI,
                'rank':AQI_rank,
                'PM2.5':PM25,
                'PM10':PM10,
                'SO2':SO2,
                'NO2':NO2,
                'CO':CO,
                'O3':O3,
            }
            print(data_dict)
            self.save_data(data_dict)
            break
 
 
    def save_data(self,data_dict):
        print('存入')
        self.writer.writerow(data_dict)
 
 
 
 
 
    def run(self):
        for month in range(1,13):
            print(f"正在爬取{2023}年{month}月的数据")
            self.send_request(2023,month)
            break
 
if __name__ == '__main__':
    cityList= ['beijing','tianjin','shanghai','chongqing','guangzhou','shenzhen','hangzhou','shenyang','nanjing',
               'changsha','nanchang']
    nameList = ['北京','天津','上海','重庆','广州','深圳','杭州','沈阳','南京','长沙','南昌']
    city_dict = dict(zip(cityList,nameList))
    print(city_dict)
    for k,v in city_dict.items():
 
        AS = AqiSpider(k,v)
        AS.run()
        break
 

看到下图data.csv新增数据，代表运行成功

接下来继续补全代码以及修改

import csv
import time
import requests
from bs4 import BeautifulSoup
 
 
 
class AqiSpider:
    def __init__(self,cityname,realname):
        self.cityname = cityname
        self.realname = realname
        self.headers = {
            "User-Agent":"Mozilla/5.0 (Windows NT 10.0; x64) AppleWebKit/537.36 (KHTML,like Gecko) Chrome/104.0.0.0 Safari/537.36)"
        }
 
        self.f = open(f'data.csv', 'a', encoding='utf-8-sig', newline='')
        self.writer = csv.DictWriter(self.f, fieldnames=[
            'city',
            'date',
            'AQI',
            'airQuality',
            'rank',
            'PM2.5',
            'PM10',
            'SO2',
            'NO2',
            'CO',
            'O3',
        ])
        #self.writer.writeheader()
 
    def send_request(self,year,month):
 
        url = f"https://www.tianqihoubao.com/aqi/{self.cityname}-"+str(year)+str("%02d"%month)+".html"
 
        response = requests.get(url,headers=self.headers,timeout=60)
        time.sleep(2)
 
        # print(response.text)
        #响应码200为成功
        print(f"响应状态码:{response.status_code}")
        self.parse_response(response.text)
 
 
 
 
 
    def parse_response(self,response):
        soup = BeautifulSoup(response,"html.parser")
        tr = soup.find_all("tr")
 
        for j in tr[1:]:
            td = j.find_all("td")
            Date = td[0].get_text().strip()#日期
            AQI = td[1].get_text().strip()
            Quality_level = td[2].get_text().strip()  # 空气质量等级
            AQI_rank = td[3].get_text().strip()
            PM25 = td[4].get_text().strip()
            PM10 = td[5].get_text().strip()
            SO2 = td[6].get_text().strip()
            NO2 = td[7].get_text().strip()
            CO = td[8].get_text().strip()
            O3 = td[9].get_text().strip()
            print(Date,Quality_level,AQI,AQI_rank,PM25,PM10,SO2,NO2,CO,O3)
            data_dict = {
                'city':self.realname,
                'date':Date,
                'AQI':AQI,
                'airQuality': Quality_level,
                'rank':AQI_rank,
                'PM2.5':PM25,
                'PM10':PM10,
                'SO2':SO2,
                'NO2':NO2,
                'CO':CO,
                'O3':O3,
            }
            print(data_dict)
            self.save_data(data_dict)
            #break
 
 
    def save_data(self,data_dict):
        print('存入')
        self.writer.writerow(data_dict)
 
 
 
 
 
    def run(self):
        for month in range(1,13):
            print(f"正在爬取{2023}年{month}月的数据")
            self.send_request(2023,month)
            #break
 
if __name__ == '__main__':
    cityList= ['beijing','tianjin','shanghai','chongqing','guangzhou','shenzhen','hangzhou','shenyang','nanjing',
               'changsha','nanchang']
    nameList = ['北京','天津','上海','重庆','广州','深圳','杭州','沈阳','南京','长沙','南昌']
    city_dict = dict(zip(cityList,nameList))
    print(city_dict)
    for k,v in city_dict.items():
 
        AS = AqiSpider(k,v)
        AS.run()
        #break
 

直接运行spiderAQI.py，看到下图结果代表运行成功

三，创建APP

在Pycharm终端输入

python manage.py startapp myApp

看到下图结果，代表myApp创建成功

在settings.py内添加myApp

在myApp下打开models.py,添加以下代码

class User(models.Model):
    id = models.AutoField("id",primary_key=True)
    username = models.CharField("用户名",max_length=255,default='')
    password = models.CharField("密码",max_length=255,default='')
    createTime = models.DateField("创建时间",auto_now_add=True)
 
    class Meta:
        db_table = "user"

继续在终端执行：python manage.py makemigrations

再在终端执行：python manage.py migrate      看到下图代表执行成功

再打开Navicat看是否生成新的表

四，大数据部分

首先设置Pycharm和ubuntu的远程连接，具体可打开连接：查看。http://blog.csdn.net/m0_69386681/article/details/155356118?spm=1011.2415.3001.5331https://blog.csdn.net/m_wizard/article/details/155942235?spm=1001.2014.3001.5502http://blog.csdn.net/m0_69386681/article/details/155356118?spm=1011.2415.3001.5331

再ubuntun内打开hdfs

继续在ubuntu输入：mapred   --daemon start historysever

输入：cd /export/sever
           cd hive
           nohup bin/hive --service metastore >>logs/metastore.log 2>&1 &

          cd ..
          cd spark
          sbin/start-all.sh
          sbin/start-history-server.sh
          sbin/start-thriftserver.sh --hiveconf hive.server2.thrift.port=10000 --hiveconf hive.server2.thrift.bind.host=192.168.254.129(虚拟机主机号) --master local[*]

输入：jps以查看是否启动完成
————————————————
版权声明：本文为CSDN博主「m0_69386681」的原创文章，遵循CC 4.0 BY-SA版权协议，转载请附上原文出处链接及本声明。
原文链接：https://blog.csdn.net/m0_69386681/article/details/156155153

回到Pycharm按图示新建名为sparks的目录

再在sparks下新建名为sparkFir的文件，编写sparkFir.py,运行下列代码

#coding:utf8
 
 
 
from pyspark.sql import SparkSession
from pyspark.sql.functions import monotonically_increasing_id
from pyspark.sql.types import StructType,StructField,IntegerType,StringType,FloatType
 
if __name__ == '__main__':
    spark = SparkSession.builder.appName("sparkSQL").master("local[*]").\
        config("spark.sql.shuffle.partitions",2). \
        config("spark.sql.warehouse.dir","hdfs://192.168.254.129:8020/user/hive/warehouse"). \
        config("hive.metastore.uris","thrift://192.168.254.129:9083"). \
        enableHiveSupport(). \
        getOrCreate()
 
    sc = spark.sparkContext
 
 
 
    schema = StructType().add("city",StringType(),nullable=True).\
        add("date",StringType(),nullable=True).\
        add("AQI",StringType(),nullable=True). \
        add("airQuality", StringType(), nullable=True). \
        add("rank",StringType(),nullable=True).\
        add("PM",StringType(),nullable=True).\
        add("PM10",StringType(),nullable=True).\
        add("SO2",StringType(),nullable=True).\
        add("NO2",StringType(),nullable=True).\
        add("CO",FloatType(),nullable=True).\
        add("O3",StringType(),nullable=True)
 
 
    df = spark.read.format("csv").\
        option("ssp",",").\
        option("header",True).\
        option("encoding","utf-8").\
        schema(schema=schema).\
        load("./data.csv")
 
    df = df.withColumn("id",monotonically_increasing_id())
 
 
    df.drop_duplicates()
 
    df.na.drop()
 
    df.show()

注意：此处的192.168.254.129是你自身电脑虚拟机上的主机号

出现下图结果代表运行成功

接着添加sparkFir.py代码

#coding:utf8
 
 
 
from pyspark.sql import SparkSession
from pyspark.sql.functions import monotonically_increasing_id
from pyspark.sql.types import StructType,StructField,IntegerType,StringType,FloatType
 
if __name__ == '__main__':
    spark = SparkSession.builder.appName("sparkSQL").master("local[*]"). \
        config("spark.sql.shuffle.partitions", 2). \
        config("spark.sql.warehouse.dir", "hdfs://192.168.254.129:8020/user/hive/warehouse"). \
        config("hive.metastore.uris", "thrift://192.168.254.129:9083"). \
        enableHiveSupport(). \
        getOrCreate()
 
    sc = spark.sparkContext
 
 
 
    schema = StructType().add("city",StringType(),nullable=True).\
        add("date",StringType(),nullable=True).\
        add("AQI",StringType(),nullable=True). \
        add("airQuality", StringType(), nullable=True). \
        add("rank",StringType(),nullable=True).\
        add("PM",StringType(),nullable=True).\
        add("PM10",StringType(),nullable=True).\
        add("SO2",StringType(),nullable=True).\
        add("NO2",StringType(),nullable=True).\
        add("CO",FloatType(),nullable=True).\
        add("O3",StringType(),nullable=True)
 
 
    df = spark.read.format("csv").\
        option("sep",",").\
        option("header",True).\
        option("encoding","utf-8").\
        schema(schema=schema).\
        load("./data.csv")
 
 
    df = df.withColumn("id",monotonically_increasing_id())
 
 
    df.drop_duplicates()
 
    df.na.drop()
 
    #df.show()
 
    df.write.mode("overwrite"). \
        format("jdbc"). \
        option("url", "jdbc:mysql://192.168.254.129:3306/bigdata?useSSL=false&useUnicode=true&characterEncoding=utf8"). \
        option("dbtable", "airdata"). \
        option("user", "root"). \
        option("password", "123456"). \
        option("driver", "com.mysql.cj.jdbc.Driver"). \
        save()
 
    df.write.mode("overwrite").saveAsTable("airdata", "parquet")
    spark.sql("select * from airdata").show()
 

出现下图结果，代表成功

接下来在sparks下新建sparkAna.py,运行下列代码

#coding:utf8
 
 
 
from pyspark.sql import SparkSession
from pyspark.sql.functions import monotonically_increasing_id
from pyspark.sql.functions import count,mean,col,sum,when
from pyspark.sql import functions as F
from pyspark.sql.types import StructType,StructField,IntegerType,StringType,FloatType
 
if __name__ == '__main__':
    spark = SparkSession.builder.appName("sparkSQL").master("local[*]"). \
        config("spark.sql.shuffle.partitions", 2). \
        config("spark.sql.warehouse.dir", "hdfs://192.168.254.129:8020/user/hive/warehouse"). \
        config("hive.metastore.uris", "thrift://192.168.254.129:9083"). \
        enableHiveSupport(). \
        getOrCreate()
 
    sc = spark.sparkContext
 
    airdata = spark.read.table("airdata")
 
    result1 = airdata.groupby("city")\
        .agg(mean("AQI").alias("avg_AQI"))\
        .orderBy("avg_AQI",ascending=False)
 
    df = result1.toPandas()
    print(df)

出现下图结果代表运行成功

继续添加sparkAna.py代码，直接运行下列代码

 #coding:utf8
 
 
 
from pyspark.sql import SparkSession
from pyspark.sql.functions import monotonically_increasing_id
from pyspark.sql.functions import count,mean,col,sum,when
from pyspark.sql import functions as F
from pyspark.sql.types import StructType,StructField,IntegerType,StringType,FloatType
 
if __name__ == '__main__':
    spark = SparkSession.builder.appName("sparkSQL").master("local[*]"). \
        config("spark.sql.shuffle.partitions", 2). \
        config("spark.sql.warehouse.dir", "hdfs://192.168.254.129:8020/user/hive/warehouse"). \
        config("hive.metastore.uris", "thrift://192.168.254.129:9083"). \
        enableHiveSupport(). \
        getOrCreate()
 
    sc = spark.sparkContext
 
    airdata = spark.read.table("airdata")
 
    result1 = airdata.groupby("city")\
        .agg(mean("AQI").alias("avg_AQI"))\
        .orderBy("avg_AQI",ascending=False)
 
    df = result1.toPandas()
    print(df)
 
    result1.write.mode("overwrite"). \
        format("jdbc"). \
        option("url", "jdbc:mysql://192.168.254.129:3306/bigdata?useSSL=false&useUnicode=true&characterEncoding=utf8"). \
        option("dbtable", "avgCity"). \
        option("user", "root"). \
        option("password", "123456"). \
        option("driver", "com.mysql.cj.jdbc.Driver"). \
        save()
 
    result1.write.mode("overwrite").saveAsTable("avgCity", "parquet")
    spark.sql("select * from avgCity").show()

出现下列结果代表运行成功

继续运行下列sparkAna.py代码

#coding:utf8
 
 
 
from pyspark.sql import SparkSession
from pyspark.sql.functions import monotonically_increasing_id
from pyspark.sql.functions import count,mean,col,sum,when
from pyspark.sql import functions as F
from pyspark.sql.types import StructType,StructField,IntegerType,StringType,FloatType
 
if __name__ == '__main__':
    spark = SparkSession.builder.appName("sparkSQL").master("local[*]"). \
        config("spark.sql.shuffle.partitions", 2). \
        config("spark.sql.warehouse.dir", "hdfs://192.168.254.129:8020/user/hive/warehouse"). \
        config("hive.metastore.uris", "thrift://192.168.254.129:9083"). \
        enableHiveSupport(). \
        getOrCreate()
 
    sc = spark.sparkContext
 
    airdata = spark.read.table("airdata")
 
    result1 = airdata.groupby("city")\
        .agg(mean("AQI").alias("avg_AQI"))\
        .orderBy("avg_AQI",ascending=False)
 
    df = result1.toPandas()
    #print(df)
 
    result1.write.mode("overwrite"). \
        format("jdbc"). \
        option("url", "jdbc:mysql://192.168.254.129:3306/bigdata?useSSL=false&useUnicode=true&characterEncoding=utf8"). \
        option("dbtable", "avgCityAqi"). \
        option("user", "root"). \
        option("password", "123456"). \
        option("driver", "com.mysql.cj.jdbc.Driver"). \
        save()
 
    result1.write.mode("overwrite").saveAsTable("avgCityAqi", "parquet")
    spark.sql("select * from avgCityAqi").show()
 
 
    result2 = airdata.groupby("city") \
        .agg(mean("PM").alias("avg_PM"),
             mean("PM10").alias("avg_PM10"),
             mean("SO2").alias("avg_SO2"),
             mean("NO2").alias("avg_NO2"),
             mean("CO").alias("avg_CO"),
             mean("O3").alias("avg_O3"),)
 
    result2.write.mode("overwrite"). \
        format("jdbc"). \
        option("url", "jdbc:mysql://192.168.254.129:3306/bigdata?useSSL=false&useUnicode=true&characterEncoding=utf8"). \
        option("dbtable", "avgCitySix"). \
        option("user", "root"). \
        option("password", "123456"). \
        option("driver", "com.mysql.cj.jdbc.Driver"). \
        save()
 
    result2.write.mode("overwrite").saveAsTable("avgCitySix", "parquet")
    spark.sql("select * from avgCitySix").show()

出现下图结果代表运行成功

接下来修改以下sparkFir内的代码，因为之前的数据类型写错了。直接运行下列代码

#coding:utf8
 
 
 
from pyspark.sql import SparkSession
from pyspark.sql.functions import monotonically_increasing_id
from pyspark.sql.types import StructType,StructField,IntegerType,StringType,FloatType
 
if __name__ == '__main__':
    spark = SparkSession.builder.appName("sparkSQL").master("local[*]"). \
        config("spark.sql.shuffle.partitions", 2). \
        config("spark.sql.warehouse.dir", "hdfs://192.168.254.129:8020/user/hive/warehouse"). \
        config("hive.metastore.uris", "thrift://192.168.254.129:9083"). \
        enableHiveSupport(). \
        getOrCreate()
 
    sc = spark.sparkContext
 
 
 
    schema = StructType().add("city",StringType(),nullable=True).\
        add("date",StringType(),nullable=True).\
        add("AQI",IntegerType(),nullable=True). \
        add("airQuality", StringType(), nullable=True). \
        add("rank",StringType(),nullable=True).\
        add("PM",IntegerType(),nullable=True).\
        add("PM10",IntegerType(),nullable=True).\
        add("SO2",IntegerType(),nullable=True).\
        add("NO2",IntegerType(),nullable=True).\
        add("CO",FloatType(),nullable=True).\
        add("O3",IntegerType(),nullable=True)
 
 
    df = spark.read.format("csv").\
        option("sep",",").\
        option("header",True).\
        option("encoding","utf-8").\
        schema(schema=schema).\
        load("./data.csv")
 
 
    df = df.withColumn("id",monotonically_increasing_id())
 
 
    df.drop_duplicates()
 
    df.na.drop()
 
    #df.show()
 
    df.write.mode("overwrite"). \
        format("jdbc"). \
        option("url", "jdbc:mysql://192.168.254.129:3306/bigdata?useSSL=false&useUnicode=true&characterEncoding=utf8"). \
        option("dbtable", "airdata"). \
        option("user", "root"). \
        option("password", "123456"). \
        option("driver", "com.mysql.cj.jdbc.Driver"). \
        save()
 
    df.write.mode("overwrite").saveAsTable("airdata", "parquet")
    spark.sql("select * from airdata").show()
 

接下来继续添加sparkAna.py代码，直接运行

#coding:utf8
 
 
 
from pyspark.sql import SparkSession
from pyspark.sql.functions import monotonically_increasing_id
from pyspark.sql.functions import count,mean,col,sum,when,year,month,max,min,avg
from pyspark.sql import functions as F
from pyspark.sql.types import StructType,StructField,IntegerType,StringType,FloatType
 
if __name__ == '__main__':
    spark = SparkSession.builder.appName("sparkSQL").master("local[*]"). \
        config("spark.sql.shuffle.partitions", 2). \
        config("spark.sql.warehouse.dir", "hdfs://192.168.254.129:8020/user/hive/warehouse"). \
        config("hive.metastore.uris", "thrift://192.168.254.129:9083"). \
        enableHiveSupport(). \
        getOrCreate()
 
    sc = spark.sparkContext
 
    airdata = spark.read.table("airdata")
 
    result1 = airdata.groupby("city")\
        .agg(mean("AQI").alias("avg_AQI"))\
        .orderBy("avg_AQI",ascending=False)
 
    df = result1.toPandas()
    #print(df)
 
    result1.write.mode("overwrite"). \
        format("jdbc"). \
        option("url", "jdbc:mysql://192.168.254.129:3306/bigdata?useSSL=false&useUnicode=true&characterEncoding=utf8"). \
        option("dbtable", "avgCityAqi"). \
        option("user", "root"). \
        option("password", "123456"). \
        option("driver", "com.mysql.cj.jdbc.Driver"). \
        save()
 
    result1.write.mode("overwrite").saveAsTable("avgCityAqi", "parquet")
    spark.sql("select * from avgCityAqi").show()
 
 
    result2 = airdata.groupby("city") \
        .agg(mean("PM").alias("avg_PM"),
             mean("PM10").alias("avg_PM10"),
             mean("SO2").alias("avg_SO2"),
             mean("NO2").alias("avg_NO2"),
             mean("CO").alias("avg_CO"),
             mean("O3").alias("avg_O3"),)
 
    result2.write.mode("overwrite"). \
        format("jdbc"). \
        option("url", "jdbc:mysql://192.168.254.129:3306/bigdata?useSSL=false&useUnicode=true&characterEncoding=utf8"). \
        option("dbtable", "avgCitySix"). \
        option("user", "root"). \
        option("password", "123456"). \
        option("driver", "com.mysql.cj.jdbc.Driver"). \
        save()
 
    result2.write.mode("overwrite").saveAsTable("avgCitySix", "parquet")
    spark.sql("select * from avgCitySix").show()
 
 
 
    airdata = airdata.withColumn("date",airdata["date"].cast("date"))
 
    result3 = airdata.groupby("city",year("date").alias("year"),month("date").alias("month"))\
        .agg(
        max("AQI").alias("max_AQI"),
        min("AQI").alias("min_AQI"),
    )
 
    result3.write.mode("overwrite"). \
        format("jdbc"). \
        option("url", "jdbc:mysql://192.168.254.129:3306/bigdata?useSSL=false&useUnicode=true&characterEncoding=utf8"). \
        option("dbtable", "maxCityAqi"). \
        option("user", "root"). \
        option("password", "123456"). \
        option("driver", "com.mysql.cj.jdbc.Driver"). \
        save()
 
    result3.write.mode("overwrite").saveAsTable("maxCityAqi", "parquet")
    spark.sql("select * from maxCityAqi").show()
 
    result4 = airdata.groupby("city", year("date").alias("year"), month("date").alias("month")) \
        .agg(
        avg("PM").alias("max_PM"),
        avg("PM10").alias("min_PM10"),
    )
 
    result4.write.mode("overwrite"). \
        format("jdbc"). \
        option("url", "jdbc:mysql://192.168.254.129:3306/bigdata?useSSL=false&useUnicode=true&characterEncoding=utf8"). \
        option("dbtable", "avgCityPM"). \
        option("user", "root"). \
        option("password", "123456"). \
        option("driver", "com.mysql.cj.jdbc.Driver"). \
        save()
 
    result4.write.mode("overwrite").saveAsTable("avgCityPM", "parquet")
    spark.sql("select * from avgCityPM").show()
 
    result5 = airdata.groupby("city", year("date").alias("year"),month("date").alias("month"))\
        .agg(
        count(when(airdata["AQI"] < 50, True)).alias("greatAir")
    )
    result5.write.mode("overwrite"). \
        format("jdbc"). \
        option("url", "jdbc:mysql://192.168.254.129:3306/bigdata?useSSL=false&useUnicode=true&characterEncoding=utf8"). \
        option("dbtable", "greatAir"). \
        option("user", "root"). \
        option("password", "123456"). \
        option("driver", "com.mysql.cj.jdbc.Driver"). \
        save()
 
    result5.write.mode("overwrite").saveAsTable("greatAir", "parquet")
    spark.sql("select * from greatAir").show()
 
 
 
    result6 = airdata.groupby("city")\
        .agg(
        max("SO2").alias("max_SO2"),
        max("NO2").alias("max_NO2"),
    )
 
    result6.write.mode("overwrite"). \
        format("jdbc"). \
        option("url", "jdbc:mysql://192.168.254.129:3306/bigdata?useSSL=false&useUnicode=true&characterEncoding=utf8"). \
        option("dbtable", "maxSN"). \
        option("user", "root"). \
        option("password", "123456"). \
        option("driver", "com.mysql.cj.jdbc.Driver"). \
        save()
 
    result6.write.mode("overwrite").saveAsTable("maxSN", "parquet")
    spark.sql("select * from maxSN").show()
 
 
    airdata = airdata.withColumn(
        "CO_category",
        when((col("CO") >= 0) & (col("CO") < 0.25),'0-0.25')
        .when((col("CO") >= 0.25) & (col("CO") < 0.5),'0.25-0.5')
        .when((col("CO") >= 0.5) & (col("CO") < 0.75),'0.5-0.75')
        .when((col("CO") >= 0.75) & (col("CO") < 1),'0.75-1')
        .otherwise("1以上")
    )
    result7 = airdata.groupby("CO_category") .agg(count('*').alias('CO_count'))
 
    result7.write.mode("overwrite"). \
        format("jdbc"). \
        option("url", "jdbc:mysql://192.168.254.129:3306/bigdata?useSSL=false&useUnicode=true&characterEncoding=utf8"). \
        option("dbtable", "COCategory"). \
        option("user", "root"). \
        option("password", "123456"). \
        option("driver", "com.mysql.cj.jdbc.Driver"). \
        save()
 
    result7.write.mode("overwrite").saveAsTable("COCategory", "parquet")
    spark.sql("select * from COCategory").show()
 
 
 
    airdata = airdata.withColumn(
        "O3_category",
        when((col("O3") >= 0) & (col("O3") < 25), '0-25')
        .when((col("O3") >= 25) & (col("O3") < 50), '25-50')
        .when((col("O3") >= 50) & (col("O3") < 75), '50-75')
        .when((col("O3") >= 75) & (col("O3") < 100), '75-100')
        .otherwise("100以上")
    )
    result8 = airdata.groupby("O3_category").agg(count('*').alias('O3_count'))
 
    result8.write.mode("overwrite"). \
        format("jdbc"). \
        option("url", "jdbc:mysql://192.168.254.129:3306/bigdata?useSSL=false&useUnicode=true&characterEncoding=utf8"). \
        option("dbtable", "O3Category"). \
        option("user", "root"). \
        option("password", "123456"). \
        option("driver", "com.mysql.cj.jdbc.Driver"). \
        save()
 
    result8.write.mode("overwrite").saveAsTable("O3Category", "parquet")
    spark.sql("select * from O3Category").show()
 
 
 
 
 
    result9 = airdata.groupby("city", year("date").alias("year"), month("date").alias("month"))\
        .agg(avg("AQI").alias("month_AQI"))
 
    result9.write.mode("overwrite"). \
        format("jdbc"). \
        option("url", "jdbc:mysql://192.168.254.129:3306/bigdata?useSSL=false&useUnicode=true&characterEncoding=utf8"). \
        option("dbtable", "monthAQI"). \
        option("user", "root"). \
        option("password", "123456"). \
        option("driver", "com.mysql.cj.jdbc.Driver"). \
        save()
 
    result9.write.mode("overwrite").saveAsTable("monthAQI", "parquet")
    spark.sql("select * from monthAQI").show()
 

出现下图结果代表运行成功，

五，前端初始化

首先打开模板连接，https://sc.chinaz.com/moban/        先选择第2页，

找到下图所示的模板并点击

然后下滑到页面底部，随便选一个下载

下载完成将压缩包放到项目文件夹下并解压

解压后打开文件夹，找到index.html并点击

接下来在Pycharm项目根目录新建static文件

在此settings.py内按下图位置补充代码

再将assets文件夹复制到static下

然后按下图所示修改代码

继续在myApp下新建urls.py

再新建的urls.py下输入下图代码

然后再views.py下输入下图代码

然后将之前文件夹内的index.html文件复制到templates下

在index.html下按ctrl+r将全部的assets/按下图替换

再pycharm终端输入python manage.py runserver以重启服务器

再在浏览器输入http://127.0.0.1:8000/myApp/index/即可看到网页成功渲染出来

继续把index.html改成下述代码

<!DOCTYPE html>
<html lang="en">
<head>
	<meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
	<meta http-equiv="X-UA-Compatible" content="IE=edge">
	<meta name="viewport" content="width=device-width, initial-scale=1, user-scalable=no">
	<meta name="description" content="">
	<meta name="author" content="">
 
	<title>Home - My Admin Template</title>
 
	<!-- Main Styles -->
	<link rel="stylesheet" href="/static/assets/styles/style-horizontal.min.css">
	
	<!-- Material Design Icon -->
	<link rel="stylesheet" href="/static/assets/fonts/material-design/css/materialdesignicons.css">
 
	<!-- mCustomScrollbar -->
	<link rel="stylesheet" href="/static/assets/plugin/mCustomScrollbar/jquery.mCustomScrollbar.min.css">
 
	<!-- Waves Effect -->
	<link rel="stylesheet" href="/static/assets/plugin/waves/waves.min.css">
 
	<!-- Sweet Alert -->
	<link rel="stylesheet" href="/static/assets/plugin/sweet-alert/sweetalert.css">
	
	<!-- Morris Chart -->
	<link rel="stylesheet" href="/static/assets/plugin/chart/morris/morris.css">
 
	<!-- FullCalendar -->
	<link rel="stylesheet" href="/static/assets/plugin/fullcalendar/fullcalendar.min.css">
	<link rel="stylesheet" href="/static//static/assets/plugin/fullcalendar/fullcalendar.print.css" media='print'>
 
</head>
 
<body>
<header class="fixed-header">
	<div class="header-top">
		<div class="container">
			<div class="pull-left">
				<a href="index.html" class="logo"><i class="ico mdi mdi-cube-outline"></i>MyAdmin</a>
			</div>
			<!-- /.pull-left -->
			<div class="pull-right">
				<div class="ico-item hidden-on-desktop">
					<button type="button" class="menu-button js__menu_button fa fa-bars waves-effect waves-light"></button>
				</div>
				<!-- /.ico-item hidden-on-desktop -->
				<div class="ico-item">
					<a href="#" class="ico-item mdi mdi-magnify js__toggle_open" data-target="#searchform-header"></a>
					<form action="#" id="searchform-header" class="searchform js__toggle"><input type="search" placeholder="Search..." class="input-search"><button class="mdi mdi-magnify button-search" type="submit"></button></form>
					<!-- /.searchform -->
				</div>
				<!-- /.ico-item -->
				<div class="ico-item">
					<a href="#" class="ico-item mdi mdi-email notice-alarm js__toggle_open" data-target="#message-popup"></a>
					<div id="message-popup" class="notice-popup js__toggle" data-space="55">
						<h2 class="popup-title">Recent Messages<a href="#" class="pull-right text-danger">New message</a></h2>
						<!-- /.popup-title -->
						<div class="content">
							<ul class="notice-list">
								<li>
									<a href="#">
										<span class="avatar"><img src="/static/assets/images/avatar-sm-1.jpg" alt=""></span>
										<span class="name">John Doe</span>
										<span class="desc">Amet odio neque nobis consequuntur consequatur a quae, impedit facere repellat voluptates.</span>
										<span class="time">10 min</span>
									</a>
								</li>
								<li>
									<a href="#">
										<span class="avatar"><img src="/static/assets/images/avatar-sm-3.jpg" alt=""></span>
										<span class="name">Harry Halen</span>
										<span class="desc">Amet odio neque nobis consequuntur consequatur a quae, impedit facere repellat voluptates.</span>
										<span class="time">15 min</span>
									</a>
								</li>
								<li>
									<a href="#">
										<span class="avatar"><img src="/static/assets/images/avatar-sm-4.jpg" alt=""></span>
										<span class="name">Thomas Taylor</span>
										<span class="desc">Amet odio neque nobis consequuntur consequatur a quae, impedit facere repellat voluptates.</span>
										<span class="time">30 min</span>
									</a>
								</li>
								<li>
									<a href="#">
										<span class="avatar"><img src="/static/assets/images/avatar-1.jpg" alt=""></span>
										<span class="name">Jennifer</span>
										<span class="desc">Amet odio neque nobis consequuntur consequatur a quae, impedit facere repellat voluptates.</span>
										<span class="time">45 min</span>
									</a>
								</li>
								<li>
									<a href="#">
										<span class="avatar"><img src="/static/assets/images/avatar-sm-5.jpg" alt=""></span>
										<span class="name">Helen Candy</span>
										<span class="desc">Amet odio neque nobis consequuntur consequatur a quae, impedit facere repellat voluptates.</span>
										<span class="time">45 min</span>
									</a>
								</li>
								<li>
									<a href="#">
										<span class="avatar"><img src="/static/assets/images/avatar-2.jpg" alt=""></span>
										<span class="name">Anna Cavan</span>
										<span class="desc">Amet odio neque nobis consequuntur consequatur a quae, impedit facere repellat voluptates.</span>
										<span class="time">1 hour ago</span>
									</a>
								</li>
								<li>
									<a href="#">
										<span class="avatar bg-success"><i class="fa fa-user"></i></span>
										<span class="name">Jenny Betty</span>
										<span class="desc">Amet odio neque nobis consequuntur consequatur a quae, impedit facere repellat voluptates.</span>
										<span class="time">1 day ago</span>
									</a>
								</li>
								<li>
									<a href="#">
										<span class="avatar"><img src="/static/assets/images/avatar-5.jpg" alt=""></span>
										<span class="name">Denise Peterson</span>
										<span class="desc">Amet odio neque nobis consequuntur consequatur a quae, impedit facere repellat voluptates.</span>
										<span class="time">1 year ago</span>
									</a>
								</li>
							</ul>
							<!-- /.notice-list -->
							<a href="#" class="notice-read-more">See more messages <i class="fa fa-angle-down"></i></a>
						</div>
						<!-- /.content -->
					</div>
					<!-- /#message-popup -->
				</div>
				<!-- /.ico-item -->
				<div class="ico-item">
					<a href="#" class="ico-item mdi mdi-bell notice-alarm js__toggle_open" data-target="#notification-popup"></a>
					<div id="notification-popup" class="notice-popup js__toggle" data-space="55">
						<h2 class="popup-title">Your Notifications</h2>
						<!-- /.popup-title -->
						<div class="content">
							<ul class="notice-list">
								<li>
									<a href="#">
										<span class="avatar"><img src="/static/assets/images/avatar-sm-1.jpg" alt=""></span>
										<span class="name">John Doe</span>
										<span class="desc">Like your post: “Contact Form 7 Multi-Step”</span>
										<span class="time">10 min</span>
									</a>
								</li>
								<li>
									<a href="#">
										<span class="avatar"><img src="/static/assets/images/avatar-sm-2.jpg" alt=""></span>
										<span class="name">Anna William</span>
										<span class="desc">Like your post: “Facebook Messenger”</span>
										<span class="time">15 min</span>
									</a>
								</li>
								<li>
									<a href="#">
										<span class="avatar bg-warning"><i class="fa fa-warning"></i></span>
										<span class="name">Update Status</span>
										<span class="desc">Failed to get available update data. To ensure the please contact us.</span>
										<span class="time">30 min</span>
									</a>
								</li>
								<li>
									<a href="#">
										<span class="avatar"><img src="/static/assets/images/avatar-1.jpg" alt=""></span>
										<span class="name">Jennifer</span>
										<span class="desc">Like your post: “Contact Form 7 Multi-Step”</span>
										<span class="time">45 min</span>
									</a>
								</li>
								<li>
									<a href="#">
										<span class="avatar"><img src="/static/assets/images/avatar-sm-6.jpg" alt=""></span>
										<span class="name">Michael Zenaty</span>
										<span class="desc">Like your post: “Contact Form 7 Multi-Step”</span>
										<span class="time">50 min</span>
									</a>
								</li>
								<li>
									<a href="#">
										<span class="avatar"><img src="/static/assets/images/avatar-sm-4.jpg" alt=""></span>
										<span class="name">Simon</span>
										<span class="desc">Like your post: “Facebook Messenger”</span>
										<span class="time">1 hour</span>
									</a>
								</li>
								<li>
									<a href="#">
										<span class="avatar bg-violet"><i class="fa fa-flag"></i></span>
										<span class="name">Account Contact Change</span>
										<span class="desc">A contact detail associated with your account has been changed.</span>
										<span class="time">2 hours</span>
									</a>
								</li>
								<li>
									<a href="#">
										<span class="avatar"><img src="/static/assets/images/avatar-sm-7.jpg" alt=""></span>
										<span class="name">Helen 987</span>
										<span class="desc">Like your post: “Facebook Messenger”</span>
										<span class="time">Yesterday</span>
									</a>
								</li>
								<li>
									<a href="#">
										<span class="avatar"><img src="/static/assets/images/avatar-2.jpg" alt=""></span>
										<span class="name">Denise Jenny</span>
										<span class="desc">Like your post: “Contact Form 7 Multi-Step”</span>
										<span class="time">Oct, 28</span>
									</a>
								</li>
								<li>
									<a href="#">
										<span class="avatar"><img src="/static/assets/images/avatar-sm-8.jpg" alt=""></span>
										<span class="name">Thomas William</span>
										<span class="desc">Like your post: “Facebook Messenger”</span>
										<span class="time">Oct, 27</span>
									</a>
								</li>
							</ul>
							<!-- /.notice-list -->
							<a href="#" class="notice-read-more">See more messages <i class="fa fa-angle-down"></i></a>
						</div>
						<!-- /.content -->
					</div>
					<!-- /#notification-popup -->
				</div>
				<!-- /.ico-item -->
				<div class="ico-item">
					<a href="#" class="ico-item mdi mdi-account js__toggle_open" data-target="#user-status"></a>
					<div id="user-status" class="user-status js__toggle">
						<a href="#" class="avatar"><img src="/static/assets/images/avatar.png" alt=""><span class="status online"></span></a>
						<h5 class="name"><a href="profile.html">Emily Stanley</a></h5>
						<h5 class="position">Administrator</h5>
						<!-- /.name -->
						<div class="control-items">
							<div class="control-item"><a href="#" title="Settings"><i class="fa fa-gear"></i></a></div>
							<div class="control-item"><a href="#" class="js__logout" title="Log out"><i class="fa fa-power-off"></i></a></div>
						</div>
						<!-- /.control-items -->
					</div>
					<!-- /#user-status -->
				</div>
				<!-- /.ico-item -->
			</div>
			<!-- /.pull-right -->
		</div>
		<!-- /.container -->
	</div>
	<!-- /.header-top -->
	<nav class="nav-horizontal">
		<button type="button" class="menu-close hidden-on-desktop js__close_menu"><i class="fa fa-times"></i><span>CLOSE</span></button>
		<div class="container">
			
			<ul class="menu">
					<li class="current">
						<a href="index.html"><i class="ico mdi mdi-home"></i><span>首页</span></a>
					</li>
					<li class="has-sub">
						<a href="#"><i class="ico mdi mdi-human"></i><span>个人信息</span></a>
						<ul class="sub-menu mega mega-3">
							<li class="has-sub">
								<h3 class="title">Components</h3>
								<!-- .title -->
								<ul class="child-list">
									<li><a href="ui-buttons.html">Buttons</a></li>
									<li><a href="ui-cards.html">Cards</a></li>
									<li><a href="ui-checkbox-radio.html">Checkboxs-Radios</a></li>
									<li><a href="ui-draggable-cards.html">Draggable Cards</a></li>
									<li><a href="ui-components.html">UI Components</a></li>
								</ul>
								<!-- /.child-list -->
							</li>
							<li class="has-sub">
								<h3 class="title">Icons</h3>
								<!-- .title -->
								<ul class="child-list">
									<li><a href="icons-font-awesome-icons.html">Font Awesome</a></li>
									<li><a href="icons-fontello.html">Fontello</a></li>
									<li><a href="icons-material-icons.html">Material Design Icons</a></li>
									<li><a href="icons-material-design-iconic.html">Material Design Iconic Font</a></li>
									<li><a href="icons-themify-icons.html">Themify Icons</a></li>
								</ul>
								<!-- /.child-list -->
							</li>
							<li class="has-sub">
								<h3 class="title">Others</h3>
								<!-- .title -->
								<ul class="child-list">
									<li><a href="ui-modals.html">Modals</a></li>
									<li><a href="ui-range-slider.html">Range Slider</a></li>
									<li><a href="ui-sweetalert.html">Sweet Alert</a></li>
									<li><a href="ui-treeview.html">Tree view</a></li>
									<li><a href="ui-typography.html">Typography</a></li>
								</ul>
								<!-- /.child-list -->
							</li>
						</ul>
						<!-- /.sub-menu mega -->
					</li>
					<li class="has-sub">
						<a href="#"><i class="ico mdi mdi-database"></i><span>数据总览</span></a>
						<ul class="sub-menu single">
							<li><a href="chart-3d.html">3D Charts</a></li>
							<li><a href="chart-chartist.html">Chartist Charts</a></li>
							<li><a href="chart-chartjs.html">Chartjs Chart</a></li>
							<li><a href="chart-dynamic.html">Dynamic Chart</a></li>
							<li><a href="chart-flot.html">Flot Chart</a></li>
							<li><a href="chart-knob.html">Knob Chart</a></li>
							<li><a href="chart-morris.html">Morris Chart</a></li>
							<li><a href="chart-sparkline.html">Sparkline Chart</a></li>
							<li><a href="chart-other.html">Other Chart</a></li>
						</ul>
						<!-- /.sub-menu single -->
					</li>
					<li class="has-sub">
						<a href="#"><i class="ico mdi mdi-chart-line"></i><span>空气质量年度分析</span></a>
						<ul class="sub-menu single">
							<li><a href="form-elements.html">General Elements</a></li>
							<li><a href="form-advanced.html">Advanced Form</a></li>
							<li><a href="form-fileupload.html">Form Uploads</a></li>
							<li><a href="form-validation.html">Form Validation</a></li>
							<li><a href="form-wizard.html">Form Wizard</a></li>
							<li><a href="form-wysiwig.html">Wysiwig Editors</a></li>
							<li><a href="form-xeditable.html">X-editable</a></li>
						</ul>
						<!-- /.sub-menu single -->
					</li>
					<li>
						<a href="inbox.html"><i class="ico mdi mdi-chart-bar"></i><span>月度分析</span></a>
					</li>
					<li class="has-sub">
						<a href="#"><i class="ico mdi mdi-air-conditioner"></i><span>气体分析</span></a>
						<ul class="sub-menu single">
							<li><a href="page-starter.html">Starter Page</a></li>
							<li><a href="page-login.html">Login</a></li>
							<li><a href="page-register.html">Register</a></li>
							<li><a href="page-recoverpw.html">Recover Password</a></li>
							<li><a href="page-lock-screen.html">Lock Screen</a></li>
							<li><a href="page-confirm-mail.html">Confirm Mail</a></li>
							<li><a href="page-404.html">Error 404</a></li>
							<li><a href="page-500.html">Error 500</a></li>
						</ul>
						<!-- /.sub-menu single -->
					</li>
					<li class="has-sub">
						<a href="#"><i class="ico mdi mdi-map"></i><span>城市分布</span></a>
						<ul class="sub-menu single">
							<li><a href="extras-contact.html">Contact list</a></li>
							<li><a href="extras-email-template.html">Email template</a></li>
							<li><a href="extras-faq.html">FAQ</a></li>
							<li><a href="extras-gallery.html">Gallery</a></li>
							<li><a href="extras-invoice.html">Invoice</a></li>
							<li><a href="extras-maps.html">Maps</a></li>
							<li><a href="extras-pricing.html">Pricing</a></li>
							<li><a href="extras-projects.html">Projects</a></li>
							<li><a href="extras-taskboard.html">Taskboard</a></li>
							<li><a href="extras-timeline.html">Timeline</a></li>
							<li><a href="extras-tour.html">Tour</a></li>
						</ul>
						<!-- /.sub-menu single -->
					</li>
					<li class="has-sub">
						<a href="#"><i class="ico mdi mdi-cloud"></i><span>数据词云图</span></a>
						<ul class="sub-menu mega mega-2">
							<li class="has-sub">
								<h3 class="title">Tables</h3>
								<!-- .title -->
								<ul class="child-list">
									<li><a href="tables-basic.html">Basic Tables</a></li>
									<li><a href="tables-datatable.html">Data Tables</a></li>
									<li><a href="tables-responsive.html">Responsive Tables</a></li>
									<li><a href="tables-editable.html">Editable Tables</a></li>
								</ul>
								<!-- /.child-list -->
							</li>
							<li class="has-sub">
								<h3 class="title">Others</h3>
								<!-- .title -->
								<ul class="child-list">
									<li><a href="calendar.html">Calendar</a></li>
									<li><a href="ui-notification.html">Notification</a></li>
									<li><a href="profile.html">Profile</a></li>
									<li><a href="widgets.html">Widgets</a></li>
								</ul>
								<!-- /.child-list -->
							</li>
						</ul>
						<!-- /.sub-menu mega -->
					</li>
                    <li>
						<a href="inbox.html"><i class="ico mdi mdi-star"></i><span>空气质量预测</span></a>
					</li>
			</ul>
			<!-- /.menu -->
		</div>
		<!-- /.container -->
	</nav>
	<!-- /.nav-horizontal -->
</header>
<!-- /.fixed-header -->
 
<div id="wrapper">
	<div class="main-content container">
		<div class="row small-spacing">
			<div class="col-xs-12">
				<div class="box-content">
					<h4 class="box-title">Activity</h4>
					<!-- /.box-title -->
					<div class="dropdown js__drop_down">
						<a href="#" class="dropdown-icon glyphicon glyphicon-option-vertical js__drop_down_button"></a>
						<ul class="sub-menu">
							<li><a href="#">Action</a></li>
							<li><a href="#">Another action</a></li>
							<li><a href="#">Something else there</a></li>
							<li class="split"></li>
							<li><a href="#">Separated link</a></li>
						</ul>
						<!-- /.sub-menu -->
					</div>
					<!-- /.dropdown js__dropdown -->
					<div id="real-time-flot-chart" class="flot-chart" style="height: 320px"></div>
					<!-- /#flot-chart-1.flot-chart -->
				</div>
				<!-- /.box-content -->
			</div>
			<!-- /.col-xs-12 -->
 
			<div class="col-lg-4 col-xs-12">
				<div class="box-content">
					<h4 class="box-title text-info">Total Visitors</h4>
					<!-- /.box-title -->
					<div class="dropdown js__drop_down">
						<a href="#" class="dropdown-icon glyphicon glyphicon-option-vertical js__drop_down_button"></a>
						<ul class="sub-menu">
							<li><a href="#">Action</a></li>
							<li><a href="#">Another action</a></li>
							<li><a href="#">Something else there</a></li>
							<li class="split"></li>
							<li><a href="#">Separated link</a></li>
						</ul>
						<!-- /.sub-menu -->
					</div>
					<!-- /.dropdown js__dropdown -->
					<div class="content widget-stat">
						<div id="traffic-sparkline-chart-1" class="left-content margin-top-15"></div>
						<!-- /#traffic-sparkline-chart-1 -->
						<div class="right-content">
							<h2 class="counter text-info">278</h2>
							<!-- /.counter -->
							<p class="text text-info">Some text here</p>
							<!-- /.text -->
						</div>
						<!-- .right-content -->
					</div>
					<!-- /.content widget-stat -->
				</div>
				<!-- /.box-content -->
			</div>
			<!-- /.col-lg-4 col-xs-12 -->
 
			<div class="col-lg-4 col-xs-12">
				<div class="box-content">
					<h4 class="box-title text-success">Projects Done</h4>
					<!-- /.box-title -->
					<div class="dropdown js__drop_down">
						<a href="#" class="dropdown-icon glyphicon glyphicon-option-vertical js__drop_down_button"></a>
						<ul class="sub-menu">
							<li><a href="#">Action</a></li>
							<li><a href="#">Another action</a></li>
							<li><a href="#">Something else there</a></li>
							<li class="split"></li>
							<li><a href="#">Separated link</a></li>
						</ul>
						<!-- /.sub-menu -->
					</div>
					<!-- /.dropdown js__dropdown -->
					<div class="content widget-stat">
						<div id="traffic-sparkline-chart-2" class="left-content margin-top-10"></div>
						<!-- /#traffic-sparkline-chart-2 -->
						<div class="right-content">
							<h2 class="counter text-success">36%</h2>
							<!-- /.counter -->
							<p class="text text-success">Some text here</p>
							<!-- /.text -->
						</div>
						<!-- .right-content -->
					</div>
					<!-- /.content widget-stat -->
				</div>
				<!-- /.box-content -->
			</div>
			<!-- /.col-lg-4 col-xs-12 -->
 
			<div class="col-lg-4 col-xs-12">
				<div class="box-content">
					<h4 class="box-title text-success">Salary Traffic</h4>
					<!-- /.box-title -->
					<div class="dropdown js__drop_down">
						<a href="#" class="dropdown-icon glyphicon glyphicon-option-vertical js__drop_down_button"></a>
						<ul class="sub-menu">
							<li><a href="#">Action</a></li>
							<li><a href="#">Another action</a></li>
							<li><a href="#">Something else there</a></li>
							<li class="split"></li>
							<li><a href="#">Separated link</a></li>
						</ul>
						<!-- /.sub-menu -->
					</div>
					<!-- /.dropdown js__dropdown -->
					<div class="content widget-stat">
						<div id="traffic-sparkline-chart-3" class="left-content"></div>
						<!-- /#traffic-sparkline-chart-3 -->
						<div class="right-content">
							<h2 class="counter text-danger">849 <i class="fa fa-angle-double-up"></i></h2>
							<!-- /.counter -->
							<p class="text text-danger">Some text here</p>
							<!-- /.text -->
						</div>
						<!-- .right-content -->
					</div>
					<!-- /.content widget-stat -->
				</div>
				<!-- /.box-content -->
			</div>
			<!-- /.col-lg-4 col-xs-12 -->
 
			<div class="col-lg-6 col-xs-12">
				<div class="box-content">
					<h4 class="box-title">Visitor Analytics</h4>
					<!-- /.box-title -->
					<div class="dropdown js__drop_down">
						<a href="#" class="dropdown-icon glyphicon glyphicon-option-vertical js__drop_down_button"></a>
						<ul class="sub-menu">
							<li><a href="#">Action</a></li>
							<li><a href="#">Another action</a></li>
							<li><a href="#">Something else there</a></li>
							<li class="split"></li>
							<li><a href="#">Separated link</a></li>
						</ul>
						<!-- /.sub-menu -->
					</div>
					<!-- /.dropdown js__dropdown -->
					<div id="bar-morris-chart" class="morris-chart" style="height: 240px"></div>
					<div class="text-center">
						<ul class="list-inline morris-chart-detail-list">
							<li><i class="fa fa-circle"></i>Series A</li>
							<li><i class="fa fa-circle"></i>Series B</li>
							<li><i class="fa fa-circle"></i>Series C</li>
						</ul>
					</div>
					<!-- /#bar-morris-chart.morris-chart -->
				</div>
				<!-- /.box-content -->
			</div>
			<!-- /.col-lg-6 col-xs-12 -->
 
			<div class="col-lg-6 col-xs-12">
				<div class="box-content">
					<h4 class="box-title">Memory usage</h4>
					<!-- /.box-title -->
					<div class="dropdown js__drop_down">
						<a href="#" class="dropdown-icon glyphicon glyphicon-option-vertical js__drop_down_button"></a>
						<ul class="sub-menu">
							<li><a href="#">Action</a></li>
							<li><a href="#">Another action</a></li>
							<li><a href="#">Something else there</a></li>
							<li class="split"></li>
							<li><a href="#">Separated link</a></li>
						</ul>
						<!-- /.sub-menu -->
					</div>
					<!-- /.dropdown js__dropdown -->
					<div id="donut-morris-chart" class="morris-chart" style="height: 240px"></div>
					<div class="text-center">
						<ul class="list-inline morris-chart-detail-list">
							<li><i class="fa fa-circle"></i>Series A</li>
							<li><i class="fa fa-circle"></i>Series B</li>
							<li><i class="fa fa-circle"></i>Series C</li>
						</ul>
					</div>
					<!-- /#donut-morris-chart.morris-chart -->
				</div>
				<!-- /.box-content -->
			</div>
			<!-- /.col-lg-6 col-xs-12 -->
		</div>
		<!-- /.row -->
 
		<div class="row small-spacing">
			<div class="col-lg-3 col-md-6 col-xs-12">
				<div class="box-content bg-success text-white">
					<div class="statistics-box with-icon">
						<i class="ico small fa fa-diamond"></i>
						<p class="text text-white">SUCCESS</p>
						<h2 class="counter">72943</h2>
					</div>
				</div>
				<!-- /.box-content -->
			</div>
			<!-- /.col-lg-3 col-md-6 col-xs-12 -->
			<div class="col-lg-3 col-md-6 col-xs-12">
				<div class="box-content bg-info text-white">
					<div class="statistics-box with-icon">
						<i class="ico small fa fa-download"></i>
						<p class="text text-white">DOWNLOAD</p>
						<h2 class="counter">6382</h2>
					</div>
				</div>
				<!-- /.box-content -->
			</div>
			<!-- /.col-lg-3 col-md-6 col-xs-12 -->
			<div class="col-lg-3 col-md-6 col-xs-12">
				<div class="box-content bg-danger text-white">
					<div class="statistics-box with-icon">
						<i class="ico small fa fa-bug"></i>
						<p class="text text-white">FIXED BUG</p>
						<h2 class="counter">12564</h2>
					</div>
				</div>
				<!-- /.box-content -->
			</div>
			<!-- /.col-lg-3 col-md-6 col-xs-12 -->
			<div class="col-lg-3 col-md-6 col-xs-12">
				<div class="box-content bg-warning text-white">
					<div class="statistics-box with-icon">
						<i class="ico small fa fa-usd"></i>
						<p class="text text-white">SALES</p>
						<h2 class="counter">2,637</h2>
					</div>
				</div>
				<!-- /.box-content -->
			</div>
			<!-- /.col-lg-3 col-md-6 col-xs-12 -->
		</div>
		<!-- .row -->
 
		<div class="row small-spacing">
			<div class="col-lg-6 col-xs-12">
				<div class="box-content">
					<div id="calendar-widget"></div>
				</div>
				<!-- /.box-content -->
			</div>
			<!-- /.col-lg-6 col-xs-12 -->
			<div class="col-lg-6 col-xs-12">
				<div class="box-content">
					<h4 class="box-title">Purchases</h4>
					<!-- /.box-title -->
					<div class="dropdown js__drop_down">
						<a href="#" class="dropdown-icon glyphicon glyphicon-option-vertical js__drop_down_button"></a>
						<ul class="sub-menu">
							<li><a href="#">Product</a></li>
							<li><a href="#">Another action</a></li>
							<li><a href="#">Something else there</a></li>
							<li class="split"></li>
							<li><a href="#">Separated link</a></li>
						</ul>
						<!-- /.sub-menu -->
					</div>
					<!-- /.dropdown js__dropdown -->
					<div class="table-responsive table-purchases">
						<table class="table table-striped margin-bottom-10">
							<thead>
								<tr>
									<th style="width:40%;">Product</th>
									<th>Price</th>
									<th>Date</th>
									<th>State</th>
									<th style="width:5%;"></th>
								</tr>
							</thead>
							<tbody>
								<tr>
									<td>Amaza Themes</td>
									<td>$71</td>
									<td>Nov 12,2016</td>
									<td class="text-success">Completed</td>
									<td><a href="#"><i class="fa fa-plus-circle"></i></a></td>
								</tr>
								<tr>
									<td>Macbook</td>
									<td>$142</td>
									<td>Nov 10,2016</td>
									<td class="text-danger">Cancelled</td>
									<td><a href="#"><i class="fa fa-plus-circle"></i></a></td>
								</tr>
								<tr>
									<td>Samsung TV</td>
									<td>$200</td>
									<td>Nov 01,2016</td>
									<td class="text-warning">Pending</td>
									<td><a href="#"><i class="fa fa-plus-circle"></i></a></td>
								</tr>
								<tr>
									<td>Ninja Admin</td>
									<td>$200</td>
									<td>Oct 28,2016</td>
									<td class="text-warning">Pending</td>
									<td><a href="#"><i class="fa fa-plus-circle"></i></a></td>
								</tr>
								<tr>
									<td>Galaxy Note 5</td>
									<td>$200</td>
									<td>Oct 28,2016</td>
									<td class="text-success">Completed</td>
									<td><a href="#"><i class="fa fa-plus-circle"></i></a></td>
								</tr>
								<tr>
									<td>CleanUp Themes</td>
									<td>$71</td>
									<td>Oct 22,2016</td>
									<td class="text-success">Completed</td>
									<td><a href="#"><i class="fa fa-plus-circle"></i></a></td>
								</tr>
								<tr>
									<td>Facebook WP Plugin</td>
									<td>$10</td>
									<td>Oct 15,2016</td>
									<td class="text-success">Completed</td>
									<td><a href="#"><i class="fa fa-plus-circle"></i></a></td>
								</tr>
								<tr>
									<td>Iphone 7</td>
									<td>$100</td>
									<td>Oct 12,2016</td>
									<td class="text-warning">Pending</td>
									<td><a href="#"><i class="fa fa-plus-circle"></i></a></td>
								</tr>
								<tr>
									<td>Nova House</td>
									<td>$100</td>
									<td>Oct 12,2016</td>
									<td class="text-warning">Pending</td>
									<td><a href="#"><i class="fa fa-plus-circle"></i></a></td>
								</tr>
								<tr>
									<td>Repair Cars</td>
									<td>$35</td>
									<td>Oct 12,2016</td>
									<td class="text-warning">Pending</td>
									<td><a href="#"><i class="fa fa-plus-circle"></i></a></td>
								</tr>
							</tbody>
						</table>
						<!-- /.table -->
					</div>
					<!-- /.table-responsive -->
				</div>
				<!-- /.box-content -->
			</div>
			<!-- /.col-lg-6 col-xs-12 -->
		</div>
		<!-- /.row -->		
		<footer class="footer">
			<ul class="list-inline">
				<li>Copyright &copy; 2021.Company name All rights reserved.<a target="_blank" href="https://sc.chinaz.com/moban/">&#x7F51;&#x9875;&#x6A21;&#x677F;</a></li>
				<li><a href="#">Privacy</a></li>
				<li><a href="#">Terms</a></li>
				<li><a href="#">Help</a></li>
			</ul>
		</footer>
	</div>
	<!-- /.main-content -->
</div><!--/#wrapper -->
	<!-- HTML5 shim and Respond.js for IE8 support of HTML5 elements and media queries -->
	<!--[if lt IE 9]>
		<script src="/static/assets/script/html5shiv.min.js"></script>
		<script src="/static/assets/script/respond.min.js"></script>
	<![endif]-->
	<!-- 
	================================================== -->
	<!-- Placed at the end of the document so the pages load faster -->
	<script src="/static/assets/scripts/jquery.min.js"></script>
	<script src="/static/assets/scripts/modernizr.min.js"></script>
	<script src="/static/assets/plugin/bootstrap/js/bootstrap.min.js"></script>
	<script src="/static/assets/plugin/mCustomScrollbar/jquery.mCustomScrollbar.concat.min.js"></script>
	<script src="/static/assets/plugin/nprogress/nprogress.js"></script>
	<script src="/static/assets/plugin/sweet-alert/sweetalert.min.js"></script>
	<script src="/static/assets/plugin/waves/waves.min.js"></script>
 
	<!-- Morris Chart -->
	<script src="/static/assets/plugin/chart/morris/morris.min.js"></script>
	<script src="/static/assets/plugin/chart/morris/raphael-min.js"></script>
	<script src="/static/assets/scripts/chart.morris.init.min.js"></script>
 
	<!-- Flot Chart -->
	<script src="/static/assets/plugin/chart/plot/jquery.flot.min.js"></script>
	<script src="/static/assets/plugin/chart/plot/jquery.flot.tooltip.min.js"></script>
	<script src="/static/assets/plugin/chart/plot/jquery.flot.categories.min.js"></script>
	<script src="/static/assets/plugin/chart/plot/jquery.flot.pie.min.js"></script>
	<script src="/static/assets/plugin/chart/plot/jquery.flot.stack.min.js"></script>
	<script src="/static/assets/scripts/chart.flot.init.min.js"></script>
 
	<!-- Sparkline Chart -->
	<script src="/static/assets/plugin/chart/sparkline/jquery.sparkline.min.js"></script>
	<script src="/static/assets/scripts/chart.sparkline.init.min.js"></script>
 
	<!-- FullCalendar -->
	<script src="/static/assets/plugin/moment/moment.js"></script>
	<script src="/static/assets/plugin/fullcalendar/fullcalendar.min.js"></script>
	<script src="/static/assets/scripts/fullcalendar.init.js"></script>
 
	<script src="/static/assets/scripts/main.min.js"></script>
	<script src="/static/assets/scripts/horizontal-menu.min.js"></script>
</body>
</html>

然后刷新http://127.0.0.1:8000/myApp/index/的页面

六，登录及注册

首先把我们的page-login.html和page-register复制到templates下面

在myApp\urls.py下添加代码

在views.py添加代码

在login.html下完成路径替换，并在11行修改代码

然后在Pycharm终端输入python manage.py runserve      然后再浏览器输入http://127.0.0.1:8000/myApp/login/

可以看到登录页面

同样的，在register.html中修改路径后，在11行同时按下图修改

之后打开http://127.0.0.1:8000/myApp/register/

可以看到注册页面

接下来把register.html替换为下列代码

<!DOCTYPE html>
<html lang="en">
<head>
	<meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
	<meta http-equiv="X-UA-Compatible" content="IE=edge">
	<meta name="viewport" content="width=device-width, initial-scale=1, user-scalable=no">
	<meta name="description" content="">
	<meta name="author" content="">
 
	<title>空气质量数据分析可视化系统</title>
	<link rel="stylesheet" href="/static/assets/styles/style-horizontal.min.css">
 
	<!-- Waves Effect -->
	<link rel="stylesheet" href="/static/assets/plugin/waves/waves.min.css">
 
</head>
 
<body>
 
<div id="single-wrapper">
	<form action="#" class="frm-single">
		<div class="inside">
			<div class="title"><strong>空气质量数据</strong>分析可视化系统</div>
			<!-- /.title -->
			<div class="frm-title">注册</div>
			<!-- /.frm-title -->
			<div class="frm-input"><input type="text" placeholder="请输入您的用户名" class="frm-inp"><i class="fa fa-envelope frm-ico"></i></div>
			<!-- /.frm-input -->
			<div class="frm-input"><input type="password" placeholder="请输入您的密码" class="frm-inp"><i class="fa fa-user frm-ico"></i></div>
			<!-- /.frm-input -->
			<div class="frm-input"><input type="password" placeholder="请确认您的密码" class="frm-inp"><i class="fa fa-lock frm-ico"></i></div>
			<!-- /.frm-input -->
			<div class="clearfix margin-bottom-20">
				<div class="checkbox primary"><input type="checkbox" id="accept"><label for="accept">同意用户协议</label></div>
				<!-- /.checkbox -->
			</div>
			<!-- /.clearfix -->
			<button type="submit" class="frm-submit">注册<i class="fa fa-arrow-circle-right"></i></button>
<!--			<div class="row small-spacing">-->
<!--				<div class="col-sm-12">-->
<!--					<div class="txt-login-with txt-center">其他方式登录</div>-->
<!--					&lt;!&ndash; /.txt-login-with &ndash;&gt;-->
<!--				</div>-->
<!--				&lt;!&ndash; /.col-sm-12 &ndash;&gt;-->
<!--				<div class="col-sm-6"><button type="button" class="btn btn-sm btn-icon btn-icon-left btn-social-with-text btn-facebook text-white waves-effect waves-light"><i class="ico fa fa-facebook"></i><span>Facebook</span></button></div>-->
<!--				&lt;!&ndash; /.col-sm-6 &ndash;&gt;-->
<!--				<div class="col-sm-6"><button type="button" class="btn btn-sm btn-icon btn-icon-left btn-social-with-text btn-google-plus text-white waves-effect waves-light"><i class="ico fa fa-google-plus"></i>Google+</button></div>-->
<!--				&lt;!&ndash; /.col-sm-6 &ndash;&gt;-->
<!--			</div>-->
			<!-- /.row -->
			<a href="/myApp/login/" class="a-link"><i class="fa fa-sign-in"></i>已经创建了账号? 返回登录.</a>
			<div class="frm-footer">NinjaAdmin © 2016.</div>
			<!-- /.footer -->
		</div>
		<!-- .inside -->
	</form>
	<!-- /.frm-single -->
</div><!--/#single-wrapper -->
 
	<!-- HTML5 shim and Respond.js for IE8 support of HTML5 elements and media queries -->
	<!--[if lt IE 9]>
		<script src="/static/assets/script/html5shiv.min.js"></script>
		<script src="/static/assets/script/respond.min.js"></script>
	<![endif]-->
	<!-- 
	================================================== -->
	<!-- Placed at the end of the document so the pages load faster -->
	<script src="/static/assets/scripts/jquery.min.js"></script>
	<script src="/static/assets/scripts/modernizr.min.js"></script>
	<script src="/static/assets/plugin/bootstrap/js/bootstrap.min.js"></script>
	<script src="/static/assets/plugin/nprogress/nprogress.js"></script>
	<script src="/static/assets/plugin/waves/waves.min.js"></script>
 
	<script src="/static/assets/scripts/main.min.js"></script>
</body>
</html>

然后刷新http://127.0.0.1:8000/myApp/register/

可以看到：

点击“已经创建了账号?返回登录”，会跳转登录页面

在login.html内54行按照下图修改

刷新登录页面，

然后点击“还未创建您的账号?点击注册”,可以跳转到register页面

接着在register.html的52行和login.html的55行按下图修改

然后刷新页面，可以看到

继续在register.html下面按照图示修改

刷新页面可以看到

到这里，注册页面的样式已经构建完成。

接下来开始构建表单，

首先在register,html下按照图示修改

然后在settings.py下按照图示注释代码

然后再register.html的27行添加代码

注册表单已经构建完成。

接下来在views.py下按照图示添加并修改代码

在注册页面注册

可以看到我们的终端返回刚刚输入的了数据

在views.py内按图示位置修改代码

再在文件夹内找到404.html,并将其以Error复制到templates下面

然后再创建utils文件，在其添加error.py文件

再error.py下写入代码

继续在Error.html内替换路径

再它的第11行修改

接下来输入完整的views.py

from django.shortcuts import render,redirect
from myApp.models import *
# Create your views here.
from utils.error import *
def index(request):
    return render(request, 'index.html',{})
 
def login(request):
    return render(request, 'login.html',{})
 
def register(request):
    if request.method == 'GET':
        return render(request, 'register.html',{})
    else:
        uname = request.POST.get('username')
        pwd = request.POST.get('password')
        ckPwd = request.POST.get('ckPassword')
        print(uname,pwd,ckPwd)
        try:
            User.objects.get(username=uname)
            return errorResponse(request,"用户名已存在")
        except:
            if not uname or not pwd or not ckPwd:return errorResponse(request,"请输入完整信息")
            if pwd != ckPwd:return errorResponse(request,"两次密码不相符，请确认您的密码")
            User.objects.create(username=uname,password=pwd)
            return redirect('/myApp/login/')
        return render(request, 'register.html', {})

输入完整Error.html

<!DOCTYPE html>
<html lang="en">
<head>
	<meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
	<meta http-equiv="X-UA-Compatible" content="IE=edge">
	<meta name="viewport" content="width=device-width, initial-scale=1, user-scalable=no">
	<meta name="description" content="">
	<meta name="author" content="">
 
	<title>Home</title>
	<link rel="stylesheet" href="/static/assets/styles/style-horizontal.min.css">
 
	<!-- Waves Effect -->
	<link rel="stylesheet" href="/static/assets/plugin/waves/waves.min.css">
 
</head>
 
<body>
 
<div id="page-404">
	<div class="content">
		<div class="title-on-desktop">
			<svg style="width: 600px; height: 200px" alignment-baseline="middle">
				<defs>
					<clipPath id="clip2">
						<path d="M 0 0 L 600 0 L 600 80 L 0 80 L 0 0 L 0 125 L 600 125 L 600 200 L 0 200 Z" />
					</clipPath>
				</defs>
				<text x="300" y="190" style="width: 600px; height: 200px" text-anchor="middle" font-family="Lato" font-weight="700" font-size="250" fill="#505458" clip-path="url(#clip2)">4<tspan fill="#35b8e0">0</tspan>4</text>
			</svg>
<!--			<div class="title">PAGE NOT FOUND</div>-->
		</div>
		<h1 class="title-on-mobile">Error </h1>
		<p>{{ errMsg }}.</p>
		<a href="#" id="myButton" class="btn btn-info">返回</a>
		
	</div>
</div><!--/#single-wrapper -->
<script>
    document.getElementById("myButton").addEventListener("click",function (){
        history.back()
    })
</script>
	<!-- HTML5 shim and Respond.js for IE8 support of HTML5 elements and media queries -->
	<!--[if lt IE 9]>
		<script src="/static/assets/script/html5shiv.min.js"></script>
		<script src="/static/assets/script/respond.min.js"></script>
	<![endif]-->
	<!-- 
	================================================== -->
	<!-- Placed at the end of the document so the pages load faster -->
	<script src="/static/assets/scripts/jquery.min.js"></script>
	<script src="/static/assets/scripts/modernizr.min.js"></script>
	<script src="/static/assets/plugin/bootstrap/js/bootstrap.min.js"></script>
	<script src="/static/assets/plugin/nprogress/nprogress.js"></script>
	<script src="/static/assets/plugin/waves/waves.min.js"></script>
 
	<script src="/static/assets/scripts/main.min.js"></script>
</body>
</html>

刷新页面，并输入用户名，密码，可跳转到登录页面，同时Navicat上的user表也会出现信息

记下来把下列代码，重新粘贴到login.html中

<!DOCTYPE html>
<html lang="en">
<head>
	<meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
	<meta http-equiv="X-UA-Compatible" content="IE=edge">
	<meta name="viewport" content="width=device-width, initial-scale=1, user-scalable=no">
	<meta name="description" content="">
	<meta name="author" content="">
 
	<title>空气质量数据分析可视化系统</title>
	<link rel="stylesheet" href="/static/assets/styles/style-horizontal.min.css">
 
	<!-- Waves Effect -->
	<link rel="stylesheet" href="/static/assets/plugin/waves/waves.min.css">
 
</head>
 
<body>
 
<div id="single-wrapper">
	<form action="#" class="frm-single">
		<div class="inside">
			<div class="title"><strong>空气质量数据</strong>分析可视化系统</div>
			<!-- /.title -->
			<div class="frm-title">登录</div>
			<!-- /.frm-title -->
			<div class="frm-input"><input type="text" placeholder="请输入您的用户名" class="frm-inp"><i class="fa fa-user frm-ico"></i></div>
			<!-- /.frm-input -->
			<div class="frm-input"><input type="password" placeholder="请输入您的密码" class="frm-inp"><i class="fa fa-lock frm-ico"></i></div>
			<!-- /.frm-input -->
			<div class="clearfix margin-bottom-20">
				<div class="pull-left">
					<div class="checkbox primary"><input type="checkbox" id="rememberme"><label for="rememberme">记住我</label></div>
					<!-- /.checkbox -->
				</div>
				<!-- /.pull-left -->
<!--				<div class="pull-right"><a href="page-recoverpw.html" class="a-link"><i class="fa fa-unlock-alt"></i>Forgot password?</a></div>-->
				<!-- /.pull-right -->
			</div>
			<!-- /.clearfix -->
			<button type="submit" class="frm-submit">登录<i class="fa fa-arrow-circle-right"></i></button>
			<div class="row small-spacing">
<!--				<div class="col-sm-12">-->
<!--					<div class="txt-login-with txt-center">or login with</div>-->
<!--					&lt;!&ndash; /.txt-login-with &ndash;&gt;-->
<!--				</div>-->
<!--				&lt;!&ndash; /.col-sm-12 &ndash;&gt;-->
<!--				<div class="col-sm-6"><button type="button" class="btn btn-sm btn-icon btn-icon-left btn-social-with-text btn-facebook text-white waves-effect waves-light"><i class="ico fa fa-facebook"></i><span>Facebook</span></button></div>-->
<!--				&lt;!&ndash; /.col-sm-6 &ndash;&gt;-->
<!--				<div class="col-sm-6"><button type="button" class="btn btn-sm btn-icon btn-icon-left btn-social-with-text btn-google-plus text-white waves-effect waves-light"><i class="ico fa fa-google-plus"></i>Google+</button></div>-->
<!--				&lt;!&ndash; /.col-sm-6 &ndash;&gt;-->
			</div>
			<!-- /.row -->
			<a href="/myApp/register/" class="a-link"><i class="fa fa-key"></i>还未创建您的账号? 点击注册.</a>
			<div class="frm-footer">空气质量数据可视化分析系统 © 2025.</div>
			<!-- /.footer -->
		</div>
		<!-- .inside -->
	</form>
	<!-- /.frm-single -->
</div><!--/#single-wrapper -->
 
	<!-- HTML5 shim and Respond.js for IE8 support of HTML5 elements and media queries -->
	<!--[if lt IE 9]>
		<script src="/static/assets/script/html5shiv.min.js"></script>
		<script src="/static/assets/script/respond.min.js"></script>
	<![endif]-->
	<!-- 
	================================================== -->
	<!-- Placed at the end of the document so the pages load faster -->
	<script src="/static/assets/scripts/jquery.min.js"></script>
	<script src="/static/assets/scripts/modernizr.min.js"></script>
	<script src="/static/assets/plugin/bootstrap/js/bootstrap.min.js"></script>
	<script src="/static/assets/plugin/nprogress/nprogress.js"></script>
	<script src="/static/assets/plugin/waves/waves.min.js"></script>
 
	<script src="/static/assets/scripts/main.min.js"></script>
</body>
</html>

刷新页面，可以看到下图

接下来开始构建表单

再views.py下添加代码

在login.html下按图示位置修改代码

刷新登录页面

输入用户名和密码，在Pycharm终端可以看到数据

继续添在views.py添加代码

再重新刷新登录页面，并输入正确的信息，就可以看到index页面

接下来把下列代码粘贴到index.html

<!DOCTYPE html>
<html lang="en">
<head>
	<meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
	<meta http-equiv="X-UA-Compatible" content="IE=edge">
	<meta name="viewport" content="width=device-width, initial-scale=1, user-scalable=no">
	<meta name="description" content="">
	<meta name="author" content="">
 
	<title>Home - My Admin Template</title>
 
	<!-- Main Styles -->
	<link rel="stylesheet" href="/static/assets/styles/style-horizontal.min.css">
	
	<!-- Material Design Icon -->
	<link rel="stylesheet" href="/static/assets/fonts/material-design/css/materialdesignicons.css">
 
	<!-- mCustomScrollbar -->
	<link rel="stylesheet" href="/static/assets/plugin/mCustomScrollbar/jquery.mCustomScrollbar.min.css">
 
	<!-- Waves Effect -->
	<link rel="stylesheet" href="/static/assets/plugin/waves/waves.min.css">
 
	<!-- Sweet Alert -->
	<link rel="stylesheet" href="/static/assets/plugin/sweet-alert/sweetalert.css">
	
	<!-- Morris Chart -->
	<link rel="stylesheet" href="/static/assets/plugin/chart/morris/morris.css">
 
	<!-- FullCalendar -->
	<link rel="stylesheet" href="/static/assets/plugin/fullcalendar/fullcalendar.min.css">
	<link rel="stylesheet" href="/static//static/assets/plugin/fullcalendar/fullcalendar.print.css" media='print'>
 
</head>
 
<body>
<header class="fixed-header">
	<div class="header-top">
		<div class="container">
			<div class="pull-left">
				<a href="index.html" class="logo"><i class="ico mdi mdi-cube-outline"></i>MyAdmin</a>
			</div>
			<!-- /.pull-left -->
			<div class="pull-right">
				<div class="ico-item hidden-on-desktop">
					<button type="button" class="menu-button js__menu_button fa fa-bars waves-effect waves-light"></button>
				</div>
				<!-- /.ico-item hidden-on-desktop -->
				<div class="ico-item">
					<a href="#" class="ico-item mdi mdi-magnify js__toggle_open" data-target="#searchform-header"></a>
					<form action="#" id="searchform-header" class="searchform js__toggle"><input type="search" placeholder="Search..." class="input-search"><button class="mdi mdi-magnify button-search" type="submit"></button></form>
					<!-- /.searchform -->
				</div>
				<!-- /.ico-item -->
				<div class="ico-item">
					<a href="#" class="ico-item mdi mdi-email notice-alarm js__toggle_open" data-target="#message-popup"></a>
					<div id="message-popup" class="notice-popup js__toggle" data-space="55">
						<h2 class="popup-title">Recent Messages<a href="#" class="pull-right text-danger">New message</a></h2>
						<!-- /.popup-title -->
						<div class="content">
							<ul class="notice-list">
								<li>
									<a href="#">
										<span class="avatar"><img src="/static/assets/images/avatar-sm-1.jpg" alt=""></span>
										<span class="name">John Doe</span>
										<span class="desc">Amet odio neque nobis consequuntur consequatur a quae, impedit facere repellat voluptates.</span>
										<span class="time">10 min</span>
									</a>
								</li>
								<li>
									<a href="#">
										<span class="avatar"><img src="/static/assets/images/avatar-sm-3.jpg" alt=""></span>
										<span class="name">Harry Halen</span>
										<span class="desc">Amet odio neque nobis consequuntur consequatur a quae, impedit facere repellat voluptates.</span>
										<span class="time">15 min</span>
									</a>
								</li>
								<li>
									<a href="#">
										<span class="avatar"><img src="/static/assets/images/avatar-sm-4.jpg" alt=""></span>
										<span class="name">Thomas Taylor</span>
										<span class="desc">Amet odio neque nobis consequuntur consequatur a quae, impedit facere repellat voluptates.</span>
										<span class="time">30 min</span>
									</a>
								</li>
								<li>
									<a href="#">
										<span class="avatar"><img src="/static/assets/images/avatar-1.jpg" alt=""></span>
										<span class="name">Jennifer</span>
										<span class="desc">Amet odio neque nobis consequuntur consequatur a quae, impedit facere repellat voluptates.</span>
										<span class="time">45 min</span>
									</a>
								</li>
								<li>
									<a href="#">
										<span class="avatar"><img src="/static/assets/images/avatar-sm-5.jpg" alt=""></span>
										<span class="name">Helen Candy</span>
										<span class="desc">Amet odio neque nobis consequuntur consequatur a quae, impedit facere repellat voluptates.</span>
										<span class="time">45 min</span>
									</a>
								</li>
								<li>
									<a href="#">
										<span class="avatar"><img src="/static/assets/images/avatar-2.jpg" alt=""></span>
										<span class="name">Anna Cavan</span>
										<span class="desc">Amet odio neque nobis consequuntur consequatur a quae, impedit facere repellat voluptates.</span>
										<span class="time">1 hour ago</span>
									</a>
								</li>
								<li>
									<a href="#">
										<span class="avatar bg-success"><i class="fa fa-user"></i></span>
										<span class="name">Jenny Betty</span>
										<span class="desc">Amet odio neque nobis consequuntur consequatur a quae, impedit facere repellat voluptates.</span>
										<span class="time">1 day ago</span>
									</a>
								</li>
								<li>
									<a href="#">
										<span class="avatar"><img src="/static/assets/images/avatar-5.jpg" alt=""></span>
										<span class="name">Denise Peterson</span>
										<span class="desc">Amet odio neque nobis consequuntur consequatur a quae, impedit facere repellat voluptates.</span>
										<span class="time">1 year ago</span>
									</a>
								</li>
							</ul>
							<!-- /.notice-list -->
							<a href="#" class="notice-read-more">See more messages <i class="fa fa-angle-down"></i></a>
						</div>
						<!-- /.content -->
					</div>
					<!-- /#message-popup -->
				</div>
				<!-- /.ico-item -->
				<div class="ico-item">
					<a href="#" class="ico-item mdi mdi-bell notice-alarm js__toggle_open" data-target="#notification-popup"></a>
					<div id="notification-popup" class="notice-popup js__toggle" data-space="55">
						<h2 class="popup-title">Your Notifications</h2>
						<!-- /.popup-title -->
						<div class="content">
							<ul class="notice-list">
								<li>
									<a href="#">
										<span class="avatar"><img src="/static/assets/images/avatar-sm-1.jpg" alt=""></span>
										<span class="name">John Doe</span>
										<span class="desc">Like your post: “Contact Form 7 Multi-Step”</span>
										<span class="time">10 min</span>
									</a>
								</li>
								<li>
									<a href="#">
										<span class="avatar"><img src="/static/assets/images/avatar-sm-2.jpg" alt=""></span>
										<span class="name">Anna William</span>
										<span class="desc">Like your post: “Facebook Messenger”</span>
										<span class="time">15 min</span>
									</a>
								</li>
								<li>
									<a href="#">
										<span class="avatar bg-warning"><i class="fa fa-warning"></i></span>
										<span class="name">Update Status</span>
										<span class="desc">Failed to get available update data. To ensure the please contact us.</span>
										<span class="time">30 min</span>
									</a>
								</li>
								<li>
									<a href="#">
										<span class="avatar"><img src="/static/assets/images/avatar-1.jpg" alt=""></span>
										<span class="name">Jennifer</span>
										<span class="desc">Like your post: “Contact Form 7 Multi-Step”</span>
										<span class="time">45 min</span>
									</a>
								</li>
								<li>
									<a href="#">
										<span class="avatar"><img src="/static/assets/images/avatar-sm-6.jpg" alt=""></span>
										<span class="name">Michael Zenaty</span>
										<span class="desc">Like your post: “Contact Form 7 Multi-Step”</span>
										<span class="time">50 min</span>
									</a>
								</li>
								<li>
									<a href="#">
										<span class="avatar"><img src="/static/assets/images/avatar-sm-4.jpg" alt=""></span>
										<span class="name">Simon</span>
										<span class="desc">Like your post: “Facebook Messenger”</span>
										<span class="time">1 hour</span>
									</a>
								</li>
								<li>
									<a href="#">
										<span class="avatar bg-violet"><i class="fa fa-flag"></i></span>
										<span class="name">Account Contact Change</span>
										<span class="desc">A contact detail associated with your account has been changed.</span>
										<span class="time">2 hours</span>
									</a>
								</li>
								<li>
									<a href="#">
										<span class="avatar"><img src="/static/assets/images/avatar-sm-7.jpg" alt=""></span>
										<span class="name">Helen 987</span>
										<span class="desc">Like your post: “Facebook Messenger”</span>
										<span class="time">Yesterday</span>
									</a>
								</li>
								<li>
									<a href="#">
										<span class="avatar"><img src="/static/assets/images/avatar-2.jpg" alt=""></span>
										<span class="name">Denise Jenny</span>
										<span class="desc">Like your post: “Contact Form 7 Multi-Step”</span>
										<span class="time">Oct, 28</span>
									</a>
								</li>
								<li>
									<a href="#">
										<span class="avatar"><img src="/static/assets/images/avatar-sm-8.jpg" alt=""></span>
										<span class="name">Thomas William</span>
										<span class="desc">Like your post: “Facebook Messenger”</span>
										<span class="time">Oct, 27</span>
									</a>
								</li>
							</ul>
							<!-- /.notice-list -->
							<a href="#" class="notice-read-more">See more messages <i class="fa fa-angle-down"></i></a>
						</div>
						<!-- /.content -->
					</div>
					<!-- /#notification-popup -->
				</div>
				<!-- /.ico-item -->
				<div class="ico-item">
					<a href="#" class="ico-item mdi mdi-account js__toggle_open" data-target="#user-status"></a>
					<div id="user-status" class="user-status js__toggle">
						<a href="#" class="avatar"><img src="/static/assets/images/avatar.png" alt=""><span class="status online"></span></a>
						<h5 class="name"><a href="profile.html">{{ userInfo.username }}</a></h5>
						<h5 class="position">用户</h5>
						<!-- /.name -->
						<div class="control-items">
<!--							<div class="control-item"><a href="#" title="Settings"><i class="fa fa-gear"></i></a></div>-->
							<div class="control-item"><a href="/myApp/logOut" class="" title="Log out"><i class="fa fa-power-off">退出登录</i></a></div>
						</div>
						<!-- /.control-items -->
					</div>
					<!-- /#user-status -->
				</div>
				<!-- /.ico-item -->
			</div>
			<!-- /.pull-right -->
		</div>
		<!-- /.container -->
	</div>
	<!-- /.header-top -->
	<nav class="nav-horizontal">
		<button type="button" class="menu-close hidden-on-desktop js__close_menu"><i class="fa fa-times"></i><span>CLOSE</span></button>
		<div class="container">
			
			<ul class="menu">
					<li class="current">
						<a href="index.html"><i class="ico mdi mdi-home"></i><span>首页</span></a>
					</li>
					<li class="has-sub">
						<a href="#"><i class="ico mdi mdi-human"></i><span>个人信息</span></a>
						<ul class="sub-menu mega mega-3">
							<li class="has-sub">
								<h3 class="title">Components</h3>
								<!-- .title -->
								<ul class="child-list">
									<li><a href="ui-buttons.html">Buttons</a></li>
									<li><a href="ui-cards.html">Cards</a></li>
									<li><a href="ui-checkbox-radio.html">Checkboxs-Radios</a></li>
									<li><a href="ui-draggable-cards.html">Draggable Cards</a></li>
									<li><a href="ui-components.html">UI Components</a></li>
								</ul>
								<!-- /.child-list -->
							</li>
							<li class="has-sub">
								<h3 class="title">Icons</h3>
								<!-- .title -->
								<ul class="child-list">
									<li><a href="icons-font-awesome-icons.html">Font Awesome</a></li>
									<li><a href="icons-fontello.html">Fontello</a></li>
									<li><a href="icons-material-icons.html">Material Design Icons</a></li>
									<li><a href="icons-material-design-iconic.html">Material Design Iconic Font</a></li>
									<li><a href="icons-themify-icons.html">Themify Icons</a></li>
								</ul>
								<!-- /.child-list -->
							</li>
							<li class="has-sub">
								<h3 class="title">Others</h3>
								<!-- .title -->
								<ul class="child-list">
									<li><a href="ui-modals.html">Modals</a></li>
									<li><a href="ui-range-slider.html">Range Slider</a></li>
									<li><a href="ui-sweetalert.html">Sweet Alert</a></li>
									<li><a href="ui-treeview.html">Tree view</a></li>
									<li><a href="ui-typography.html">Typography</a></li>
								</ul>
								<!-- /.child-list -->
							</li>
						</ul>
						<!-- /.sub-menu mega -->
					</li>
					<li class="has-sub">
						<a href="#"><i class="ico mdi mdi-database"></i><span>数据总览</span></a>
						<ul class="sub-menu single">
							<li><a href="chart-3d.html">3D Charts</a></li>
							<li><a href="chart-chartist.html">Chartist Charts</a></li>
							<li><a href="chart-chartjs.html">Chartjs Chart</a></li>
							<li><a href="chart-dynamic.html">Dynamic Chart</a></li>
							<li><a href="chart-flot.html">Flot Chart</a></li>
							<li><a href="chart-knob.html">Knob Chart</a></li>
							<li><a href="chart-morris.html">Morris Chart</a></li>
							<li><a href="chart-sparkline.html">Sparkline Chart</a></li>
							<li><a href="chart-other.html">Other Chart</a></li>
						</ul>
						<!-- /.sub-menu single -->
					</li>
					<li class="has-sub">
						<a href="#"><i class="ico mdi mdi-chart-line"></i><span>空气质量年度分析</span></a>
						<ul class="sub-menu single">
							<li><a href="form-elements.html">General Elements</a></li>
							<li><a href="form-advanced.html">Advanced Form</a></li>
							<li><a href="form-fileupload.html">Form Uploads</a></li>
							<li><a href="form-validation.html">Form Validation</a></li>
							<li><a href="form-wizard.html">Form Wizard</a></li>
							<li><a href="form-wysiwig.html">Wysiwig Editors</a></li>
							<li><a href="form-xeditable.html">X-editable</a></li>
						</ul>
						<!-- /.sub-menu single -->
					</li>
					<li>
						<a href="inbox.html"><i class="ico mdi mdi-chart-bar"></i><span>月度分析</span></a>
					</li>
					<li class="has-sub">
						<a href="#"><i class="ico mdi mdi-air-conditioner"></i><span>气体分析</span></a>
						<ul class="sub-menu single">
							<li><a href="page-starter.html">Starter Page</a></li>
							<li><a href="login.html">Login</a></li>
							<li><a href="page-register.html">Register</a></li>
							<li><a href="page-recoverpw.html">Recover Password</a></li>
							<li><a href="page-lock-screen.html">Lock Screen</a></li>
							<li><a href="page-confirm-mail.html">Confirm Mail</a></li>
							<li><a href="page-404.html">Error 404</a></li>
							<li><a href="page-500.html">Error 500</a></li>
						</ul>
						<!-- /.sub-menu single -->
					</li>
					<li class="has-sub">
						<a href="#"><i class="ico mdi mdi-map"></i><span>城市分布</span></a>
						<ul class="sub-menu single">
							<li><a href="extras-contact.html">Contact list</a></li>
							<li><a href="extras-email-template.html">Email template</a></li>
							<li><a href="extras-faq.html">FAQ</a></li>
							<li><a href="extras-gallery.html">Gallery</a></li>
							<li><a href="extras-invoice.html">Invoice</a></li>
							<li><a href="extras-maps.html">Maps</a></li>
							<li><a href="extras-pricing.html">Pricing</a></li>
							<li><a href="extras-projects.html">Projects</a></li>
							<li><a href="extras-taskboard.html">Taskboard</a></li>
							<li><a href="extras-timeline.html">Timeline</a></li>
							<li><a href="extras-tour.html">Tour</a></li>
						</ul>
						<!-- /.sub-menu single -->
					</li>
					<li class="has-sub">
						<a href="#"><i class="ico mdi mdi-cloud"></i><span>数据词云图</span></a>
						<ul class="sub-menu mega mega-2">
							<li class="has-sub">
								<h3 class="title">Tables</h3>
								<!-- .title -->
								<ul class="child-list">
									<li><a href="tables-basic.html">Basic Tables</a></li>
									<li><a href="tables-datatable.html">Data Tables</a></li>
									<li><a href="tables-responsive.html">Responsive Tables</a></li>
									<li><a href="tables-editable.html">Editable Tables</a></li>
								</ul>
								<!-- /.child-list -->
							</li>
							<li class="has-sub">
								<h3 class="title">Others</h3>
								<!-- .title -->
								<ul class="child-list">
									<li><a href="calendar.html">Calendar</a></li>
									<li><a href="ui-notification.html">Notification</a></li>
									<li><a href="profile.html">Profile</a></li>
									<li><a href="widgets.html">Widgets</a></li>
								</ul>
								<!-- /.child-list -->
							</li>
						</ul>
						<!-- /.sub-menu mega -->
					</li>
                    <li>
						<a href="inbox.html"><i class="ico mdi mdi-star"></i><span>空气质量预测</span></a>
					</li>
			</ul>
			<!-- /.menu -->
		</div>
		<!-- /.container -->
	</nav>
	<!-- /.nav-horizontal -->
</header>
<!-- /.fixed-header -->
 
<div id="wrapper">
	<div class="main-content container">
		<div class="row small-spacing">
			<div class="col-xs-12">
				<div class="box-content">
					<h4 class="box-title">Activity</h4>
					<!-- /.box-title -->
					<div class="dropdown js__drop_down">
						<a href="#" class="dropdown-icon glyphicon glyphicon-option-vertical js__drop_down_button"></a>
						<ul class="sub-menu">
							<li><a href="#">Action</a></li>
							<li><a href="#">Another action</a></li>
							<li><a href="#">Something else there</a></li>
							<li class="split"></li>
							<li><a href="#">Separated link</a></li>
						</ul>
						<!-- /.sub-menu -->
					</div>
					<!-- /.dropdown js__dropdown -->
					<div id="real-time-flot-chart" class="flot-chart" style="height: 320px"></div>
					<!-- /#flot-chart-1.flot-chart -->
				</div>
				<!-- /.box-content -->
			</div>
			<!-- /.col-xs-12 -->
 
			<div class="col-lg-4 col-xs-12">
				<div class="box-content">
					<h4 class="box-title text-info">Total Visitors</h4>
					<!-- /.box-title -->
					<div class="dropdown js__drop_down">
						<a href="#" class="dropdown-icon glyphicon glyphicon-option-vertical js__drop_down_button"></a>
						<ul class="sub-menu">
							<li><a href="#">Action</a></li>
							<li><a href="#">Another action</a></li>
							<li><a href="#">Something else there</a></li>
							<li class="split"></li>
							<li><a href="#">Separated link</a></li>
						</ul>
						<!-- /.sub-menu -->
					</div>
					<!-- /.dropdown js__dropdown -->
					<div class="content widget-stat">
						<div id="traffic-sparkline-chart-1" class="left-content margin-top-15"></div>
						<!-- /#traffic-sparkline-chart-1 -->
						<div class="right-content">
							<h2 class="counter text-info">278</h2>
							<!-- /.counter -->
							<p class="text text-info">Some text here</p>
							<!-- /.text -->
						</div>
						<!-- .right-content -->
					</div>
					<!-- /.content widget-stat -->
				</div>
				<!-- /.box-content -->
			</div>
			<!-- /.col-lg-4 col-xs-12 -->
 
			<div class="col-lg-4 col-xs-12">
				<div class="box-content">
					<h4 class="box-title text-success">Projects Done</h4>
					<!-- /.box-title -->
					<div class="dropdown js__drop_down">
						<a href="#" class="dropdown-icon glyphicon glyphicon-option-vertical js__drop_down_button"></a>
						<ul class="sub-menu">
							<li><a href="#">Action</a></li>
							<li><a href="#">Another action</a></li>
							<li><a href="#">Something else there</a></li>
							<li class="split"></li>
							<li><a href="#">Separated link</a></li>
						</ul>
						<!-- /.sub-menu -->
					</div>
					<!-- /.dropdown js__dropdown -->
					<div class="content widget-stat">
						<div id="traffic-sparkline-chart-2" class="left-content margin-top-10"></div>
						<!-- /#traffic-sparkline-chart-2 -->
						<div class="right-content">
							<h2 class="counter text-success">36%</h2>
							<!-- /.counter -->
							<p class="text text-success">Some text here</p>
							<!-- /.text -->
						</div>
						<!-- .right-content -->
					</div>
					<!-- /.content widget-stat -->
				</div>
				<!-- /.box-content -->
			</div>
			<!-- /.col-lg-4 col-xs-12 -->
 
			<div class="col-lg-4 col-xs-12">
				<div class="box-content">
					<h4 class="box-title text-success">Salary Traffic</h4>
					<!-- /.box-title -->
					<div class="dropdown js__drop_down">
						<a href="#" class="dropdown-icon glyphicon glyphicon-option-vertical js__drop_down_button"></a>
						<ul class="sub-menu">
							<li><a href="#">Action</a></li>
							<li><a href="#">Another action</a></li>
							<li><a href="#">Something else there</a></li>
							<li class="split"></li>
							<li><a href="#">Separated link</a></li>
						</ul>
						<!-- /.sub-menu -->
					</div>
					<!-- /.dropdown js__dropdown -->
					<div class="content widget-stat">
						<div id="traffic-sparkline-chart-3" class="left-content"></div>
						<!-- /#traffic-sparkline-chart-3 -->
						<div class="right-content">
							<h2 class="counter text-danger">849 <i class="fa fa-angle-double-up"></i></h2>
							<!-- /.counter -->
							<p class="text text-danger">Some text here</p>
							<!-- /.text -->
						</div>
						<!-- .right-content -->
					</div>
					<!-- /.content widget-stat -->
				</div>
				<!-- /.box-content -->
			</div>
			<!-- /.col-lg-4 col-xs-12 -->
 
			<div class="col-lg-6 col-xs-12">
				<div class="box-content">
					<h4 class="box-title">Visitor Analytics</h4>
					<!-- /.box-title -->
					<div class="dropdown js__drop_down">
						<a href="#" class="dropdown-icon glyphicon glyphicon-option-vertical js__drop_down_button"></a>
						<ul class="sub-menu">
							<li><a href="#">Action</a></li>
							<li><a href="#">Another action</a></li>
							<li><a href="#">Something else there</a></li>
							<li class="split"></li>
							<li><a href="#">Separated link</a></li>
						</ul>
						<!-- /.sub-menu -->
					</div>
					<!-- /.dropdown js__dropdown -->
					<div id="bar-morris-chart" class="morris-chart" style="height: 240px"></div>
					<div class="text-center">
						<ul class="list-inline morris-chart-detail-list">
							<li><i class="fa fa-circle"></i>Series A</li>
							<li><i class="fa fa-circle"></i>Series B</li>
							<li><i class="fa fa-circle"></i>Series C</li>
						</ul>
					</div>
					<!-- /#bar-morris-chart.morris-chart -->
				</div>
				<!-- /.box-content -->
			</div>
			<!-- /.col-lg-6 col-xs-12 -->
 
			<div class="col-lg-6 col-xs-12">
				<div class="box-content">
					<h4 class="box-title">Memory usage</h4>
					<!-- /.box-title -->
					<div class="dropdown js__drop_down">
						<a href="#" class="dropdown-icon glyphicon glyphicon-option-vertical js__drop_down_button"></a>
						<ul class="sub-menu">
							<li><a href="#">Action</a></li>
							<li><a href="#">Another action</a></li>
							<li><a href="#">Something else there</a></li>
							<li class="split"></li>
							<li><a href="#">Separated link</a></li>
						</ul>
						<!-- /.sub-menu -->
					</div>
					<!-- /.dropdown js__dropdown -->
					<div id="donut-morris-chart" class="morris-chart" style="height: 240px"></div>
					<div class="text-center">
						<ul class="list-inline morris-chart-detail-list">
							<li><i class="fa fa-circle"></i>Series A</li>
							<li><i class="fa fa-circle"></i>Series B</li>
							<li><i class="fa fa-circle"></i>Series C</li>
						</ul>
					</div>
					<!-- /#donut-morris-chart.morris-chart -->
				</div>
				<!-- /.box-content -->
			</div>
			<!-- /.col-lg-6 col-xs-12 -->
		</div>
		<!-- /.row -->
 
		<div class="row small-spacing">
			<div class="col-lg-3 col-md-6 col-xs-12">
				<div class="box-content bg-success text-white">
					<div class="statistics-box with-icon">
						<i class="ico small fa fa-diamond"></i>
						<p class="text text-white">SUCCESS</p>
						<h2 class="counter">72943</h2>
					</div>
				</div>
				<!-- /.box-content -->
			</div>
			<!-- /.col-lg-3 col-md-6 col-xs-12 -->
			<div class="col-lg-3 col-md-6 col-xs-12">
				<div class="box-content bg-info text-white">
					<div class="statistics-box with-icon">
						<i class="ico small fa fa-download"></i>
						<p class="text text-white">DOWNLOAD</p>
						<h2 class="counter">6382</h2>
					</div>
				</div>
				<!-- /.box-content -->
			</div>
			<!-- /.col-lg-3 col-md-6 col-xs-12 -->
			<div class="col-lg-3 col-md-6 col-xs-12">
				<div class="box-content bg-danger text-white">
					<div class="statistics-box with-icon">
						<i class="ico small fa fa-bug"></i>
						<p class="text text-white">FIXED BUG</p>
						<h2 class="counter">12564</h2>
					</div>
				</div>
				<!-- /.box-content -->
			</div>
			<!-- /.col-lg-3 col-md-6 col-xs-12 -->
			<div class="col-lg-3 col-md-6 col-xs-12">
				<div class="box-content bg-warning text-white">
					<div class="statistics-box with-icon">
						<i class="ico small fa fa-usd"></i>
						<p class="text text-white">SALES</p>
						<h2 class="counter">2,637</h2>
					</div>
				</div>
				<!-- /.box-content -->
			</div>
			<!-- /.col-lg-3 col-md-6 col-xs-12 -->
		</div>
		<!-- .row -->
 
		<div class="row small-spacing">
			<div class="col-lg-6 col-xs-12">
				<div class="box-content">
					<div id="calendar-widget"></div>
				</div>
				<!-- /.box-content -->
			</div>
			<!-- /.col-lg-6 col-xs-12 -->
			<div class="col-lg-6 col-xs-12">
				<div class="box-content">
					<h4 class="box-title">Purchases</h4>
					<!-- /.box-title -->
					<div class="dropdown js__drop_down">
						<a href="#" class="dropdown-icon glyphicon glyphicon-option-vertical js__drop_down_button"></a>
						<ul class="sub-menu">
							<li><a href="#">Product</a></li>
							<li><a href="#">Another action</a></li>
							<li><a href="#">Something else there</a></li>
							<li class="split"></li>
							<li><a href="#">Separated link</a></li>
						</ul>
						<!-- /.sub-menu -->
					</div>
					<!-- /.dropdown js__dropdown -->
					<div class="table-responsive table-purchases">
						<table class="table table-striped margin-bottom-10">
							<thead>
								<tr>
									<th style="width:40%;">Product</th>
									<th>Price</th>
									<th>Date</th>
									<th>State</th>
									<th style="width:5%;"></th>
								</tr>
							</thead>
							<tbody>
								<tr>
									<td>Amaza Themes</td>
									<td>$71</td>
									<td>Nov 12,2016</td>
									<td class="text-success">Completed</td>
									<td><a href="#"><i class="fa fa-plus-circle"></i></a></td>
								</tr>
								<tr>
									<td>Macbook</td>
									<td>$142</td>
									<td>Nov 10,2016</td>
									<td class="text-danger">Cancelled</td>
									<td><a href="#"><i class="fa fa-plus-circle"></i></a></td>
								</tr>
								<tr>
									<td>Samsung TV</td>
									<td>$200</td>
									<td>Nov 01,2016</td>
									<td class="text-warning">Pending</td>
									<td><a href="#"><i class="fa fa-plus-circle"></i></a></td>
								</tr>
								<tr>
									<td>Ninja Admin</td>
									<td>$200</td>
									<td>Oct 28,2016</td>
									<td class="text-warning">Pending</td>
									<td><a href="#"><i class="fa fa-plus-circle"></i></a></td>
								</tr>
								<tr>
									<td>Galaxy Note 5</td>
									<td>$200</td>
									<td>Oct 28,2016</td>
									<td class="text-success">Completed</td>
									<td><a href="#"><i class="fa fa-plus-circle"></i></a></td>
								</tr>
								<tr>
									<td>CleanUp Themes</td>
									<td>$71</td>
									<td>Oct 22,2016</td>
									<td class="text-success">Completed</td>
									<td><a href="#"><i class="fa fa-plus-circle"></i></a></td>
								</tr>
								<tr>
									<td>Facebook WP Plugin</td>
									<td>$10</td>
									<td>Oct 15,2016</td>
									<td class="text-success">Completed</td>
									<td><a href="#"><i class="fa fa-plus-circle"></i></a></td>
								</tr>
								<tr>
									<td>Iphone 7</td>
									<td>$100</td>
									<td>Oct 12,2016</td>
									<td class="text-warning">Pending</td>
									<td><a href="#"><i class="fa fa-plus-circle"></i></a></td>
								</tr>
								<tr>
									<td>Nova House</td>
									<td>$100</td>
									<td>Oct 12,2016</td>
									<td class="text-warning">Pending</td>
									<td><a href="#"><i class="fa fa-plus-circle"></i></a></td>
								</tr>
								<tr>
									<td>Repair Cars</td>
									<td>$35</td>
									<td>Oct 12,2016</td>
									<td class="text-warning">Pending</td>
									<td><a href="#"><i class="fa fa-plus-circle"></i></a></td>
								</tr>
							</tbody>
						</table>
						<!-- /.table -->
					</div>
					<!-- /.table-responsive -->
				</div>
				<!-- /.box-content -->
			</div>
			<!-- /.col-lg-6 col-xs-12 -->
		</div>
		<!-- /.row -->		
		<footer class="footer">
			<ul class="list-inline">
				<li>Copyright &copy; 2021.Company name All rights reserved.<a target="_blank" href="https://sc.chinaz.com/moban/">&#x7F51;&#x9875;&#x6A21;&#x677F;</a></li>
				<li><a href="#">Privacy</a></li>
				<li><a href="#">Terms</a></li>
				<li><a href="#">Help</a></li>
			</ul>
		</footer>
	</div>
	<!-- /.main-content -->
</div><!--/#wrapper -->
	<!-- HTML5 shim and Respond.js for IE8 support of HTML5 elements and media queries -->
	<!--[if lt IE 9]>
		<script src="/static/assets/script/html5shiv.min.js"></script>
		<script src="/static/assets/script/respond.min.js"></script>
	<![endif]-->
	<!-- 
	================================================== -->
	<!-- Placed at the end of the document so the pages load faster -->
	<script src="/static/assets/scripts/jquery.min.js"></script>
	<script src="/static/assets/scripts/modernizr.min.js"></script>
	<script src="/static/assets/plugin/bootstrap/js/bootstrap.min.js"></script>
	<script src="/static/assets/plugin/mCustomScrollbar/jquery.mCustomScrollbar.concat.min.js"></script>
	<script src="/static/assets/plugin/nprogress/nprogress.js"></script>
	<script src="/static/assets/plugin/sweet-alert/sweetalert.min.js"></script>
	<script src="/static/assets/plugin/waves/waves.min.js"></script>
 
	<!-- Morris Chart -->
	<script src="/static/assets/plugin/chart/morris/morris.min.js"></script>
	<script src="/static/assets/plugin/chart/morris/raphael-min.js"></script>
	<script src="/static/assets/scripts/chart.morris.init.min.js"></script>
 
	<!-- Flot Chart -->
	<script src="/static/assets/plugin/chart/plot/jquery.flot.min.js"></script>
	<script src="/static/assets/plugin/chart/plot/jquery.flot.tooltip.min.js"></script>
	<script src="/static/assets/plugin/chart/plot/jquery.flot.categories.min.js"></script>
	<script src="/static/assets/plugin/chart/plot/jquery.flot.pie.min.js"></script>
	<script src="/static/assets/plugin/chart/plot/jquery.flot.stack.min.js"></script>
	<script src="/static/assets/scripts/chart.flot.init.min.js"></script>
 
	<!-- Sparkline Chart -->
	<script src="/static/assets/plugin/chart/sparkline/jquery.sparkline.min.js"></script>
	<script src="/static/assets/scripts/chart.sparkline.init.min.js"></script>
 
	<!-- FullCalendar -->
	<script src="/static/assets/plugin/moment/moment.js"></script>
	<script src="/static/assets/plugin/fullcalendar/fullcalendar.min.js"></script>
	<script src="/static/assets/scripts/fullcalendar.init.js"></script>
 
	<script src="/static/assets/scripts/main.min.js"></script>
	<script src="/static/assets/scripts/horizontal-menu.min.js"></script>
</body>
</html>

在urls.py下添加下列代码

接着在views.py下添加下列代码

在index.html内按照图示位置修改代码

然后刷新index.html页面，点退出登录

退出登录后，重新输入密码登录，能返回index.html即为成功

七，首页编写

首先将我们的echarts.js和china.js文件放到static/assets下，（在我给的资料里找）

在utils下新建query.py和getPublicData.py以及getChartData.py文件

在query.py编写代码

from pyhive import hive
 
conn = hive.Connection(host='node1',port='10000',username='hadoop')
 
cursor = conn.cursor()
 
def querys(sql,params,type='no_select'):
    params = tuple(params)
    cursor.execute(sql,params)
    if type != 'no_select':
        data_list = cursor.fetchall()
        conn.commit()
        return data_list
    else:
        conn.commit()
        return '数据库语句执行成功'
 
# airdata = querys('select * from airdata',[],'select')
# print(airdata[0])

在Pycharm终端执行命令

pip install pyhive
 
pip install thrift
 
pip install thrift_sasl

编写getPublicData.py代码

from utils.query import querys
def getairdata():
    airdata = querys('select * from airdata',[],'select')
    return airdata
def getavgCityAqi():
    avgCityAqi = querys('select * from avgCityAqi',[],'select')
    return avgCityAqi
def getavgCitySix():
    avgCitySix = querys('select * from avgCitySix',[],'select')
    return avgCitySix
def getmaxCityAqi():
    maxCityAqi = querys('select * from maxCityAqi',[],'select')
    return maxCityAqi
def getavgCityPM():
    avgCityPM = querys('select * from avgCityPM',[],'select')
    return avgCityPM
def getgreatAir():
    greatAir = querys('select * from greatAir',[],'select')
    return greatAir
def getmaxSN():
    maxSN = querys('select * from maxSN',[],'select')
    return maxSN
def getCOCategory():
    COCategory = querys('select * from COCategory',[],'select')
    return COCategory
def getO3Category():
    O3Category = querys('select * from O3Category',[],'select')
    return O3Category
def getmonthAQI():
    monthAQI = querys('select * from monthAQI',[],'select')
    return monthAQI

修改view.py

from django.shortcuts import render,redirect
from myApp.models import *
# Create your views here.
from utils.error import *
from utils.query import *
from utils.getPublicData import *
def index(request):
    uname = request.session.get('username')
    userInfo = User.objects.get(username=uname)
    airdataList = list(getairdata())
    dateList = list(set([x[1] for x in airdataList]))
    yearList = []
    monthList = []
    dayList = []
    for date in dateList:
        year,month,day = date.split('-')
        yearList.append(int(year))
        monthList.append(int(month))
        dayList.append(int(day))
 
    yearList = sorted(set(yearList))
    monthList = sorted(set(monthList))
    dayList = sorted(set(dayList))
    defaultYear = '2023'
    defaultMonth = '01'
    defaultDay = '01'
    cityList = list(set(x[0] for x in airdataList))
 
    return render(request, 'index.html',{
         'userInfo':userInfo,
         'yearList':yearList,
         'monthList':monthList,
         'dayList':dayList,
         'defaultYear':defaultYear,
         'defaultMonth':defaultMonth,
         'defaultDay':defaultDay,
    })
 
def logOut(request):
    request.session.clear()
    return redirect('login')
 
def login(request):
    if request.method == "GET":
        return render(request, 'login.html', {})
    else:
        uname=request.POST.get('username')
        pwd=request.POST.get('password')
        print(uname,pwd)
        try:
            user = User.objects.get(username=uname,password=pwd)
            request.session['username'] = user.username
            return redirect('index')
        except:
            return errorResponse(request,'用户名或密码错误，请输入正确信息')
        #return render(request, 'login.html', {})
 
def register(request):
    if request.method == 'GET':
        return render(request, 'register.html',{})
    else:
        uname = request.POST.get('username')
        pwd = request.POST.get('password')
        ckPwd = request.POST.get('ckPassword')
        print(uname,pwd,ckPwd)
        try:
            User.objects.get(username=uname)
            return errorResponse(request,"用户名已存在")
        except:
            if not uname or not pwd or not ckPwd:return errorResponse(request,"请输入完整信息")
            if pwd != ckPwd:return errorResponse(request,"两次密码不相符，请确认您的密码")
            User.objects.create(username=uname,password=pwd)
            return redirect('/myApp/login/')
        return render(request, 'register.html', {})

再修改index.html

<!DOCTYPE html>
<html lang="en">
<head>
	<meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
	<meta http-equiv="X-UA-Compatible" content="IE=edge">
	<meta name="viewport" content="width=device-width, initial-scale=1, user-scalable=no">
	<meta name="description" content="">
	<meta name="author" content="">
 
	<title>空气质量数据可视化分析系统</title>
 
	<!-- Main Styles -->
	<link rel="stylesheet" href="/static/assets/styles/style-horizontal.min.css">
 
	<!-- Material Design Icon -->
	<link rel="stylesheet" href="/static/assets/fonts/material-design/css/materialdesignicons.css">
 
	<!-- mCustomScrollbar -->
	<link rel="stylesheet" href="/static/assets/plugin/mCustomScrollbar/jquery.mCustomScrollbar.min.css">
 
	<!-- Waves Effect -->
	<link rel="stylesheet" href="/static/assets/plugin/waves/waves.min.css">
 
	<!-- Sweet Alert -->
	<link rel="stylesheet" href="/static/assets/plugin/sweet-alert/sweetalert.css">
 
	<!-- Morris Chart -->
	<link rel="stylesheet" href="/static/assets/plugin/chart/morris/morris.css">
 
	<!-- FullCalendar -->
	<link rel="stylesheet" href="/static/assets/plugin/fullcalendar/fullcalendar.min.css">
	<link rel="stylesheet" href="/static//static/assets/plugin/fullcalendar/fullcalendar.print.css" media='print'>
 
</head>
 
<body>
<header class="fixed-header">
	<div class="header-top">
		<div class="container">
			<div class="pull-left">
				<a href="index.html" class="logo"><i class="ico mdi mdi-cube-outline"></i>空气质量数据可视化分析系统</a>
			</div>
			<!-- /.pull-left -->
			<div class="pull-right">
				<div class="ico-item hidden-on-desktop">
					<button type="button" class="menu-button js__menu_button fa fa-bars waves-effect waves-light"></button>
				</div>
				<!-- /.ico-item hidden-on-desktop -->
				<div class="ico-item">
					<a href="#" class="ico-item mdi mdi-magnify js__toggle_open" data-target="#searchform-header"></a>
					<form action="#" id="searchform-header" class="searchform js__toggle"><input type="search" placeholder="Search..." class="input-search"><button class="mdi mdi-magnify button-search" type="submit"></button></form>
					<!-- /.searchform -->
				</div>
				<!-- /.ico-item -->
				<div class="ico-item">
					<a href="#" class="ico-item mdi mdi-email notice-alarm js__toggle_open" data-target="#message-popup"></a>
					<div id="message-popup" class="notice-popup js__toggle" data-space="55">
						<h2 class="popup-title">Recent Messages<a href="#" class="pull-right text-danger">New message</a></h2>
						<!-- /.popup-title -->
						<div class="content">
							<ul class="notice-list">
								<li>
									<a href="#">
										<span class="avatar"><img src="/static/assets/images/avatar-sm-1.jpg" alt=""></span>
										<span class="name">John Doe</span>
										<span class="desc">Amet odio neque nobis consequuntur consequatur a quae, impedit facere repellat voluptates.</span>
										<span class="time">10 min</span>
									</a>
								</li>
								<li>
									<a href="#">
										<span class="avatar"><img src="/static/assets/images/avatar-sm-3.jpg" alt=""></span>
										<span class="name">Harry Halen</span>
										<span class="desc">Amet odio neque nobis consequuntur consequatur a quae, impedit facere repellat voluptates.</span>
										<span class="time">15 min</span>
									</a>
								</li>
								<li>
									<a href="#">
										<span class="avatar"><img src="/static/assets/images/avatar-sm-4.jpg" alt=""></span>
										<span class="name">Thomas Taylor</span>
										<span class="desc">Amet odio neque nobis consequuntur consequatur a quae, impedit facere repellat voluptates.</span>
										<span class="time">30 min</span>
									</a>
								</li>
								<li>
									<a href="#">
										<span class="avatar"><img src="/static/assets/images/avatar-1.jpg" alt=""></span>
										<span class="name">Jennifer</span>
										<span class="desc">Amet odio neque nobis consequuntur consequatur a quae, impedit facere repellat voluptates.</span>
										<span class="time">45 min</span>
									</a>
								</li>
								<li>
									<a href="#">
										<span class="avatar"><img src="/static/assets/images/avatar-sm-5.jpg" alt=""></span>
										<span class="name">Helen Candy</span>
										<span class="desc">Amet odio neque nobis consequuntur consequatur a quae, impedit facere repellat voluptates.</span>
										<span class="time">45 min</span>
									</a>
								</li>
								<li>
									<a href="#">
										<span class="avatar"><img src="/static/assets/images/avatar-2.jpg" alt=""></span>
										<span class="name">Anna Cavan</span>
										<span class="desc">Amet odio neque nobis consequuntur consequatur a quae, impedit facere repellat voluptates.</span>
										<span class="time">1 hour ago</span>
									</a>
								</li>
								<li>
									<a href="#">
										<span class="avatar bg-success"><i class="fa fa-user"></i></span>
										<span class="name">Jenny Betty</span>
										<span class="desc">Amet odio neque nobis consequuntur consequatur a quae, impedit facere repellat voluptates.</span>
										<span class="time">1 day ago</span>
									</a>
								</li>
								<li>
									<a href="#">
										<span class="avatar"><img src="/static/assets/images/avatar-5.jpg" alt=""></span>
										<span class="name">Denise Peterson</span>
										<span class="desc">Amet odio neque nobis consequuntur consequatur a quae, impedit facere repellat voluptates.</span>
										<span class="time">1 year ago</span>
									</a>
								</li>
							</ul>
							<!-- /.notice-list -->
							<a href="#" class="notice-read-more">See more messages <i class="fa fa-angle-down"></i></a>
						</div>
						<!-- /.content -->
					</div>
					<!-- /#message-popup -->
				</div>
				<!-- /.ico-item -->
				<div class="ico-item">
					<a href="#" class="ico-item mdi mdi-bell notice-alarm js__toggle_open" data-target="#notification-popup"></a>
					<div id="notification-popup" class="notice-popup js__toggle" data-space="55">
						<h2 class="popup-title">Your Notifications</h2>
						<!-- /.popup-title -->
						<div class="content">
							<ul class="notice-list">
								<li>
									<a href="#">
										<span class="avatar"><img src="/static/assets/images/avatar-sm-1.jpg" alt=""></span>
										<span class="name">John Doe</span>
										<span class="desc">Like your post: “Contact Form 7 Multi-Step”</span>
										<span class="time">10 min</span>
									</a>
								</li>
								<li>
									<a href="#">
										<span class="avatar"><img src="/static/assets/images/avatar-sm-2.jpg" alt=""></span>
										<span class="name">Anna William</span>
										<span class="desc">Like your post: “Facebook Messenger”</span>
										<span class="time">15 min</span>
									</a>
								</li>
								<li>
									<a href="#">
										<span class="avatar bg-warning"><i class="fa fa-warning"></i></span>
										<span class="name">Update Status</span>
										<span class="desc">Failed to get available update data. To ensure the please contact us.</span>
										<span class="time">30 min</span>
									</a>
								</li>
								<li>
									<a href="#">
										<span class="avatar"><img src="/static/assets/images/avatar-1.jpg" alt=""></span>
										<span class="name">Jennifer</span>
										<span class="desc">Like your post: “Contact Form 7 Multi-Step”</span>
										<span class="time">45 min</span>
									</a>
								</li>
								<li>
									<a href="#">
										<span class="avatar"><img src="/static/assets/images/avatar-sm-6.jpg" alt=""></span>
										<span class="name">Michael Zenaty</span>
										<span class="desc">Like your post: “Contact Form 7 Multi-Step”</span>
										<span class="time">50 min</span>
									</a>
								</li>
								<li>
									<a href="#">
										<span class="avatar"><img src="/static/assets/images/avatar-sm-4.jpg" alt=""></span>
										<span class="name">Simon</span>
										<span class="desc">Like your post: “Facebook Messenger”</span>
										<span class="time">1 hour</span>
									</a>
								</li>
								<li>
									<a href="#">
										<span class="avatar bg-violet"><i class="fa fa-flag"></i></span>
										<span class="name">Account Contact Change</span>
										<span class="desc">A contact detail associated with your account has been changed.</span>
										<span class="time">2 hours</span>
									</a>
								</li>
								<li>
									<a href="#">
										<span class="avatar"><img src="/static/assets/images/avatar-sm-7.jpg" alt=""></span>
										<span class="name">Helen 987</span>
										<span class="desc">Like your post: “Facebook Messenger”</span>
										<span class="time">Yesterday</span>
									</a>
								</li>
								<li>
									<a href="#">
										<span class="avatar"><img src="/static/assets/images/avatar-2.jpg" alt=""></span>
										<span class="name">Denise Jenny</span>
										<span class="desc">Like your post: “Contact Form 7 Multi-Step”</span>
										<span class="time">Oct, 28</span>
									</a>
								</li>
								<li>
									<a href="#">
										<span class="avatar"><img src="/static/assets/images/avatar-sm-8.jpg" alt=""></span>
										<span class="name">Thomas William</span>
										<span class="desc">Like your post: “Facebook Messenger”</span>
										<span class="time">Oct, 27</span>
									</a>
								</li>
							</ul>
							<!-- /.notice-list -->
							<a href="#" class="notice-read-more">See more messages <i class="fa fa-angle-down"></i></a>
						</div>
						<!-- /.content -->
					</div>
					<!-- /#notification-popup -->
				</div>
				<!-- /.ico-item -->
				<div class="ico-item">
					<a href="#" class="ico-item mdi mdi-account js__toggle_open" data-target="#user-status"></a>
					<div id="user-status" class="user-status js__toggle">
						<a href="#" class="avatar"><img src="/static/assets/images/avatar.png" alt=""><span class="status online"></span></a>
						<h5 class="name"><a href="profile.html">{{ userInfo.username }}</a></h5>
						<h5 class="position">用户</h5>
						<!-- /.name -->
						<div class="control-items">
<!--							<div class="control-item"><a href="#" title="Settings"><i class="fa fa-gear"></i></a></div>-->
							<div class="control-item"><a href="/myApp/logOut" class="" title="Log out"><i class="fa fa-power-off">退出登录</i></a></div>
						</div>
						<!-- /.control-items -->
					</div>
					<!-- /#user-status -->
				</div>
				<!-- /.ico-item -->
			</div>
			<!-- /.pull-right -->
		</div>
		<!-- /.container -->
	</div>
	<!-- /.header-top -->
	<nav class="nav-horizontal">
		<button type="button" class="menu-close hidden-on-desktop js__close_menu"><i class="fa fa-times"></i><span>CLOSE</span></button>
		<div class="container">
 
			<ul class="menu">
					<li class="current">
						<a href="index.html"><i class="ico mdi mdi-home"></i><span>首页</span></a>
					</li>
					<li class="has-sub">
						<a href="#"><i class="ico mdi mdi-human"></i><span>个人信息</span></a>
						<ul class="sub-menu mega mega-3">
							<li class="has-sub">
								<h3 class="title">Components</h3>
								<!-- .title -->
								<ul class="child-list">
									<li><a href="ui-buttons.html">Buttons</a></li>
									<li><a href="ui-cards.html">Cards</a></li>
									<li><a href="ui-checkbox-radio.html">Checkboxs-Radios</a></li>
									<li><a href="ui-draggable-cards.html">Draggable Cards</a></li>
									<li><a href="ui-components.html">UI Components</a></li>
								</ul>
								<!-- /.child-list -->
							</li>
							<li class="has-sub">
								<h3 class="title">Icons</h3>
								<!-- .title -->
								<ul class="child-list">
									<li><a href="icons-font-awesome-icons.html">Font Awesome</a></li>
									<li><a href="icons-fontello.html">Fontello</a></li>
									<li><a href="icons-material-icons.html">Material Design Icons</a></li>
									<li><a href="icons-material-design-iconic.html">Material Design Iconic Font</a></li>
									<li><a href="icons-themify-icons.html">Themify Icons</a></li>
								</ul>
								<!-- /.child-list -->
							</li>
							<li class="has-sub">
								<h3 class="title">Others</h3>
								<!-- .title -->
								<ul class="child-list">
									<li><a href="ui-modals.html">Modals</a></li>
									<li><a href="ui-range-slider.html">Range Slider</a></li>
									<li><a href="ui-sweetalert.html">Sweet Alert</a></li>
									<li><a href="ui-treeview.html">Tree view</a></li>
									<li><a href="ui-typography.html">Typography</a></li>
								</ul>
								<!-- /.child-list -->
							</li>
						</ul>
						<!-- /.sub-menu mega -->
					</li>
					<li class="has-sub">
						<a href="#"><i class="ico mdi mdi-database"></i><span>数据总览</span></a>
						<ul class="sub-menu single">
							<li><a href="chart-3d.html">3D Charts</a></li>
							<li><a href="chart-chartist.html">Chartist Charts</a></li>
							<li><a href="chart-chartjs.html">Chartjs Chart</a></li>
							<li><a href="chart-dynamic.html">Dynamic Chart</a></li>
							<li><a href="chart-flot.html">Flot Chart</a></li>
							<li><a href="chart-knob.html">Knob Chart</a></li>
							<li><a href="chart-morris.html">Morris Chart</a></li>
							<li><a href="chart-sparkline.html">Sparkline Chart</a></li>
							<li><a href="chart-other.html">Other Chart</a></li>
						</ul>
						<!-- /.sub-menu single -->
					</li>
					<li class="has-sub">
						<a href="#"><i class="ico mdi mdi-chart-line"></i><span>空气质量年度分析</span></a>
						<ul class="sub-menu single">
							<li><a href="form-elements.html">General Elements</a></li>
							<li><a href="form-advanced.html">Advanced Form</a></li>
							<li><a href="form-fileupload.html">Form Uploads</a></li>
							<li><a href="form-validation.html">Form Validation</a></li>
							<li><a href="form-wizard.html">Form Wizard</a></li>
							<li><a href="form-wysiwig.html">Wysiwig Editors</a></li>
							<li><a href="form-xeditable.html">X-editable</a></li>
						</ul>
						<!-- /.sub-menu single -->
					</li>
					<li>
						<a href="inbox.html"><i class="ico mdi mdi-chart-bar"></i><span>月度分析</span></a>
					</li>
					<li class="has-sub">
						<a href="#"><i class="ico mdi mdi-air-conditioner"></i><span>气体分析</span></a>
						<ul class="sub-menu single">
							<li><a href="page-starter.html">Starter Page</a></li>
							<li><a href="login.html">Login</a></li>
							<li><a href="page-register.html">Register</a></li>
							<li><a href="page-recoverpw.html">Recover Password</a></li>
							<li><a href="page-lock-screen.html">Lock Screen</a></li>
							<li><a href="page-confirm-mail.html">Confirm Mail</a></li>
							<li><a href="page-404.html">Error 404</a></li>
							<li><a href="page-500.html">Error 500</a></li>
						</ul>
						<!-- /.sub-menu single -->
					</li>
					<li class="has-sub">
						<a href="#"><i class="ico mdi mdi-map"></i><span>城市分布</span></a>
						<ul class="sub-menu single">
							<li><a href="extras-contact.html">Contact list</a></li>
							<li><a href="extras-email-template.html">Email template</a></li>
							<li><a href="extras-faq.html">FAQ</a></li>
							<li><a href="extras-gallery.html">Gallery</a></li>
							<li><a href="extras-invoice.html">Invoice</a></li>
							<li><a href="extras-maps.html">Maps</a></li>
							<li><a href="extras-pricing.html">Pricing</a></li>
							<li><a href="extras-projects.html">Projects</a></li>
							<li><a href="extras-taskboard.html">Taskboard</a></li>
							<li><a href="extras-timeline.html">Timeline</a></li>
							<li><a href="extras-tour.html">Tour</a></li>
						</ul>
						<!-- /.sub-menu single -->
					</li>
					<li class="has-sub">
						<a href="#"><i class="ico mdi mdi-cloud"></i><span>数据词云图</span></a>
						<ul class="sub-menu mega mega-2">
							<li class="has-sub">
								<h3 class="title">Tables</h3>
								<!-- .title -->
								<ul class="child-list">
									<li><a href="tables-basic.html">Basic Tables</a></li>
									<li><a href="tables-datatable.html">Data Tables</a></li>
									<li><a href="tables-responsive.html">Responsive Tables</a></li>
									<li><a href="tables-editable.html">Editable Tables</a></li>
								</ul>
								<!-- /.child-list -->
							</li>
							<li class="has-sub">
								<h3 class="title">Others</h3>
								<!-- .title -->
								<ul class="child-list">
									<li><a href="calendar.html">Calendar</a></li>
									<li><a href="ui-notification.html">Notification</a></li>
									<li><a href="profile.html">Profile</a></li>
									<li><a href="widgets.html">Widgets</a></li>
								</ul>
								<!-- /.child-list -->
							</li>
						</ul>
						<!-- /.sub-menu mega -->
					</li>
                    <li>
						<a href="inbox.html"><i class="ico mdi mdi-star"></i><span>空气质量预测</span></a>
					</li>
			</ul>
			<!-- /.menu -->
		</div>
		<!-- /.container -->
	</nav>
	<!-- /.nav-horizontal -->
</header>
<!-- /.fixed-header -->
 
<div id="wrapper">
	<div class="main-content container">
		<div class="row small-spacing">
<!--			<div class="col-xs-12">-->
				<div class="box-content">
					<h4 class="box-title">Activity</h4>
					<!-- /.box-title -->
					<div class="dropdown js__drop_down">
						<a href="#" class="dropdown-icon glyphicon glyphicon-option-vertical js__drop_down_button"></a>
						<ul class="sub-menu">
							<li><a href="#">Action</a></li>
							<li><a href="#">Another action</a></li>
							<li><a href="#">Something else there</a></li>
							<li class="split"></li>
							<li><a href="#">Separated link</a></li>
						</ul>
						<!-- /.sub-menu -->
					</div>
					<!-- /.dropdown js__dropdown -->
					<div id="real-time-flot-chart" class="flot-chart" style="height: 320px"></div>
					<!-- /#flot-chart-1.flot-chart -->
				</div>
				<!-- /.box-content -->
			</div>
			<!-- /.col-xs-12 -->
 
			<div class="col-lg-5 col-xs-12">
                 <div class="col-lg-12 ol-xs-12">
                    <div class="box-content card white">
                        <h4 class="box-title">日期选择</h4>
                        <!-- /.box-title -->
                        <div class="card-content">
                            <form action="/myApp/index/" method="POST">
                                <div class="row small-spacing">
                                    <div class="col-xs-3">
                                        <select class="form-control" name="defaultYear">
                                            {% for i in yearList %}
                                                {% if i == defaultYear %}
                                                 <option value="{{ i }}" selected>{{ i }}</option>
                                                {% else %}
                                                 <option value="{{ i }}" >{{ i }}</option>
                                                {% endif %}
                                                {% endfor %}
                                        </select>
                                    </div>
                                    <div class="col-xs-3">
                                        <select class="form-control" name="defaultMonth">
                                           {% for i in monthList %}
                                                {% if i == defaultMonth %}
                                                 <option value="{{ i }}" selected>{{ i }}</option>
                                                {% else %}
                                                 <option value="{{ i }}" >{{ i }}</option>
                                                {% endif %}
                                                {% endfor %}
                                        </select>
                                    </div>
                                     <div class="col-xs-3">
                                        <select class="form-control" name="defaultDay">
                                            {% for i in dayList %}
                                                {% if i == defaultDay %}
                                                 <option value="{{ i }}" selected>{{ i }}</option>
                                                {% else %}
                                                 <option value="{{ i }}" >{{ i }}</option>
                                                {% endif %}
                                                {% endfor %}
                                        </select>
                                    </div>
                                    <div class="col-xs-3">
                                        <button type="button" class="btn btn-primary waves-effect waves-light">查看</button>
                                    </div>
                                </div>
                            </form>
                            <!-- /.input-group -->
 
                            <!-- /.input-group -->
                        </div>
                        <!-- /.card-content -->
                    </div>
                    <!-- /.box-content card white -->
                </div>
 
				<div class="col-lg-12 col-xs-12">
                    <div class="box-content">
					<h4 class="box-title text-info">CITY</h4>
					<!-- /.box-title -->
 
					<!-- /.dropdown js__dropdown -->
					<div class="content widget-stat">
<!--						<div id="traffic-sparkline-chart-1" class="left-content margin-top-15"></div>-->
                        <div style="display: flex">
                            <div style="flex: 10">
                                <div id="mainA" style="width: 100%;height: 300px"></div>
						<!-- /#traffic-sparkline-chart-1 -->
                                <div>
                                    <p class="text text-success">
                                            <span style="margin-right: 50px">PM2.5:</span>
                                            <span style="margin-right: 50px">PM10:</span>
                                            <span>SO2:{{ currentData.6 }}</span>
                                        </p>
                                        <p class="text text-success">
                                            <span style="margin-right: 80px">NO2:</span>
                                            <span style="margin-right: 50px">CO:</span>
                                            <span>O3:</span>
                                        </p>
                                </div>
                            </div>
                            <div>
                                <div class="">
							<h2 class="counter text-info">278</h2>
							<!-- /.counter -->
							<p class="text text-info">空气质量AQI</p>
                                    <p class="text text-justify">0-50：优</p>
                                    <p class="text text-justify"> 51-100：良</p>
                                    <p class="text text-justify"> 101-150：轻度污染</p>
                                    <p class="text text-justify"> 151-200：中度污染</p>
                                    <p class="text text-justify"> 201-300：重度污染</p>
                                    <p class="text text-justify"> 大于300：严重污染‌</p>
 
							<!-- /.text -->
						</div>
                            </div>
                        </div>
						<!-- .right-content -->
					</div>
					<!-- /.content widget-stat -->
				</div>
                 <ul class="list-inline">
                     <li class="margin-bottom-10"><a type="button" class="btn btn-primary btn-rounded btn-bordered waves-effect waves-light">Default</a></li>
                     <li class="margin-bottom-10"><a type="button" class="btn btn-primary btn-rounded btn-bordered waves-effect waves-light">Primary</a></li>
                     <li class="margin-bottom-10"><a type="button" class="btn btn-primary btn-rounded btn-bordered waves-effect waves-light">Success</a></li>
                     <li class="margin-bottom-10"><a type="button" class="btn btn-primary btn-rounded btn-bordered waves-effect waves-light">Info</a></li>
                     <li class="margin-bottom-10"><a type="button" class="btn btn-primary btn-rounded btn-bordered waves-effect waves-light">Warning</a></li>
                     <li class="margin-bottom-10"><a type="button" class="btn btn-primary btn-rounded btn-bordered waves-effect waves-light">Danger</a></li>
                     <li class="margin-bottom-10"><a type="button" class="btn btn-primary btn-rounded btn-bordered waves-effect waves-light">Violet</a></li>
                    </ul>
                    </div>
				<!-- /.box-content -->
			</div>
			<!-- /.col-lg-4 col-xs-12 -->
 
			<div class="col-lg-7 col-xs-12">
				<div class="col-lg-12 col col-xs-12">
                    <div class="box-content">
					<h4 class="box-title text-success">Projects Done</h4>
					<!-- /.box-title -->
					<div class="dropdown js__drop_down">
						<a href="#" class="dropdown-icon glyphicon glyphicon-option-vertical js__drop_down_button"></a>
						<ul class="sub-menu">
							<li><a href="#">Action</a></li>
							<li><a href="#">Another action</a></li>
							<li><a href="#">Something else there</a></li>
							<li class="split"></li>
							<li><a href="#">Separated link</a></li>
						</ul>
						<!-- /.sub-menu -->
					</div>
					<!-- /.dropdown js__dropdown -->
					<div class="content widget-stat">
						<div id="traffic-sparkline-chart-2" class="left-content margin-top-10"></div>
						<!-- /#traffic-sparkline-chart-2 -->
						<div class="right-content">
							<h2 class="counter text-success">36%</h2>
							<!-- /.counter -->
							<p class="text text-success">Some text here</p>
							<!-- /.text -->
						</div>
						<!-- .right-content -->
					</div>
					<!-- /.content widget-stat -->
				</div>
                </div>
				<!-- /.box-content -->
			</div>
			<!-- /.col-lg-4 col-xs-12 -->
 
 
			<!-- /.col-lg-4 col-xs-12 -->
 
			<div class="col-lg-6 col-xs-12">
				<div class="box-content">
					<h4 class="box-title">Visitor Analytics</h4>
					<!-- /.box-title -->
					<div class="dropdown js__drop_down">
						<a href="#" class="dropdown-icon glyphicon glyphicon-option-vertical js__drop_down_button"></a>
						<ul class="sub-menu">
							<li><a href="#">Action</a></li>
							<li><a href="#">Another action</a></li>
							<li><a href="#">Something else there</a></li>
							<li class="split"></li>
							<li><a href="#">Separated link</a></li>
						</ul>
						<!-- /.sub-menu -->
					</div>
					<!-- /.dropdown js__dropdown -->
					<div id="bar-morris-chart" class="morris-chart" style="height: 240px"></div>
					<div class="text-center">
						<ul class="list-inline morris-chart-detail-list">
							<li><i class="fa fa-circle"></i>Series A</li>
							<li><i class="fa fa-circle"></i>Series B</li>
							<li><i class="fa fa-circle"></i>Series C</li>
						</ul>
					</div>
					<!-- /#bar-morris-chart.morris-chart -->
				</div>
				<!-- /.box-content -->
			</div>
			<!-- /.col-lg-6 col-xs-12 -->
 
			<div class="col-lg-6 col-xs-12">
				<div class="box-content">
					<h4 class="box-title">Memory usage</h4>
					<!-- /.box-title -->
					<div class="dropdown js__drop_down">
						<a href="#" class="dropdown-icon glyphicon glyphicon-option-vertical js__drop_down_button"></a>
						<ul class="sub-menu">
							<li><a href="#">Action</a></li>
							<li><a href="#">Another action</a></li>
							<li><a href="#">Something else there</a></li>
							<li class="split"></li>
							<li><a href="#">Separated link</a></li>
						</ul>
						<!-- /.sub-menu -->
					</div>
					<!-- /.dropdown js__dropdown -->
					<div id="donut-morris-chart" class="morris-chart" style="height: 240px"></div>
					<div class="text-center">
						<ul class="list-inline morris-chart-detail-list">
							<li><i class="fa fa-circle"></i>Series A</li>
							<li><i class="fa fa-circle"></i>Series B</li>
							<li><i class="fa fa-circle"></i>Series C</li>
						</ul>
					</div>
					<!-- /#donut-morris-chart.morris-chart -->
				</div>
				<!-- /.box-content -->
			</div>
			<!-- /.col-lg-6 col-xs-12 -->
		</div>
		<!-- /.row -->
 
		<div class="row small-spacing">
			<div class="col-lg-3 col-md-6 col-xs-12">
				<div class="box-content bg-success text-white">
					<div class="statistics-box with-icon">
						<i class="ico small fa fa-diamond"></i>
						<p class="text text-white">SUCCESS</p>
						<h2 class="counter">72943</h2>
					</div>
				</div>
				<!-- /.box-content -->
			</div>
			<!-- /.col-lg-3 col-md-6 col-xs-12 -->
			<div class="col-lg-3 col-md-6 col-xs-12">
				<div class="box-content bg-info text-white">
					<div class="statistics-box with-icon">
						<i class="ico small fa fa-download"></i>
						<p class="text text-white">DOWNLOAD</p>
						<h2 class="counter">6382</h2>
					</div>
				</div>
				<!-- /.box-content -->
			</div>
			<!-- /.col-lg-3 col-md-6 col-xs-12 -->
			<div class="col-lg-3 col-md-6 col-xs-12">
				<div class="box-content bg-danger text-white">
					<div class="statistics-box with-icon">
						<i class="ico small fa fa-bug"></i>
						<p class="text text-white">FIXED BUG</p>
						<h2 class="counter">12564</h2>
					</div>
				</div>
				<!-- /.box-content -->
			</div>
			<!-- /.col-lg-3 col-md-6 col-xs-12 -->
			<div class="col-lg-3 col-md-6 col-xs-12">
				<div class="box-content bg-warning text-white">
					<div class="statistics-box with-icon">
						<i class="ico small fa fa-usd"></i>
						<p class="text text-white">SALES</p>
						<h2 class="counter">2,637</h2>
					</div>
				</div>
				<!-- /.box-content -->
			</div>
			<!-- /.col-lg-3 col-md-6 col-xs-12 -->
		</div>
		<!-- .row -->
 
		<div class="row small-spacing">
			<div class="col-lg-6 col-xs-12">
				<div class="box-content">
					<div id="calendar-widget"></div>
				</div>
				<!-- /.box-content -->
			</div>
			<!-- /.col-lg-6 col-xs-12 -->
			<div class="col-lg-6 col-xs-12">
				<div class="box-content">
					<h4 class="box-title">Purchases</h4>
					<!-- /.box-title -->
					<div class="dropdown js__drop_down">
						<a href="#" class="dropdown-icon glyphicon glyphicon-option-vertical js__drop_down_button"></a>
						<ul class="sub-menu">
							<li><a href="#">Product</a></li>
							<li><a href="#">Another action</a></li>
							<li><a href="#">Something else there</a></li>
							<li class="split"></li>
							<li><a href="#">Separated link</a></li>
						</ul>
						<!-- /.sub-menu -->
					</div>
					<!-- /.dropdown js__dropdown -->
					<div class="table-responsive table-purchases">
						<table class="table table-striped margin-bottom-10">
							<thead>
								<tr>
									<th style="width:40%;">Product</th>
									<th>Price</th>
									<th>Date</th>
									<th>State</th>
									<th style="width:5%;"></th>
								</tr>
							</thead>
							<tbody>
								<tr>
									<td>Amaza Themes</td>
									<td>$71</td>
									<td>Nov 12,2016</td>
									<td class="text-success">Completed</td>
									<td><a href="#"><i class="fa fa-plus-circle"></i></a></td>
								</tr>
								<tr>
									<td>Macbook</td>
									<td>$142</td>
									<td>Nov 10,2016</td>
									<td class="text-danger">Cancelled</td>
									<td><a href="#"><i class="fa fa-plus-circle"></i></a></td>
								</tr>
								<tr>
									<td>Samsung TV</td>
									<td>$200</td>
									<td>Nov 01,2016</td>
									<td class="text-warning">Pending</td>
									<td><a href="#"><i class="fa fa-plus-circle"></i></a></td>
								</tr>
								<tr>
									<td>Ninja Admin</td>
									<td>$200</td>
									<td>Oct 28,2016</td>
									<td class="text-warning">Pending</td>
									<td><a href="#"><i class="fa fa-plus-circle"></i></a></td>
								</tr>
								<tr>
									<td>Galaxy Note 5</td>
									<td>$200</td>
									<td>Oct 28,2016</td>
									<td class="text-success">Completed</td>
									<td><a href="#"><i class="fa fa-plus-circle"></i></a></td>
								</tr>
								<tr>
									<td>CleanUp Themes</td>
									<td>$71</td>
									<td>Oct 22,2016</td>
									<td class="text-success">Completed</td>
									<td><a href="#"><i class="fa fa-plus-circle"></i></a></td>
								</tr>
								<tr>
									<td>Facebook WP Plugin</td>
									<td>$10</td>
									<td>Oct 15,2016</td>
									<td class="text-success">Completed</td>
									<td><a href="#"><i class="fa fa-plus-circle"></i></a></td>
								</tr>
								<tr>
									<td>Iphone 7</td>
									<td>$100</td>
									<td>Oct 12,2016</td>
									<td class="text-warning">Pending</td>
									<td><a href="#"><i class="fa fa-plus-circle"></i></a></td>
								</tr>
								<tr>
									<td>Nova House</td>
									<td>$100</td>
									<td>Oct 12,2016</td>
									<td class="text-warning">Pending</td>
									<td><a href="#"><i class="fa fa-plus-circle"></i></a></td>
								</tr>
								<tr>
									<td>Repair Cars</td>
									<td>$35</td>
									<td>Oct 12,2016</td>
									<td class="text-warning">Pending</td>
									<td><a href="#"><i class="fa fa-plus-circle"></i></a></td>
								</tr>
							</tbody>
						</table>
						<!-- /.table -->
					</div>
					<!-- /.table-responsive -->
				</div>
				<!-- /.box-content -->
			</div>
			<!-- /.col-lg-6 col-xs-12 -->
		</div>
		<!-- /.row -->
		<footer class="footer">
			<ul class="list-inline">
				<li>Copyright &copy; 2021.Company name All rights reserved.<a target="_blank" href="https://sc.chinaz.com/moban/">&#x7F51;&#x9875;&#x6A21;&#x677F;</a></li>
				<li><a href="#">Privacy</a></li>
				<li><a href="#">Terms</a></li>
				<li><a href="#">Help</a></li>
			</ul>
		</footer>
	</div>
	<!-- /.main-content -->
</div><!--/#wrapper -->
	<!-- HTML5 shim and Respond.js for IE8 support of HTML5 elements and media queries -->
	<!--[if lt IE 9]>
		<script src="/static/assets/script/html5shiv.min.js"></script>
		<script src="/static/assets/script/respond.min.js"></script>
	<![endif]-->
	<!--
	================================================== -->
	<!-- Placed at the end of the document so the pages load faster -->
	<script src="/static/assets/scripts/jquery.min.js"></script>
	<script src="/static/assets/scripts/modernizr.min.js"></script>
	<script src="/static/assets/plugin/bootstrap/js/bootstrap.min.js"></script>
	<script src="/static/assets/plugin/mCustomScrollbar/jquery.mCustomScrollbar.concat.min.js"></script>
	<script src="/static/assets/plugin/nprogress/nprogress.js"></script>
	<script src="/static/assets/plugin/sweet-alert/sweetalert.min.js"></script>
	<script src="/static/assets/plugin/waves/waves.min.js"></script>
 
	<!-- Morris Chart -->
	<script src="/static/assets/plugin/chart/morris/morris.min.js"></script>
	<script src="/static/assets/plugin/chart/morris/raphael-min.js"></script>
	<script src="/static/assets/scripts/chart.morris.init.min.js"></script>
 
	<!-- Flot Chart -->
	<script src="/static/assets/plugin/chart/plot/jquery.flot.min.js"></script>
	<script src="/static/assets/plugin/chart/plot/jquery.flot.tooltip.min.js"></script>
	<script src="/static/assets/plugin/chart/plot/jquery.flot.categories.min.js"></script>
	<script src="/static/assets/plugin/chart/plot/jquery.flot.pie.min.js"></script>
	<script src="/static/assets/plugin/chart/plot/jquery.flot.stack.min.js"></script>
	<script src="/static/assets/scripts/chart.flot.init.min.js"></script>
 
	<!-- Sparkline Chart -->
	<script src="/static/assets/plugin/chart/sparkline/jquery.sparkline.min.js"></script>
	<script src="/static/assets/scripts/chart.sparkline.init.min.js"></script>
 
	<!-- FullCalendar -->
	<script src="/static/assets/plugin/moment/moment.js"></script>
	<script src="/static/assets/plugin/fullcalendar/fullcalendar.min.js"></script>
	<script src="/static/assets/scripts/fullcalendar.init.js"></script>
 
	<script src="/static/assets/scripts/main.min.js"></script>
	<script src="/static/assets/scripts/horizontal-menu.min.js"></script>
<script src="/static/assets/echarts.js"></script>
<script>
   var chartDom = document.getElementById('mainA');
var myChart = echarts.init(chartDom);
var option;
 
option = {
  series: [
    {
      type: 'gauge',
      axisLine: {
        lineStyle: {
          width: 30,
          color: [
            [0.3, '#67e0e3'],
            [0.7, '#37a2da'],
            [1, '#fd666d']
          ]
        }
      },
      pointer: {
        itemStyle: {
          color: 'auto'
        }
      },
      axisTick: {
        distance: -30,
        length: 8,
        lineStyle: {
          color: '#fff',
          width: 2
        }
      },
      splitLine: {
        distance: -30,
        length: 30,
        lineStyle: {
          color: '#fff',
          width: 4
        }
      },
      axisLabel: {
        color: 'inherit',
        distance: 40,
        fontSize: 13
      },
      detail: {
        valueAnimation: true,
        formatter: '{value} ',
        color: 'inherit'
      },
      data: [
        {
          value: 70
        }
      ]
    }
  ]
};
// setInterval(function () {
//   myChart.setOption({
//     series: [
//       {
//         data: [
//           {
//             value: +(Math.random() * 100).toFixed(2)
//           }
//         ]
//       }
//     ]
//   });
// }, 2000);
 
option && myChart.setOption(option);
 
 
</script>
</body>
</html>

刷新系统页面，呈现下图结果

接下来继续编写views.py

from django.shortcuts import render,redirect
from myApp.models import *
# Create your views here.
from utils.error import *
from utils.query import *
from utils.getPublicData import *
from utils.getChartData import *
def index(request):
    uname = request.session.get('username')
    userInfo = User.objects.get(username=uname)
    airdataList = list(getairdata())
    dateList = list(set([x[1] for x in airdataList]))
 
    yearList = []
    monthList = []
    dayList = []
    for date in dateList:
        year,month,day = date.split('-')
        yearList.append((year))
        monthList.append((month))
        dayList.append((day))
 
    yearList = sorted(set(yearList))
    monthList = sorted(set(monthList))
    dayList = sorted(set(dayList))
    defaultYear = '2023'
    defaultMonth = '01'
    defaultDay = '01'
    # defaultCity = '北京'
    cityList = list(set(x[0] for x in airdataList))
 
    if request.method == "GET":
        defaultCity = request.GET.get('city') or '北京'
        xBar, yBar, xLine, yLine = getIndexData(defaultCity)
        request.session['defaultCity'] = defaultCity
        currentDate = defaultYear + '-' + defaultMonth + '-' + defaultDay
        currentData = \
        querys('select * from airdata where city = %s and date = %s',[defaultCity,currentDate],'select')[0]
        print(currentData)
 
    if request.method == "POST":
        defaultYear = request.POST.get('defaultYear')
        defaultMonth = request.POST.get('defaultMonth')
        defaultDay = request.POST.get('defaultDay')
        defaultCity = request.session.get('defaultCity')
        currentDate = defaultYear + '-' + defaultMonth + '-' + defaultDay
        currentData = \
        querys('select * from airdata where city = %s and date = %s', [defaultCity, currentDate], 'select')[0]
        print(currentData)
 
    return render(request, 'index.html',{
         'userInfo':userInfo,
         'yearList':yearList,
         'monthList':monthList,
         'dayList':dayList,
         'defaultYear':defaultYear,
         'defaultMonth':defaultMonth,
         'defaultDay':defaultDay,
         'cityList':cityList,
        'defaultCity':defaultCity,
        'currentData':currentData,
        'xBar':xBar,
        'yBar':yBar,
        'xLine':xLine,
        'yLine':yLine,
    })
 
def logOut(request):
    request.session.clear()
    return redirect('login')
 
def login(request):
    if request.method == "GET":
        return render(request, 'login.html', {})
    else:
        uname=request.POST.get('username')
        pwd=request.POST.get('password')
        print(uname,pwd)
        try:
            user = User.objects.get(username=uname,password=pwd)
            request.session['username'] = user.username
            return redirect('index')
        except:
            return errorResponse(request,'用户名或密码错误，请输入正确信息')
        #return render(request, 'login.html', {})
 
def register(request):
    if request.method == 'GET':
        return render(request, 'register.html',{})
    else:
        uname = request.POST.get('username')
        pwd = request.POST.get('password')
        ckPwd = request.POST.get('ckPassword')
        print(uname,pwd,ckPwd)
        try:
            User.objects.get(username=uname)
            return errorResponse(request,"用户名已存在")
        except:
            if not uname or not pwd or not ckPwd:return errorResponse(request,"请输入完整信息")
            if pwd != ckPwd:return errorResponse(request,"两次密码不相符，请确认您的密码")
            User.objects.create(username=uname,password=pwd)
            return redirect('/myApp/login/')
        return render(request, 'register.html', {})

编写getChartData.py

from utils.query import *
from utils.getPublicData import *
from utils.error import *
from myApp.models import *
 
 
def getIndexData(defaultCity):
    avgCityAqiList = list(getavgCityAqi())
    avgCitySixList = list(getavgCitySix())
    realSixList = querys('select * from avgCitySix where city = %s',[defaultCity],'select')[0]
    yLine = list(realSixList[1:])
    yLine = [round(x,1) for x in yLine]
    print(yLine)
    xLine = ['PM2.5','PM10','So2','No2','Co','O3']
    print(avgCitySixList[0])
    xBar = [x[0] for x in avgCityAqiList]
 
    yBar = [round(x[1],0) for x in avgCityAqiList]
    # xLine = [x[0] for x in avgCitySixList]
    # yLine = [round(float(x[1]),1) for x in avgCitySixList]
    print(xBar,yBar,xLine,yLine)
    return xBar,yBar,xLine,yLine
 

编写index.html

<!DOCTYPE html>
<html lang="en">
<head>
	<meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
	<meta http-equiv="X-UA-Compatible" content="IE=edge">
	<meta name="viewport" content="width=device-width, initial-scale=1, user-scalable=no">
	<meta name="description" content="">
	<meta name="author" content="">
 
	<title>空气质量数据可视化分析系统</title>
 
	<!-- Main Styles -->
	<link rel="stylesheet" href="/static/assets/styles/style-horizontal.min.css">
 
	<!-- Material Design Icon -->
	<link rel="stylesheet" href="/static/assets/fonts/material-design/css/materialdesignicons.css">
 
	<!-- mCustomScrollbar -->
	<link rel="stylesheet" href="/static/assets/plugin/mCustomScrollbar/jquery.mCustomScrollbar.min.css">
 
	<!-- Waves Effect -->
	<link rel="stylesheet" href="/static/assets/plugin/waves/waves.min.css">
 
	<!-- Sweet Alert -->
	<link rel="stylesheet" href="/static/assets/plugin/sweet-alert/sweetalert.css">
 
	<!-- Morris Chart -->
	<link rel="stylesheet" href="/static/assets/plugin/chart/morris/morris.css">
 
	<!-- FullCalendar -->
	<link rel="stylesheet" href="/static/assets/plugin/fullcalendar/fullcalendar.min.css">
	<link rel="stylesheet" href="/static//static/assets/plugin/fullcalendar/fullcalendar.print.css" media='print'>
 
</head>
 
<body>
<header class="fixed-header">
	<div class="header-top">
		<div class="container">
			<div class="pull-left">
				<a href="index.html" class="logo"><i class="ico mdi mdi-cube-outline"></i>空气质量数据可视化分析系统</a>
			</div>
			<!-- /.pull-left -->
			<div class="pull-right">
				<div class="ico-item hidden-on-desktop">
					<button type="button" class="menu-button js__menu_button fa fa-bars waves-effect waves-light"></button>
				</div>
				<!-- /.ico-item hidden-on-desktop -->
				<div class="ico-item">
					<a href="#" class="ico-item mdi mdi-magnify js__toggle_open" data-target="#searchform-header"></a>
					<form action="#" id="searchform-header" class="searchform js__toggle"><input type="search" placeholder="Search..." class="input-search"><button class="mdi mdi-magnify button-search" type="submit"></button></form>
					<!-- /.searchform -->
				</div>
				<!-- /.ico-item -->
				<div class="ico-item">
					<a href="#" class="ico-item mdi mdi-email notice-alarm js__toggle_open" data-target="#message-popup"></a>
					<div id="message-popup" class="notice-popup js__toggle" data-space="55">
						<h2 class="popup-title">Recent Messages<a href="#" class="pull-right text-danger">New message</a></h2>
						<!-- /.popup-title -->
						<div class="content">
							<ul class="notice-list">
								<li>
									<a href="#">
										<span class="avatar"><img src="/static/assets/images/avatar-sm-1.jpg" alt=""></span>
										<span class="name">John Doe</span>
										<span class="desc">Amet odio neque nobis consequuntur consequatur a quae, impedit facere repellat voluptates.</span>
										<span class="time">10 min</span>
									</a>
								</li>
								<li>
									<a href="#">
										<span class="avatar"><img src="/static/assets/images/avatar-sm-3.jpg" alt=""></span>
										<span class="name">Harry Halen</span>
										<span class="desc">Amet odio neque nobis consequuntur consequatur a quae, impedit facere repellat voluptates.</span>
										<span class="time">15 min</span>
									</a>
								</li>
								<li>
									<a href="#">
										<span class="avatar"><img src="/static/assets/images/avatar-sm-4.jpg" alt=""></span>
										<span class="name">Thomas Taylor</span>
										<span class="desc">Amet odio neque nobis consequuntur consequatur a quae, impedit facere repellat voluptates.</span>
										<span class="time">30 min</span>
									</a>
								</li>
								<li>
									<a href="#">
										<span class="avatar"><img src="/static/assets/images/avatar-1.jpg" alt=""></span>
										<span class="name">Jennifer</span>
										<span class="desc">Amet odio neque nobis consequuntur consequatur a quae, impedit facere repellat voluptates.</span>
										<span class="time">45 min</span>
									</a>
								</li>
								<li>
									<a href="#">
										<span class="avatar"><img src="/static/assets/images/avatar-sm-5.jpg" alt=""></span>
										<span class="name">Helen Candy</span>
										<span class="desc">Amet odio neque nobis consequuntur consequatur a quae, impedit facere repellat voluptates.</span>
										<span class="time">45 min</span>
									</a>
								</li>
								<li>
									<a href="#">
										<span class="avatar"><img src="/static/assets/images/avatar-2.jpg" alt=""></span>
										<span class="name">Anna Cavan</span>
										<span class="desc">Amet odio neque nobis consequuntur consequatur a quae, impedit facere repellat voluptates.</span>
										<span class="time">1 hour ago</span>
									</a>
								</li>
								<li>
									<a href="#">
										<span class="avatar bg-success"><i class="fa fa-user"></i></span>
										<span class="name">Jenny Betty</span>
										<span class="desc">Amet odio neque nobis consequuntur consequatur a quae, impedit facere repellat voluptates.</span>
										<span class="time">1 day ago</span>
									</a>
								</li>
								<li>
									<a href="#">
										<span class="avatar"><img src="/static/assets/images/avatar-5.jpg" alt=""></span>
										<span class="name">Denise Peterson</span>
										<span class="desc">Amet odio neque nobis consequuntur consequatur a quae, impedit facere repellat voluptates.</span>
										<span class="time">1 year ago</span>
									</a>
								</li>
							</ul>
							<!-- /.notice-list -->
							<a href="#" class="notice-read-more">See more messages <i class="fa fa-angle-down"></i></a>
						</div>
						<!-- /.content -->
					</div>
					<!-- /#message-popup -->
				</div>
				<!-- /.ico-item -->
				<div class="ico-item">
					<a href="#" class="ico-item mdi mdi-bell notice-alarm js__toggle_open" data-target="#notification-popup"></a>
					<div id="notification-popup" class="notice-popup js__toggle" data-space="55">
						<h2 class="popup-title">Your Notifications</h2>
						<!-- /.popup-title -->
						<div class="content">
							<ul class="notice-list">
								<li>
									<a href="#">
										<span class="avatar"><img src="/static/assets/images/avatar-sm-1.jpg" alt=""></span>
										<span class="name">John Doe</span>
										<span class="desc">Like your post: “Contact Form 7 Multi-Step”</span>
										<span class="time">10 min</span>
									</a>
								</li>
								<li>
									<a href="#">
										<span class="avatar"><img src="/static/assets/images/avatar-sm-2.jpg" alt=""></span>
										<span class="name">Anna William</span>
										<span class="desc">Like your post: “Facebook Messenger”</span>
										<span class="time">15 min</span>
									</a>
								</li>
								<li>
									<a href="#">
										<span class="avatar bg-warning"><i class="fa fa-warning"></i></span>
										<span class="name">Update Status</span>
										<span class="desc">Failed to get available update data. To ensure the please contact us.</span>
										<span class="time">30 min</span>
									</a>
								</li>
								<li>
									<a href="#">
										<span class="avatar"><img src="/static/assets/images/avatar-1.jpg" alt=""></span>
										<span class="name">Jennifer</span>
										<span class="desc">Like your post: “Contact Form 7 Multi-Step”</span>
										<span class="time">45 min</span>
									</a>
								</li>
								<li>
									<a href="#">
										<span class="avatar"><img src="/static/assets/images/avatar-sm-6.jpg" alt=""></span>
										<span class="name">Michael Zenaty</span>
										<span class="desc">Like your post: “Contact Form 7 Multi-Step”</span>
										<span class="time">50 min</span>
									</a>
								</li>
								<li>
									<a href="#">
										<span class="avatar"><img src="/static/assets/images/avatar-sm-4.jpg" alt=""></span>
										<span class="name">Simon</span>
										<span class="desc">Like your post: “Facebook Messenger”</span>
										<span class="time">1 hour</span>
									</a>
								</li>
								<li>
									<a href="#">
										<span class="avatar bg-violet"><i class="fa fa-flag"></i></span>
										<span class="name">Account Contact Change</span>
										<span class="desc">A contact detail associated with your account has been changed.</span>
										<span class="time">2 hours</span>
									</a>
								</li>
								<li>
									<a href="#">
										<span class="avatar"><img src="/static/assets/images/avatar-sm-7.jpg" alt=""></span>
										<span class="name">Helen 987</span>
										<span class="desc">Like your post: “Facebook Messenger”</span>
										<span class="time">Yesterday</span>
									</a>
								</li>
								<li>
									<a href="#">
										<span class="avatar"><img src="/static/assets/images/avatar-2.jpg" alt=""></span>
										<span class="name">Denise Jenny</span>
										<span class="desc">Like your post: “Contact Form 7 Multi-Step”</span>
										<span class="time">Oct, 28</span>
									</a>
								</li>
								<li>
									<a href="#">
										<span class="avatar"><img src="/static/assets/images/avatar-sm-8.jpg" alt=""></span>
										<span class="name">Thomas William</span>
										<span class="desc">Like your post: “Facebook Messenger”</span>
										<span class="time">Oct, 27</span>
									</a>
								</li>
							</ul>
							<!-- /.notice-list -->
							<a href="#" class="notice-read-more">See more messages <i class="fa fa-angle-down"></i></a>
						</div>
						<!-- /.content -->
					</div>
					<!-- /#notification-popup -->
				</div>
				<!-- /.ico-item -->
				<div class="ico-item">
					<a href="#" class="ico-item mdi mdi-account js__toggle_open" data-target="#user-status"></a>
					<div id="user-status" class="user-status js__toggle">
						<a href="#" class="avatar"><img src="/static/assets/images/avatar.png" alt=""><span class="status online"></span></a>
						<h5 class="name"><a href="profile.html">{{ userInfo.username }}</a></h5>
						<h5 class="position">用户</h5>
						<!-- /.name -->
						<div class="control-items">
<!--							<div class="control-item"><a href="#" title="Settings"><i class="fa fa-gear"></i></a></div>-->
							<div class="control-item"><a href="/myApp/logOut" class="" title="Log out"><i class="fa fa-power-off">退出登录</i></a></div>
						</div>
						<!-- /.control-items -->
					</div>
					<!-- /#user-status -->
				</div>
				<!-- /.ico-item -->
			</div>
			<!-- /.pull-right -->
		</div>
		<!-- /.container -->
	</div>
	<!-- /.header-top -->
	<nav class="nav-horizontal">
		<button type="button" class="menu-close hidden-on-desktop js__close_menu"><i class="fa fa-times"></i><span>CLOSE</span></button>
		<div class="container">
 
			<ul class="menu">
					<li class="current">
						<a href="index.html"><i class="ico mdi mdi-home"></i><span>首页</span></a>
					</li>
					<li class="has-sub">
						<a href="#"><i class="ico mdi mdi-human"></i><span>个人信息</span></a>
						<ul class="sub-menu mega mega-3">
							<li class="has-sub">
								<h3 class="title">Components</h3>
								<!-- .title -->
								<ul class="child-list">
									<li><a href="ui-buttons.html">Buttons</a></li>
									<li><a href="ui-cards.html">Cards</a></li>
									<li><a href="ui-checkbox-radio.html">Checkboxs-Radios</a></li>
									<li><a href="ui-draggable-cards.html">Draggable Cards</a></li>
									<li><a href="ui-components.html">UI Components</a></li>
								</ul>
								<!-- /.child-list -->
							</li>
							<li class="has-sub">
								<h3 class="title">Icons</h3>
								<!-- .title -->
								<ul class="child-list">
									<li><a href="icons-font-awesome-icons.html">Font Awesome</a></li>
									<li><a href="icons-fontello.html">Fontello</a></li>
									<li><a href="icons-material-icons.html">Material Design Icons</a></li>
									<li><a href="icons-material-design-iconic.html">Material Design Iconic Font</a></li>
									<li><a href="icons-themify-icons.html">Themify Icons</a></li>
								</ul>
								<!-- /.child-list -->
							</li>
							<li class="has-sub">
								<h3 class="title">Others</h3>
								<!-- .title -->
								<ul class="child-list">
									<li><a href="ui-modals.html">Modals</a></li>
									<li><a href="ui-range-slider.html">Range Slider</a></li>
									<li><a href="ui-sweetalert.html">Sweet Alert</a></li>
									<li><a href="ui-treeview.html">Tree view</a></li>
									<li><a href="ui-typography.html">Typography</a></li>
								</ul>
								<!-- /.child-list -->
							</li>
						</ul>
						<!-- /.sub-menu mega -->
					</li>
					<li class="has-sub">
						<a href="#"><i class="ico mdi mdi-database"></i><span>数据总览</span></a>
						<ul class="sub-menu single">
							<li><a href="chart-3d.html">3D Charts</a></li>
							<li><a href="chart-chartist.html">Chartist Charts</a></li>
							<li><a href="chart-chartjs.html">Chartjs Chart</a></li>
							<li><a href="chart-dynamic.html">Dynamic Chart</a></li>
							<li><a href="chart-flot.html">Flot Chart</a></li>
							<li><a href="chart-knob.html">Knob Chart</a></li>
							<li><a href="chart-morris.html">Morris Chart</a></li>
							<li><a href="chart-sparkline.html">Sparkline Chart</a></li>
							<li><a href="chart-other.html">Other Chart</a></li>
						</ul>
						<!-- /.sub-menu single -->
					</li>
					<li class="has-sub">
						<a href="#"><i class="ico mdi mdi-chart-line"></i><span>空气质量年度分析</span></a>
						<ul class="sub-menu single">
							<li><a href="form-elements.html">General Elements</a></li>
							<li><a href="form-advanced.html">Advanced Form</a></li>
							<li><a href="form-fileupload.html">Form Uploads</a></li>
							<li><a href="form-validation.html">Form Validation</a></li>
							<li><a href="form-wizard.html">Form Wizard</a></li>
							<li><a href="form-wysiwig.html">Wysiwig Editors</a></li>
							<li><a href="form-xeditable.html">X-editable</a></li>
						</ul>
						<!-- /.sub-menu single -->
					</li>
					<li>
						<a href="inbox.html"><i class="ico mdi mdi-chart-bar"></i><span>月度分析</span></a>
					</li>
					<li class="has-sub">
						<a href="#"><i class="ico mdi mdi-air-conditioner"></i><span>气体分析</span></a>
						<ul class="sub-menu single">
							<li><a href="page-starter.html">Starter Page</a></li>
							<li><a href="login.html">Login</a></li>
							<li><a href="page-register.html">Register</a></li>
							<li><a href="page-recoverpw.html">Recover Password</a></li>
							<li><a href="page-lock-screen.html">Lock Screen</a></li>
							<li><a href="page-confirm-mail.html">Confirm Mail</a></li>
							<li><a href="page-404.html">Error 404</a></li>
							<li><a href="page-500.html">Error 500</a></li>
						</ul>
						<!-- /.sub-menu single -->
					</li>
					<li class="has-sub">
						<a href="#"><i class="ico mdi mdi-map"></i><span>城市分布</span></a>
						<ul class="sub-menu single">
							<li><a href="extras-contact.html">Contact list</a></li>
							<li><a href="extras-email-template.html">Email template</a></li>
							<li><a href="extras-faq.html">FAQ</a></li>
							<li><a href="extras-gallery.html">Gallery</a></li>
							<li><a href="extras-invoice.html">Invoice</a></li>
							<li><a href="extras-maps.html">Maps</a></li>
							<li><a href="extras-pricing.html">Pricing</a></li>
							<li><a href="extras-projects.html">Projects</a></li>
							<li><a href="extras-taskboard.html">Taskboard</a></li>
							<li><a href="extras-timeline.html">Timeline</a></li>
							<li><a href="extras-tour.html">Tour</a></li>
						</ul>
						<!-- /.sub-menu single -->
					</li>
					<li class="has-sub">
						<a href="#"><i class="ico mdi mdi-cloud"></i><span>数据词云图</span></a>
						<ul class="sub-menu mega mega-2">
							<li class="has-sub">
								<h3 class="title">Tables</h3>
								<!-- .title -->
								<ul class="child-list">
									<li><a href="tables-basic.html">Basic Tables</a></li>
									<li><a href="tables-datatable.html">Data Tables</a></li>
									<li><a href="tables-responsive.html">Responsive Tables</a></li>
									<li><a href="tables-editable.html">Editable Tables</a></li>
								</ul>
								<!-- /.child-list -->
							</li>
							<li class="has-sub">
								<h3 class="title">Others</h3>
								<!-- .title -->
								<ul class="child-list">
									<li><a href="calendar.html">Calendar</a></li>
									<li><a href="ui-notification.html">Notification</a></li>
									<li><a href="profile.html">Profile</a></li>
									<li><a href="widgets.html">Widgets</a></li>
								</ul>
								<!-- /.child-list -->
							</li>
						</ul>
						<!-- /.sub-menu mega -->
					</li>
                    <li>
						<a href="inbox.html"><i class="ico mdi mdi-star"></i><span>空气质量预测</span></a>
					</li>
			</ul>
			<!-- /.menu -->
		</div>
		<!-- /.container -->
	</nav>
	<!-- /.nav-horizontal -->
</header>
<!-- /.fixed-header -->
 
<div id="wrapper">
	<div class="main-content container">
		<div class="row small-spacing">
<!--			<div class="col-xs-12">-->
				<div class="box-content">
					<h4 class="box-title">Activity</h4>
					<!-- /.box-title -->
					<div class="dropdown js__drop_down">
						<a href="#" class="dropdown-icon glyphicon glyphicon-option-vertical js__drop_down_button"></a>
						<ul class="sub-menu">
							<li><a href="#">Action</a></li>
							<li><a href="#">Another action</a></li>
							<li><a href="#">Something else there</a></li>
							<li class="split"></li>
							<li><a href="#">Separated link</a></li>
						</ul>
						<!-- /.sub-menu -->
					</div>
					<!-- /.dropdown js__dropdown -->
					<div id="real-time-flot-chart" class="flot-chart" style="height: 320px"></div>
					<!-- /#flot-chart-1.flot-chart -->
				</div>
				<!-- /.box-content -->
			</div>
			<!-- /.col-xs-12 -->
 
			<div class="col-lg-5 col-xs-12">
                 <div class="col-lg-12 ol-xs-12">
                    <div class="box-content card white">
                        <h4 class="box-title">日期选择</h4>
                        <!-- /.box-title -->
                        <div class="card-content">
                            <form action="/myApp/index/" method="POST">
                                <div class="row small-spacing">
                                    <div class="col-xs-3">
                                        <select class="form-control" name="defaultYear">
                                            {% for i in yearList %}
                                                {% if i == defaultYear %}
                                                 <option value="{{ i }}" selected>{{ i }}</option>
                                                {% else %}
                                                 <option value="{{ i }}" >{{ i }}</option>
                                                {% endif %}
                                                {% endfor %}
                                        </select>
                                    </div>
                                    <div class="col-xs-3">
                                        <select class="form-control" name="defaultMonth">
                                           {% for i in monthList %}
                                                {% if i == defaultMonth %}
                                                 <option value="{{ i }}" selected>{{ i }}</option>
                                                {% else %}
                                                 <option value="{{ i }}" >{{ i }}</option>
                                                {% endif %}
                                                {% endfor %}
                                        </select>
                                    </div>
                                     <div class="col-xs-3">
                                        <select class="form-control" name="defaultDay">
                                            {% for i in dayList %}
                                                {% if i == defaultDay %}
                                                 <option value="{{ i }}" selected>{{ i }}</option>
                                                {% else %}
                                                 <option value="{{ i }}" >{{ i }}</option>
                                                {% endif %}
                                                {% endfor %}
                                        </select>
                                    </div>
                                    <div class="col-xs-3">
                                        <button type="submit" class="btn btn-primary waves-effect waves-light">查看</button>
                                    </div>
                                </div>
                            </form>
                            <!-- /.input-group -->
 
                            <!-- /.input-group -->
                        </div>
                        <!-- /.card-content -->
                    </div>
                    <!-- /.box-content card white -->
                </div>
 
				<div class="col-lg-12 col-xs-12">
                    <div class="box-content">
					<h4 class="box-title text-info">{{ defaultCity}}</h4>
					<!-- /.box-title -->
 
					<!-- /.dropdown js__dropdown -->
					<div class="content widget-stat">
<!--						<div id="traffic-sparkline-chart-1" class="left-content margin-top-15"></div>-->
                        <div style="display: flex">
                            <div style="flex: 10">
                                <div id="mainA" style="width: 100%;height: 300px"></div>
						<!-- /#traffic-sparkline-chart-1 -->
                                <div>
                                    <p class="text text-success">
                                            <span style="margin-right: 50px">PM2.5:{{ currentData.5 }}</span>
                                            <span style="margin-right: 50px">PM10:{{ currentData.6 }}</span>
                                            <span>SO2:{{ currentData.7 }}</span>
                                        </p>
                                        <p class="text text-success">
                                            <span style="margin-right: 80px">NO2:{{ currentData.8 }}</span>
                                            <span style="margin-right: 50px">CO:{{ currentData.9 }}</span>
                                            <span>O3:{{ currentData.10 }}</span>
                                        </p>
                                </div>
                            </div>
                            <div>
                                <div class="">
							<h2 class="counter text-info">{{ currentData.3 }}</h2>
							<!-- /.counter -->
							<p class="text text-info">空气质量AQI</p>
                                    <p class="text text-justify">0-50：优</p>
                                    <p class="text text-justify"> 51-100：良</p>
                                    <p class="text text-justify"> 101-150：轻度污染</p>
                                    <p class="text text-justify"> 151-200：中度污染</p>
                                    <p class="text text-justify"> 201-300：重度污染</p>
                                    <p class="text text-justify"> 大于300：严重污染‌</p>
 
							<!-- /.text -->
						</div>
                            </div>
                        </div>
						<!-- .right-content -->
					</div>
					<!-- /.content widget-stat -->
				</div>
                 <ul class="list-inline">
                     {% for i in cityList %}
                         {% if i == defaultCity %}
                     <li class="margin-bottom-10"><a href="/myApp/index?city={{ i }}" class="btn btn-primary btn-rounded btn-bordered waves-effect waves-light">{{ i }}</a></li>
                      {% else %}
                     <li class="margin-bottom-10"><a type="button" href="/myApp/index?city={{ i }}" class="btn btn-rounded btn-bordered waves-effect waves-light">{{ i }}</a></li>
                      {% endif %}
                     {% endfor %}
 
                    </ul>
                    </div>
				<!-- /.box-content -->
			</div>
			<!-- /.col-lg-4 col-xs-12 -->
 
			<div class="col-lg-7 col-xs-12">
				<div class="col-lg-12 col col-xs-12">
                    <div class="box-content">
					<h4 class="box-title text-info">城市AQI均值分析</h4>
					<!-- /.box-title -->
 
					<!-- /.dropdown js__dropdown -->
					<div class="content widget-stat">
                        <div id="mainB" style="width: 100%;height: 300px"></div>
<!--						<div id="traffic-sparkline-chart-2" class="left-content margin-top-10"></div>-->
<!--						&lt;!&ndash; /#traffic-sparkline-chart-2 &ndash;&gt;-->
<!--						<div class="right-content">-->
<!--							<h2 class="counter text-success">36%</h2>-->
<!--							&lt;!&ndash; /.counter &ndash;&gt;-->
<!--							<p class="text text-success">Some text here</p>-->
<!--							&lt;!&ndash; /.text &ndash;&gt;-->
<!--						</div>-->
						<!-- .right-content -->
					</div>
					<!-- /.content widget-stat -->
				</div>
                </div>
                <div class="col-lg-12 col col-xs-12">
                    <div class="box-content">
					<h4 class="box-title text-info">{{ defaultCity }}空气质量各气体分析</h4>
					<!-- /.box-title -->
 
					<!-- /.dropdown js__dropdown -->
					<div class="content widget-stat">
                        <div id="mainC" style="width: 100%;height: 300px"></div>
<!--						<div id="traffic-sparkline-chart-2" class="left-content margin-top-10"></div>-->
<!--						&lt;!&ndash; /#traffic-sparkline-chart-2 &ndash;&gt;-->
<!--						<div class="right-content">-->
<!--							<h2 class="counter text-success">36%</h2>-->
<!--							&lt;!&ndash; /.counter &ndash;&gt;-->
<!--							<p class="text text-success">Some text here</p>-->
<!--							&lt;!&ndash; /.text &ndash;&gt;-->
<!--						</div>-->
						<!-- .right-content -->
					</div>
					<!-- /.content widget-stat -->
				</div>
                </div>
				<!-- /.box-content -->
			</div>
			<!-- /.col-lg-4 col-xs-12 -->
 
 
			<!-- /.col-lg-4 col-xs-12 -->
 
			<div class="col-lg-6 col-xs-12">
				<div class="box-content">
					<h4 class="box-title">Visitor Analytics</h4>
					<!-- /.box-title -->
					<div class="dropdown js__drop_down">
						<a href="#" class="dropdown-icon glyphicon glyphicon-option-vertical js__drop_down_button"></a>
						<ul class="sub-menu">
							<li><a href="#">Action</a></li>
							<li><a href="#">Another action</a></li>
							<li><a href="#">Something else there</a></li>
							<li class="split"></li>
							<li><a href="#">Separated link</a></li>
						</ul>
						<!-- /.sub-menu -->
					</div>
					<!-- /.dropdown js__dropdown -->
					<div id="bar-morris-chart" class="morris-chart" style="height: 240px"></div>
					<div class="text-center">
						<ul class="list-inline morris-chart-detail-list">
							<li><i class="fa fa-circle"></i>Series A</li>
							<li><i class="fa fa-circle"></i>Series B</li>
							<li><i class="fa fa-circle"></i>Series C</li>
						</ul>
					</div>
					<!-- /#bar-morris-chart.morris-chart -->
				</div>
				<!-- /.box-content -->
			</div>
			<!-- /.col-lg-6 col-xs-12 -->
 
			<div class="col-lg-6 col-xs-12">
				<div class="box-content">
					<h4 class="box-title">Memory usage</h4>
					<!-- /.box-title -->
					<div class="dropdown js__drop_down">
						<a href="#" class="dropdown-icon glyphicon glyphicon-option-vertical js__drop_down_button"></a>
						<ul class="sub-menu">
							<li><a href="#">Action</a></li>
							<li><a href="#">Another action</a></li>
							<li><a href="#">Something else there</a></li>
							<li class="split"></li>
							<li><a href="#">Separated link</a></li>
						</ul>
						<!-- /.sub-menu -->
					</div>
					<!-- /.dropdown js__dropdown -->
					<div id="donut-morris-chart" class="morris-chart" style="height: 240px"></div>
					<div class="text-center">
						<ul class="list-inline morris-chart-detail-list">
							<li><i class="fa fa-circle"></i>Series A</li>
							<li><i class="fa fa-circle"></i>Series B</li>
							<li><i class="fa fa-circle"></i>Series C</li>
						</ul>
					</div>
					<!-- /#donut-morris-chart.morris-chart -->
				</div>
				<!-- /.box-content -->
			</div>
			<!-- /.col-lg-6 col-xs-12 -->
		</div>
		<!-- /.row -->
 
		<div class="row small-spacing">
			<div class="col-lg-3 col-md-6 col-xs-12">
				<div class="box-content bg-success text-white">
					<div class="statistics-box with-icon">
						<i class="ico small fa fa-diamond"></i>
						<p class="text text-white">SUCCESS</p>
						<h2 class="counter">72943</h2>
					</div>
				</div>
				<!-- /.box-content -->
			</div>
			<!-- /.col-lg-3 col-md-6 col-xs-12 -->
			<div class="col-lg-3 col-md-6 col-xs-12">
				<div class="box-content bg-info text-white">
					<div class="statistics-box with-icon">
						<i class="ico small fa fa-download"></i>
						<p class="text text-white">DOWNLOAD</p>
						<h2 class="counter">6382</h2>
					</div>
				</div>
				<!-- /.box-content -->
			</div>
			<!-- /.col-lg-3 col-md-6 col-xs-12 -->
			<div class="col-lg-3 col-md-6 col-xs-12">
				<div class="box-content bg-danger text-white">
					<div class="statistics-box with-icon">
						<i class="ico small fa fa-bug"></i>
						<p class="text text-white">FIXED BUG</p>
						<h2 class="counter">12564</h2>
					</div>
				</div>
				<!-- /.box-content -->
			</div>
			<!-- /.col-lg-3 col-md-6 col-xs-12 -->
			<div class="col-lg-3 col-md-6 col-xs-12">
				<div class="box-content bg-warning text-white">
					<div class="statistics-box with-icon">
						<i class="ico small fa fa-usd"></i>
						<p class="text text-white">SALES</p>
						<h2 class="counter">2,637</h2>
					</div>
				</div>
				<!-- /.box-content -->
			</div>
			<!-- /.col-lg-3 col-md-6 col-xs-12 -->
		</div>
		<!-- .row -->
 
		<div class="row small-spacing">
			<div class="col-lg-6 col-xs-12">
				<div class="box-content">
					<div id="calendar-widget"></div>
				</div>
				<!-- /.box-content -->
			</div>
			<!-- /.col-lg-6 col-xs-12 -->
			<div class="col-lg-6 col-xs-12">
				<div class="box-content">
					<h4 class="box-title">Purchases</h4>
					<!-- /.box-title -->
					<div class="dropdown js__drop_down">
						<a href="#" class="dropdown-icon glyphicon glyphicon-option-vertical js__drop_down_button"></a>
						<ul class="sub-menu">
							<li><a href="#">Product</a></li>
							<li><a href="#">Another action</a></li>
							<li><a href="#">Something else there</a></li>
							<li class="split"></li>
							<li><a href="#">Separated link</a></li>
						</ul>
						<!-- /.sub-menu -->
					</div>
					<!-- /.dropdown js__dropdown -->
					<div class="table-responsive table-purchases">
						<table class="table table-striped margin-bottom-10">
							<thead>
								<tr>
									<th style="width:40%;">Product</th>
									<th>Price</th>
									<th>Date</th>
									<th>State</th>
									<th style="width:5%;"></th>
								</tr>
							</thead>
							<tbody>
								<tr>
									<td>Amaza Themes</td>
									<td>$71</td>
									<td>Nov 12,2016</td>
									<td class="text-success">Completed</td>
									<td><a href="#"><i class="fa fa-plus-circle"></i></a></td>
								</tr>
								<tr>
									<td>Macbook</td>
									<td>$142</td>
									<td>Nov 10,2016</td>
									<td class="text-danger">Cancelled</td>
									<td><a href="#"><i class="fa fa-plus-circle"></i></a></td>
								</tr>
								<tr>
									<td>Samsung TV</td>
									<td>$200</td>
									<td>Nov 01,2016</td>
									<td class="text-warning">Pending</td>
									<td><a href="#"><i class="fa fa-plus-circle"></i></a></td>
								</tr>
								<tr>
									<td>Ninja Admin</td>
									<td>$200</td>
									<td>Oct 28,2016</td>
									<td class="text-warning">Pending</td>
									<td><a href="#"><i class="fa fa-plus-circle"></i></a></td>
								</tr>
								<tr>
									<td>Galaxy Note 5</td>
									<td>$200</td>
									<td>Oct 28,2016</td>
									<td class="text-success">Completed</td>
									<td><a href="#"><i class="fa fa-plus-circle"></i></a></td>
								</tr>
								<tr>
									<td>CleanUp Themes</td>
									<td>$71</td>
									<td>Oct 22,2016</td>
									<td class="text-success">Completed</td>
									<td><a href="#"><i class="fa fa-plus-circle"></i></a></td>
								</tr>
								<tr>
									<td>Facebook WP Plugin</td>
									<td>$10</td>
									<td>Oct 15,2016</td>
									<td class="text-success">Completed</td>
									<td><a href="#"><i class="fa fa-plus-circle"></i></a></td>
								</tr>
								<tr>
									<td>Iphone 7</td>
									<td>$100</td>
									<td>Oct 12,2016</td>
									<td class="text-warning">Pending</td>
									<td><a href="#"><i class="fa fa-plus-circle"></i></a></td>
								</tr>
								<tr>
									<td>Nova House</td>
									<td>$100</td>
									<td>Oct 12,2016</td>
									<td class="text-warning">Pending</td>
									<td><a href="#"><i class="fa fa-plus-circle"></i></a></td>
								</tr>
								<tr>
									<td>Repair Cars</td>
									<td>$35</td>
									<td>Oct 12,2016</td>
									<td class="text-warning">Pending</td>
									<td><a href="#"><i class="fa fa-plus-circle"></i></a></td>
								</tr>
							</tbody>
						</table>
						<!-- /.table -->
					</div>
					<!-- /.table-responsive -->
				</div>
				<!-- /.box-content -->
			</div>
			<!-- /.col-lg-6 col-xs-12 -->
		</div>
		<!-- /.row -->
		<footer class="footer">
			<ul class="list-inline">
				<li>Copyright &copy; 2021.Company name All rights reserved.<a target="_blank" href="https://sc.chinaz.com/moban/">&#x7F51;&#x9875;&#x6A21;&#x677F;</a></li>
				<li><a href="#">Privacy</a></li>
				<li><a href="#">Terms</a></li>
				<li><a href="#">Help</a></li>
			</ul>
		</footer>
	</div>
	<!-- /.main-content -->
</div><!--/#wrapper -->
	<!-- HTML5 shim and Respond.js for IE8 support of HTML5 elements and media queries -->
	<!--[if lt IE 9]>
		<script src="/static/assets/script/html5shiv.min.js"></script>
		<script src="/static/assets/script/respond.min.js"></script>
	<![endif]-->
	<!--
	================================================== -->
	<!-- Placed at the end of the document so the pages load faster -->
	<script src="/static/assets/scripts/jquery.min.js"></script>
	<script src="/static/assets/scripts/modernizr.min.js"></script>
	<script src="/static/assets/plugin/bootstrap/js/bootstrap.min.js"></script>
	<script src="/static/assets/plugin/mCustomScrollbar/jquery.mCustomScrollbar.concat.min.js"></script>
	<script src="/static/assets/plugin/nprogress/nprogress.js"></script>
	<script src="/static/assets/plugin/sweet-alert/sweetalert.min.js"></script>
	<script src="/static/assets/plugin/waves/waves.min.js"></script>
 
	<!-- Morris Chart -->
	<script src="/static/assets/plugin/chart/morris/morris.min.js"></script>
	<script src="/static/assets/plugin/chart/morris/raphael-min.js"></script>
	<script src="/static/assets/scripts/chart.morris.init.min.js"></script>
 
	<!-- Flot Chart -->
	<script src="/static/assets/plugin/chart/plot/jquery.flot.min.js"></script>
	<script src="/static/assets/plugin/chart/plot/jquery.flot.tooltip.min.js"></script>
	<script src="/static/assets/plugin/chart/plot/jquery.flot.categories.min.js"></script>
	<script src="/static/assets/plugin/chart/plot/jquery.flot.pie.min.js"></script>
	<script src="/static/assets/plugin/chart/plot/jquery.flot.stack.min.js"></script>
	<script src="/static/assets/scripts/chart.flot.init.min.js"></script>
 
	<!-- Sparkline Chart -->
	<script src="/static/assets/plugin/chart/sparkline/jquery.sparkline.min.js"></script>
	<script src="/static/assets/scripts/chart.sparkline.init.min.js"></script>
 
	<!-- FullCalendar -->
	<script src="/static/assets/plugin/moment/moment.js"></script>
	<script src="/static/assets/plugin/fullcalendar/fullcalendar.min.js"></script>
	<script src="/static/assets/scripts/fullcalendar.init.js"></script>
 
	<script src="/static/assets/scripts/main.min.js"></script>
	<script src="/static/assets/scripts/horizontal-menu.min.js"></script>
<script src="/static/assets/echarts.js"></script>
<script>
   var chartDom = document.getElementById('mainB');
var myChart = echarts.init(chartDom);
var option;
// 绘制左侧面
const CubeLeft = echarts.graphic.extendShape({
    shape: {
        x: 0,
        y: 0,
    },
    buildPath: function (ctx, shape) {
        // 会canvas的应该都能看得懂，shape是从custom传入的
        const xAxisPoint = shape.xAxisPoint;
        const c0 = [shape.x + 2, shape.y];
        const c1 = [shape.x - 13, shape.y - 1];
        const c2 = [xAxisPoint[0] - 13, xAxisPoint[1] - 3];
        const c3 = [xAxisPoint[0] + 2, xAxisPoint[1]];
        ctx.moveTo(c0[0], c0[1]).lineTo(c1[0], c1[1]).lineTo(c2[0], c2[1]).lineTo(c3[0], c3[1]).closePath();
    },
});
// 绘制右侧面
const CubeRight = echarts.graphic.extendShape({
    shape: {
        x: 0,
        y: 0,
    },
    buildPath: function (ctx, shape) {
        const xAxisPoint = shape.xAxisPoint;
        const c1 = [shape.x + 2, shape.y];
        const c2 = [xAxisPoint[0] + 2, xAxisPoint[1]];
        const c3 = [xAxisPoint[0] + 15, xAxisPoint[1] - 5];
        const c4 = [shape.x + 15, shape.y - 5];
        ctx.moveTo(c1[0], c1[1]).lineTo(c2[0], c2[1]).lineTo(c3[0], c3[1]).lineTo(c4[0], c4[1]).closePath();
    },
});
// 绘制顶面
const CubeTop = echarts.graphic.extendShape({
    shape: {
        x: 0,
        y: 0,
    },
    buildPath: function (ctx, shape) {
        const c1 = [shape.x + 2, shape.y+3];
        const c2 = [shape.x + 15, shape.y - 5]; //右点
        const c3 = [shape.x - 0, shape.y - 10];
        const c4 = [shape.x - 13, shape.y - 1];
        ctx.moveTo(c1[0], c1[1]).lineTo(c2[0], c2[1]).lineTo(c3[0], c3[1]).lineTo(c4[0], c4[1]).closePath();
    },
});
// 注册三个面图形
echarts.graphic.registerShape('CubeLeft', CubeLeft);
echarts.graphic.registerShape('CubeRight', CubeRight);
echarts.graphic.registerShape('CubeTop', CubeTop);
const VALUE = {{ yBar }};
option = {
    title: {
        text: '地区分布',
        textStyle: {
            color: '#7ebaf2',
            fontWeight: '800',
            fontSize: 12,
        },
        left: '18px',
        top: '1%',
    },
    tooltip: {
        trigger: 'axis',
        axisPointer: {
            type: 'shadow',
        },
        formatter: function (params, ticket, callback) {
            const item = params[1];
            return item.name + ' : ' + item.value;
        },
    },
    grid: {
        left: '5%',
        right: '5%',
        top: '12%',
        bottom: '5%',
        containLabel: true,
    },
    xAxis: {
        type: 'category',
        data: {{ xBar | safe }},
        axisLine: {
            show: true,
            lineStyle: {
                color: '#7ebaf2',
            },
        },
        axisTick: {
            show: false,
            length: 9,
            alignWithLabel: true,
            lineStyle: {
                color: '#7DFFFD',
            },
        },
        axisLabel: {
            fontSize: 12,
        },
    },
    yAxis: {
        type: 'value',
        min: 0,
        axisLine: {
            show: true,
            lineStyle: {
                color: '#7ebaf2',
            },
        },
        splitLine: {
            show: false,
        },
 
        axisTick: {
            show: false,
        },
        axisLabel: {
            fontSize: 12,
        },
        boundaryGap: ['20%', '20%'],
    },
    series: [
        {
            type: 'custom',
            renderItem: (params, api) => {
                let cubeLeftStyle = '';
                let cubeRightStyle = '';
                let cubeTopStyle = '';
 // 颜色
          cubeLeftStyle = new echarts.graphic.LinearGradient(0, 0, 0, 1, [
            {
              offset: 0,
              color: 'rgba(62,255,255,1)',
            },
            {
              offset: 1,
              color: 'rgba(0,126,191,1)',
            },
          ])
          cubeRightStyle = new echarts.graphic.LinearGradient(0, 0, 0, 1, [
            {
              offset: 0,
              color: 'rgba(23,176,255,1)',
            },
            {
              offset: 1,
              color: 'rgba(0,138,255,0.3)',
            },
          ])
          cubeTopStyle = new echarts.graphic.LinearGradient(0, 0, 0, 1, [
            {
              offset: 0,
              color: 'rgba(163,232,255,1)',
            },
            {
              offset: 1,
              color: 'rgba(163,232,255,1)',
            },
          ])
          //颜色end
                const location = api.coord([api.value(0), api.value(1)]);
                return {
                    type: 'group',
                    children: [
                        {
                            type: 'CubeLeft',
                            shape: {
                                api,
                                xValue: api.value(0),
                                yValue: api.value(1),
                                x: location[0],
                                y: location[1],
                                xAxisPoint: api.coord([api.value(0), 0]),
                            },
                            style: {
                                fill: cubeLeftStyle,
                            },
                        },
                        {
                            type: 'CubeRight',
                            shape: {
                                api,
                                xValue: api.value(0),
                                yValue: api.value(1),
                                x: location[0],
                                y: location[1],
                                xAxisPoint: api.coord([api.value(0), 0]),
                            },
                            style: {
                                fill: cubeRightStyle,
                            },
                        },
                        {
                            type: 'CubeTop',
                            shape: {
                                api,
                                xValue: api.value(0),
                                yValue: api.value(1),
                                x: location[0],
                                y: location[1],
                                xAxisPoint: api.coord([api.value(0), 0]),
                            },
                            style: {
                                fill: cubeTopStyle,
                            },
                        },
                    ],
                };
            },
            data: VALUE,
        },
        {
            type: 'bar',
            barMaxWidth:10,
            label: {
                normal: {
                    show: true,
                    position: 'top',
                    fontSize: 14,
                    color: '#2e95f3',
                    offset: [2, -25],
                },
            },
            itemStyle: {
                color: 'transparent',
            },
            tooltip: {},
            data: VALUE,
        },
    ],
};
 
 
 
 
option && myChart.setOption(option);
 
 
</script>
<script>
   var chartDom = document.getElementById('mainC');
var myChart = echarts.init(chartDom);
var option;
let bgColor = "#fff";
let color = [
    "#0090FF",
    "#36CE9E",
    "#FFC005",
    "#FF515A",
    "#8B5CFF",
    "#00CA69"
];
let echartData = [{
        name: "1",
        value1: 100,
        value2: 233
    },
    {
        name: "2",
        value1: 138,
        value2: 233
    },
    {
        name: "3",
        value1: 350,
        value2: 200
    },
    {
        name: "4",
        value1: 173,
        value2: 180
    },
    {
        name: "5",
        value1: 180,
        value2: 199
    },
    {
        name: "6",
        value1: 150,
        value2: 233
    },
    {
        name: "7",
        value1: 180,
        value2: 210
    },
    {
        name: "8",
        value1: 230,
        value2: 180
    }
];
 
// let xAxisData = echartData.map(v => v.name);
   let xAxisData = {{ xLine | safe }};
//  ["1", "2", "3", "4", "5", "6", "7", "8"]
// let yAxisData1 = echartData.map(v => v.value1);
   let yAxisData1 = {{ yLine }};
// [100, 138, 350, 173, 180, 150, 180, 230]
let yAxisData2 = echartData.map(v => v.value2);
// [233, 233, 200, 180, 199, 233, 210, 180]
const hexToRgba = (hex, opacity) => {
    let rgbaColor = "";
    let reg = /^#[\da-f]{6}$/i;
    if (reg.test(hex)) {
        rgbaColor = `rgba(${parseInt("0x" + hex.slice(1, 3))},${parseInt(
      "0x" + hex.slice(3, 5)
    )},${parseInt("0x" + hex.slice(5, 7))},${opacity})`;
    }
    return rgbaColor;
}
 
option = {
    backgroundColor: bgColor,
    color: color,
    legend: {
      right: 10,
      top: 10
    },
    tooltip: {
        trigger: "axis",
        formatter: function(params) {
            let html = '';
            params.forEach(v => {
                console.log(v)
                html += `<div style="color: #666;font-size: 14px;line-height: 24px">
                <span style="display:inline-block;margin-right:5px;border-radius:10px;width:10px;height:10px;background-color:${color[v.componentIndex]};"></span>
                ${v.seriesName}.${v.name}
                <span style="color:${color[v.componentIndex]};font-weight:700;font-size: 18px">${v.value}</span>
                `;
            })
 
 
 
            return html
        },
        extraCssText: 'background: #fff; border-radius: 0;box-shadow: 0 0 3px rgba(0, 0, 0, 0.2);color: #333;',
        axisPointer: {
            type: 'shadow',
            shadowStyle: {
                color: '#ffffff',
                shadowColor: 'rgba(225,225,225,1)',
                shadowBlur: 5
            }
        }
    },
    grid: {
        top: 100,
        containLabel: true
    },
    xAxis: [{
        type: "category",
        boundaryGap: false,
        axisLabel: {
            formatter: '{value}',
            textStyle: {
                color: "#333"
            }
        },
        axisLine: {
            lineStyle: {
                color: "#D9D9D9"
            }
        },
        data: xAxisData
    }],
    yAxis: [{
        type: "value",
        name: '空气中含量',
        axisLabel: {
            textStyle: {
                color: "#666"
            }
        },
        nameTextStyle: {
            color: "#666",
            fontSize: 12,
            lineHeight: 40
        },
        splitLine: {
            lineStyle: {
                type: "dashed",
                color: "#E9E9E9"
            }
        },
        axisLine: {
            show: false
        },
        axisTick: {
            show: false
        }
    }],
    series: [{
        name: "各气体及颗粒物",
        type: "line",
        smooth: true,
        // showSymbol: false,/
        symbolSize: 8,
        zlevel: 3,
        lineStyle: {
            normal: {
                color: color[0],
                shadowBlur: 3,
                shadowColor: hexToRgba(color[0], 0.5),
                shadowOffsetY: 8
            }
        },
        areaStyle: {
            normal: {
                color: new echarts.graphic.LinearGradient(
                    0,
                    0,
                    0,
                    1,
                    [{
                            offset: 0,
                            color: hexToRgba(color[0], 0.3)
                        },
                        {
                            offset: 1,
                            color: hexToRgba(color[0], 0.1)
                        }
                    ],
                    false
                ),
                shadowColor: hexToRgba(color[0], 0.1),
                shadowBlur: 10
            }
        },
        data: yAxisData1
    }, ]
};
 
 
 
option && myChart.setOption(option);
 
 
</script>
<script>
   var chartDom = document.getElementById('mainA');
var myChart = echarts.init(chartDom);
var option;
 
option = {
  series: [
    {
      type: 'gauge',
      axisLine: {
        lineStyle: {
          width: 30,
          color: [
            [0.3, '#67e0e3'],
            [0.7, '#37a2da'],
            [1, '#fd666d']
          ]
        }
      },
      pointer: {
        itemStyle: {
          color: 'auto'
        }
      },
      axisTick: {
        distance: -30,
        length: 8,
        lineStyle: {
          color: '#fff',
          width: 2
        }
      },
      splitLine: {
        distance: -30,
        length: 30,
        lineStyle: {
          color: '#fff',
          width: 4
        }
      },
      axisLabel: {
        color: 'inherit',
        distance: 40,
        fontSize: 13
      },
      detail: {
        valueAnimation: true,
        formatter: '{value} ',
        color: 'inherit'
      },
      data: [
        {
           value: {{ currentData.2 }}
        }
      ]
    }
  ]
};
// setInterval(function () {
//   myChart.setOption({
//     series: [
//       {
//         data: [
//           {
//             value: +(Math.random() * 100).toFixed(2)
//           }
//         ]
//       }
//     ]
//   });
// }, 2000);
 
option && myChart.setOption(option);
 
 
</script>
</body>
</html>

刷新页面即可看到下图

八，个人信息修改

新建selfInfo.html,内容直接复制index.html

在myApp/urls中增加代码

在基于spark的空气质量分析可视化系统/urls增加代码

在views.py中增加代码

继续修改views.py

from django.shortcuts import render,redirect
from myApp.models import *
# Create your views here.
from utils.error import *
from utils.query import *
from utils.getPublicData import *
from utils.getChartData import *
def index(request):
    uname = request.session.get('username')
    userInfo = User.objects.get(username=uname)
    airdataList = list(getairdata())
    dateList = list(set([x[1] for x in airdataList]))
 
    yearList = []
    monthList = []
    dayList = []
    for date in dateList:
        year,month,day = date.split('-')
        yearList.append((year))
        monthList.append((month))
        dayList.append((day))
 
    yearList = sorted(set(yearList))
    monthList = sorted(set(monthList))
    dayList = sorted(set(dayList))
    defaultYear = '2023'
    defaultMonth = '01'
    defaultDay = '01'
    # defaultCity = '北京'
    cityList = list(set(x[0] for x in airdataList))
 
    if request.method == "GET":
        defaultCity = request.GET.get('city') or '北京'
        xBar, yBar, xLine, yLine = getIndexData(defaultCity)
        request.session['defaultCity'] = defaultCity
        currentDate = defaultYear + '-' + defaultMonth + '-' + defaultDay
        currentData = \
        querys('select * from airdata where city = %s and date = %s',[defaultCity,currentDate],'select')[0]
        print(currentData)
 
    if request.method == "POST":
        defaultYear = request.POST.get('defaultYear')
        defaultMonth = request.POST.get('defaultMonth')
        defaultDay = request.POST.get('defaultDay')
        defaultCity = request.session.get('defaultCity')
        currentDate = defaultYear + '-' + defaultMonth + '-' + defaultDay
        currentData = \
        querys('select * from airdata where city = %s and date = %s', [defaultCity, currentDate], 'select')[0]
        print(currentData)
 
    return render(request, 'index.html',{
         'userInfo':userInfo,
         'yearList':yearList,
         'monthList':monthList,
         'dayList':dayList,
         'defaultYear':defaultYear,
         'defaultMonth':defaultMonth,
         'defaultDay':defaultDay,
         'cityList':cityList,
        'defaultCity':defaultCity,
        'currentData':currentData,
        'xBar':xBar,
        'yBar':yBar,
        'xLine':xLine,
        'yLine':yLine,
    })
 
 
def selfInfo(request):
    uname = request.session.get('username')
    userInfo = User.objects.get(username=uname)
    if request.method == "POST":
        print(request.POST)
        res = changePassword(request.POST,userInfo)
        if res != None:
            return errorResponse(request, res)
        userInfo = User.objects.get(username=uname)
 
    return render(request, 'selfInfo.html', {
        'userInfo': userInfo
    })
 
 
 
def logOut(request):
    request.session.clear()
    return redirect('login')
 
def login(request):
    if request.method == "GET":
        return render(request, 'login.html', {})
    else:
        uname=request.POST.get('username')
        pwd=request.POST.get('password')
        print(uname,pwd)
        try:
            user = User.objects.get(username=uname,password=pwd)
            request.session['username'] = user.username
            return redirect('index')
        except:
            return errorResponse(request,'用户名或密码错误，请输入正确信息')
        #return render(request, 'login.html', {})
 
def register(request):
    if request.method == 'GET':
        return render(request, 'register.html',{})
    else:
        uname = request.POST.get('username')
        pwd = request.POST.get('password')
        ckPwd = request.POST.get('ckPassword')
        print(uname,pwd,ckPwd)
        try:
            User.objects.get(username=uname)
            return errorResponse(request,"用户名已存在")
        except:
            if not uname or not pwd or not ckPwd:return errorResponse(request,"请输入完整信息")
            if pwd != ckPwd:return errorResponse(request,"两次密码不相符，请确认您的密码")
            User.objects.create(username=uname,password=pwd)
            return redirect('/myApp/login/')
        return render(request, 'register.html', {})

修改getChartData.py

from utils.query import *
from utils.getPublicData import *
from utils.error import *
from myApp.models import *
 
 
def getIndexData(defaultCity):
    avgCityAqiList = list(getavgCityAqi())
    avgCitySixList = list(getavgCitySix())
    realSixList = querys('select * from avgCitySix where city = %s',[defaultCity],'select')[0]
    yLine = list(realSixList[1:])
    yLine = [round(x,1) for x in yLine]
    print(yLine)
    xLine = ['PM2.5','PM10','So2','No2','Co','O3']
    print(avgCitySixList[0])
    xBar = [x[0] for x in avgCityAqiList]
 
    yBar = [round(x[1],0) for x in avgCityAqiList]
    # xLine = [x[0] for x in avgCitySixList]
    # yLine = [round(float(x[1]),1) for x in avgCitySixList]
    print(xBar,yBar,xLine,yLine)
    return xBar,yBar,xLine,yLine
 
def changePassword(passwordInfo,userInfo):
    oldPwd = passwordInfo['oldPwd']
    newPwd = passwordInfo['newPwd']
    ckdPwd = passwordInfo['ckdPwd']
 
    user = User.objects.get(username=userInfo.username)
 
    if user.password != oldPwd:
        return '原密码错误，请输入正确信息'
    else:
        if newPwd != ckdPwd:
            return '密码确认失败!'
        else:
            user.password = newPwd
            user.save()
 
 
 

刷新页面，将呈现下图结果

首先来验证原密码输入错误的情况，会出现下图结果

验证确认密码错误的情况，会出现这种情况

再来验证正确输入密码的情况，

查看Navicat下的user表的密码从123变成了1234

九，数据总览

在myApp下的urls.py继续修改

创建table.html,内容与selfInfo一致

编写table.html

<!DOCTYPE html>
<html lang="en">
<head>
	<meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
	<meta http-equiv="X-UA-Compatible" content="IE=edge">
	<meta name="viewport" content="width=device-width, initial-scale=1, user-scalable=no">
	<meta name="description" content="">
	<meta name="author" content="">
 
	<title>空气质量数据可视化分析系统</title>
 
	<!-- Main Styles -->
	<link rel="stylesheet" href="/static/assets/styles/style-horizontal.min.css">
 
	<!-- Material Design Icon -->
	<link rel="stylesheet" href="/static/assets/fonts/material-design/css/materialdesignicons.css">
 
	<!-- mCustomScrollbar -->
	<link rel="stylesheet" href="/static/assets/plugin/mCustomScrollbar/jquery.mCustomScrollbar.min.css">
 
	<!-- Waves Effect -->
	<link rel="stylesheet" href="/static/assets/plugin/waves/waves.min.css">
 
	<!-- Sweet Alert -->
	<link rel="stylesheet" href="/static/assets/plugin/sweet-alert/sweetalert.css">
 
	<!-- Morris Chart -->
	<link rel="stylesheet" href="/static/assets/plugin/chart/morris/morris.css">
 
	<!-- FullCalendar -->
	<link rel="stylesheet" href="/static/assets/plugin/fullcalendar/fullcalendar.min.css">
	<link rel="stylesheet" href="/static//static/assets/plugin/fullcalendar/fullcalendar.print.css" media='print'>
    <link rel="stylesheet" href="/static/assets/plugin/datatables/media/css/dataTables.bootstrap.min.css">
	<link rel="stylesheet" href="/static/assets/plugin/datatables/extensions/Responsive/css/responsive.bootstrap.min.css">
</head>
 
<body>
<header class="fixed-header">
	<div class="header-top">
		<div class="container">
			<div class="pull-left">
				<a href="index.html" class="logo"><i class="ico mdi mdi-cube-outline"></i>空气质量数据可视化分析系统</a>
			</div>
			<!-- /.pull-left -->
			<div class="pull-right">
				<div class="ico-item hidden-on-desktop">
					<button type="button" class="menu-button js__menu_button fa fa-bars waves-effect waves-light"></button>
				</div>
				<!-- /.ico-item hidden-on-desktop -->
				<div class="ico-item">
					<a href="#" class="ico-item mdi mdi-magnify js__toggle_open" data-target="#searchform-header"></a>
					<form action="#" id="searchform-header" class="searchform js__toggle"><input type="search" placeholder="Search..." class="input-search"><button class="mdi mdi-magnify button-search" type="submit"></button></form>
					<!-- /.searchform -->
				</div>
				<!-- /.ico-item -->
				<div class="ico-item">
					<a href="#" class="ico-item mdi mdi-email notice-alarm js__toggle_open" data-target="#message-popup"></a>
					<div id="message-popup" class="notice-popup js__toggle" data-space="55">
						<h2 class="popup-title">Recent Messages<a href="#" class="pull-right text-danger">New message</a></h2>
						<!-- /.popup-title -->
						<div class="content">
							<ul class="notice-list">
								<li>
									<a href="#">
										<span class="avatar"><img src="/static/assets/images/avatar-sm-1.jpg" alt=""></span>
										<span class="name">John Doe</span>
										<span class="desc">Amet odio neque nobis consequuntur consequatur a quae, impedit facere repellat voluptates.</span>
										<span class="time">10 min</span>
									</a>
								</li>
								<li>
									<a href="#">
										<span class="avatar"><img src="/static/assets/images/avatar-sm-3.jpg" alt=""></span>
										<span class="name">Harry Halen</span>
										<span class="desc">Amet odio neque nobis consequuntur consequatur a quae, impedit facere repellat voluptates.</span>
										<span class="time">15 min</span>
									</a>
								</li>
								<li>
									<a href="#">
										<span class="avatar"><img src="/static/assets/images/avatar-sm-4.jpg" alt=""></span>
										<span class="name">Thomas Taylor</span>
										<span class="desc">Amet odio neque nobis consequuntur consequatur a quae, impedit facere repellat voluptates.</span>
										<span class="time">30 min</span>
									</a>
								</li>
								<li>
									<a href="#">
										<span class="avatar"><img src="/static/assets/images/avatar-1.jpg" alt=""></span>
										<span class="name">Jennifer</span>
										<span class="desc">Amet odio neque nobis consequuntur consequatur a quae, impedit facere repellat voluptates.</span>
										<span class="time">45 min</span>
									</a>
								</li>
								<li>
									<a href="#">
										<span class="avatar"><img src="/static/assets/images/avatar-sm-5.jpg" alt=""></span>
										<span class="name">Helen Candy</span>
										<span class="desc">Amet odio neque nobis consequuntur consequatur a quae, impedit facere repellat voluptates.</span>
										<span class="time">45 min</span>
									</a>
								</li>
								<li>
									<a href="#">
										<span class="avatar"><img src="/static/assets/images/avatar-2.jpg" alt=""></span>
										<span class="name">Anna Cavan</span>
										<span class="desc">Amet odio neque nobis consequuntur consequatur a quae, impedit facere repellat voluptates.</span>
										<span class="time">1 hour ago</span>
									</a>
								</li>
								<li>
									<a href="#">
										<span class="avatar bg-success"><i class="fa fa-user"></i></span>
										<span class="name">Jenny Betty</span>
										<span class="desc">Amet odio neque nobis consequuntur consequatur a quae, impedit facere repellat voluptates.</span>
										<span class="time">1 day ago</span>
									</a>
								</li>
								<li>
									<a href="#">
										<span class="avatar"><img src="/static/assets/images/avatar-5.jpg" alt=""></span>
										<span class="name">Denise Peterson</span>
										<span class="desc">Amet odio neque nobis consequuntur consequatur a quae, impedit facere repellat voluptates.</span>
										<span class="time">1 year ago</span>
									</a>
								</li>
							</ul>
							<!-- /.notice-list -->
							<a href="#" class="notice-read-more">See more messages <i class="fa fa-angle-down"></i></a>
						</div>
						<!-- /.content -->
					</div>
					<!-- /#message-popup -->
				</div>
				<!-- /.ico-item -->
				<div class="ico-item">
					<a href="#" class="ico-item mdi mdi-bell notice-alarm js__toggle_open" data-target="#notification-popup"></a>
					<div id="notification-popup" class="notice-popup js__toggle" data-space="55">
						<h2 class="popup-title">Your Notifications</h2>
						<!-- /.popup-title -->
						<div class="content">
							<ul class="notice-list">
								<li>
									<a href="#">
										<span class="avatar"><img src="/static/assets/images/avatar-sm-1.jpg" alt=""></span>
										<span class="name">John Doe</span>
										<span class="desc">Like your post: “Contact Form 7 Multi-Step”</span>
										<span class="time">10 min</span>
									</a>
								</li>
								<li>
									<a href="#">
										<span class="avatar"><img src="/static/assets/images/avatar-sm-2.jpg" alt=""></span>
										<span class="name">Anna William</span>
										<span class="desc">Like your post: “Facebook Messenger”</span>
										<span class="time">15 min</span>
									</a>
								</li>
								<li>
									<a href="#">
										<span class="avatar bg-warning"><i class="fa fa-warning"></i></span>
										<span class="name">Update Status</span>
										<span class="desc">Failed to get available update data. To ensure the please contact us.</span>
										<span class="time">30 min</span>
									</a>
								</li>
								<li>
									<a href="#">
										<span class="avatar"><img src="/static/assets/images/avatar-1.jpg" alt=""></span>
										<span class="name">Jennifer</span>
										<span class="desc">Like your post: “Contact Form 7 Multi-Step”</span>
										<span class="time">45 min</span>
									</a>
								</li>
								<li>
									<a href="#">
										<span class="avatar"><img src="/static/assets/images/avatar-sm-6.jpg" alt=""></span>
										<span class="name">Michael Zenaty</span>
										<span class="desc">Like your post: “Contact Form 7 Multi-Step”</span>
										<span class="time">50 min</span>
									</a>
								</li>
								<li>
									<a href="#">
										<span class="avatar"><img src="/static/assets/images/avatar-sm-4.jpg" alt=""></span>
										<span class="name">Simon</span>
										<span class="desc">Like your post: “Facebook Messenger”</span>
										<span class="time">1 hour</span>
									</a>
								</li>
								<li>
									<a href="#">
										<span class="avatar bg-violet"><i class="fa fa-flag"></i></span>
										<span class="name">Account Contact Change</span>
										<span class="desc">A contact detail associated with your account has been changed.</span>
										<span class="time">2 hours</span>
									</a>
								</li>
								<li>
									<a href="#">
										<span class="avatar"><img src="/static/assets/images/avatar-sm-7.jpg" alt=""></span>
										<span class="name">Helen 987</span>
										<span class="desc">Like your post: “Facebook Messenger”</span>
										<span class="time">Yesterday</span>
									</a>
								</li>
								<li>
									<a href="#">
										<span class="avatar"><img src="/static/assets/images/avatar-2.jpg" alt=""></span>
										<span class="name">Denise Jenny</span>
										<span class="desc">Like your post: “Contact Form 7 Multi-Step”</span>
										<span class="time">Oct, 28</span>
									</a>
								</li>
								<li>
									<a href="#">
										<span class="avatar"><img src="/static/assets/images/avatar-sm-8.jpg" alt=""></span>
										<span class="name">Thomas William</span>
										<span class="desc">Like your post: “Facebook Messenger”</span>
										<span class="time">Oct, 27</span>
									</a>
								</li>
							</ul>
							<!-- /.notice-list -->
							<a href="#" class="notice-read-more">See more messages <i class="fa fa-angle-down"></i></a>
						</div>
						<!-- /.content -->
					</div>
					<!-- /#notification-popup -->
				</div>
				<!-- /.ico-item -->
				<div class="ico-item">
					<a href="#" class="ico-item mdi mdi-account js__toggle_open" data-target="#user-status"></a>
					<div id="user-status" class="user-status js__toggle">
						<a href="#" class="avatar"><img src="/static/assets/images/avatar.png" alt=""><span class="status online"></span></a>
						<h5 class="name"><a href="profile.html">{{ userInfo.username }}</a></h5>
						<h5 class="position">用户</h5>
						<!-- /.name -->
						<div class="control-items">
<!--							<div class="control-item"><a href="#" title="Settings"><i class="fa fa-gear"></i></a></div>-->
							<div class="control-item"><a href="/myApp/logOut" class="" title="Log out"><i class="fa fa-power-off">退出登录</i></a></div>
						</div>
						<!-- /.control-items -->
					</div>
					<!-- /#user-status -->
				</div>
				<!-- /.ico-item -->
			</div>
			<!-- /.pull-right -->
		</div>
		<!-- /.container -->
	</div>
	<!-- /.header-top -->
	<nav class="nav-horizontal">
		<button type="button" class="menu-close hidden-on-desktop js__close_menu"><i class="fa fa-times"></i><span>CLOSE</span></button>
		<div class="container">
 
			<ul class="menu">
					<li class="current">
						<a href="index.html"><i class="ico mdi mdi-home"></i><span>首页</span></a>
					</li>
					<li class="has-sub">
						<a href="#"><i class="ico mdi mdi-human"></i><span>个人信息</span></a>
						<ul class="sub-menu mega mega-3">
							<li class="has-sub">
								<h3 class="title">Components</h3>
								<!-- .title -->
								<ul class="child-list">
									<li><a href="ui-buttons.html">Buttons</a></li>
									<li><a href="ui-cards.html">Cards</a></li>
									<li><a href="ui-checkbox-radio.html">Checkboxs-Radios</a></li>
									<li><a href="ui-draggable-cards.html">Draggable Cards</a></li>
									<li><a href="ui-components.html">UI Components</a></li>
								</ul>
								<!-- /.child-list -->
							</li>
							<li class="has-sub">
								<h3 class="title">Icons</h3>
								<!-- .title -->
								<ul class="child-list">
									<li><a href="icons-font-awesome-icons.html">Font Awesome</a></li>
									<li><a href="icons-fontello.html">Fontello</a></li>
									<li><a href="icons-material-icons.html">Material Design Icons</a></li>
									<li><a href="icons-material-design-iconic.html">Material Design Iconic Font</a></li>
									<li><a href="icons-themify-icons.html">Themify Icons</a></li>
								</ul>
								<!-- /.child-list -->
							</li>
							<li class="has-sub">
								<h3 class="title">Others</h3>
								<!-- .title -->
								<ul class="child-list">
									<li><a href="ui-modals.html">Modals</a></li>
									<li><a href="ui-range-slider.html">Range Slider</a></li>
									<li><a href="ui-sweetalert.html">Sweet Alert</a></li>
									<li><a href="ui-treeview.html">Tree view</a></li>
									<li><a href="ui-typography.html">Typography</a></li>
								</ul>
								<!-- /.child-list -->
							</li>
						</ul>
						<!-- /.sub-menu mega -->
					</li>
					<li class="has-sub">
						<a href="#"><i class="ico mdi mdi-database"></i><span>数据总览</span></a>
						<ul class="sub-menu single">
							<li><a href="chart-3d.html">3D Charts</a></li>
							<li><a href="chart-chartist.html">Chartist Charts</a></li>
							<li><a href="chart-chartjs.html">Chartjs Chart</a></li>
							<li><a href="chart-dynamic.html">Dynamic Chart</a></li>
							<li><a href="chart-flot.html">Flot Chart</a></li>
							<li><a href="chart-knob.html">Knob Chart</a></li>
							<li><a href="chart-morris.html">Morris Chart</a></li>
							<li><a href="chart-sparkline.html">Sparkline Chart</a></li>
							<li><a href="chart-other.html">Other Chart</a></li>
						</ul>
						<!-- /.sub-menu single -->
					</li>
					<li class="has-sub">
						<a href="#"><i class="ico mdi mdi-chart-line"></i><span>空气质量年度分析</span></a>
						<ul class="sub-menu single">
							<li><a href="form-elements.html">General Elements</a></li>
							<li><a href="form-advanced.html">Advanced Form</a></li>
							<li><a href="form-fileupload.html">Form Uploads</a></li>
							<li><a href="form-validation.html">Form Validation</a></li>
							<li><a href="form-wizard.html">Form Wizard</a></li>
							<li><a href="form-wysiwig.html">Wysiwig Editors</a></li>
							<li><a href="form-xeditable.html">X-editable</a></li>
						</ul>
						<!-- /.sub-menu single -->
					</li>
					<li>
						<a href="inbox.html"><i class="ico mdi mdi-chart-bar"></i><span>月度分析</span></a>
					</li>
					<li class="has-sub">
						<a href="#"><i class="ico mdi mdi-air-conditioner"></i><span>气体分析</span></a>
						<ul class="sub-menu single">
							<li><a href="page-starter.html">Starter Page</a></li>
							<li><a href="login.html">Login</a></li>
							<li><a href="page-register.html">Register</a></li>
							<li><a href="page-recoverpw.html">Recover Password</a></li>
							<li><a href="page-lock-screen.html">Lock Screen</a></li>
							<li><a href="page-confirm-mail.html">Confirm Mail</a></li>
							<li><a href="page-404.html">Error 404</a></li>
							<li><a href="page-500.html">Error 500</a></li>
						</ul>
						<!-- /.sub-menu single -->
					</li>
					<li class="has-sub">
						<a href="#"><i class="ico mdi mdi-map"></i><span>城市分布</span></a>
						<ul class="sub-menu single">
							<li><a href="extras-contact.html">Contact list</a></li>
							<li><a href="extras-email-template.html">Email template</a></li>
							<li><a href="extras-faq.html">FAQ</a></li>
							<li><a href="extras-gallery.html">Gallery</a></li>
							<li><a href="extras-invoice.html">Invoice</a></li>
							<li><a href="extras-maps.html">Maps</a></li>
							<li><a href="extras-pricing.html">Pricing</a></li>
							<li><a href="extras-projects.html">Projects</a></li>
							<li><a href="extras-taskboard.html">Taskboard</a></li>
							<li><a href="extras-timeline.html">Timeline</a></li>
							<li><a href="extras-tour.html">Tour</a></li>
						</ul>
						<!-- /.sub-menu single -->
					</li>
					<li class="has-sub">
						<a href="#"><i class="ico mdi mdi-cloud"></i><span>数据词云图</span></a>
						<ul class="sub-menu mega mega-2">
							<li class="has-sub">
								<h3 class="title">Tables</h3>
								<!-- .title -->
								<ul class="child-list">
									<li><a href="tables-basic.html">Basic Tables</a></li>
									<li><a href="tables-datatable.html">Data Tables</a></li>
									<li><a href="tables-responsive.html">Responsive Tables</a></li>
									<li><a href="tables-editable.html">Editable Tables</a></li>
								</ul>
								<!-- /.child-list -->
							</li>
							<li class="has-sub">
								<h3 class="title">Others</h3>
								<!-- .title -->
								<ul class="child-list">
									<li><a href="calendar.html">Calendar</a></li>
									<li><a href="ui-notification.html">Notification</a></li>
									<li><a href="profile.html">Profile</a></li>
									<li><a href="widgets.html">Widgets</a></li>
								</ul>
								<!-- /.child-list -->
							</li>
						</ul>
						<!-- /.sub-menu mega -->
					</li>
                    <li>
						<a href="inbox.html"><i class="ico mdi mdi-star"></i><span>空气质量预测</span></a>
					</li>
			</ul>
			<!-- /.menu -->
		</div>
		<!-- /.container -->
	</nav>
	<!-- /.nav-horizontal -->
</header>
<!-- /.fixed-header -->
 
<div id="wrapper">
	<div class="main-content container">
		<div class="row small-spacing">
<!--			<div class="col-xs-12">-->
 
				<!-- /.box-content -->
			</div>
			<!-- /.col-xs-12 -->
 
			<div class="col-lg-12 col-xs-12">
 
                      <div class="box-content">
					<h4 class="box-title">总览表格</h4>
					<!-- /.box-title -->
					<div class="dropdown js__drop_down">
						<a href="#" class="dropdown-icon glyphicon glyphicon-option-vertical js__drop_down_button"></a>
<!--{#						<ul class="sub-menu">#}-->
<!--{#							<li><a href="#">Action</a></li>#}-->
<!--{#							<li><a href="#">Another action</a></li>#}-->
<!--{#							<li><a href="#">Something else there</a></li>#}-->
<!--{#							<li class="split"></li>#}-->
<!--{#							<li><a href="#">Separated link</a></li>#}-->
<!--{#						</ul>#}-->
						<!-- /.sub-menu -->
					</div>
					<!-- /.dropdown js__dropdown -->
					<table id="example" class="table table-striped table-bordered display" style="width:100%">
						<thead>
							<tr>
									<th>#</th>
								<th>城市</th>
								<th>日期</th>
								<th>AQI</th>
								<th>质量等级</th>
                                  <th>当日排名</th>
								<th>PM2.5</th>
                                 <th>PM10</th>
                                <th>SO2</th>
                                <th>NO2</th>
                                <th>CO</th>
                                <th>O3</th>
							</tr>
						</thead>
						<tfoot>
							<tr>
									<th>#</th>
								<th>城市</th>
								<th>日期</th>
								<th>AQI</th>
								<th>质量等级</th>
                                <th>当日排名</th>
								<th>PM2.5</th>
                                 <th>PM10</th>
                                <th>SO2</th>
                                <th>NO2</th>
                                <th>CO</th>
                                <th>O3</th>
							</tr>
						</tfoot>
						<tbody>
                        {% for i in tableData %}
                            <tr>
 
                                 <td>{{ i.11 }}</td>
                                <td>{{ i.0 }}</td>
                                <td>{{ i.1 }}</td>
                                <td>{{ i.2 }}</td>
                                <td>{{ i.3 }}</td>
                                <td>{{ i.4 }}</td>
                                <td>{{ i.5 }}</td>
                                <td>{{ i.6 }}</td>
                                <td>{{ i.7 }}</td>
                                <td>{{ i.8 }}</td>
                             <td>{{ i.9 }}</td>
                             <td>{{ i.10 }}</td>
                            </tr>
                        {% endfor %}
                        </tbody>
					</table>
				</div>
 
 
                    <!-- /.box-content card white -->
                </div>
 
 
				<!-- /.box-content -->
			</div>
			<!-- /.col-lg-4 col-xs-12 -->
 
 
			<!-- /.col-lg-4 col-xs-12 -->
 
 
			<!-- /.col-lg-4 col-xs-12 -->
 
			<!-- /.col-lg-6 col-xs-12 -->
		</div>
		<!-- /.row -->
 
 
		<!-- /.row -->
<!--		<footer class="footer bottom-right">-->
<!--			<ul class="list-inline">-->
<!--				<li>Copyright &copy; 2021.Company name All rights reserved.<a target="_blank" href="https://sc.chinaz.com/moban/">&#x7F51;&#x9875;&#x6A21;&#x677F;</a></li>-->
<!--				<li><a href="#">Privacy</a></li>-->
<!--				<li><a href="#">Terms</a></li>-->
<!--				<li><a href="#">Help</a></li>-->
<!--			</ul>-->
<!--		</footer>-->
	</div>
	<!-- /.main-content -->
</div><!--/#wrapper -->
	<!-- HTML5 shim and Respond.js for IE8 support of HTML5 elements and media queries -->
	<!--[if lt IE 9]>
		<script src="/static/assets/script/html5shiv.min.js"></script>
		<script src="/static/assets/script/respond.min.js"></script>
	<![endif]-->
	<!--
	================================================== -->
	<!-- Placed at the end of the document so the pages load faster -->
	<script src="/static/assets/scripts/jquery.min.js"></script>
	<script src="/static/assets/scripts/modernizr.min.js"></script>
	<script src="/static/assets/plugin/bootstrap/js/bootstrap.min.js"></script>
	<script src="/static/assets/plugin/mCustomScrollbar/jquery.mCustomScrollbar.concat.min.js"></script>
	<script src="/static/assets/plugin/nprogress/nprogress.js"></script>
	<script src="/static/assets/plugin/sweet-alert/sweetalert.min.js"></script>
	<script src="/static/assets/plugin/waves/waves.min.js"></script>
 
	<!-- Morris Chart -->
	<script src="/static/assets/plugin/chart/morris/morris.min.js"></script>
	<script src="/static/assets/plugin/chart/morris/raphael-min.js"></script>
	<script src="/static/assets/scripts/chart.morris.init.min.js"></script>
 
	<!-- Flot Chart -->
	<script src="/static/assets/plugin/chart/plot/jquery.flot.min.js"></script>
	<script src="/static/assets/plugin/chart/plot/jquery.flot.tooltip.min.js"></script>
	<script src="/static/assets/plugin/chart/plot/jquery.flot.categories.min.js"></script>
	<script src="/static/assets/plugin/chart/plot/jquery.flot.pie.min.js"></script>
	<script src="/static/assets/plugin/chart/plot/jquery.flot.stack.min.js"></script>
	<script src="/static/assets/scripts/chart.flot.init.min.js"></script>
 
	<!-- Sparkline Chart -->
	<script src="/static/assets/plugin/chart/sparkline/jquery.sparkline.min.js"></script>
	<script src="/static/assets/scripts/chart.sparkline.init.min.js"></script>
 
	<!-- FullCalendar -->
	<script src="/static/assets/plugin/moment/moment.js"></script>
	<script src="/static/assets/plugin/fullcalendar/fullcalendar.min.js"></script>
	<script src="/static/assets/scripts/fullcalendar.init.js"></script>
 
	<script src="/static/assets/scripts/main.min.js"></script>
	<script src="/static/assets/scripts/horizontal-menu.min.js"></script>
<script src="/static/assets/echarts.js"></script>
	<!-- Data Tables -->
	<script src="/static/assets/plugin/datatables/media/js/jquery.dataTables.min.js"></script>
	<script src="/static/assets/plugin/datatables/media/js/dataTables.bootstrap.min.js"></script>
	<script src="/static/assets/plugin/datatables/extensions/Responsive/js/dataTables.responsive.min.js"></script>
	<script src="/static/assets/plugin/datatables/extensions/Responsive/js/responsive.bootstrap.min.js"></script>
	<script src="/static/assets/scripts/datatables.demo.min.js"></script>
</body>
</html>

编写views.py

from django.shortcuts import render,redirect
from myApp.models import *
# Create your views here.
from utils.error import *
from utils.query import *
from utils.getPublicData import *
from utils.getChartData import *
def index(request):
    uname = request.session.get('username')
    userInfo = User.objects.get(username=uname)
    airdataList = list(getairdata())
    dateList = list(set([x[1] for x in airdataList]))
 
    yearList = []
    monthList = []
    dayList = []
    for date in dateList:
        year,month,day = date.split('-')
        yearList.append((year))
        monthList.append((month))
        dayList.append((day))
 
    yearList = sorted(set(yearList))
    monthList = sorted(set(monthList))
    dayList = sorted(set(dayList))
    defaultYear = '2023'
    defaultMonth = '01'
    defaultDay = '01'
    # defaultCity = '北京'
    cityList = list(set(x[0] for x in airdataList))
 
    if request.method == "GET":
        defaultCity = request.GET.get('city') or '北京'
        xBar, yBar, xLine, yLine = getIndexData(defaultCity)
        request.session['defaultCity'] = defaultCity
        currentDate = defaultYear + '-' + defaultMonth + '-' + defaultDay
        currentData = \
        querys('select * from airdata where city = %s and date = %s',[defaultCity,currentDate],'select')[0]
        print(currentData)
 
    if request.method == "POST":
        defaultYear = request.POST.get('defaultYear')
        defaultMonth = request.POST.get('defaultMonth')
        defaultDay = request.POST.get('defaultDay')
        defaultCity = request.session.get('defaultCity')
        currentDate = defaultYear + '-' + defaultMonth + '-' + defaultDay
        currentData = \
        querys('select * from airdata where city = %s and date = %s', [defaultCity, currentDate], 'select')[0]
        print(currentData)
 
    return render(request, 'index.html',{
         'userInfo':userInfo,
         'yearList':yearList,
         'monthList':monthList,
         'dayList':dayList,
         'defaultYear':defaultYear,
         'defaultMonth':defaultMonth,
         'defaultDay':defaultDay,
         'cityList':cityList,
        'defaultCity':defaultCity,
        'currentData':currentData,
        'xBar':xBar,
        'yBar':yBar,
        'xLine':xLine,
        'yLine':yLine,
    })
 
 
def selfInfo(request):
    uname = request.session.get('username')
    userInfo = User.objects.get(username=uname)
    if request.method == "POST":
        print(request.POST)
        res = changePassword(request.POST,userInfo)
        if res != None:
            return errorResponse(request, res)
        userInfo = User.objects.get(username=uname)
 
    return render(request, 'selfInfo.html', {
        'userInfo': userInfo
    })
 
 
def table(request):
    uname = request.session.get('username')
    userInfo = User.objects.get(username=uname)
 
    tableData = list(getairdata())
 
    return render(request, 'table.html', {
        'userInfo': userInfo,
        'tableData':tableData
    })
 
def logOut(request):
    request.session.clear()
    return redirect('login')
 
def login(request):
    if request.method == "GET":
        return render(request, 'login.html', {})
    else:
        uname=request.POST.get('username')
        pwd=request.POST.get('password')
        print(uname,pwd)
        try:
            user = User.objects.get(username=uname,password=pwd)
            request.session['username'] = user.username
            return redirect('index')
        except:
            return errorResponse(request,'用户名或密码错误，请输入正确信息')
        #return render(request, 'login.html', {})
 
def register(request):
    if request.method == 'GET':
        return render(request, 'register.html',{})
    else:
        uname = request.POST.get('username')
        pwd = request.POST.get('password')
        ckPwd = request.POST.get('ckPassword')
        print(uname,pwd,ckPwd)
        try:
            User.objects.get(username=uname)
            return errorResponse(request,"用户名已存在")
        except:
            if not uname or not pwd or not ckPwd:return errorResponse(request,"请输入完整信息")
            if pwd != ckPwd:return errorResponse(request,"两次密码不相符，请确认您的密码")
            User.objects.create(username=uname,password=pwd)
            return redirect('/myApp/login/')
        return render(request, 'register.html', {})

刷新页面即可看到下图

十，年度分析

首先在urls下添加路由

新建airYearChart.html,内容跟table.html一致

后续步骤请浏览这个链接：https://blog.csdn.net/m0_69386681/article/details/156366182?spm=1011.2415.3001.5331