新冠肺炎疫情实时地图

偶然看到这个项目，觉得很好玩。很久没有写过前端了，用这个来练练手。

涉及技术：linux(主要是阿里云服务器上)，servlet，jsp，tomcat

难点：数据的实时更新。

项目进度一：云服务器的搭建

这次项目选择的是市场占有率高，国内目前唯一自主研发的服务器阿里云ECS服务器。

1.购买地址：https://www.aliyun.com/product/ecs?userCode=k6ji3ksd

2.就买最便宜的。2核CPU 2GB内存就可以了。注意：使用宝塔linux面板，很方便。

3.重点：设置服务器安全组列表，手动添加端口80和段口8888并保存。这里还应注意后续使用tomcat的时候，tomcat默认端口是8080，需要修改配置。

4.启动服务器。服务器中输入命令 bt default，找到宝塔给的url和账号密码，用来登录，进入宝塔面板。找到软件商店里的tomcat并安装(大约两分钟)。

5.与(3)对应的问题，安装完毕tomcat后，设置，配置修改，将8080端口改为80。然后服务->重启tomcat.

6.进入tomcat安装的文件夹下webapps目录下，将编写好的jsp文件上传到ROOT文件夹下，就可以通过ip地址访问我的JSP了。

项目进度二：页面实现

1.编写疫情数据读写代码，后续要放到JSP中的，这部分是重点。

//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中    
String text = br.readLine();    
//6.可以将读取到的内容text 输出显示到控制台    
System.out.println(text);

2.将前端代码移植到 jsp中，并把上面我们的java代码放进Java代码块中。

代码：注意要在前面导包，格式 import="xxx,xxx,xxx....."

<%@ page session="false" import="java.net.URL,java.net.URLConnection,java.io.InputStream,java.io.BufferedReader,java.io.InputStreamReader" 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>
<script type="text/javascript">
<%
//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中    
String text = br.readLine();    
//6.    可以将读取到的内容text 输出显示到模板中    
//System.out.println(text);
%>
            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>

3.展示妹妹说紫色很有韵味

【废话来了——

这里插播一些jsp知识点，温故知新：

Java Server Pages 部署于网络服务器上，本质就是一个servlet。servlet擅长业务，JSP擅长显示。

主要构成：HTML网页代码、Java代码片段、Java标签。

三种代码块：

①<% java代码 %> Java代码执行区域(脚本标签)，每次用户访问，代码都会执行

②<%! Java代码 %> Java代码成员区域(声明标签)，第一个用户访问时如果定义了变量，那么服务器关闭之前，后续用户访问时，<%%>代码块中都可以重复使用这个变量。

③<%= java中的数据或者变量%> 将数据输出到页面模板(表达式标签)

知识点又来了：JSP隐含对象！九个：

out

】

posted on 2020-09-15 22:36 szdbjooo 阅读(678) 评论(0) 收藏举报

刷新页面返回顶部

四方显神

导航

公告

新冠肺炎疫情实时地图