Skip to content

Latest commit

 

History

History
156 lines (121 loc) · 2.69 KB

505-826429-前后端_分别计算_1到100.sy.md

File metadata and controls

156 lines (121 loc) · 2.69 KB
Raw
show version enable_checker
step
1.0
true

前端和后端

我们来回顾一下 😌

  • 只有两端都了解
    • 才能促进中间接口的进化

图片描述

  • 前端 可以计算
  • 后端 也可以计算
  • 那究竟
    • 计算 放在 哪端 好呢？
  • 比如 我想要计算
    • 1到100的和
  • 前后端 分别会
    • 如何处理 呢？🤔
  • 先写后端代码

从零开始

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
python3 app.py >> flask.log 2>&1 &
firefox http://localhost:8080 &
  • 运行并浏览

发布

  • 后端代码更新
    • 我们需要重新加载

图片描述

  • 后端处理之后

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

  • 那前端呢？

前端计算

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代码里面
    • 看得清清楚楚
    • 写得明明白白

  • 这两个网页看起来一样

    • 但是一个 是通过后端运算 得到的结果
    • 另一个 是 通过前端运算 得到的结果

总结

  • 这次了解了
    • 什么是后端
    • 什么又是前端？🤔
  • 前端
    • 负责发送请求(requests)
    • 负责接收响应(response)
    • 网页设计做图切片
    • 管的是看得见听得着的部分
    • 前端javascript代码
  • 后端
    • 负责接收请求(requests)
    • 负责发送响应(response)
    • java语言
    • 应用服务器使用
    • 后台数据库操作
  • 计算 从0到100 太固定了
    • 可以给个参数吗?
    • 一个整数n
    • 计算从0到n的和
  • 能算吗？🤨
  • 下次再说！👋