Skip to content

0573.md

Latest commit

 

History

History
251 lines (190 loc) · 5.1 KB

0573.md

File metadata and controls

251 lines (190 loc) · 5.1 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 0573
- 这是 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` 
---

前端和后端

我们来回顾一下 😌

  • 上次了解了
    • 什么是后端
    • 什么又是前端？🤔
  • 前端
    • 就是 本地浏览器
    • 负责发送请求(requests)
  • 后端
    • 就是 云端
    • 就是 服务器
    • 负责接收请求(requests)
    • 负责发送响应(response)
    • 处理完了 交给前端

图片描述

  • 前端 最后
    • 接收响应(response)
    • 完成展示
  • 前后端 有什么 区别 吗？🤔

恢复环境

cd ~
mkdir pro
cd pro
vi app.py
  • 建立 webapp的根目录
    • 进入 根目录
    • 新建app.py

后端计算

  • 在pro中
    • 编辑 app.py
from flask import Flask

app = Flask(__name__)

@app.route('/')
def index():
    sum = 0
    for i in range(1,101):
        sum += i
    return str(sum)

if __name__ == "__main__":
    app.run(debug=True,host="0.0.0.0",port=8080)
  • 在后端从1加到100
nohup python3 app.py >> flask.log 2>&1 &
firefox http://localhost:8080 &
  • 启动 服务器
    • 并浏览

发布

  • 后端 处理之后
    • 前端浏览器 只看到最终结果
    • 不知道到底 是怎么 得到的结果

图片描述

  • 那前端呢？

前端计算

  • 建立static 静态网页文件夹
    • 直接编辑 其中的 sum.html
mkdir static
vi static/sum.html
  • 建立static 文件夹
    • 进入 并建立sum.html
<html lang="zh">
	<head>
		<meta http-equiv="Content-Type" content="text/html; charset=utf-8"/>
		<script type="text/javascript">
			function init(){
				var result = 0;
				for(var i=1;i<=100;i++){
					result += i;
				}
				document.body.innerHTML = result+"";
			}
		</script>
	</head>
	<body onload="init()">
	</body>
</html>
  • 写好了直接保存
    • 不用编译
    • 也不用重启服务器

浏览网页

  • 直接访问
firefox http://localhost:8080/static/sum.html &
  • 前端的运算过程都在本地浏览器
    • 前端js代码里面
    • 看得清清楚楚
    • 写得明明白白

图片描述

  • 这两个网页看起来一样
    • 但是一个 是通过后端运算 得到的结果
    • 另一个 是 通过前端运算 得到的结果
  • 前后端 是如何 分工的呢？

客户与堂倌

  • 浏览器 网页客户端(client)
    • 来到饭馆
  • 堂倌(server)
    • 负责招呼客人
      • 哪些是散座
      • 四人一起的不能安排在八人的大桌
      • 谁有什么朋友
      • 爱坐什么位置
    • 处理各种异常情况
      • 比如 来敲竹杠的

图片描述

  • 所以说
    • 一堂、二柜、三灶、四案
    • 堂倌 排 第一

服务器浏览器

  • 今天的server服务器
    • 也和堂倌一样
    • 明确客人的需求(request)
    • 提供客人的菜品(response)

图片描述

  • 这个Clinet/Server的结构
    • 是从什么时候开始有的呢？

早期Server

  • 早期计算资源非常宝贵
    • 只有主机具有算力
    • 其他人 通过 tty 使用主机
      • teletype writer
      • (电传打字机)

图片描述

  • 那个时候的 结构

    • 是 Client/Host
    • 通过 客户端shell 访问 Host主机

  • Host主机

    • 就像 是 今天的 Server服务器

  • 前后端 有什么区别呢？

前后端的区别

  • 前端 本地
    • 浏览器(客户)
    • 负责发送请求(requests)
    • 负责接收响应(response)
    • 主要靠javascript等前端代码
    • 执行前端动画
    • 前端代码 浏览器里面都能看到

图片描述

  • 后端 云上

    • 服务器(堂倌)
    • 负责接收请求(requests)
    • 负责发送响应(response)
    • 主要靠java、python、php等服务器语言
    • 在服务器执行
    • 后端代码 在浏览器里面 看不到

  • 前后端 有什么共性呢？

前后端的共性

  • 不论前端 还是后端 都是
    • 浏览器 发 请求requests
    • 服务器 接收并返回 响应response

图片描述

  • 最终 在浏览器里 查看渲染后的 最终结果

图片描述

总结

  • 这次了解了
    • 两种 方法完成
    • 从 1加到 100
  • 前端 用的 js
    • 让浏览器去算
    • 算法让 用户看得 明明白白

图片描述

  • 后端 用的是 python
    • 服务器算完 之后
    • 把结果 直接交给 浏览器
    • 用户 只能看到 结果

图片描述

  • 前后端 都能算
    • 为什么 要分出 前后端呢？🤔
  • 下次再说！👋
  • 本文来自 oeasy Python 系统教程。
  • 想完整、扎实学 Python，
  • 搜索 oeasy 即可。