首页 > 其他分享> 文章详细

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

2022-02-06 14:34:49 阅读：211 来源： 互联网

标签：函数 python 前端 flask json 数据格式交互 app 请求

前端交互简单基础

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

快速上手第一个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用法

(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);

链式调用中，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>

标签：函数,python,前端,flask,json,数据格式,交互,app,请求
来源： https://blog.csdn.net/m0_63150077/article/details/122797670

本站声明： 1. iCode9 技术分享网（下文简称本站）提供的所有内容，仅供技术学习、探讨和分享；
2. 关于本站的所有留言、评论、转载及引用，纯属内容发起人的个人观点，与本站观点和立场无关；
3. 关于本站的所有言论和文字，纯属内容发起人的个人观点，与本站观点和立场无关；
4. 本站文章均是网友提供，不完全保证技术分享内容的完整性、准确性、时效性、风险性和版权归属；如您发现该文章侵犯了您的权益，可联系我们第一时间进行删除；
5. 本站为非盈利性的个人网站，所有内容不会用来进行牟利，也不会利用任何形式的广告来间接获益，纯粹是为了广大技术爱好者提供技术内容和技术思想的分享性交流网站。

ICode9

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

前端交互简单基础

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

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

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

数据格式转换

前端用AJAX发送请求