百分百源码网-让建站变得如此简单! 登录 注册 签到领金币!

主页 | 如何升级VIP | TAG标签

当前位置: 主页>网站教程>html5教程> 先后端为何要分开写-
分享文章到:

先后端为何要分开写-

发布时间:08/01 来源:未知 浏览: 关键词:
大家都晓得,平常企业都会请求我们前端和后端分开来写,为何要这么做呢?这次给大家带来先后端为何要分开写,下面就是实战案例,一起来看一下。 大家都晓得,平常企业都会请求我们前端和后端分开来写,为何要这么做呢?这次给大家带来先后端为何要分开写,下面就是实战案例,一起来看一下。

要是你没有尝试过先后端别离的工作流程,那么可以先试想一下这样的流程转变:
把流程从
PM:“我要这个功能”
后端:“这个先寻前端做个模板”
前端:“模板做完了”
后端:“我来对接一下,这里样式不合错误”
前端:“我改完了”
后端:“功能交付”
PM:“春节要加这个流动”
后端:“这个先寻前端改个模板”
前端:“模板做完了”
后端:“我来对接一下,这里样式不合错误”
前端:“我改完了”
后端:“功能交付”

酿成

PM:“我要这个功能”
前端:“我要接口”
后端:“接口完成了”
前端:“我来对接一下,功能交付”
PM:“春节要加这个流动”
前端:“需要添加接口”
后端:“接口完成了”
前端:“我来对接一下,功能交付”

因而可知,先后端别离的主要概念就是:后台只需供给API接口,前端调取AJAX实现数据呈现。

近况与不合

作为一位前端开发人员,我们应当尝试一些新鲜的技术,完美每一个细节性的题目,一直冲破自我。虽然先后端别离已经算不上什么新鲜的技术或思绪,但是当前许多后台开发人员甚至前端开发人员都没有接触过。

据我个人的理解,要是在一个部门里,部门人员满是后台开发人员,前端的一些页面也是由后台人员完成的,那么先后端别离关于他们而言可能是一片未知的领域,项目大多是先后端强耦合的,甚至不存在前端的概念。

在不注重前端的企业或部门,不理解先后端别离这也无可非议。大多的创业型企业,一个部门就一两个前端,并且一人负责几个项目,很少有合作完成一个项目的时候。由于没有什么规范可言(这里的规范指的是代码组织构造),所以就是前端人员切好图写好页面扔给后端,今后端代码构造为规范。虽然一些企业有先后端别离的意识,但都不知该怎样去实践。在那时,部门的后台人员以为先后端别离就是后台不再需要写HTML和JS了,可以交给前端来做了,然而这只能叫做先后端分工。

以上讲述的是一种状况: 不理解先后端别离,也不知怎样去实践的。下面还有一种状况:理解先后端别离,但不想去尝试的。

针对第二种状况,许多人也做过响应的解释,其实这就波及到“先后端别离的利弊”题目。许多后台人员会以为本人所做的那一套没有题目,即使后台套用前端html也是绝无仅有,不断是大势所趋,后台MVC框架也是这么举荐运用的,很合理。这时候前端开发人员在部门中的话语权往往是不足的,或者以为后台开发人员的意见永远是对的,没有主不雅性。

相反,也有可能是后台开发人员非常举荐先后端别离,而前端开发人员不想去实践的。这时候前端会以为后台开发人员在瞎折腾,以前先后端不别离项目做起来都很顺利,别离了反而会给本人带来额外的工作量和学习老本,而这就取决于前端的技术能力和知识了。

固然,这也是我个人以为的先后端别离所存在的一些近况和不合所在。

场景与请求

关于先后端别离的利用场景,不是所有的场景都适合,但是大多数项目都能够通过先后端别离来实现。

因为我主要从事公司级后台利用的前端开发工作,个人以为关于后台利用的开发来说,先后端别离带来的利是弘远于弊的。

大多数后台利用我们都可以做成SPA利用(单页利用),而单页利用最主要的特色就是部分刷新,这通过前端控制路由调取AJAX,后台供给接口便可以实现,并且这样的方式会员体验更加友爱,网页加载更加速速,开发和保护老本也落低了不少,效率显明提拔。

一样的,在展现类网站和挪移APP页面中先后端别离也一样试用。先后端不别离的状况下,办事端要独自针对Web端做处置,返回完备HTML,这样势必添加办事端的复杂度,可保护性差,而web端需要加载完备的HTML,一定程度上影响网页机能,这关于挪移端机能为王的地方非常的不友爱。

随着前端技术的开展和迭代,前端MVC框架应运而生,应用当前主流的前端框架,如React、Vue、Angular等我们可以轻松的构建起一个无需办事器端渲染就可以展现的网站,同时这类框架都供给了前端路由功能,后台可以不再控制路由的跳转,将原本属于前端的业务逻辑全部丢给前端,这样先后端别离可以说是最为彻底。下面是一段前端控制路由的代码:

'use strict'export default function (router) {
    router.map({        '/': {            component: function (resolve) {                require(['./PC.vue'], resolve)
            }
        },        '/m/:params': {            component: function (resolve) {                require(['./Mobile.vue'], resolve)
            }
        },        '/p': {            component: function (resolve) {                require(['./PC.vue'], resolve)
            },            subRoutes: {                '/process/:username': {                    component: function (resolve) {                        require(['./components/Process.vue'], resolve)
                    }
                }
            }
        }
    })
}

先后端别离的实现对技术人员尤为是前端人员的请求会上升一个条理,前端的工作不只是切页面写模板或是处置一些简略的js逻辑,前端需要处置办事器返回的各种数据格局,还需要把握一系列的数据处置逻辑、MVC思想和各种主流框架。

优势与意义

关于先后端别离的意义我们也可以看做是前端渲染的意义,我主要总结了下面四点:

彻底解放前端
前端不再需要向后台供给模板或是后台在前端html中嵌入后台代码,如:

这是先后端耦合的,可读性差。

《script》export default {    data: {        return {            lists: ['选项一', '选项二', '选项三', '选项四']
        }
    },
    ready: function () {        this.$http({            url: '/demo/',            method: 'POST',
        })
        .then(function (response) {            this.lists = response.data.lists // 猎取办事器端数据并渲染
        })
    }
}
《script》

上面是前端渲染的一段代码,前端通过AJAX调取后台接口,数据逻辑放在前端,由前端保护。

提高工作效率,分工更加明白
先后端别离的工作流程可以使前端只关注前端的事,后台只体贴后台的活,两者开发可以同时进行,在后台尚无工夫供给接口的时候,前端可以先将数据写死或者调取当地的json文件即可,页面的添加和路由的修改也无须再去费事后台,开发更加灵便。

部分机能提拔
通过前端路由的配置,我们可以实现页面的按需加载,无需一开端加载首页便加载网站的所有的资源,办事器也不再需要解析前端页面,在页面交互及会员体验上有所提拔。

落低保护老本
通过当前主流的前端MVC框架,我们可以非常迅速的定位及发明题目的所在,客户端的题目不再需要后台人员参与及调试,代码重构及可保护性加强。

心得与体味:

一路走来,项目一个接着一个,从一开端的后台控制路由、后台渲染页面到此刻的前端控制路由、前端渲染数据,工作流程和方式都产生了很大的变化。每当碰到下面情景的时候,我都会为先后端别离带来的优势而感叹一番:

1、项目一开端制作前端页面的时候,我不再需要后台给我配置办事器环境了
2、项目的前端文件可以在需要调取后台接口的时候丢进办事器就好了,完全不需要事先放进去
3、添加一个项目页面需要配置路由的时候不再需要让后台同事给我加了,本人前端搞定
4、前端文件里不再掺杂后台的代码逻辑了,看起来舒畅多了
5、页面跳转比以前更加流通了,部分渲染部分加载非常迅速
6、页面模板可以反复运用了,前端组件化开发提高了开发效率

等等。面临迅速开展的前端,我们应当去顺应其带来的工作方式和流程的转变,当前的先后端别离的工作方式必定是以后的趋势所在,作为一个前端开发人员,我们应该负担这个普及前端新见识和转变近况的职责。

信赖看了本案牍例你已经把握了办法,更多出色请关注 百分百源码网 其它相干文章!

相干浏览:

Angularjs怎样实现mvvm式选项卡?案列+代码

vue2.0的项目非常有用的代码汇合

以上就是先后端为何要分开写的细致内容,更多请关注 百分百源码网 其它相干文章!

打赏

打赏

取消

感谢您的支持,我会继续努力的!

扫码支持
扫码打赏,你说多少就多少

打开支付宝扫一扫,即可进行扫码打赏哦

百分百源码网 建议打赏1~10元,土豪随意,感谢您的阅读!

共有151人阅读,期待你的评论!发表评论
昵称: 网址: 验证码: 点击我更换图片
最新评论

本文标签

广告赞助

能出一分力是一分吧!

订阅获得更多模板

本文标签

广告赞助

订阅获得更多模板