• 基于大数据分析与可视化的疫情信息发布系统


    这是我的毕业设计题目,当初选这个题目以为是最简单的,没想到却要做一个网站。不过既然选择了,那就好好干吧!

    开发环境

    1. 操作系统:Windows 10
    2. 数据库:Mysql 8.0.22
    3. Vue:2.9.6
    4. 开发工具:Pycharm Community Edition 2020.1.2、VScode
    5. 开发语言:Python、HTML、JS、CSS

    系统架构

    功能介绍

    全球疫情实时追踪

    全球疫情实时追踪页面,支持折线图、条形图、扇形图、地图热力图展示,图表由Echarts实现,支持左上角侧边栏跳转。

    全球疫情实时追踪

    全国疫情实时追踪

    全国疫情实时追踪页面,支持折线图、条形图、扇形图、地图热力图展示,图表由Echarts实现,支持左上角侧边栏跳转。

    国内外疫情资讯

    国内外疫情资讯展示,官方头条新闻展示页面,国内外新闻页面,点击都可以跳转到具体的新闻页面。

    登录页面

    包括登录名、密码输入,登录按钮、重置按钮。

    后台数据管理

    后台数据管理页面,包括了数据源选择、数据增加按钮、数据修改按钮、数据删除按钮、注销按钮

    网站部署

    前端部署

    打包

    1.首先找到config/index.js文件,将assetPublicPath的路径改为“./”
    2.在build目录下utils.js修改,找到如下配置添加publicPath: '../../'

     
    if (options.extract) {
      return ExtractTextPlugin.extract({
        use: loaders,
        fallback: 'vue-style-loader',
        publicPath: '../../',    //添加上的
      })
    } else {
      return ['vue-style-loader'].concat(loaders)
    }
    

    3.npm run build产生dist文件夹

    安装nginx

    sudo yum -y install nginx
    
    sudo systemctl start nginx
    
    如果想在系统启动时启用Nginx。请输入以下命令
    sudo systemctl enable nginx
    

    上传部署

    将dist文件夹上传到服务器
    
    vi /etc/nginx/nginx.conf
    
    在include /etc/nginx/default.d/*.conf;下方
    location / {
    	root /var/myapp/dist/;
    	index index.html index.htm;
    	try_files $uri $uri/ /index.html;
    }
    
    sudo systemctl restart nginx
    

    后端部署

    python3安装

    安装必要工具 yum-utils ,它的功能是管理repository及扩展包的工具 
    sudo yum install yum-utils
    
    使用yum-builddep为Python3构建环境,安装缺失的软件依赖,使用下面的命令会自动处理
    sudo yum-builddep python
    
    完成后下载Python3的源码包
    curl -O https://www.python.org/ftp/python/3.7.6/Python-3.7.6.tgz
    
    最后一步,编译安装Python3,默认的安装目录是 /usr/local
    tar xf Python-3.7.6.tgz
    cd Python-3.7.6
    ./configure
    make
    sudo make install
    
    #如果你要使用Python3作为python的默认版本,你需要修改一下 #bashrc 文件,增加一行alias参数
    #alias python='/usr/local/bin/python3.7'
    
    由于CentOS 7建议不要动/etc/bashrc文件,而是把用户自定义的配置放入/etc/profile.d/目录中,具体方法为
    vi /etc/profile.d/python.sh
    写入
    alias python='/usr/local/bin/python3.7'
    
    chmod 755 /etc/profile.d/python.sh
    
    重启会话使配置生效
    source /etc/profile.d/python.sh
    

    安装需要的库

    后台运行

    nohup /usr/local/bin/python3.7 -u app.py > test.log 2>&1 &
    
    定时运行
    
    用如下命令查看当前系统中的定时任务列表
    crontab -l
    
    对crontab进行编辑
    crontab -e
    
    这里设置的是每天6,、12、20点整运行脚本
    0 6,12,20 * * * /usr/local/bin/python3.7 /home/ec2-user/cov19/app.py > /home/ec2-user/cov19/auto.log
    
    完成后,可以重启一下crontab的服务即可
    service crond restart
    

    安装数据库

    下载安装

    配置MySQL 8.0的安装源
    sudo rpm -Uvh https://dev.mysql.com/get/mysql80-community-release-el7-1.noarch.rpm
    
    安装MySQL 8.0
    sudo yum --enablerepo=mysql80-community install mysql-community-server
    
    开启命令systemctl start mysqld
    
    查看状态systemctl status mysqld
    
    在日志文件中找出密码
    grep "password" /var/log/mysqld.log
    
    mysql -uroot -p
    
    其中‘new password’替换成你要设置的密码,注意:密码设置必须要大小写字母数字和特殊符号(,/';:等),不然不能配置成功
    ALTER USER 'root'@'localhost' IDENTIFIED BY 'new password';
    
    修改root账号远程访问权限
    mysql> use mysql;
    mysql> select host, user, authentication_string, plugin from user; #查看现有用户
    mysql>  CREATE USER 'root'@'%' IDENTIFIED BY 'Password';# 创建新用户
    mysql> GRANT ALL ON *.* TO 'root'@'%'; # 为新用户授权
    mysql>ALTER USER 'root'@'%' IDENTIFIED WITH mysql_native_password BY '040315';#把加密方式改成mysql_native_password
    mysql> flush privileges;
    

    存在的BUG

    1. 页面切换的时候,上一个页面对后端的请求依旧存在,没有销毁
    2. 登录实现依靠数据库中的status字段实现,不能实现登录状态保存,超时退出等功能
    3. 全球疫情热力图展示的数据图示为英文,转化成中文失败

    项目地址

    [button color="success" icon="" url="https://github.com/ndmiao/cov-19" type=""]点击下载[/button]

    参考
    该系统大屏展示页面参考https://www.bilibili.com/video/BV177411j7qJ实现

  • 相关阅读:
    [windows]清除访问共享的用户和密码信息
    Java架构搜集
    jsp、freemarker、velocity对比
    Spring MVC 了解WebApplicationContext中特殊的bean类型
    Web.xml配置详解之context-param
    <context:annotation-config/> 的理解
    使用@Controller注解为什么要配置<mvc:annotation-driven />
    web.xml配置之<context-param>详解
    @WebServlet
    正向代理与反向代理
  • 原文地址:https://www.cnblogs.com/ndmiao/p/14801367.html
Copyright © 2020-2023  润新知