Skip to content

0576.md

Latest commit

 

History

History
315 lines (225 loc) · 5.53 KB

0576.md

File metadata and controls

315 lines (225 loc) · 5.53 KB
Error in user YAML: (<unknown>): found a tab character that violate indentation while scanning a plain scalar at line 3 column 3
---
- oeasy Python 0576
- 这是 oeasy 系统化 Python 教程，从基础一步步讲，扎实、完整、不跳步。愿意花时间学，就能真正学会。
- 本教程同步发布在： 
	- 个人网站： `https://oeasy.org` 
	- 蓝桥云课： `https://www.lanqiao.cn/courses/3584` 
	- GitHub： `https://github.com/overmind1980/oeasy-python-tutorial` 
	- Gitee： `https://gitee.com/overmind1980/oeasypython` 
---

前端和后端

我们来回顾一下 😌

  • 前端 可以计算
  • 后端 也可以计算

图片描述

  • 那计算 放在 哪端 好呢？

高斯

  • 之前 我们算过
    • 1加到100的和

图片描述

  • 这次试试
    • 把100 变成
    • 更通用的n ？🤔

从零开始

  • 这次算加法
    • 构建工程文件夹
    • sum_pro
cd ~
mkdir sum_pro
cd sum_pro
vi app.py
  • 建立 webapp的根目录
    • 进入 根目录
    • 新建app.py
from flask import Flask

app = Flask(__name__)

@app.route('/')
def index():
    return str("hello")

if __name__ == "__main__":
    app.run(debug=True,host="0.0.0.0",port=8080)

运行应用

  • 后台运行 web服务器
nohup python3 app.py >> f.log 2>&1 &
firefox http://localhost:8080 &
  • 回车切回命令行

图片描述

  • 准备计算

前端计算

  • 在static中建立cal.html
    • 尝试 纯前端计算
mkdir static
vi static/cal.html
  • 在static下面建立网页
<html lang="zh">
	<head>
		<meta http-equiv="Content-Type" content="text/html; charset=utf-8"/>
		<script type="text/javascript">
			function calculate(){
				var result = 0;
				var num = document.getElementById("num").value
				for(var i=1;i<=num;i++){
					result += i;
				}
				result_div = document.getElementById("result")
				result_div.innerHTML = result+"";
			}
		</script>
	</head>
	<body>
		<input type="text" id="num">
		<input type="button" onclick="calculate()" value="go"/>
		<div id="result">
	</body>
</html>
  • 写好了直接保存

访问结果

firefox http://localhost:8080/static/cal.html &
  • 可以计算

图片描述

运算过程

  • 本地浏览器
    • 前端js代码里面

图片描述

  • 写得明明白白
    • 看得清清楚楚

传输过程

  • 网页 从 服务器
    • 传输到 本地浏览器 之后
    • 就可以计算了

图片描述

  • 每次 的 新计算
    • 都在本地
    • 网络中 没 新请求/响应

图片描述

前端计算

  • 把 计算 放到前端
    • 后台 永远得不到

图片描述

  • 计算 可以 放后端 吗？

后端计算

vi static/preCalculate.html
  • 首先建立提交页面
<html lang="zh">
	<head>
        <title>preCalculate</title>
	</head>
	<body>
        <form method="GET" id="preCal" action="../cal">
            <input type="text" id="num" name="num">
            <input type="submit" value="go"/>
        </form>
	</body>
</html>
  • 加载页面
firefox http://localhost:8080/static/preCalculate.html &
  • 可以访问到

图片描述

  • 填写 数字后 提交

访问

  • 观察url
    • 可以看到
      • 提交位置
      • 参数

图片描述

  • 确实发出了请求
    • 但是没有得到 正确的响应
  • 状态码 404
    • 因为路由没有专门的处理函数

处理思路

  • 根据之前的路由处理经验

图片描述

  • 有其他方法吗？

询问ai

图片描述

  • 看起来有 专门的方法

处理路由

vi app.py
  • 重写app.py
from flask import request
from flask import Flask

app = Flask(__name__)

@app.route('/', methods=['POST', 'GET'])
def hello():
    return "hello"

@app.route('/cal', methods=['POST', 'GET'])
def cal():
    num = request.args.get("num")
    if num == "" or num == None:
        return 0
    else:
        result = 0
        num = int(num)
        for i in range(num+1):
            result += i
        return str(result)

if __name__ == "__main__":
    app.run(debug=True)
  • 修改app.py
    • 后端 自动加载

最终效果

  • 前端浏览器 刷新

图片描述

  • 查看源码

图片描述

  • 后端 完成计算
    • 把结果 交给 前端

再算一次

  • 打开 检查器
    • 切换到 网络 模式
firefox http://localhost:8080/static/preCalculate.html &
  • 再刷新 页面
    • 每次 点击按钮的 瞬间
    • 都会 新发个 http请求 到服务器

图片描述

  • 服务器 处理之后

    • 把结果 交给浏览器

  • 想把 累加 修改为 累乘

    • 可以吗？

总结 🤨

  • 这次
    • 通过 文本框 录入最大值
    • 计算了 从1开始的累加
    • 有两种方式
      • 前端 js
      • 后端 python
  • 后端的计算 需要
    • 前端发请求
    • 后端做响应

图片描述

  • 可是究竟
    • 什么是请求
    • 什么又是响应呢？🤔
  • 下次再说！👋
  • 本文来自 oeasy Python 系统教程。
  • 想完整、扎实学 Python，
  • 搜索 oeasy 即可。