python前后端交互好吗_前后端交互入门

最近好多小伙伴来问前后端的一些东西，看到网上很多的文章写的不够深入，我来说一下我的理解吧，很多地方不很严谨，望包涵。

前后端是什么

前端是网页排版，所能够看到的东西的排布就是前端；后端是网页内容，所看到的内容就是后端。emmm，这么解释也不太对，先这么说吧。

所以前后端交互的流程就大概是下面这个样子前端： 喂～ 后端，我这里需要内容了，能把id = 123的数据给我吗？

后端：好的，让我查查数据库…… 给你

这就是一个最基础的服务了。

嗯说到这里相信你已经明白了前后端分别是什么，接下来就可以开发了。

前后端发展历程

注：这里历程不完全，只是为了说明现在常见的几种方式。

phase1 模版渲染阶段(服务端渲染)

模版渲染，就是说每次刷新页面时，整个页面都要重新渲染。典型的实现有Java Servlet。

优点：SEO友好

缺点：加载速度有待优化；用户体验一般；前后端未分离，不利于维护。

注：SEO，Search Engine Optimization，搜索引擎优化，说白了就是你的网页怎么能在百度上排名靠前 emmm 也不完全靠这个，其它原因自行百度... 因为html文件中包含网站的信息，搜索引擎利用爬虫获取到这些信息就可以知道网站是干什么的了。

这个阶段现在有很多网站还在用，比如各大政府网站。

phase2 单页应用(SPA)

随着技术的发展，javascript ajax技术的应用，使单页应用成为了可能。这种网站在打开时，会将页面一次性下载到本地，每次数据变动时只更新变动的一部分，如百度搜索框，每打一个字可以自动搜索出包含该字的提示。

优点：良好的用户体验

缺点：不利于SEO(挖个坑，下面填)；前后端分离，便于维护。

举个栗子 ：

有兴趣可以自己点开网站感受一下

和上面的URL做个对比，index.html很明显是个静态html文件，这里是前端路由。

Phase 3 服务端渲染SSR

在服务器将html渲染好，直接将渲染好的文件发给前端。

优点：前端压力小，用户体验好，SEO友好

缺点：服务器压力大

举个

有点饿，算了

总结一下

这几种技术没有谁高谁低，适合该场景的解决方案才是最好的(废话..)，混用也可。

为什么没有都选择新技术呢？

技术上基本上没有问题，但除了态度上，实际情况也不能忽视。很多网站不同的业务或者产品对应不同的业务和开发部门，因此他们会独立开发自己业务的网页(目前基本上都选择SPA了)，然后再去和主站集成，这里“集成”一般都会直接在主站添加入口链接。有时候选择多页面模式也是刻意为之，如果业务复杂多样，在一个SPA上加载太多东西势必会影响网站性能，将不同业务做成多个SPA，对用户体验影响并不大，但是会简化业务的独立开发、部署和维护。

另外就是遗留代码的问题。前端技术更新太快，一般新成立的项目都会选择使用新的框架语言，遗留代码都是旧的技术栈，如果想要做成SPA，那意味要在一个页面加载多个框架，必然会影响性能，因此会选择多页面，然后再做旧页面到新页面的迁移。(摘自知乎，侵删)

你最关注的来了

我主要介绍当下使用较多的开发方式：phase2。

复现工具：chrome

以知乎来说：

打开控制台

All是所有请求，在Preview里可以看到，这个页面已经渲染的差不多了，很多数据都有了。也就是上面的第三种方式。

XHR是前端向后端发起的要数据的请求，就像开头所说，前端向后端要id为123的数据。

后端向前端返回数据，数据格式一般为Json，如图，很明显的可以看到，相关问题是前端向后端请求数据后，前端再将数据渲染到对应位置。

补上那个SEO坑，浏览器在抓取html的时候，这个位置是空，自然也不知道这个网页是干什么了。如果整个页面都是SPA，那浏览器可以获得的信息量就非常少了。一般纯SPA应用在公司内部工具链应用较多，toC的产品一般混合使用。

简易代码实现

js

//构建XHR请求

var xhttp = new XMLHttpRequest();

xhttp.onreadystatechange = function() {

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

res = JSON.parse(this.responseText)["res"]

//更新页面中某一部分

document.getElementById("screen").innerHTML = res

}

};

url = "http://127.0.0.1:8000"+"? arg = “hello”

xhttp.open("GET", url, true);

xhttp.send();

py(简易后端，使用python sanic)

async def test(request):

arg1 = request.args.get("arg")

print(arg1)

return response.json(

{'res': arg1 + " world!" },

)

这个程序的作用就是前端(js)告诉后端(py)要arg = “hello”的数据，后端返回“hello world”，前端再收到请求后，将页面上id为screen的标签文本改为Hello World。(完整代码附文末)

当然这只是一个很简单的例子，如果要实现很完备的功能，还有很长的路要走, 不过好在别人已经铺好了路。React和Vue都是很优秀的框架，可以很轻松的实现上述功能。

这个时候再看上面知乎的例子，是不是觉得好理解一些了？

附录

//test.html

Document

hello

setTimeout(() => {

var xhttp = new XMLHttpRequest();

xhttp.onreadystatechange = function() {

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

res = JSON.parse(this.responseText)["res"]

//更新页面中某一部分

document.getElementById("screen").innerHTML = res

}

};

url = "http://127.0.0.1:8000?arg=hello"

xhttp.open("GET", url, true);

xhttp.send();

},2000)

//test.py

from sanic import Sanic

from sanic import response

from sanic_cors import CORS

app = Sanic()

@app.route("/")

async def test(request):

arg1 = request.args.get("arg")

print(arg1)

return response.json(

{'res': arg1 + " world!" },

)

if __name__ == "__main__":

CORS(app)

app.run(host="0.0.0.0", port=8000)