Skip to content

Latest commit

 

History

History
245 lines (189 loc) · 4.53 KB

506-853588-前后端动态计算_从1加到n.sy.md

File metadata and controls

245 lines (189 loc) · 4.53 KB
Raw
show version enable_checker
step
1.0
true

前端和后端

我们来回顾一下 😌

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

从零开始

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)
  • 运行应用
nohup python3 app.py >> f.log 2>&1 &
firefox http://localhost:8080 &
  • 回车切回命令行

前端计算

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>
  • 加载页面

图片描述

访问

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

图片描述

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

处理路由

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)
  • 后端处理之后
  • 前端浏览器只看到最终结果

最终效果

图片描述

  • 查看源码

图片描述

  • 后端都处理好了
  • 前端的页面源代码非常简单
  • 可以把累加修改为累乘吗？

观察百度搜索的参数

  • 可以看到
    • 路由s 对应着 搜索

图片描述

总结 🤨

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

图片描述

  • 可是究竟
    • 什么是请求
    • 什么又是响应呢？
  • 下次再说！👋