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

目录

前端交互简单基础

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

快速上手第一个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接口,外网无法访问