java前后端分离编辑器画布数据怎么保存前后端分离代码

转载

mob64ca1403c772 2023-11-03 20:50:15

一、前后端分离是什么？

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

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

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框架，我们可以非常快速的定位及发现问题的所在，客户端的问题不再需要后台人员参与及调试，代码重构及可维护性增强。

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