Java项目实战_疫情地图可视化_day02

完成地图可视化

　　1.服务器搭建（tip：白嫖3年国外服务器，谷歌云，微软云，亚马逊云，每个可以试用一年；之后可以用阿里云服务器，学生可以试用两个月，普通新用户可以试用37天）

　　这里我用阿里云的服务器示例。

　　1.1　　直接购买步骤（tip：直接购买需要账户里有100元余额，所以我用的免费试用）

　　　　首先进入阿里云首页，新用户注册登录，选择产品-->云服务器ECS

　　　　点击立即购买

　　　　进入基础配置->网络和安全组->系统配置->分组设置->确认订单界面

　　　　　　基础配置选择了租的云服务器的操作系统，硬件等；网络和安全组给租的服务器调网络带宽，配置防火墙等；系统配置是设置这台电脑的登录账号和密码。

　　　　基础配置：

　　　　相应选择的解释：

　　　　　　按量付费：用多少付多少，比较便宜，也可以选择包年包月。

　　　　　　地域选择：选择合适的地域，访问服务器时。离该地域越近，速度越快。

　　　　　　为服务器配置两核CPU，1Gb内存，已经可以支持疫情地图的使用，越大越贵。

　　　　　　选择突发性能实例：表示服务器在一天24个小时里，只有6个小时是可以全功率开启的，对于我们的项目来说足够了。

　　　　　　镜像：镜像代表服务器的操作系统，选择镜像市场，查看更多镜像，找到宝塔控制面板，显示0元/月，选择。宝塔控制面板相当于给服务器装了一个Linux操作系统，并安装了一个电脑管家。

　　　　　　选择高效云盘，因为便宜。然后来个40g存储。

　　　　点击下一步，进入网络和安全组：

　　　　　　选择带宽：　　选择按使用流量，拉满80Mbps（疫情地图呈现一次大概需要几十kb，访问六七万次，才会使用8毛钱）。

　　　　点击下一步系统配置：

　　　　　　选择自定义密码，给出自己的密码。

　　　　点击下一步分组设置：

　　　　　　因为被项目只租用一台服务器，所以就不用分组了

　　　　点击下一步确认订单：

　　　　　　勾选上服务协议，点击创建实例。

　　　接下来直接进入控制台界面：

　　　　点击“实例”

　　　　将地域改为自己当时选择的地域，就会发现自己购买的服务器。

　　　　然后就到下面的蓝字部分继续：

　　1.2　　免费试用步骤

　　　　首先进入阿里云首页，新用户注册登录，划到页面最底部有“免费试用”按钮，点击

　　　　然后有两个可以选择，使用7天或者一个月，根据自己的需要选择

　　　　点击0元试用

　　　　选择合适地域（这里以华北2北京示例），然后直接点击立即购买

　　　　最后买完之后进入控制台

　　　　点击实例，选择地域，找到自己购买的服务器，然后勾选自己的服务器，选择停止。对服务器进行配置上的修改（因为免费试用是没有自己选择服务器配置的）。

　　　蓝字蓝字蓝字蓝字蓝字蓝字蓝字

　　　　点击云盘和镜像后，选择更换操作系统，然后自定义密码。

　　　　完成后，回到控制台。

　　　　现在已经完成了租了一个服务器，现在要去配置，管理这个服务器。

　　　　点击更多->安全组配置

　　　　然后点击配置规则

　　　　里面默认是有三个，我们现在去增加两个，点击手动添加

　　　　第一个：端口范围输入：80 授权对象选择：0.0.0.0/0 点击保存。

　　　　80是fttp协议默认端口号，方便用户不用输入冒号端口号就可以访问。

　　　　授权对象选择0.0.0.0/0，是为了让所有人都可以访问。

·　　·

　　　　第二个：

　　　　8888是电脑管家（宝塔）的管理网址，授权对象可以设置0.0.0.0/0或者自己的ip，自己的ip相对来说比较安全，只有自己可以访问电脑管家，但是笔记本电脑换一个网络之后就连不上了，还要重新设置，比较麻烦。（tip：自己的ip地址可以直接百度查到）

　　　　然后回到控制台服务器页面。

　　　　接下来点击远程连接

　　　　点击第一个立即登录

　　　　输入自己设置的密码，进入服务器操作界面，去给服务器要到自己宝塔系统的网址账号密码。

　　　　接着打开网址（外网面板地址）输入账号密码（username/password）登录。然后就打开了宝塔电脑管家，可以可视化的看到服务器运行状态。

　　至此，算是搭建服务器完成，在阿里云拥有了自己的一台电脑。这台电脑里还没有装任何的我们要用的软件，没有办法把我们的资源共享出去，我们现在需要一款软件可以把我们服务器里面的资源通过虚拟路径的方式共享出去。这种软件我们称之为“应用服务器软件”。

　　　　接下来装这款软件，进入软件商店，搜索tomcat，点击安装，选择tomcat9

　　　　安装完成后，点击tomcat最后面那个“设置”，选择“配置修改”，找到第69行，将8080改为80，然后点击保存，最后在“服务”里，点击“重启”。

　　　　（tip：因为我们之前开放了80的端口号给用户访问，但是tomcat默认端口号8080，所以要改一下端口号）

　　　　重启完成后，就可以访问服务器地址显示tomcat的欢迎界面了

　　　　那么这个汤姆猫的界面是在哪里呢？

　　　　点击文件夹

　　　　发现里面有个文件夹“webapps”，我们共享出去的一些资源就是这个文件夹里的资源。点击进去

　　　　发现里面有五个文件夹，第一个是“ROOT”，这个文件夹在tomcat中被设置为欢迎文件夹，访问这个文件夹里的内容不需要在地址后加/ROOT。

　　　　我们点击进去，找到里面的“index.jsp”，这个就是汤姆猫的那个界面。选中，点击编辑。

　　　　现在呢，我们要将这个里面的内容，换成我们的疫情地图代码。

　　2.疫情数据读取

　　我们一定不是数据的生产者，只是数据的搬运工。

　　　　疫情数据都是人为收集出来，然后在网页上做的呈现，没有程序可以自动汇总这些数据，因为每个国家公布数据的方式都不一样，有的国家是开发布会，有的国家是在网上公布一下，甚至有的三天两头不公布，所以不管是百度，丁香园还是网易的疫情地图都是人为收集的数据，最后再整合到数据仓库里面，然后再由程序进行取出与呈现。

　　　　接下来就要用到之前（day01）里面的代码去网上读取数据。这里开课吧为我们提供了一个网址（zaixianke.com/yq/all），都是整理好的疫情数据。　

    URL url = new URL("https://zaixianke.com/yq/all");
    URLConnection conn = url.openConnection();
    InputStream is = conn.getInputStream();
    BufferedReader br = new BufferedReader(new InputStreamReader(is,"UTF-8"));
    String text = br.readLine();
    br.close();

　　3.前后端整合上线

　　那么接下来就将index.jsp的代码替换为疫情地图代码，并获取疫情数据。

　　　　在这里提供疫情地图代码index.html和control.js两个文件（前端程序员的工作），将index.html里的代码粘到index.jsp里面，将control.js文件上传到tomcat

　　　　两个文件：链接：https://pan.baidu.com/s/1Mvy8-MAY_OmtHo5o7gQghg 提取码：5ewq