疫情地圖可視化專案

本專案來源于開課吧開源專案，為前后端分離，我們只對后端進行操作

1.服務器的搭建

我們打開阿里云，之后選擇云服務器ECS進行購買或者試用（選擇按量付費，此時我們的成本極低）
該專案使用的服務器如下

在這里插入圖片描述

我們要在實體中對其進行操作，如果購買完沒有在阿里云控制臺的云服務器ECS中的實體中看到我們的服務器，記得修改上方的地址（為我們所購買的服務器所在地址）

在這里插入圖片描述

在實體中將其關閉，點擊右側的更多-云盤和鏡像-更換作業系統
我們將作業系統修改為寶塔控制面板
之后再次啟動
接下來我們點擊更多-網路和安全組-安全組配置，點擊配置規則并添加成為如下
- 其中埠80為我們的http協議
- 埠8080為寶塔訪問的入口，授權物件可自行設定，全0代表無限制，當然會不太安全！
- 我們接著通過右側遠程連接VNC，（由于本人無法通過Workbench遠程連接/原因暫時未知，提示用戶名密碼不正確），在命令列中輸入bt default
- 可獲得寶塔的網址和密碼
- 打開寶塔的網址

在這里插入圖片描述

在軟體商店中下載tomcat
安裝完成后，在設定中進行配置修改，將69行的埠號改為80并重啟

2.前后端整合上線

我們繼續點擊檔案夾圖示訪問其所在位置
打開webapps-ROOT，對index.jsp進行編輯
可以將除了UTF-8那行以外的代碼刪掉，并修改為如下代碼

<%@ 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執行區，每次都會執行
        //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.	加載一行資料
        String 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>

同時我們需要將前端程式員提供的jsp檔案上傳，上傳按鈕就在該頁的左上角
再次訪問我們的服務器ip地址，即初步完成

在這里插入圖片描述

其中url的網址為開課吧提供的疫情資料

3.并發優化

在這里插入圖片描述

打開我們的阿里云控制臺并按流程找到實體，打開其公網ip
打開我們網頁，然后按下F12，再重繪一次，我們能夠看到打開時間為421ms

1 由于我們打開網址時，我們所租的阿里云服務器會訪問存盤疫情資料的服務器并得到回傳，因而我們會在這其中耗費大量的時間
2 所以我們希望在第一次用戶訪問時，在我們所租的阿里云服務器中開辟一個快取來儲存此時得到的疫情資料，之后用戶再次訪問我們的網址時，直接呼叫本地的變數賦予其疫情資料即可
3 當然我們希望疫情資料能夠10分鐘重繪一次

通過實體的遠程連接（VNC），我們查看寶塔控制面板的賬戶密碼及網址

在這里插入圖片描述

登陸寶塔面板輸入帳戶密碼，并在軟體商店中輸入tomcat
繼續打開tomcat的檔案位置，然后對在其webapps檔案下的Root檔案夾下的index.jsp進行修改

在這里插入圖片描述

我們在昨天的基礎上，增加一些代碼，整個index.jsp的代碼如下

<%@ 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年開始）開始到現在的秒數
    //從java中獲取時間戳的方式：System.currentTimeMillis();
    //用于快取疫情資料的變數text
    String text = null;
    //用于表示加載資料時的時間戳
    long time = 0;
%>
<%
    if(System.currentTimeMillis()-time>600000){
        //java執行區，每次都會執行
            //0 更新加載資料時的時間
            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>

在這里插入圖片描述

我們能夠看到再次訪問時只需要46ms，提高了將近10倍的速度
第一次修改時，未將39行（也可能是附近）的String刪掉，發現頁面的地圖無法顯示，但訪問速度依然提升了
第二次將String刪掉后我們即實作了并發優化

4.全球加速

之所以百度頁面能夠同時承載大量的用戶訪問，是由于其建立了多個服務器
當我們訪問百度時，訪問的是離我們較近的服務器（也同時判斷服務器是否空閑）
眾多服務器和中臺連接，我們購買的阿里云服務器（源站）
通過ip地址訪問我們的服務器明顯不方便，因為我們需要購買域名（本專案中不進行操作）
買域名，可登陸中國萬網
當我們訪問域名時，我們的源服務器會將資料傳給中臺，進而選擇合適的服務器回傳資料
在域名決議服務器中，我們存盤的不是ip地址而是cname：阿里云dcdncname

全站加速操作
1 打開阿里云網頁
2 在產品中找到 全站加速DCDN
3 之后傻瓜式操作完成后
4 全站加速中找到域名管理 - 添加域名 - 輸入加速域名
5 資源組為默認資源組
6 ip為源站ip
7 之后添加成功
8 點擊回傳域名串列，將域名對應的cname復制
9 之后在控制臺處打開阿里云的域名
10 找到我們的域名點擊決議
11 添加記錄，記錄型別指向cname，記錄值為我們復制的cname
12 主機記錄和域名相同，點擊確認
13 之后需要等待一段時間才能成功

轉載請註明出處，本文鏈接：https://www.uj5u.com/qita/238017.html

標籤：其他

上一篇：IIS 6.0 遠程代碼執行漏洞復現（cve-2017-7269）

下一篇：本地Navicat連接Windows Server服務器上的MySQL