web开发核心之flask
【一】基于flask搭建web网站
from flask import Flask, render_template
app = Flask(__name__, template_folder="templates")
@app.get("/index")
def index():
return render_template("index.html")
@app.get("/timer")
def timer():
import datetime
now = datetime.datetime.now().strftime("%Y-%m-%d %X")
return render_template("timer.html", **{
"now": nowa
})
app.run()
【二】浏览器开发者工具（重点）
【1】Elements
-
查看或修改Html属性, Css属性, 监听事件, 断点等
-
查看元素代码: 点击左上角的箭头图标进入选择元素模式, 然后从页面中选择需要查看的元素, 具体用法如下
-
例如想把百度页面的左上角的样式拿过来用:
- 打开开发这模式, 进入选择元素模式
- 具体代码如下:
- 更多的属性代码在右侧
- 修改元素的代码与属性
- 点击元素–>右键菜单: 编辑元素代码, 修改属性
- 选择编辑为Html 然后修改新闻的标签, 再观察页面的变化
- 当然, 这仅仅是临时性修改, 如果刷新一下马上打回原形的了
- 还可以用相同的方法进行添加属性, 修改属性, 删除等操作
- 除了复制要素, 还可以复制他的样式
【2】控制台(Console)
- 一般用于执行一次性代码, 查看JavaScript对象, 查看日志信息和报错
- 可以当作JavaScriptAPI使用
- 例如
- 在控制台输入Math, 按回车则可以出现很多对应的属性和方法, 可以拿来当帮助文档来用
- 除此之外, 还可以当成控制台输出, 使用的是Js代码的console.log()输出显示, 作调试使用
- 也可以直接在控制台上面写代码运行
【3】源代码(sources)
- 查看html页面,CSS, JavaScript的源代码,
- 可以调试JavaScript源代码,
- 给JavaScript添加断点
- 当点击源代码(sources)的时候可以看到所有代码的源文件
- 添加断点
- 在源代码左边有行号, 点击对应的行号, 就可以添加对应的断点
【4】网路(Network)
- 主要查看与网路相关的信息, 请求响应相关的内容
- 记录资源请求:按钮处于打开状态时(红色)会在此面板进行网络链接的信息记录
- 清除按钮: 清除当前的网络连接记录信息
- 过滤器(Filter): 其作用是打开过滤面板
- 主体部分
-
名称(name): 请求资源的名称或者url路径
-
状态(status): 状态码
-
类型(type): 请求资源的MIME(html, css, JavaScript)类型
-
发起程序(Initiator): 解释请求是怎么发起的
-
preflight: 请求是由页面重定向发送
-
Parser :请求由html解析发送
-
script : 请求由script脚本发送
-
other: 其他过程发送
-
其中主要看到是名称和状态码, 通过状态码看程序是否运行成功
-
当我们点击这个文件的时候, 我们可以看见这个文章更具图的信息,
- 分别是标头(Header), 预览(Preview), 响应(response), 发起程序(Initiator), 计时(Timeing), Cookie
-
标头包括
-
请求URL, 请求方法, 状态码等信息,
-
除此之外, 还包括
- 响应头
- 请求头
-
-
js文件预览可以查看相关代码,如果是img文件的预览则可以看到相关图片
- 响应
