前后端分离 语言篇

Posted 西北大粽子

tags:

篇首语:本文由小常识网(cha138.com)小编为大家整理,主要介绍了前后端分离 语言篇相关的知识,希望对你有一定的参考价值。

前后端分离 语言

开场秀

iShot2020-12-17 23.27.19
前后端分离 语言篇
iShot2020-12-17 23.30.18
前后端分离 语言篇
iShot2020-12-18 22.02.55
有些路很远,走下去会很累。可是,不走,会后悔。【酸了酸了】

故事开始

前后端分离 语言篇
image-20201217233503186
前后端分离 语言篇
image-20201217233746100

寒暄结束,开始今天的正题

前后端分离 语言篇
iShot2020-12-17 23.46.27
前后端分离 语言篇
iShot2020-12-17 23.50.16
前后端分离 语言篇
iShot2020-12-17 23.52.18

前后端是什么:

顾名思义,前端指的是用户端也就是浏览器所能操作的程序,后端是运行在服务器提供软件服务的程序。只有这两个程序搭配起来才能形成一个完整的软件操作。比如你在淘宝购物,你所能看到的都属于淘宝的前端。看不到的就是后端,看不到?什么鬼?

前后端分离 语言篇
iShot2020-12-17 23.55.48

举个栗子:

以看电视为例,电视就是浏览器,电视节目就是前端程序,后端你应该可想而知了。对,就是那些节目制作者制作节目的过程。再反过来说和看电影一样的道理,谋女郎为什么是谋女郎,因为后台导演情节设定的好,谋女郎演的也好。谋女郎就是干前端的,谋导就是干后端的。

前后端分离 语言篇
iShot2020-12-17 23.59.11

那么在软件工程中这部分为什么才分离,以前是怎么做的呢?别急我们慢慢道来。

皮影戏还记得吧,我印象中的皮影戏就是1-2个人,一个那个皮影在幕后挥舞,一个根据情节演奏乐器。几个人搭配的完成皮影戏这个节目。人少的时候可能一个人手忙脚乱的都能把这活给干了。后来我们有了电影,有人专门表演,有人设置背景乐,序幕等等有了明确的分工,所以电影可不是一个人能从头到尾干完的事情。皮影戏就像前后端未分离的时候,电影就是前后端分离的产物。

前后端分离 语言篇
iShot2020-12-18 22.15.11

历史 - 前后端未分离

来我先讲点有历史性的东西:以 JavaWeb 开发为例,以前的时候美工只管设计图,将图片切好,编写css后转换成静态html即可,再把 html 文件给 Java 开发人员,Java 开发人员需要将 html 内容在不同的业务输出中根据特定格式返回给浏览器算是完成业务。也就是说前端切好图后给 Java 开发人员就万事大吉了,剩下的由 Java 开发人员处理。这也是【前端切图仔】的由来。

前后端分离 语言篇
iShot2020-12-18 22.19.06

可想而知 Java 开发者需要在不同的业务中将静态界面分散在自己的业务代码中,请知晓,这样的程序里面有 Java css javascript html 甚至再来几段SQL 且还包含在一个class文件中,

如图:

前后端分离 语言篇
image-20201218223340035

以上图为例,jsp 文件中 包含了现在的前端开发所有的文件格式之外 还有java代码

想象下,如果上面的代码中还有一段循环,循环中还套着sql 想想脑袋都大了。

前后端分离 语言篇
iShot2020-12-18 22.43.03

所以那时候的java开发都是全栈大神,但出现问题调试也是头疼的厉害,样式业务暂且不说,光浏览器兼容性这点就能逼死一半 Java 开发者。

前后端分离 语言篇
iShot2020-12-18 22.45.56
前后端分离 语言篇
iShot2020-12-18 22.49.42

新大陆

Angular

首先提出前后端分离的是谷歌公司的Angular框架,当然这个期间前端大神也在寻找方向,AMD CMD 规范等等。

Angular首先提出了MVVM 的概念,当然Angular也并非一出生就是大牛,都是经过给大佬端茶倒水才变成大佬的。

用过Angular1的同学再升级到Angular2 的时候应该有种生不如死的感觉。当然现在Angular的高版本衍生的也很不错。

前后端分离 语言篇
image-20201218225941993
React

一个是Facebook 提出的编写一遍,跑遍全平台的想法实现的。对就是那个辍学的网瘾少年创建的公司 扎克马克伯格,对就是他,咱们的洋女婿。

前后端分离 语言篇
iShot2020-12-18 22.57.39
Vue

Vue 是 鱿鱼须 大神 哦不 是 优雨溪 大神 在使用Angular和React之后 将两个框架的优点综合在一起。

前后端分离 语言篇
image-20201218230238365

选择困难症

前后端分离 语言篇
image-20201218230434662

前后端分离 语言篇

一段美好的经历

上面的项目粽子哥哥之前用过Angular 和 Vue

Angular 确实比较系统,系统本身就提供了每个流程能用得到的组件和机制

Vue 就是一把梭,快 准 狠。指哪打哪, 什么?业务中很多的组件需要写?别着急,轮子可能已经有人造好了。

虽然我自己也坚持写轮子,但是在使用之前先查找下,毕竟github 和 Gitee 上有很多优秀的开源项目啊。

前后端分离前后的样子

前后端分离 语言篇
iShot2020-12-18 23.16.48
iShot2020-12-18 23.19.54

结束

喜欢本文的朋友,欢迎关注微信公众号 西北大粽子 每周持续更新1-2篇原创内容,在学习和生活的路上一起闹闹磕。码字不易,点赞 再看

qrcode_for_gh_cd8ae0e30521_1280


以上是关于前后端分离 语言篇的主要内容,如果未能解决你的问题,请参考以下文章

详解篇一:浅析前后端分离的效率优势

使用 MockJs — 实现真正的前后端分离

不懂前后端分离?这篇就够

前后端分离与 restful api

推荐 9 个 yyds 前后端分离项目

企业管理系统前后端分离架构设计 系列一 权限模型篇