创建阿里云服务器并实现疫情地图可视化

创建阿里云服务器并实现疫情地图可视化

  • 申请阿里云ECS
    • 选择操作系统
    • 修改网络安全组规则
    • 进入宝塔管理端口
    • 共享资源
    • 完成图

申请阿里云ECS

先到阿里云官网找到产品下的云服务器
创建阿里云服务器并实现疫情地图可视化_第1张图片
首次创建的用户可以免费申请一个月和一星期的免费ECS创建阿里云服务器并实现疫情地图可视化_第2张图片
有企业和个人的,这个可以按需要选择,作为演示选择ECS突发性能t5创建阿里云服务器并实现疫情地图可视化_第3张图片
地域中建议选择离自己较近的服务器,操作系统先可以随便选择,购买成功后可以修改,带宽按需求选择创建阿里云服务器并实现疫情地图可视化_第4张图片
到此处你已经申请了一个属于自己的服务器啦

选择操作系统

申请好后回到刚开始的页面,点击管理控制台
创建阿里云服务器并实现疫情地图可视化_第5张图片
要想更改操作系统和其他配置,需要先把服务器停止
创建阿里云服务器并实现疫情地图可视化_第6张图片
创建阿里云服务器并实现疫情地图可视化_第7张图片
创建阿里云服务器并实现疫情地图可视化_第8张图片
自定义密码,要记住密码,等等需要登录宝塔操作系统!
确认信息完成后点击提交订单即可
创建阿里云服务器并实现疫情地图可视化_第9张图片

修改网络安全组规则

创建阿里云服务器并实现疫情地图可视化_第10张图片
创建阿里云服务器并实现疫情地图可视化_第11张图片
创建阿里云服务器并实现疫情地图可视化_第12张图片
添加这两个协议
其中,80的端口目的是让用户不输入任何的冒号端口号就可以访问,授权对象中的0.0.0.0/0是让所有人都可以访问这个页面。8888端口为管理端口,其授权对象一般都采用自身的IP地址而不是0.0.0.0/0,这样更加安全,但也有一个弊端就是只有设置的IP地址才能访问我们的宝塔操作系统。
创建阿里云服务器并实现疫情地图可视化_第13张图片
设置完之后启动服务器

进入宝塔管理端口

创建阿里云服务器并实现疫情地图可视化_第14张图片
创建阿里云服务器并实现疫情地图可视化_第15张图片
密码就是刚开始申请的密码创建阿里云服务器并实现疫情地图可视化_第16张图片
进入后输入bt default就可以看见登录宝塔所需要的账号和密码
创建阿里云服务器并实现疫情地图可视化_第17张图片
之后在浏览器输入外网面板地址就可以进入到宝塔登录面板,输入上面提供的账号密码就可以进入管理页面

共享资源

到此处你已经搭好了一个服务器啦
首先下载Tomcat,下载完成后为如下图片所示创建阿里云服务器并实现疫情地图可视化_第18张图片
点击所示的图标创建阿里云服务器并实现疫情地图可视化_第19张图片
进入webapps/ROOT/,找到index.jsp,点击编辑
创建阿里云服务器并实现疫情地图可视化_第20张图片
把代码改为:

<%@ 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)开始到现在的13位毫秒数字
   //Java中获取时间戳的方式:System.currentTimeMillis();
   String text =null;//用于缓存疫情数据的变量text
   long time = 0;//用于表示加载数据时的时间戳,0表示1970年
   
%>


<%
//Java代码的执行区域,用户每次访问都会执行
       if(System.currentTimeMillis()-time>60000){
       //更新加载数据时的时间
       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>

之后导入已经写好的前端页面
创建阿里云服务器并实现疫情地图可视化_第21张图片
大功告成啦

完成图

在浏览器输入你创建的外网地址(xxx.xxx.xxx.xxx)
创建阿里云服务器并实现疫情地图可视化_第22张图片
注:作者所学和所用的代码来自开课吧课程

你可能感兴趣的:(阿里云,服务器,java)