整合营销服务商
电脑端+手机端+微信端=数据同步管理
免费咨询热线：
电脑端+手机端+微信端=数据同步管理
免费咨询热线：
昨天，把所有服务端的mock都实现：
上代码：
"""
---------------------------------------------------------------------------------------
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，
---------------------------------------------------------------------------------------
"""
import redis
import re
import json
import time
import cgi
from redis import StrictRedis, ConnectionPool
from flask import Flask,jsonify,request
import requests
app=Flask(__name__)
def insert_into_redis(shorturl,longurl):
# 如果含义为插入，则做插入操作
pool=ConnectionPool(host='localhost', port=6379, db=0, decode_responses=True)
# redis 取出的结果默认是字节，我们可以设定 decode_responses=True 改成字符串。
r=StrictRedis(connection_pool=pool)
string=time.strftime("%Y-%m-%d %H:%M:%S", time.localtime())
r.hset("shorttolong",shorturl, json.dumps({"longurl": longurl,"visittime": [], "creattime":string}))
r.hset("longtoshort",longurl,shorturl)
print("The value {0} is inserted".format(shorturl))
return 1
def check_if_exist(longurl):
pool=ConnectionPool(host='localhost', port=6379, db=0, decode_responses=True)
r=StrictRedis(connection_pool=pool)
# 判断是否存在，如果存在则返回1
if r.hexists("longtoshort",longurl):
result=1
else:
result=0
return result
def get_longurl(shorturl):
pool=ConnectionPool(host='localhost', port=6379, db=0, decode_responses=True)
r=StrictRedis(connection_pool=pool)
# 判断是否存在，如果存在则返回1
longurljson=r.hmget("shorttolong",shorturl)
longurl=json.loads(longurljson[0])["longurl"]
#print(longurljson)
#print(longurl)
return longurl
def update_jumptime(shorturl):
pool=ConnectionPool(host='localhost', port=6379, db=0, decode_responses=True)
r=StrictRedis(connection_pool=pool)
longurljson=r.hmget("shorttolong", shorturl)
dic1=json.loads(longurljson[0])
list1=dic1["visittime"]
print(list1)
string=time.strftime("%Y-%m-%d %H:%M:%S", time.localtime())
list1.append(string)
dic1["visittime"]=list1
r.hset("shorttolong", shorturl, json.dumps(dic1))
print("info: update the visittime of the {0} success".format(shorturl))
return 1
def redirect_to_longurl(longurl):
redirect("https://"+longurl)
return 1
"""
0.判断长链接是否已经存在
在用户端进行创建的时候，要检查长链接是否已经在服务端存在了，如果存在应该忽略。
如何确定服务端存在，通过post 接口来查询。
检查长URL是否有效：通过checkurl(longurl)函数，当longurl 已经存在，
返回json字段{'result':1}，不存在则否则返回{'result':0}
"""
@app.route('/api/checkurl', methods=['POST'])
def check_url():
longurl=request.json['longurl']
result=check_if_exist(longurl)
print(result)
return jsonify({'result':result,"longurl":longurl}),200
"""
1.收集长链接生成短链接：
根据客户端的post 请求，收集客户端发送的shorturl以及longurl,把关联关系插入到redis中
插入的时候，redis表中有两个hash库，
"shorttolong" 库，结构为 shorturl:{"longurl":longurl,"visittime",{},"createtime":string}
"longtoshort" 库，结构为 longurl:shorturl
"""
@app.route('/api/shorturlcreate',methods=['POST'])
def shorturl_create():
shorturl=request.json['shorturl']
longurl=request.json['longurl']
insert_into_redis(shorturl, longurl)
print("info: insert into redis {0}:{1} success".format(shorturl,longurl))
return jsonify({"info":"insert into redis "+longurl+shorturl+" pair succuss"})
"""
2.收集短链接做相关跳转：
客户端发出短链接请求，
2-1： 判断短链接是否存在
2-2： 如果存在，则找到对应的长链接
2-3： 返回301 指令，并让客户端做跳转
"""
@app.route('/api/shorturljump',methods=['POST'])
def shorturl_jump():
shorturl=request.json['shorturl']
# getlongurl mock
longurl=get_longurl(shorturl)
# 增加一个跳转的时间，对他记录。
# redis_update_jumptime(shorturl) mock
update_jumptime(shorturl)
# jumpto destination longurl,mock
print("info: jump to destination longurl {0} ".format(longurl))
#redirect_to_longurl(longurl)
return jsonify({"info": "jump to "+ longurl + " succuss"})
if __name__=='__main__':
app.run(host='0.0.0.0',port=8008,debug=True)
效果图：
插入一个网站： longurl : www.163.com shorturl: 163
检查网站是否存在：longurl :163
登录redis后台，查看相关信息：
做jump 操作，后台会update 跳转时间，并做redirect 动作，
看到visittime被udpate了
起html的锚点这个概念，你可能会感到会陌生，感觉自己没有听过。但是如果说起它的作用，你可能就恍然大悟了，就像你说起一个演员，可能不知道是谁，但是说起它演的一个角色可能立马就知道那个人是谁了。
那么，什么是锚点呢？
锚点存在于html中，在默认情况下，可以快速的定位到指定元素，并将元素置于页面最顶端。当然我们可以按照自己的需求来确定锚点的位置，不一定要让其定位在顶部。现如今有无数多的页面已经用上了锚点，比如Vue.js的官网，在我们点击标题“Vue.js是什么”和标题“起步”的时候，标题都会自动移到页面顶端。
锚点的使用
那接下来，我们就来看看几种锚点的使用方法。
id定位
最基本的使用方法如下，当点击<a>标签时，页面会相应的将该div内容置顶
锚点的id定位方法
name定位
除了id，还可以通过name进行定位，不过需要主要的是，如果采用name属性进行定位的话，只适用于a标签，类似于p标签等都不支持。
锚点的name定位方法
javascript代码进行定位
在原生的javascript中，有一个scrollIntoView()方法，可以实现页面的锚点
javascript方法实现锚点
一个综合的例子
讲了三种实现方法后，接下来看一个实际运用的例子。首先是实际效果图，在点击左侧栏时，页面右边会相应的显示指定段落的内容
锚点的实际使用
首先看下html页面的内容，左侧的ul代码
左侧的ul代码
右侧的内容部分代码
右侧内容部分代码
css部分的代码
css部分的代码
将上述的代码写在一个html文件中，便可实现左侧栏点击，右侧栏显示相应内容的效果。
特殊情况
在实际项目中，我们总会遇到这样一种情况，在页面顶部有固定头内容的时候，如果直接使用上述方法，会得不到想要的效果
直接使用锚点的效果图
通过该图可以看出，第三段内容的标题被遮住了，实际应该往下再显示一点
那么，我们该怎么解决这个问题呢？在这里我想到了两种方法，第一种是在每个内容div上加一个隐藏的p元素，给p元素一个定高，再向上偏移，这种方法会导致页面出现很多个多余的p元素，不推荐使用。
第二种是利用伪元素，伪元素可以占用实际的高度，这是推荐使用的方法
伪元素的样式
通过给h3标签添加伪元素样式，可完美解决这个问题，效果图如下
使用伪元素后的效果图
总结
今天的内容你会了么？如果还没有掌握的话，可以按照文章中的代码，进行实践，代码总是要多敲才更容易理解。
如果喜欢的话，记得关注小编噢，小编后续会坚持出更多技术性的文章，如果有任何问题，也欢迎提问，小编都会尽力解答的。
indow:典型情况下, 浏览器会为每一个打开的html创建对应的window对象, 如果这个文档包含了多个框架(), 则浏览器会为原始文档建立一个window对象, 再为每个框架创建额外的window对象。
可以再当前窗口中直接使用window的全部属性、方法和集合, 即不需要在前面附加计算结果为当前window对象的表达式。虽然window可以省略, 但是为了方便阅读以及避免一些漏洞, 一般都使用这个关键字。
location:该对象包含当前url信息, 拥有多个属性。默认属性为 location.href,表示整个url, 即如果设置location="https://www.xxxxxx.com/", 则等同于location.href="https://www.xxxxxx.com/"。
第一种：超链接
<a href="https://www.xxxxxx.com/" title="百度">Welcome</a>等效于
//在同当前窗口中打开窗口
window.location.href="https://www.xxxxxx.com/";第二种：超链接
<a href="https://www.xxxxxx.com/" title="百度" target="_blank">Welcome</a>等效于
//在另外新建窗口中打开窗口
window.open("https://www.xxxxxx.com/");第3种：window.navigate("https://www.xxxxxx.com/"); //只对ie浏览器有效, 其他浏览器无效, 不建议使用。
第4种：
self.location='https://www.xxxxxx.com/'; //self:当前窗口对象第5种：
top.location='https://www.xxxxxx.com/'; //top父窗口对象 页面跳出框架第4种和第5种联合使用, 可以防止别人用iframe等框架引用你的页面。
//反之iframe等框架引用
if(top.location.href !=self.location.href){
window.location.href="https://www.xxxxxx.com/";
}第6种：
*请认真填写需求信息，我们会在24小时内与您取得联系。
