Java培训Day03——制作疫情地图（三）

2022-11-10 19:29:31

一、前言

此次培训，是为期三天的网上培训。最终的目的是制作出疫情地图。首先我们来看看主要的讲课内容大纲。

　　Day1

　　　　|-Java语法学习（个人感觉讲得还可以，主要围绕本次培训作出的讲解，没有像网上的基础课程那样，长篇大论，有基础的童鞋可以看看复习一下的）

　　　　|-游戏化内存分析（印象中是拿了植物大战僵尸这个单机游戏来讲解的，通过抓包的形式，给我们介绍了太阳【这个游戏的游戏金币】在程序开发中就是一个变量）

　　　　|-制作自动关机程序

　　Day2

　　　　|-IDEA的使用（竟然在培训班中奖了，今天就来个IDEA写程序）

　　　　|-网络资源定位详解

　　　　|-疫情数据分析读取

　　　　|-对话图灵机器人

　　　　|-手机短信发送

　　Day3

　　　　|-疫情地图展示

　　　　|-阿里云服务器搭建

　　　　|-微信公众号入口

一、疫情地图的展示

二、阿里云服务器搭建

使用阿里云服务器的原因：阿里云市场占有比较大，对于以后应聘工作有经验优势。

首先注册阿里云，然后登陆进来在首页按下图提示操作

因为开通云平台需要的步骤比较多，这里我单独开了一个新文章（Java制作疫情地图——阿里云搭建篇）

接下来我们修改我们的index.jsp这个文件，让他显示实时数据就可以了。

首先我们来了解一下什么是jsp文件

动态网页 JSP

由于网络的发展：静态网页（数据固定不变，只能通过修改源代码文件去修改网页数据）已经不满足我们的使用了，所以出现了动态网页（前端数据，会根据后台获取的数据实时更新）。

由于市场对动态网页的需求，故出现了我们的JSP（Java Server Pages） ，是由sun公司主导创建的一种动态网页标准。其原理： 根据Java后端程序获取的数据+前端程序员的界面模板 生成新的网页供用户访问。

JSP中可以包含Java代码，也可以包含HTML

Java代码执行区域：
特点：每次用户访问，代码都会执行。
<%
Java代码编写在这里
%>


Java代码成员区域：
特点：
1. 只能用于定义成员。（以这次任务涉及的知识点来说，定义变量）
2. 这里的代码，只会在第一个用户访问时执行。
在服务器关闭之前，第一个用户访问时定义的变量，可以被每次用户访问时的<%%>所使用
<%!
Java代码编写在这里
%>

然后这里我把前端程序员写的源代码post出来：

链接：https://pan.baidu.com/s/1nLAPc3e5tf-3cgt6uisRFA
提取码：6n9w

源代码下载后，我们先在Java程序中，试试前一章节的操作（与机器人聊天，发送验证码，获取疫情数据　　Java培训Day02——制作疫情地图（二））

获取正常，我们把代码也给大家放出来

package com.CionDa.Data;

import java.io.BufferedReader;
import java.io.IOException;
import java.io.InputStream;
import java.io.InputStreamReader;
import java.net.MalformedURLException;
import java.net.URL;
import java.net.URLConnection;

public class Data {

    public static void main(String[] args) throws IOException {
        // TODO Auto-generated method stub
        //1. 创建一个URL类的对象url
        URL url = new URL("https://zaixianke.com/yq/all");
        //2. 通过URL类的对象url打开网络连接 , 并得到连接对象conn
        URLConnection conn = url.openConnection();
        //3. 通过连接对象 , 得到用于读取网页内容的输入流 is
        InputStream is = conn.getInputStream();
        //4. 将上述的字节流is 装饰为字符流 , 将字符流再装饰为一次能读取一行的字符流br
        //BufferedReader br = new BufferedReader(new InputStreamReader(is));
        //若我们的读取字符乱码，我们可以把4换成下面这一句
        BufferedReader br = new BufferedReader(new InputStreamReader(is, "UTF-8"));
        //5. 通过字符流br,读取一行内容,并将内容存储到变量text中
        //我们这里来读取四行看看
        String text = br.readLine();
        //6. 可以将读取到的内容text 输出显示到控制台
          System.out.println(text);
    }

}

然后我们再导入我们的前端同事的代码进行修改开发

①解压开我们的前端代码

②复制index.html文件

③去eclipse粘贴

④再选中src，右击，new->other->搜索JSP

⑤选中对应的文件夹，修改文件名称，然后next->finish

⑥我们打开index.jsp文件，修改编码格式为UTF-8

⑥移植代码

下面F2快捷键改成Alt+/

然后我们把这个index.jsp和前端小伙伴写的control.js上传至我们的宝塔控制面板里了

来到这里我们已经完成我们的网站搭建了

下面进行网站的访问优化（提高访问速度，提高并发）

先来看看我们没优化之前的访问速度：593ms

我们大概估算统计一下：我们593ms，上传下载各占一半的话，上传数据大概300ms。然后因为用户访问阿里云的速度是比较快的（大概可以10-30ms，根据情况而定，由服务器地址与用户距离，以及用户终端的网速与硬件配置而定），所以我们主要是优化阿里云访问我们API接口的服务器这一段的速度（大概100ms-200ms之间）

我们试试把index.jsp改成HelloWorld，然后看看静态页面的访问速度

这里我们的网速原因，正常是10-30ms之间，这里到100了o(*￣︶￣*)o

下面我们进行代码的修改，让网站的访问速度得到提升。这里我们的思路是：第一个用户访问我们的网站时，进行API数据获取，经过10分钟后，下一个用户来访问我们的网站再进行API数据获取。这10分钟期间进来的用户，数据不进行更新，甚至10分钟后无用户访问，我们程序也不进行更新。

这样数据在最少每10分钟内保存在阿里云上，然后进行单路操作（即用户和阿里云的通信）。到下一次10分钟刚刚好有人来访问，我们再进行双路乃至多路操作，进行API数据更新获取（即用户->阿里云->API服务器->阿里云->用户）。图示解析：

那么我们此时，可以执行以下代码，进行优化，代码中新添了成员区域，各位童鞋可以看注释进行学习

<%@page import="java.io.InputStreamReader"%>
<%@page import="java.io.BufferedReader"%>
<%@page import="java.io.InputStream"%>
<%@page import="java.net.URLConnection"%>
<%@page import="java.net.URL"%>
<%@ page language="java" contentType="text/html; charset=UTF-8"
    pageEncoding="UTF-8"%>
<!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代码成员区域
        //1. 只能用于定义成员。（以这次任务涉及的知识点来说，定义变量）
        //2. 这里的代码，只会在第一个用户访问时执行。
        //在服务器关闭之前，第一个用户访问时定义的变量，可以被后续所有用户访问"执行区域"时使用
        //===================
        <%!
            //定义该变量：用于缓存每次读取的疫情数据
            String text;
            //用于记录上一次时间
            long time = 0;
        %>
        //===================
        //Java代码执行区域
        //每次所有用户访问时，都会执行
        //===================
        <%
        //时间戳：格林威治历（1970-1-1 00:00），开始到目前的毫秒级数字（13位数字），System.currentTimeMillis()
            if(System.currentTimeMillis()-time>600000){
                time = System.currentTimeMillis(); 
                //1. 创建一个URL类的对象url
                URL url = new URL("https://zaixianke.com/yq/all");
                //2. 通过URL类的对象url打开网络连接 , 并得到连接对象conn
                URLConnection conn = url.openConnection();
                //3. 通过连接对象 , 得到用于读取网页内容的输入流 is
                InputStream is = conn.getInputStream();
                //4. 将上述的字节流is 装饰为字符流 , 将字符流再装饰为一次能读取一行的字符流br
                //BufferedReader br = new BufferedReader(new InputStreamReader(is));
                //若我们的读取字符乱码，我们可以把4换成下面这一句
                BufferedReader br = new BufferedReader(new InputStreamReader(is, "UTF-8"));
                //5. 通过字符流br,读取一行内容,并将内容存储到变量text中
                //我们这里来读取四行看看
                text = br.readLine();
            }
        %>
        //===================
            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>

立刻缩短到1/3的时间。

到这里我们的阿里云服务器部署->疫情数据网站上传->网站提高并发优化就结束了，剩下的就是把我们的连接添加到公众号上去

三、微信公众号入口

部署到微信公众号中

1. 打开微信公众号官网: https://mp.weixin.qq.com/
2. 登陆
3. 如下图设置自动回复: 点击查看<a href="http://你的ip">疫情地图</a>

码农公寓

相关文章