day 04 4.2 web开发核心之【二】

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文件的预览则可以看到相关图片

• 响应