简单再回顾一下前后端分离的历程,以及他的优点(有的内容是粘贴的别人的,我只用来自己学习,侵权删)
我的大作业要用到python写后端代码,但是python写前端页面太够吧丑了,所以还是得学习学习Vue,在系统学习vue之前,我先回顾回顾之前学习过一小段时间的vue,以及了解一下前后端分离的好处
在 5 年前,前后端还是几乎是不分离的,web 开发中的代码尤其混杂,PHP 中有 JS,JSP 中有 JS,ASP 中有 JS,JS 中有 HTML,HTML 中有 CSS,HTML 中还有 JS,各种标签代码一锅粥,数据在各处流窜,眼花缭乱,极难维护。
比如这样一段包含模板标签的 html 代码:
<!--服务器端渲染 -->
<select>
<option value=''>--请选择所属业务--</option>
{% for p in p_list %}
<option value="{{ p }}">{{ p }}</option>
{% endfor %}
</select>
不去后端查代码,你无法知道 p_list 是何种对象,有何属性。
这种开发方式的问题越来越严重: 1、性能下降:由于网页全部由服务端渲染,每次刷新都需要服务器返回整个网页的内容,性能下降,给用户的体验就是慢,卡。 2、维护越来越困难:各种代码混在一起,可读性极差,耦合度极高,改动一处可能会引发灾难。 3、效率下降:一个人精力有限,很难精通所有语言,精通 javascript 的可能不会 Python,反之亦然,因此开发时需要临时再学习新知识,效率下降。
前后端半离不离
AJAX 的出现,让网页局部刷新成为可能。这一特性可以让用户留在当前页面中,同时发出新的HTTP请求,数据却可以不断地更新。解决了服务器每次请求都返回整个网页这种低效的机制。最早大规模使用 AJAX 的就是 Gmail,Gmail 的页面在首次加载后,剩下的所有数据都依赖于 AJAX 来更新大大提升了响应速度。也就是解决了上述问题 1。
虽然有 AJAX ,但大多数的页面还是有服务器端渲染的,也就是前后端半离不离的阶段,这仍然无法解决上述问题 2 和问题 3。
前后端彻底分离
后来随着前端技术的飞速发展,浏览器的不断迭代,前端 MVC 框架应运而生,如 React、Vue、Angular ,利用这些框架,我们可以轻松的构建起一个无需服务器端渲染就可以展示的网站,同时这类框架都提供了前端路由功能,后台可以不再控制路由的跳转,将原本属于前端的业务逻辑全部丢给前端,这样前后端分离可以说是最为彻底,生成的代码的可读性和维护性都得到相应提高。如下面的一段代码:
<!--前端渲染 -->
<template>
<select id="rander">
<option value=''>--请选择所属业务--</option>
<option v-for="list in lists" :value="list" v-text="list"></option>
</select>
</template>
<script>
export default {
data: {
return {
lists: ['选项一', '选项二', '选项三', '选项四']
}
},
ready: function () {
this.$http({
url: '/demo/',
method: 'POST',
})
.then(function (response) {
this.lists = response.data.lists // 获取服务器端数据并渲染
})
}
}
</script>
说到这里,什么是前后端分离,有一个简洁的判断标准:第一次在浏览器中输入网址请求服务器,此时服务器返回一个 html 页面,即首页,一般是 index.html,在后续的请求中,只要服务器端返回 html 页面,就不是前后端分离,只要服务器返回的是纯数据,就是前后端分离,跟所用的语言,框架,没有任何关系。
前后端彻底分离带来的优点是显而易见的:
1.提高工作效率,分工更加明确
前后端分离的工作流程可以使前端只关注前端的事,后台只关心后台的活,两者开发可以同时进行,在后台还没有时间提供接口的时候,前端可以先将数据写死或者调用本地的json文件即可,页面的增加和路由的修改也不必再去麻烦后台,开发更加灵活。
2.局部性能提升
通过前端路由的配置,我们可以实现页面的按需加载,无需一开始加载首页便加载网站的所有的资源,服务器也不再需要解析前端页面,在页面交互及用户体验上有所提升。
3.降低维护成本
通过目前主流的前端 MVC 框架,我们可以非常快速的定位及发现问题的所在,客户端的问题不再需要后台人员参与及调试,代码重构及可维护性增强。
前后端分离但并不分家
前后端虽然分离,但对团队分家,分成前端团队和后端团队却未必是最合适的。分离的目的是减少沟通过程中信息的损耗,如果分成两个团队,沟通成本仍然会增加。通常的作法是一个团队里即有前端开发者,又有后端开发者,一开始大家都专注自己份内的事情,无需经常沟通,只需要最后前后端接口联调时需要对接一次。 前后端分离的好处是:彼此的分工非常明确,专注于自己最擅长的事情。
你可能会问了,我就一个人,在 web 开发时,是否也搞前后端分离?
我的回答是,要的,这是一种良好的工程实践,使你的写前端时专注前端设计,写后端时专注后端数据,减少大脑在前后端切换的能量损耗,这会使你开发更轻松,更高效,更少 bug。
为什么要学点前端
前后端分离是一种必然趋势,前端慢慢地发展为大前端,前端工程师的作品直接面向用户,用户的体验好不好,直接决定产品的生死存亡,越来越多的公司开始重视前端开发,结果就是前端薪资的不断提升。相反后端工程师就是默默付出,没有前端的展示,一堆枯燥的数据好像并不能引起人们的兴趣,你写的代码性能好是应该的,性能差就被骂死,功劳好像都被前端抢走了。
那么,后端如何体现自己的价值呢? 在适当的时候展示自己的实力即可,如何展示? 还是需要借助 web 这种互联网工具,别人想看看你的数据,你二话不说,直接给他一个你做的网站的 url 链接,一打开就有良好的数据展示和交互,想象一下对方惊呼牛逼时自己的心情吧。
或者你想开发一个效率工具给大家用,web 开发都是最好的方式。
学习前端,可以更好的理解网站、浏览器的工作机制,爬虫原理,也可以发现其他网站的一些漏洞,bug,完善自己的编程知识体系。
另外,学会前端可以自己建站获取流量,帮别人建站获取报酬,收获都是非常大的。
因此,我建议后端工程师学点前端知识,不求精通,至少可以使用前端技术栈为自己服务。
DjangoRestFramework + Vue 前后端分离环境搭建
说了这么多,来点硬货吧。什么是 REST API,可以看看阮一峰老师的博客上的解释,这里就不啰嗦了。
DjangoRestFramework 是 Python 里开发 REST API 最好用的库,没有之一,当然这是我自己的观点,如果你不授受,就让我接受你的。
什么是 Vue ,为什么要学 Vue,因为 Vue 是一个轻量级,渐进式的前端框架,有非常活跃的社区和生态,学习成本低,开发效率高,随学随用,易于理解。
【推荐】国内首个AI IDE,深度理解中文开发场景,立即下载体验Trae
【推荐】编程新体验,更懂你的AI,立即体验豆包MarsCode编程助手
【推荐】抖音旗下AI助手豆包,你的智能百科全书,全免费不限次数
【推荐】轻量又高性能的 SSH 工具 IShell:AI 加持,快人一步
· 终于写完轮子一部分:tcp代理 了,记录一下
· 震惊!C++程序真的从main开始吗?99%的程序员都答错了
· 别再用vector<bool>了!Google高级工程师:这可能是STL最大的设计失误
· 单元测试从入门到精通
· 【硬核科普】Trae如何「偷看」你的代码?零基础破解AI编程运行原理