前端交互、前后端交互、数据格式转换基础相关知识

2023-09-27 11:39:16

目录

前端交互简单基础

前后端交互、数据格式转换

快速上手第一个flask应用小应用

例2flask应用：将当前目录下的文件（文件或者文件夹）以文本形式显示出来

数据格式转换

前端用AJAX发送请求

前端交互简单基础

前端交互、前后端交互、数据格式转换基础相关知识

 前端交互主要应用HTML DOM事件，通过JavaScript来对HTML元素进行交互操作编程

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=\, initial-scale=1.0">
    <title>Document</title>
</head>
<body>
    <button id="btn" onclick="sum()">sumbmit</button>
    <input type="text" id="text" value="hello" oninput="input()">
    <input type="range" min="10" max="500" id="range" onchange="change()">
</body>
<script>
    function sum(){
        console.log("12")
    }
    function input(){
        console.log(document.getElementById('text').value)
    }
    function change(){
        console.log(document.getElementById('range').value)
    }
</script>
</html>

前后端交互、数据格式转换

关于flask安装：强烈推荐，讲得很清楚了，但这个安装的话最好是推荐windows系统，python3，vs的同学食用

(22条消息) Visual Studio Code运行flask环境配置并简单测试（windows版）_dengpeiyi2012的博客-CSDN博客_vscode运行flask

对于小白来说，其实不用建立虚拟环境也可以，只需要安装完成flask即可，使用pip install flask，但是需要注意一下使用python的库的话，最好还是建立虚拟环境，因为其实电脑里python版本很多，这时候用对应的python版本使用对应的库会方便一点，一定要记得弄python版本，我很久没用python迷糊到自己都不知道电脑里装了三个版本的，import半天都弄不进去flask，才发现没设定python版本。

快速上手第一个flask应用小应用

主要先看：快速上手_Flask中文网

因为我自己当时虽然安装很多，但是python只学习了一部分，一些东西还没学习到，因此下面附带了一些看的过程中疑惑的地方的资料：

类和实例 - 廖雪峰的官方网站 (liaoxuefeng.com)

#设置路由，发送请求
@app.route("/1")
def hello1():
    return "hi"

步骤提炼：

1.创建flask的一个实例=>第一个参数是应用模块或者包的名称=>这个参数是必需的，这样 Flask 才能知道在哪里可以找到所需文件。

2. 然后我们使用 route（）装饰器来告诉 Flask 触发函数的 URL

3. 函数名称被用于生成相关联的 URL 

函数修饰符@=>@是函数修饰符，调用函数，入口参数是后面的函数

传入变量URL通过把 URL 的一部分标记为 <variable_name> 就可以在 URL 中添加变量。标记的部分会作为关键字参数传递给函数。

#设置路由为变量
@app.route("/<file>")
def hello2(file):
    return file

例2flask应用：将当前目录下的文件（文件或者文件夹）以文本形式显示出来

@app.route("/")
def hello():
    dir=os.listdir("./")
    return json.dumps(dir)

os.listdir() 方法用于返回指定的文件夹包含的文件或文件夹的名字的列表。这个列表以字母顺序。它不包括 . 和 .. 即使它在文件夹中。

Python os.listdir()方法 - Python教程™ (yiibai.com)

path指定目录路径，路径可以是类型str或类型字节。如果路径是字节类型，返回的文件名也将是字节类型; 在所有其他情况下，它们将是str类型。

同时，对python中列表不了解的同学可以简单看一下

Python 列表(List) | 菜鸟教程 (runoob.com)

数据格式转换

json.dumps() 是把python对象转换成json对象的一个过程，生成的是字符串。

这里我们通过os.listdir(path)得到的python数据不能在浏览器上面显示，也不能返回，因此需要调用json库中的函数，来将其转化为字符串。

但是这里我学的时候比较疑惑这里得到的是什么python数据，虽然是列表，但是因为路径是字节类型的，不是应该是一个字符串列表吗？怎么会返回不了？如果有路过的大神，希望能帮忙解答一下疑惑。

json.dump() 是把python对象转换成json对象生成一个fp的文件流，和文件相关。

这里补充一个小知识点，HTML中的lang属性，属于全局属性，用于声明元素内容的语言，如中文简体lang=“zh-hans”，这样做就是告诉网站，这个网站使用的语言是中文简体，如果没有用这个说明，那就不知道你是用什么语言，就没有翻译提示了。

from flask import Flask
#flask导入时注意python包的选取或者开虚拟环境的一系列操作
import os
import json

app = Flask("api")

@app.after_request
def cors(environ):
    environ.headers['Access-Control-Allow-Origin'] = '*'
    # environ.headers['Access-Control-Allow-Method'] = '*'
    # environ.headers['Access-Control-Allow-Headers'] = 'x-requested-with,content-type'
    return environ
#设置响应头，'*'=>都可以访问

#设置路由，发送请求
@app.route("/")
def hello():
    dir=os.listdir("./")
    return json.dumps(dir)


@app.route("/1")
def hello1():
    return "hi"

#设置路由为变量
@app.route("/<file>")
def hello2(file):
    return file

#在端口为8000处运行
app.run(port=8000)

展示下结果：

前端交互、前后端交互、数据格式转换基础相关知识

 

前端用AJAX发送请求

注意：记得对响应头进行操作设定

先简单讲解一下一些补充知识

我们打开开发者工具=>网络

1.请求：即对应的如src的值，是请求的对象

2.状态代码：404代表没有找到网页 304 代表从内存中得到网页 200 是正常情况下的网页

3.预览：请求后得到的内容

什么是ajax？ajax如何工作的？

参考该链接：AJAX 简介 (w3school.com.cn)

AJAX工作过程：

1.当网页中发生事件的变化，如按钮点击等时

2.js创建一个对象

3.该对象向web服务器发送请求

4.服务器处理该请求

5.服务器返回一个响应

6.js读取响应并执行正确操作

使用Fetch（）

补充fetch（）知识：

关于fetch（）资料参考=>使用 Fetch - Web API 接口参考 | MDN (mozilla.org)

HTML5作出改进，将上述这块函数封装在fetch（）中，这是一个js的API，可以处理请求和响应等过程

Function loadDoc()


function loadDoc() {

  var xhttp = new XMLHttpRequest();

  xhttp.onreadystatechange = function() {

    if (this.readyState == 4 && this.status == 200) {

     document.getElementById("demo").innerHTML = this.responseText;

    }

  };

  xhttp.open("GET", "ajax_info.txt", true);

  xhttp.send();

}

一个基本的 fetch 请求设置：

fetch('http://example.com/movies.json')

  .then(response => response.json())

  .then(data => console.log(data));

1.输入指定路径的参数，fetch请求浏览器并响应，返回响应结果promise对象

2.将http响应转化为json格式，json（）将响应body解析成json的promise

3.输出到控制台

补充：Promise用法

推荐参考=>使用 Promise - JavaScript | MDN (mozilla.org)

(20条消息) 什么是Promise,我们用它来做什么?_danielyulu的博客-CSDN博客_promise是什么

Promise本质上是函数返回的对象，是异步操作成功或失败的结果。我们可以通过在它上面绑定回调函数，从而将promise作为回调函数的参数，避免地狱回调

简单看下回调函数=>(20条消息) 深入理解：回调函数_极客点儿-CSDN博客_回调函数

doSomething(function(result) {

  doSomethingElse(result, function(newResult) {

    doThirdThing(newResult, function(finalResult) {

      console.log('Got the final result: ' + finalResult);

    }, failureCallback);

  }, failureCallback);

}, failureCallback);

链式调用中，then（），使用promise进行异步操作就是带着上一步操作返回的新的promise对象（返回的一定是一个promise对象），作为这一步函数的参数进行调用

补充阅读箭头函数，我写的时候掉了一个坑

//d3.json(path).then(d=>{console.log(d)})
    //但是使用一定要注意箭头函数中如果返回的是一个对象，需要{}

(20条消息) 箭头函数箭头后面使用(), 还是({}), 还是什么括号都不适用_jiuyehengxia的博客-CSDN博客_箭头函数圆括号

<!DOCTYPE html>
<html lang="zh-hans">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
</head>
<body>
    
</body>
<script src="./d3.js"></script>
<script>
    let path="http://127.0.0.1:8000/"
    //利用fetch对指定路径服务器发起请求
    fetch(path)
    .then(d=>d.json())
    //d.json()将http请求解析为json格式
    .then(d=>{console.log(d)})
    //这里也可以使用d3的功能
    //d3.json(path).then(d=>{console.log(d)})
    //但是使用一定要注意箭头函数中如果返回的是一个对象，需要{}
    //同时格外注意前端获取服务器的数据需要进行响应头的设定
</script>
</html>
上一篇：flask插件系列之flask_celery异步任务神器


下一篇：在腾讯云部署flask接口，外网无法访问