怎样理解前后端代码分离(简单版前端理解)

一、前后端分离是什么？

简单的说，就是前端负责浏览器端（客户端）用户交互界面和逻辑等，显示数据；后端负责数据的处理和存储等，提供数据。

二、对于前端来说前后端代码分离的意义（页面渲染的意义）？

1. 彻底解放前端

前端不再需要向后台提供模板或是后台在前端html中嵌入后台代码，如：

1 <!--服务器端渲染 -->
2 <select>
3     <option value=''>--请选择所属业务--</option>
4     {% for p in p_list %}
5     <option value="{{ p }}">{{ p }}</option>
6     {% endfor %}
7 </select>

这是前后端耦合的，可读性差。

 1 <!--前端渲染 -->
 2 <template>
 3     <select id="rander">
 4         <option value=''>--请选择所属业务--</option>
 5         <option v-for="list in lists" :value="list" v-text="list"></option>
 6     </select>
 7 </template>
 8 
 9 <script>
10 export default {
11     data: {
12         return {
13             lists: ['选项一', '选项二', '选项三', '选项四']
14         }
15     }，
16     ready: function () {
17         this.$http({
18             url: '/demo/',
19             method: 'POST',
20         })
21         .then(function (response) {
22             this.lists = response.data.lists // 获取服务器端数据并渲染
23         })
24     }
25 }
26 </script>

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

2. 提高工作效率，分工更加明确

前后端分离的工作流程可以使前端只关注前端的事，后台只关心后台的活，两者开发可以同时进行，在后台还没有时间提供接口的时候，前端可以先将数据写死或者调用本地的json文件即可，页面的增加和路由的修改也不必再去麻烦后台，开发更加灵活。

3. 局部性能提升

通过前端路由的配置，我们可以实现页面的按需加载，无需一开始加载首页便加载网站的所有的资源，服务器也不再需要解析前端页面，在页面交互及用户体验上有所提升。

4. 降低维护成本

通过目前主流的前端MVC框架，我们可以非常快速的定位及发现问题的所在，客户端的问题不再需要后台人员参与及调试，代码重构及可维护性增强。

 

通俗的自己前端理解来说：

  • 项目一开始制作前端页面的时候，我不再需要后台给我配置服务器环境了

  • 项目的前端文件可以在需要调用后台接口的时候丢进服务器就好了，完全不需要事先放进去

  • 增加一个项目页面需要配置路由的时候不再需要让后台同事给我加了，自己前端搞定

  • 前端文件里不再掺杂后台的代码逻辑了，看起来舒服多了

  • 页面跳转比之前更加流畅了，局部渲染局部加载非常快速

  • 页面模板可以重复使用了，前端组件化开发提高了开发效率

等等一些好处。

 

 

博客参考文：吴隐隐—前后端分离与前端工程化=>https://segmentfault.com/a/1190000006751300

                     劳卜——我们为什么要尝试前后端分离=>https://segmentfault.com/a/1190000006240370

posted @ 2017-12-07 00:11  YuJinChao！  阅读(5767)  评论(0)  编辑  收藏  举报