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

1、先后端分离是什么？

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

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

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