2020/11/02·Java·疫情地图部署上线阿里云

最新推荐文章于 2024-03-28 16:12:36 发布

hwd18300026110

最新推荐文章于 2024-03-28 16:12:36 发布

阅读量1.2k

点赞数 1

分类专栏： Java基础上云 JSP 文章标签： java js linux html

本文链接：https://blog.csdn.net/m0_45304160/article/details/109454431

版权

Java基础同时被 3 个专栏收录

10 篇文章 0 订阅

订阅专栏

JSP

2 篇文章 0 订阅

订阅专栏

上云

1 篇文章 0 订阅

订阅专栏

Java·疫情地图部署上线阿里云

阿里云服务器搭建

1.www.aliyun.com

2.点击ECS，自定义购买，付款模式：按量付款

3.地域及可用区：距离近的、随机分配；

4.示例：当前代；具体配置按需选择，测试情况下选择低配置和突发性能；

5.镜像：镜像市场——>宝塔（Linux 免费），下一步；

6.带宽计费模式：按使用流量，拉到最大80M（大概五万人次访问扣8毛钱）；如果选择按固定带宽，一下子扣了十几块；

7.安全组指的是同一个组的用户设置一样的防火墙（这里不用配置），下一步；

8.自定义密码：设置密码，完成；

9.勾选并选择自动释放时间（避免忘了手动释放，浪费钱）；勾选服务协议；

10.创建实例。点击管理控制台。

阿里云服务器配置

1.在控制台示例列表中，点击更多，选择网络和安全组；

2.安全组配置——》配置规则；

3.手动添加，端口范围80（默认端口），授权对象5个0（表示任何ip可访问），保存；

4.手动添加，端口8888（用于管理我们的服务器），授权对象5个0，保存；

5.后退到示例列表页面，点击远程连接，Workbench远程连接；

6.网页版连接登陆，账号root，密码刚刚输入的；

7.登陆，输入命令：bt default，初始化宝塔面板，获取基本信息（管理地址、账号、密码）；

8.浏览器打开获取信息中的URL，输入获取信息中的账号密码，即可登陆到服务器管理后台（管家）；关掉推荐安装；
9.点击软件商店，安装tomcat，修改8080为80，重启tomcat；

10.点击设置，配置修改，修改8080为80；

11.进入首页index.jsp：点击位置文件夹，webapps，root，index.jsp默认打开页面；

动态网页 JSP

1.概念

JSP 全称JavaServer Pages，是由Sun Microsystems公司主导创建的一种动态网页技术标准。

JSP部署于网络服务器上，可以响应客户端发送的请求，并根据请求内容动态地生成网页，然后供用户浏览。

原理：根据Java程序获取的数据+前端程序员的界面模板生成新的网页供用户访问。

2.三种代码块

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


Java代码成员区域（声明标签）：
	特点：
	  1. 只能用于定义成员。（以这次任务涉及的知识点来说，定义变量）
	  2. 这里的代码，只会在第一个用户访问时执行。
第一个用户访问时这里如果定义了变量，那么在服务器关闭之前，后续用户访问时，在
<% %>代码块中都可以重复使用这个变量。
<%!
	Java代码编写在这里
%>


将数据输出到页面模板（表达式标签）：
	特点：
	  1. 每次用户访问，代码都会执行。
	  2. 语句的结尾不加分号
<%=Java中的数据或变量%>

订阅号申请

1.前提：必须是未注册过腾讯相关产品（小程序、服务号）的邮箱才行。且同一个邮箱只能绑定以上其中一个；

2.填写基本信息，选择订阅号；

3.信息登记，选填的不要浪费时间；

4.需要用微信扫码，绑定管理员；

5.公众号信息上传头像、昵称、简介等信息

6.博主之前是有了一个小程序，然后需要注销，等了很久才通过审批；这里就直接使用，不用申请订阅号了；

代码实现

修改index.jsp

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

<!DOCTYPE html>
<html lang="en">
<head>
<meta name="viewport" content="width=device-width, initial-scale=1">
<meta charset="UTF-8">
<title>疫情地图</title>
<%!
    //首次加载时需要
    long time = 0;
    String text;
%>
<%
    //手动缓存
    if(System.currentTimeMillis()-time>60000){
        
        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,"UTF-8"));
        //5. 通过字符流br,读取一行内容,并将内容存储到变量text中
        text = br.readLine();
        //6. 可以将读取到的内容text 输出显示到text
        
    }
%>
<script type="text/javascript">
    		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>

上传control.js

var myChart = echarts.init(document.getElementById('main'));
function updateMap(num){
			$(".control").show();
			$(".control:eq("+num+")").hide();
			myChart.clear();
			var opt = null;
			switch(num){
				case 0:{
					opt = {
					        // 设置标题和副标题及副标题跳转链接
					        title: {
					            text: '新冠疫情-国内累计数据',
					            sublink: 'https://www.kaikeba.com'
					        },
					        // 数据提示框
					        tooltip: {
					            trigger: 'item', // item放到数据区域触发
					            formatter: function (params, ticket, callback) {
					                if(params.data)
					                    return params.name+'<br/>'+params.data.value+' (人)';
					                else
					                    return params.name+'<br/>无疫情信息';
					            }
					        },
					        // 视觉映射方案:
					        // visualMap默认是连续映射，我们也可以设置为分段型，对于分布范围广的数据
					        // 使用透明度来区分疫情严重情况
					        visualMap: {
					            type: 'piecewise',
					            pieces: [
					                {gt: 2000, color: 'darkred'},                        // (1500, Infinity]
					                {gt: 1300, lte: 2000, color: 'red', colorAlpha: 1},  // (1000, 1500]
					                {gt: 800, lte: 1300, color: 'red', colorAlpha: 0.8},
					                {gt: 500, lte: 800, color: 'red', colorAlpha: 0.6},
					                {gt: 200, lte: 500, color: 'red', colorAlpha: 0.4},
					                {gt: 50, lte: 200, color: 'red', colorAlpha: 0.3},
					                {lt: 50, color: 'red', colorAlpha: 0.2}          // (-Infinity, 100)
					            ],
					        },
					
					        // 具体数据
					        series: [
					            {
					                name: '国内各省确诊病例', // 系列名称
					                zoom:1.2,//地图大小
					                type: 'map', // 系列类型，地图
					                map: 'china', // 要使用的地图，即上面注册的地图名称
					                roam: true, // 开启鼠标缩放和平移漫游
					                label: { // 图形上的文本标签，地图默认显示数据名
					                    show: true,
					                    formatter: '{b}', // b是数据名，c是数据值
					                    fontSize: 8
					                },
					                data: data.data,
					            }
					        ]
					    };
					
				}
				break;
				case 1:{
					opt = {
					        // 设置标题和副标题及副标题跳转链接
					        title: {
					            text: '新冠疫情-国内新增数据',
					            sublink: 'https://www.kaikeba.com'
					        },
					        // 数据提示框
					        tooltip: {
					            trigger: 'item', // item放到数据区域触发
					            formatter:  function (params, ticket, callback) {
					                if(params.data)
					                    return params.name+'<br/>'+params.data.value+' (人)';
					                else
					                    return params.name+'<br/>无疫情信息';
					            }
					        },
					
							// 视觉映射方案:
					        // visualMap默认是连续映射，我们也可以设置为分段型，对于分布范围广的数据
					        // 使用透明度来区分疫情严重情况
					        visualMap: {
					            type: 'piecewise',
					            pieces: [
					                {gt: 50, color: 'darkred'},                        // (1500, Infinity]
					                {gt: 30, lte: 50, color: 'red', colorAlpha: 1},  // (1000, 1500]
					                {gt: 20, lte: 30, color: 'red', colorAlpha: 0.8},
					                {gt: 10, lte: 20, color: 'red', colorAlpha: 0.6},
					                {gt: 5, lte: 10, color: 'red', colorAlpha: 0.4},
					                {gt: 1, lte: 5, color: 'red', colorAlpha: 0.3},
					                {lt: 1, color: 'red', colorAlpha: 0.0}          // (-Infinity, 100)
					            ],
					        },
					
					        // 具体数据
					        series: [
					            {
					                name: '国内各省确诊病例', // 系列名称
					                zoom:1.2,//地图大小
					                type: 'map', // 系列类型，地图
					                map: 'china', // 要使用的地图，即上面注册的地图名称
					                roam: true, // 开启鼠标缩放和平移漫游
					                label: { // 图形上的文本标签，地图默认显示数据名
					                    show: true,
					                    formatter: '{b}', // b是数据名，c是数据值
					                    fontSize: 8
					                },
					                data: data.today,
					            }
					        ]
					    };	
				}
				break;
				case 2:{
					opt = {
					    // 设置标题和副标题及副标题跳转链接
					    title: {
					      text: '新冠疫情-全球累计数据',
					      sublink: 'https://www.kaikeba.com'
					    },
					    // 数据提示框
					    tooltip: {
					      trigger: 'item', // item放到数据区域触发
					      //formatter: '{b}<br/>{c} (人)' // 提示数据格式br表示换行，地图 : {a}（系列名称），{b}（区域名称），{c}（合并数值）, {d}（无）
					      formatter:function (params, ticket, callback) {
					        if(params.data)
					          return params.name+'<br/>'+params.data.value+' (人)';
					        else
					          return params.name+'<br/> 未公布感染人数';
					      }
					    },
					    // 视觉映射方案1：,疫情颜色根据传染病疫情等级分类为5个级别：黄色-橙色-深橙色-红色-深红色
					    // 为了是视觉分布更好，可以添加更多的颜色范围，然后适当调小max的值，因为美国和其它国家相差太大
					    /**/
					    visualMap: {
					      min: 1, // 颜色映射对应的最小值，即对应下面的lightskyblue
					      max: 500000, // 颜色映射对应的最大值，即对应下面的orangered
					      text: ['严重', '轻微'], // 映射图上下标记文本
					      realtime: true, // 是否显示拖拽手柄，映射条可以拖拽调整要映射的范围
					      calculable: true, // 拖拽时，是否实时更新地图
					      inRange: {
					        color: ['rgba(222,0,0,0.2)','rgba(160,0,0,1)'] // 颜色映射范围，最小值，过渡值，最大值
					      }
					    },
					
					    
					
					
					    // 具体数据
					    series: [
					      {
					        name: '全球各国确诊病例', // 系列名称
					        zoom:1.2,//地图大小
					        type: 'map', // 系列类型，地图
					        map: 'world', // 要使用的地图，即上面注册的地图名称
					        roam: true, // 开启鼠标缩放和平移漫游
					        label: { // 图形上的文本标签，地图默认显示数据名
					          show: true,
					          fontSize:8,
					          //formatter: '{b}', // b是数据名，c是数据值
					          formatter:function (params, ticket, callback) {
					            //公布了数据 且 数据累计数据大于5万的显示国家名称
					            if(params.data && params.data.value>50000) {
					              return params.name;
					            }else{
					              return '';
					            }
					          }
					        },
					        data: data.g_data,
					      }
					    ]
					  };
				}
				break;
				case 3:{
					opt = {
					    // 设置标题和副标题及副标题跳转链接
					    title: {
					      text: '新冠疫情-全球新增数据',
					      sublink: 'https://www.kaikeba.com'
					    },
					    // 数据提示框
					    tooltip: {
					      trigger: 'item', // item放到数据区域触发
					      formatter:function (params, ticket, callback) {
					        if(params.data)
					          return params.name+'<br/>'+params.data.value+' (人)';
					        else
					          return params.name+'<br/> 未公布感染人数';
					      }
					    },
					    // 视觉映射方案1：,疫情颜色根据传染病疫情等级分类为5个级别：黄色-橙色-深橙色-红色-深红色
					    // 为了是视觉分布更好，可以添加更多的颜色范围，然后适当调小max的值，因为美国和其它国家相差太大
					    /**/
					    visualMap: {
					      min: 0, // 颜色映射对应的最小值，
					      max: 20000, // 颜色映射对应的最大值
					      text: ['严重', '轻微'], // 映射图上下标记文本
					      realtime: true, // 是否显示拖拽手柄，映射条可以拖拽调整要映射的范围
					      calculable: true, // 拖拽时，是否实时更新地图
					      inRange: {
					        color: ['rgba(160,0,0,0)','rgba(160,0,0,1)'] // 颜色映射范围，最小值，过渡值，最大值
					      }
					    },
					    // 具体数据
					    series: [
					      {
					        name: '全球各国新增病例', // 系列名称
					        zoom:1.2,//地图大小
					        type: 'map', // 系列类型，地图
					        map: 'world', // 要使用的地图，即上面注册的地图名称
					        roam: true, // 开启鼠标缩放和平移漫游
					        label: { // 图形上的文本标签，地图默认显示数据名
					          show: true,
					          fontSize:8,
					          //formatter: '{b}', // b是数据名，c是数据值
					          formatter:function (params, ticket, callback) {
					            //公布了数据 且 数据累计数据大于5万的显示国家名称
					            if(params.data && params.data.value>1000 || params.name == '中国') {
					              return params.name;
					            }else{
					              return '';
					            }
					          }
					        },
					        data: data.g_today,
					      }
					    ]
					  };
				}
				break;
			}
			 myChart.setOption(opt);
		}
		updateMap(0);

一文一哲理

没有任何道路能通往真诚，因为真诚本身就是道路

最后麻烦朋友们的小手手点点赞，你们的点赞是我创作最好的动力

hwd18300026110

关注

1
点赞
踩
1

收藏

觉得还不错? 一键收藏
0
评论
2020/11/02·Java·疫情地图部署上线阿里云

Java·疫情地图部署上线阿里云阿里云服务器搭建阿里云服务器配置动态网页 JSP订阅号申请代码实现修改index.jsp上传control.js一文一哲理阿里云服务器搭建1.www.aliyun.com2.点击ECS，自定义购买，付款模式：按量付款3.地域及可用区：距离近的、随机分配；4.示例：当前代；具体配置按需选择，测试情况下选择低配置和突发性能；5.镜像：镜像市场——>宝塔（Linux 免费），下一步；6.带宽计费模式：按使用流量，拉到最大80M（大概五万人次访问扣8毛钱）；如果选
复制链接

扫一扫