前天的內容。繼續：

1. 根據業務畫出流程圖（dag，有向無環圖）。
2. 看缺乏哪些函數，直接設計函數，主要入參和出參，根據出入參進行寫邏輯。

dag圖有了，參考這里：

https://www.toutiao.com/article/7101114126621229601

這個時候可以根據dag圖做一些數據結構設計，以及函數設計。

"""前端的作用，
---------------------------------------------------------------------------------------
1.功能1：收集長鏈接并生成短鏈接
  dag流程：收集長URL，并確認長URL有效，如果有效則生成短URL，并傳遞到后端服務器。
  1-1 收集長URL： 通過在index.html 中設計一個表單，客戶輸入表單后，用requests.form 方法獲取表單內容
  1-2 檢查長URL是否有效：通過checkurl(longurl)函數，當longurl 有效則返回1，否則返回0
  1-3 生成短URL：通過createshorturl(longurl)函數，從長url里面截取字段另外加上時間來生成一個短url
  1-4 傳遞到后端服務器：把長短URL的關系記錄到后端
      具體實現可以通過requests.post 方法，向對應的restful api 進行請求（備注1），傳遞jason字段（備注2）
      備注1：這里指post 的url，指requsts.post 請求對應的Url，建議post的url要詳細到具體的接口，比如127.0.0.1:8008/api/shorturlcreate 接口，這樣后端服務器可以根據接口特性來進行相應的邏輯處理
      備注2：制作字典，按照 dic1={短鏈:{"長鏈"：長鏈，"訪問日期"："null"，"創建日期"：date}} 創建
      另外，requests.post 方式，選擇data=json 方式傳遞，json字段是對備注2里字典信息做字符串序列化的結果 json.dumps(dic1)


2.功能2：收集短鏈接做相關跳轉
  dag流程：收集短url，如果短url存在，則接收服務端的redirect請求，跳轉到短URL對應的長URL鏈接上。
  2-1 收集短url：通過在index.html設計一個表單，客戶輸入表單后，用requests.form方法獲取表單內容
  2-2 檢查短url是否存在：通過checksurl(shorturl)函數，當shorturl有效則返回1，否則返回0 （服務端）
  2-3 跳轉到長URL：通過jumpurl(shorturl)函數，請求到服務端。服務端先判斷短URL是否存在，如果存在則做redirect。
      jumpurl函數設計：
      1.訪問到后端服務器，requests.post(url/api/jump,""), 后端服務器根據URL具體的api來返回信息，返回值里包含了URL信息
      2.服務端要構造返回的Header值，根據Location 參數 ，讓客戶瀏覽器跳轉到對應的長鏈URL中



3.功能3：請求某個短鏈的訪問信息，并進行展示：
  dag流程：收集短url 對應的信息，如果短URL存在，則返回這個短URL被調度的次數等信息
  3-1 在第2-3步，每次服務端指定后端做跳轉的時候，把短URL被訪問的時間做一個記錄。
      服務端操作：
      每次訪問短鏈的時候，對訪問情況做個統計：
       3-1-1: {短url：訪問時間} 存入redis 另外一個表里。
       3-2-2：對之前的 數據結構做個更新，主要是對 shorturl 的value做個update，訪問時間增加一行。

  3-2 發起請求，通過requests.post() 函數，傳參數為 /api/statics ，到后端
      收集后端返回的json字符串,查詢時間，短url，以及這個url的訪問列表，{date:[list],"shorturl",url, visittime:[list]}。
      用json.loads() 把信息拿到，然后收集visittime的信息，
      按照天的維度對visittime做一個圖像化。---作業。


redis 數據結構設計：
      key：value
      shorturl:{"對應的長鏈接"：longurl,"訪問時間":[visitdate1,visitdate2]，"創建時間":createdate}
      把短鏈做為Key，把長鏈的信息、訪問時間，創建時間作為value，

---------------------------------------------------------------------------------------

前端設計1 ：

1.功能1：收集長鏈接并生成短鏈接

dag流程：收集長URL，并確認長URL有效，如果有效則生成短URL，并傳遞到后端服務器。

1.收集長URL：通過在index.html 中設計一個表單，客戶輸入表單后，用requests.form 方法獲取表單內容。

2.檢查長URL是否有效：通過checkurl(longurl)函數，當longurl 有效則返回1，否則返回0。

3.生成短URL：createshorturl(longurl)函數。

4.傳參函數：linkshort_long(shorturl,longurl)

把長短鏈對照信息做成一個字典，并把字典轉化為json字段。

restapi 方式向后端傳遞相關信息：requests.post("URL", json=post_data)

def checkurl(longurl):
    #判斷longurl 是否可以訪問
    #如果是有效的，返回頭為200，則返回1
    #如果長連接無效，返回頭為200 之外的，則返回0
    return result


def createshorturl(longurl):
    #頭幾個字符基于時間-年月日時
    #后幾個字符取長鏈的前幾個字段
    return shorturl

def linkshort_long(shorturl,longurl):
    #生成一個json字段，并作為post邏輯的輸入。
    #后續這個字典被Json化后傳入到服務器后端，后端程序基于short url 及 createtype 可以做插入redis的操作。
    dic={"shorturl":shorturl,"date":date,"longurl":longurl,"createtype":"build"}
    return dic

前端設計2:

dag流程：收集短url，如果短url存在，則接收服務端的redirect請求，跳轉到短URL對應的長URL鏈接上。

2-1 收集短url：通過在index.html設計一個表單，客戶輸入表單后，用requests.form方法獲取表單內容

2-2 檢查短url是否存在：通過checksurl(shorturl)函數，當shorturl有效則返回1，否則返回0 （服務端）

2-3 跳轉到長URL：通過jumpurl(shorturl)函數，請求到服務端。服務端先判斷短URL是否存在，如果存在則做redirect。

jumpurl函數設計：

1.訪問到后端服務器，requests.post(url/api/jump,""), 后端服務器根據URL具體的api來返回信息，返回值里包含了URL信息

2.服務端要構造返回的Header值，根據Location 參數 ，讓客戶瀏覽器跳轉到對應的長鏈URL中

def checksurl(shorturl):
    #檢查shorturl 是否在后臺服務中存在，
    #后臺判斷是否存在，如果存在則返回確認
    #如果存在則返回值為真，否則為假
    return result

def jumpurl(shorturl):
    #發數據到服務端，
    #服務端判斷短鏈是否存在
    #如果存在則返回 redirect header，做301
    #同時服務端做一個記錄。
    

前端設計3:

3.功能3：請求某個短鏈的訪問信息，并進行展示：

dag流程：收集短url 對應的信息，如果短URL存在，則返回這個短URL被調度的次數等信息

3-1 在第2-3步，每次服務端指定后端做跳轉的時候，把短URL被訪問的時間做一個記錄。

#根據請求，做相關展示邏輯。

@app.route('/shorturl/stats')
def route_statics():
    #從requests 里面獲取shorturl的信息
    #post到服務端，收集訪問信息
    #從服務端獲取返回數值字典
    #用返回字典做展示，跳到一個單獨的頁面，用render_template模版。
    return dict

服務端操作：

每次訪問短鏈的時候，對訪問情況做個統計：

3-1-1: {短url：訪問時間} 存入redis 另外一個表里。

3-2-2：對之前的 數據結構做個更新，主要是對 shorturl 的value做個update，訪問時間增加一行。

3-2 發起請求，通過requests.post() 函數，傳參數為 /api/statics ，到后端

收集后端返回的json字符串,查詢時間，短url，以及這個url的訪問列表，{date:[list],"shorturl",url, visittime:[list]}。

用json.loads() 把信息拿到，然后收集visittime的信息，

按照天的維度對visittime做一個圖像化。---作業。

def check_ifexist(longurl):
# 檢查長鏈接是否存在，如果存在則跳過


def record_check(dic1):
    #收集長短鏈的鏈接請求，如果是訪問/api/record 則進入邏輯
    #把字典信息直接寫redis()，
    #redis插入，主要插入短鏈（key)及短鏈的對應信息表結構(value)，另外針對長鏈接是否存在的表結構(key為長鏈接，value為1）

def record_route(shorturl):
    #收集route請求，如果訪問的是/api/route ,則進入邏輯
    #查詢短鏈對應的長鏈接
    #返回header指定location 為長鏈接
    #通過update redis表，記錄這次訪問，

redis 數據結構設計：

表1:

key：value

shorturl:{"對應的長鏈接"：longurl,"訪問時間":[visitdate1,visitdate2]，"創建時間":createdate}把短鏈做為Key，把長鏈的信息、訪問時間，創建時間作為value。

這樣設計表結構的作用是，每次可以查到visit的訪問時間，可以容易查到shorturl被訪問的情況。

表2

key:value

longurl：shorturl

主要用來查詢對應的longurl 是否存在，把它作為Key更加容易。

先寫到這里，感覺還是蠻復雜的，不過經過上面的分析，其實大體程序框架已經ready了。

下一步準備客戶端、服務端的代碼。

前的技術總監喊我加入他們的接私活團隊，說他們缺一個前端工程師，不缺后端。可我一直是做后端開發的，前端代碼寫的實在是很少，沒有經驗，寫起來肯定很慢了，所以想對前端的HTML知識點做一個匯總。

HTML代碼結構

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Document</title>
</head>
<body>
    <h1>一級標題</h1>
    <br/>
    <h2>二級標題</h2>
</body>
</html>

<!DOCTYPE html>聲明這是一個html文檔；<html>元素是html頁面的根元素；整個html文檔包括兩大部分：head頭和body體。

meta元素提供了頁面的元信息；title元素描述了文檔的標題；body元素包含了可見的頁面內容。

HTML元素概念

HTML屬性概念

下面是適用于大多數 HTML 元素的屬性：

標題元素

<body>
    <!-- 一般用在標題上，利于seo優化-->
    <h1>這是標題 1</h1>
    <h2>這是標題 2</h2>
    <h3>這是標題 3</h3>
    <h4>這是標題 4</h4>
    <h5>這是標題 5</h5>
    <h6>這是標題 6</h6>
</body>

段落與換行元素

<body>
    <!-- 這是注釋 -->
    <!-- </p> 是塊級元素、前后有空行-->
    <p>這個段落</p>
    <p>這<br>個<br>段落</p>
    <hr/>
</body> 

基本格式化標簽

<body>
    <b>加粗</b>
    <i>斜體</i>
    <small>更小的</small> <br><br>
    <strong>重要的</strong> <br><br>
    這是 <sub> 下標</sub> 和 <sup> 上標</sup> <br><br>
    <del> 刪除的文本
</body>

超鏈接（鏈接）

<body>
    <!-- 實例 -->
    文本：<a href="http://www.example.com/">文本</a> <br/>
    圖像： <a href="http://www.example.com/">
        <img src="URL" alt="描述信息">
    </a> <br/>
    郵件： <a href="mailto:qq@example.com">發送e-mail</a> <br/>
    書簽：
    <a id="tips">書簽</a> <br/>
    <a href="#tips">跳到書簽</a>
</body>  

圖像標簽

<body>
    <img src="meinv.jpg" alt="美女" width="280" height="180">
</body>

HTML表格

表格由 <table> 標簽來定義。每個表格均有若干行（由 <tr> 標簽定義），每行被分割為若干單元格（由 <td> 標簽定義）。字母 td 指表格數據（table data），即數據單元格的內容。

數據單元格可以包含文本、圖片、列表、段落、表單、水平線、表格等等。

<body>
    <!-- 邊框屬性：如果不定義邊框屬性，表格將不顯示邊框-->
    <table border="1">
        <tr>
            <!-- 表頭使用<th>標簽定義。瀏覽器會把表頭顯示為粗體居中的文本-->
            <th>姓名</th>
            <th>年齡</th>
            <th>性別</th>
        </tr>
        <tr>
            <td>小紅</td>
            <td>18</td>
            <th>女</th>
        </tr>
        <tr>
            <td>小明</td>
            <td>21</td>
            <td>男</td>
        </tr>
    </table>
</body>  

HTML列表

<body>
    <!-- 有序列表 數字進行標記-->
    <ol>
        <li>蘋果汁</li>
        <li>草莓汁</li>
    </ol>
    <!-- 無序列表 粗體圓點標記-->
    <ul>
        <li>咖啡</li>
        <li>飲料</li>
        <li>茶
            <!-- 嵌套列表 -->
            <ol>
                <li>紅茶</li>
                <li>綠茶</li>
            </ol>
        </li>
    </ul>
</body>

HTM區塊

• 塊級元素在瀏覽器顯示時，會以新行來開始和結束。如<h1>,<p>,<ul>,<table>
• 內聯元素在顯示時不會以新行開始。如<b>, <td>, <a>, <img>

HTML 布局

<body>
    <div style="width:500px">
        <div style="background-color: antiquewhite;">
            <h1 style="margin-bottom:0;">網頁頭部信息</h1>
        </div>
      
        <div style="background-color: aquamarine; height:200px;width:100px;float:left;">
            <b>網頁左側信息</b><br>
            中考資訊<br>
            高考資訊<br>
            成人自考
        </div>
       
        <div style="background-color: aqua; height:200px;width:400px;float:left;">
            主題內容
        </div>
       
        <div style="background-color:#FFA500;clear:both;text-align:center;">
            底部內容
        </div>
    </div>
</body>

HTML表單

form表單有兩個屬性：

<body>
    <!-- 表單是一個包含表單元素的區域
    允許用戶在表單中輸入內容-->
    <form action="" method="">
        <!-- input 輸入標簽 類型是由type屬性定義-->

        <!-- 文本域 type="text" -->
        年齡: <input type="text" name="age"><br>

        <!-- 密碼字段 type="password" -->
        密碼: <input type="password" name="age"><br>
        
        <!-- 單選框 type="radio" -->
        <input type="radio" name="sex" value="male">男
        <input type="radio" name="sex" value="female">女<br>
        
        <!-- 復選框 type="checkbox" -->
        <input type="checkbox" name="like" value="Coffee">喜歡咖啡
        <input type="checkbox" name="like" value="tea">喜歡茶<br>

        <!-- 提交按鈕 type="submit" -->
        <!-- 將表單的內容傳送到服務器 -->
        <input type="submit" value="提交">
    </form>
</body>

HTML框架

<body>
    <!-- 通過使用框架，你可以在同一個瀏覽器窗口中顯示不止一個頁面。 -->
    <iframe src="test.html" width="200" height="200"></iframe>
</body>

height 和 width 屬性用來定義iframe標簽的高度與寬度

HTML <head> 元素介紹

<head> 元素定義了文檔的信息，包含了所有的頭部標簽元素。常用的標簽元素如下所示。

<meta> 標簽詳解

<!DOCTYPE html>
<html lang="en">
<head>
    <!-- 定義關鍵詞 -->
    <meta name="keywords" content="生活夢想家, 科技愛好者, 新手剪輯師, 記錄生活, 分享美好">
    <!-- 定義描述內容 -->
    <meta name="description" content="我是一個生活夢想家, 科技愛好者, 新手剪輯師, 記錄生活和分享美好的一個人。">
    <!-- 定義文檔作者 -->
    <meta name="author" content="小明">
    <!-- 每10秒鐘刷新當前頁面 -->
    <meta http-equiv="refresh" content="10">
    <title>Document</title>
</head>
<body>
</body>  
</html>

這只是HTML的基本內容，后續還會總結HTML5的知識點。