2020-05-04--Vue之前后端交互1--ajax，flask基本概念

前后端交互的概念

前端页面的数据要发生变化，那么就要与后端发生交互，那么前后端之间到底是怎样交互的呢?

前后端之间的通信是要通过一个协议来完成的————这里是通过一个在tcp/udp协议之上的一个协议-----http协议
这里先了解一下，后边讲web框架时会再次讲解。

然而在传统的开发中都是用的是前后端不分离的开发模式，在经过不断地更新逐渐演变为前后端分离的开发模式

前后端不分离：传统的开发模式，前端页面发送请求，后端服务器接受后操作数据库(比如：查询数据)，然后把这些数据绑定在html模板上，返回给前端页面，使前端页面发生改变。

前后端分离：比较主流的开发模式，相比于前后端不分离，前后端分离减少了服务器端的操作，增加了客户端的任务(富客户端开发),这样一些简单的页面操作就可以直接在前端完成，后端只负责操作数据库提供数据(JSON数据格式(或xml))即可。比如学习的vue，react等前端开发框架。

前后端分离有什么好处?：在传统的web开发的过程中，返回的html页面是固定的，只能在pc端显示，那么如果手机端也想显示，那么只能在做一个服务器并且重新编写适合手机端显示的页面模板。而前后端分离的情况：只需要做一份服务器，不同的前端页面(pc端，ios端，andriod端)向其发送请求，直接返回响应数据，即可完成。

1.异步

JavaScript的执行环境是「单线程」
所谓单线程，是指JS引擎中负责解释和执行JavaScript代码的线程只有一个，也就是一次只能完成一项任务，这个任务执行完后才能执行下一个，它会「阻塞」其他任务。这个任务可称为主线程
异步模式可以一起执行多个任务
JS中常见的异步调用

定时任何
ajax
事件函数

异步请求：当前端页面向后端服务器发送请求后，后端服务器要进行一些操作，在后端返回数据之前，前端页面仍然能够继续一些操作，这就是异步请求，同步请求与之相反，在返回数据之前，不能进行任何操作，只能等待服务器响应。

2.前后端交互调用接口方式

原生ajax
基于jQuery的ajax(过时)
fetch
axios

3.python后端开发--Flask

因为涉及到前后端交互，所以要先搭建一个后端服务器
这里我们使用Flask框架进行搭建，(Flask相对比较轻量级)
(1)打开pycharm。新建项目，选择flask，

点击create，等待安装

打开setting，查看安装的库：

flask及其依赖都已经安装好了，这就是pycharm的好处，如果使用终端的话，那么就需要自己一个一个的安装。
app.py:

from flask import Flask

#flaskapp应用
app = Flask(__name__)

#装饰器，app的路由，当访问/地址的url时，进入该函数
@app.route('/')
def hello_world():
    
    #返回字符串
    return 'Hello World!'

#启动服务的main()
if __name__ == '__main__':
    app.run()

启动服务器：

127.0.0.1:5000

显示hello world！

也可以返回html格式：

@app.route('/')
def hello_world():

    #返回字符串
    return '</h1>Hello World!</h1>'

浏览器会自动解析为html标签：

跳转

@app.route('/')
def hello_world():

    return '<a href="/info">Hello World!</a>'
@app.route('/info')
def info():
    #返回字符串
    return 'Hello zhangsan'

再次启动项目：

点击hello World！，会跳转到/info。

flask接受参数

@app.route('/info')
def info():
    #获取前台发送的内容
    uname = request.args['username']
    #返回字符串
    return 'Hello'+uname

1.原生AJAX请求

AJAX = 异步 JavaScript 和 XML。

AJAX是基于JavaScript编写的一个用于前后端交互的技术。
XML是一种标记语言，与JSON的作用一样，但是相对繁琐，所以它过时了，现在都用JSON。
AJAX 是一种用于创建快速动态网页的技术。
通过在后台与服务器进行少量数据交换，AJAX 可以使网页实现异步更新。这意味着可以在不重新加载整个网页的情况下，对网页的某部分进行更新。
1.创建ajax对象

let xhr = new XMLHttpRequest()

2.链接服务器
open(method,url,async)
acync:是否异步

xhr.open('get','http://localhost:5000/?username=lisi',true)

get请求一般不会影响到数据库中的数据，一般用来查询数据
post请求会影响到数据库中的数据，一般用来增加数据
不常用：
put--一般用来修改数据
delete-- 一般用来删除数据

3.发送请求
send(string)
使用get请求时参数直接在url后拼接即可
使用post请求时参数代表着向服务器发送的数据：

get：
xhr.send()

post：
xhr.setRequestHeader("Content-Type","application/x-www-form-urlencoded");
xhr.send('username=lisi')

4.接受服务器响应数据

#当服务器响应返回时，执行回调函数
xhr.onload = function(){
console.log(xhr.responseText)
}

示例：
打开vscode，新建html文件：

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
</head>
<body>
    <script>
        window.onload = function(){
            //创建ajax对象
            let xhr = new XMLHttpRequest()
            // 回调函数，当服务器的响应回来时，调用
            xhr.onload = function(){
                //后端返回的内容
                console.log(xhr.responseText)
            }
            //打开请求，(get方式，访问服务器地址，true是否异步)
            xhr.open('get','http://127.0.0.1:5000/info?username=lisi',true)
            //发送请求
            xhr.send()
            console.log('请求已发送')  
        }
    </script>
</body>
</html>

启动服务器
运行前端页面：

跨域：就是前后端的页面虽然都在本机，但是并没有遵循同一个端口。
解决方案：
在服务器端安装：Flask-Cors
打开pycharm的中断terminal：

pip install

在app.py中添加：

再次运行前端页面：

这就是异步的的感觉。

1.1传统的回调函数(现在都写onload就行)

<script>
        window.onload = function(){
            //创建ajax请求
            let xhr = new XMLHttpRequest()
           //每当状态码1234改变的时候，都会调用该函数
            xhr.onreadystatechange = function(){
                console.log(xhr.readyState)    #显示准备状态
                #当准备状态=4(准备好了)，状态码=200(正常，ok)
                if(xhr.readyState == 4 && xhr.status == 200) {
                    console.log(xhr.responseText)   #显示服务器返回内容
                }
            }
            //打开请求，(get方式，访问服务器地址，true是否异步)
            xhr.open('get','http://localhost:5000/?username=lisi',true)
            //发送请求
            xhr.send()
            console.log('请求已发送') 
        }

运行项目：