Python网络编程:极简WEB开发HTML、CSS、JavaScript、Flask

文章目录

1、HTTP
2、前端知识
3、Flask
- 3.1、Flask的路由
- 3.2、Flask的HTTP方法实现前后端交互

1、HTTP

HyperText Transfer Protocol
超文本传输协议
用于从万维网服务器传输超文本到本地浏览器
基于 TCP/IP
通过一个可靠的链接来交换信息
是无状态的请求/响应协议

1.1、HTTP 消息结构

基于【客户端/服务端】的架构模型
使用统一资源标识符来传输数据和建立连接

客户端请求消息

服务器响应消息

1.2、HTTP 请求方法

主要方法有	描述
GET	请求指定的页面信息，并返回实体主体。
POST	向指定资源提交数据进行处理请求（例如提交表单或者上传文件）。数据被包含在请求体中。 POST 请求可能会导致新的资源的建立和/或已有资源的修改。

1.3、HTTP 状态码

分类	分类描述
1xx	`信息`：服务器收到请求，需要请求者继续执行操作
2xx	`成功`：操作被成功接收并处理
3xx	`重定向`：需要进一步的操作以完成请求
4xx	`客户端错误`：请求包含语法错误或无法完成请求
5xx	`服务器错误`：服务器在处理请求的过程中发生了错误

常见	英文名称	中文描述
200	OK	请求成功。一般用于GET与POST请求
400	Bad Request	客户端请求的语法错误，服务器无法理解
404	Not Found	服务器无法根据客户端的请求找到资源
500	Internal Server Error	服务器内部错误，无法完成请求
502	Bad Gateway	作为网关或者代理工作的服务器尝试执行请求时，从远程服务器接收到了一个无效的响应
504	Gateway Time-out	充当网关或代理的服务器，未及时从远端服务器获取请求

2、前端知识

HTML是主体，装载各种 DOM 元素
CSS用来装饰 DOM 元素
JavaScript控制 DOM 元素

<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">

<style>
/* CSS注释 */
button{color:green;}
</style>

</head>
<body>
<!-- HTML注释 -->
<button onclick="this.innerHTML=Date()">点击查看时间</button>

</body>
</html>

2.1、HTML

HyperText Markup Language
超文本标记语言
不是编程语言，而是标记语言
使用标记标签来描述网页
HTML文档包含了 HTML标签和文本内容

<标签>内容</标签>

2.2、CSS

Cascading Style Sheets
层叠样式表
用来表现HTML等文件样式

<head>
<style>
/* 使用 <style> 标签在文档头部定义 内部样式表 */
h1{color:orange;text-align:center;}
</style>
</head>

2.3、JavaScript

一种轻量级的编程语言
可插入HTML页面的编程代码
可由所有的现代浏览器执行

<html>
<head>
<meta charset="utf-8">
<script>
// JavaScript注释
function displayDate(){
	document.getElementById("demo").innerHTML=Date();
}
</script>
</head>
<body>
<button type="button" onclick="displayDate()">显示日期</button>
<p id="demo"></p>
</body>
</html>

3、Flask

Flask 是一个使用 Python 编写的轻量级 Web 应用程序框架
安装：pip install Flask

from flask import Flask  # pip install Flask
app = Flask(__name__)

@app.route('/')
def hello_world():
   return 'Hello World'

if __name__ == '__main__':
   app.run()

3.1、Flask的路由

from flask import Flask
app = Flask(__name__)

@app.route('/hello')
def hello_world():
    # http://localhost:5000/hello
    return 'Hello world'

@app.route('/hello/<name>')
def hello_name(name):
    # http://localhost:5000/hello/abc
    return 'Hello %s!' % name

if __name__ == '__main__':
    app.run(debug=True)

3.2、Flask的HTTP方法实现前后端交互

from flask import Flask, request
app = Flask(__name__)

HTML = '''
<html>
   <body>
      <form action = "http://localhost:5000" method = "post">
         <p><input type="text" name="AAA"></p>
         <p><input type="submit" value="提交"></p>
      </form>
   </body>
</html>
'''


@app.route('/', methods=['POST', 'GET'])
def login():
    if request.method == 'POST':
        print(request.form)  # ImmutableMultiDict
        return request.form['AAA']
    else:
        return HTML


if __name__ == '__main__':
    app.run(debug=True)