疫情地图可视化

疫情地图可视化项目

  • 本项目来源于开课吧开源项目,为前后端分离,我们 只对后端进行操作

1.服务器的搭建

  • 我们打开阿里云,之后选择云服务器ECS进行购买或者试用(选择按量付费,此时我们的成本极低)

  • 该项目使用的服务器如下

疫情地图可视化_第1张图片

  • 我们要在实例中对其进行操作,如果购买完没有在阿里云控制台的云服务器ECS中的实例中看到我们的服务器,记得修改上方的地址(为我们所购买的服务器所在地址)

疫情地图可视化_第2张图片

  • 在实例中将其关闭,点击右侧的更多-云盘和镜像-更换操作系统

  • 我们将操作系统修改为宝塔控制面板疫情地图可视化_第3张图片

  • 之后再次启动

  • 接下来我们点击更多-网络和安全组-安全组配置,点击配置规则并添加成为如下
    疫情地图可视化_第4张图片

    • 其中端口80为我们的http协议

    • 端口8080为宝塔访问的入口,授权对象可自行设置,全0代表无限制,当然会不太安全!

    • 我们接着通过右侧远程连接VNC,(由于本人无法通过Workbench远程连接/原因暂时未知,提示用户名密码不正确),在命令行中输入bt default

    • 疫情地图可视化_第5张图片

    • 可获得宝塔的网址和密码

    • 打开宝塔的网址

疫情地图可视化_第6张图片

  • 在软件商店中下载tomcat
  • 安装完成后,在设置中进行配置修改,将69行的端口号改为80并重启

2.前后端整合上线

  • 我们继续点击文件夹图标访问其所在位置在这里插入图片描述

  • 打开webapps-ROOT,对index.jsp进行编辑

  • 可以将除了UTF-8那行以外的代码删掉,并修改为如下代码

<%@ page session="false" pageEncoding="UTF-8" contentType="text/html; charset=UTF-8" %>
<%@ page import = "java.net.URL"%>
<%@ page import = "java.net.URLConnection"%>
<%@ page import = "java.io.InputStream"%>
<%@ page import = "java.io.InputStreamReader"%>
<%@ page import = "java.io.BufferedReader"%>





疫情地图


 





  • 同时我们需要将前端程序员提供的jsp文件上传,上传按钮就在该页的左上角

  • 再次访问我们的服务器ip地址,即初步完成

疫情地图可视化_第7张图片

  • 其中url的网址为开课吧提供的疫情数据

3.并发优化

疫情地图可视化_第8张图片

  • 打开我们的阿里云控制台并按流程找到实例,打开其公网ip

  • 打开我们 网页,然后按下F12,再刷新一次,我们能够看到打开时间为421ms

  • 1 由于我们打开网址时,我们所租的阿里云服务器会访问存储疫情数据的服务器并得到返回,因而我们会在这其中耗费大量的时间
    2 所以我们希望在第一次用户访问时,在我们所租的阿里云服务器中开辟一个缓存来储存此时得到的疫情数据,之后用户再次访问我们的网址时,直接调用本地的变量赋予其疫情数据即可
    3 当然我们希望疫情数据能够10分钟刷新一次
    
  • 通过实例的远程连接(VNC),我们查看宝塔控制面板的账户密码及网址

疫情地图可视化_第9张图片

  • 登陆宝塔面板输入帐户密码,并在软件商店中输入tomcat

  • 继续打开tomcat的文件位置,然后对在其webapps文件下的Root文件夹下的index.jsp进行修改

疫情地图可视化_第10张图片

  • 我们在昨天的基础上,增加一些代码,整个index.jsp的代码如下

    <%@ page session="false" pageEncoding="UTF-8" contentType="text/html; charset=UTF-8" %>
    <%@ page import = "java.net.URL"%>
    <%@ page import = "java.net.URLConnection"%>
    <%@ page import = "java.io.InputStream"%>
    <%@ page import = "java.io.InputStreamReader"%>
    <%@ page import = "java.io.BufferedReader"%>
    
    <!DOCTYPE html>
    <html lang="en">
    <head>
    <meta name="viewport" content="width=device-width, initial-scale=1">
    <meta charset="UTF-8">
    <title>疫情地图</title>
    <script type="text/javascript">
    <%!
        //感叹号的作用用来表示此处为java声明区
        //这里用来定义一些变量,只有第一次访问时会执行,后续访问重复使用第一次创建的变量
        //时间戳:表示时间节点,为格林威治历(1970年开始)开始到现在的秒数
        //从java中获取时间戳的方式:System.currentTimeMillis();
        //用于缓存疫情数据的变量text
        String text = null;
        //用于表示加载数据时的时间戳
        long time = 0;
    %>
    <%
        if(System.currentTimeMillis()-time>600000){
            //java执行区,每次都会执行
                //0 更新加载数据时的时间
                time = System.currentTimeMillis();
                //1. 先准备一个URL类的对象 u
                URL url = new URL("https://zaixianke.com/yq/all");
                //2. 打开服务器连接,得到连接对象 conn
                URLConnection conn = url.openConnection();
                //3. 获取加载数据的字节输入流 is
                InputStream is = conn.getInputStream();
                //4.将is装饰为能一次读取一行的字符输入流 br
                BufferedReader br = new BufferedReader(new InputStreamReader(is,"UTF-8"));
                //5.加载一行数据
                 text = br.readLine();
                //6.释放资源
                br.close();     
        }
                %>
            var data = <%=text%>;
    </script>
    <script src="https://cdn.bootcss.com/jquery/3.4.1/jquery.min.js"></script>
    <script src="https://cdn.bootcss.com/echarts/4.7.0/echarts.min.js"></script> 
    <script src="http://cdn.zaixianke.com/china.js"></script>
    <script src="http://cdn.zaixianke.com/world.js"></script>
    </head>
    <body>
    <div id="main" style="width: 100%;height:600px;"></div> <br>
    <div style="text-align:center">
    		<a style="color:#333" class="control" align="center" href="javascript:updateMap(0)">国内累计</a>
    		<a style="color:#333" class="control" align="center" href="javascript:updateMap(1)">国内新增</a>
    		<a style="color:#333" class="control" align="center" href="javascript:updateMap(2)">全球累计</a>
    		<a style="color:#333" class="control" align="center" href="javascript:updateMap(3)">全球新增</a>
    </div>
    <script src="control.js"></script>
    </body>
    </html>
    

疫情地图可视化_第11张图片

  • 我们能够看到再次访问时只需要46ms,提高了将近10倍的速度
  • 第一次修改时,未将39行(也可能是附近)的String删掉,发现页面的地图无法显示,但访问速度依然提升了
  • 第二次将String删掉后我们即实现了并发优化

4.全球加速

  • 之所以百度页面能够同时承载大量的用户访问,是由于其建立了多个服务器

  • 当我们访问百度时,访问的是离我们较近的服务器(也同时判断服务器是否空闲)

  • 众多服务器和中台连接,我们购买的阿里云服务器(源站)

  • 通过ip地址访问我们的服务器明显不方便,因为我们需要购买域名(本项目中不进行操作)

  • 买域名,可登陆中国万网

  • 当我们访问域名时,我们的源服务器会将数据传给中台,进而选择合适的服务器返回数据

  • 在域名解析服务器中,我们存储的不是ip地址而是cname:阿里云dcdncname

全站加速操作
1 打开阿里云网页
2 在产品中找到 全站加速DCDN
3 之后傻瓜式操作完成后
4 全站加速中找到域名管理 - 添加域名 - 输入加速域名
5 资源组为默认资源组
6 ip为源站ip
7 之后添加成功
8 点击返回域名列表,将域名对应的cname复制
9 之后在控制台处打开阿里云的域名
10 找到我们的域名点击解析
11 添加记录,记录类型指向cname,记录值为我们复制的cname
12 主机记录和域名相同,点击确认
13 之后需要等待一段时间才能成功

你可能感兴趣的:(疫情地图可视化)