前天的内容。继续：

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的知识点。