一步步从后端渲染到前后端分离经验分享

Posted 2021-04-30 吵吵日记

概念普及

后端渲染

后端采用JSP，freemarker，jdea，babel等渲染框架对前端模板进行预编译。

假设有这么一组数据你想展示在界面上：

name
MrXu
MrXu0
MrXu1

<#list list as item>
   <div class="font">姓名:${item.name}</div>   
</#list>复制代码

以上采取的是freemarker语法进行的html预编译，编译的结果如下:

<div class="font">姓名:MrXu</div>   
<div class="font">姓名:MrXu1</div>
<div class="font">姓名:MrXu2</div>复制代码

在没有Vue，React，Angular的年代（此处指代任何的前端渲染框架），不借助后端渲染工具你想界面上根据数据实现界面效果你需要多少步骤:

• 1.ajax请求

• 2.写一大堆加号拼接数据:

    var model +="<div>" +list[i].name + "</div>"复制代码

• 3.获取某个元素添加到元素里面

现在大部分人应该都没感受过拼接字符串的恐惧。

前后端分离

你如果了解APP跟后端的开发，你会很简单的了解这个概念。APP开发的时候如果接口文档齐全都不需要跟后端开发人员产生交流就可以实现一个完整的项目（理想状态下）。像现在的各种前端脚手架，都能够帮你快速的实现一个简易的前端项目。

原因

像很多非互联网公司，技术并不是第一生产力，做项目还是比较保守的，不可能快速迭代技术。一切以“稳”字为主。如果没有巨大的诱惑是不会迭代技术的，毕竟像Jquery，十几年的沉淀，几乎满足各种要求，非常稳定。

那么这个巨大的诱惑是什么呢？看我慢慢分析。

我们公司优先推出的是一套APP，现在要开发微信商城。这样就确保了后端其实已经有一套成熟的接口能够满足业务需要了。如果前端还采用后端渲染的模式将面临其中大部分的接口重写，维护俩遍的问题。这可不是一个很小的工作量，并且还会一直迭代这就是目前面临的主要问题，于是我给公司提供了以下三种方案：

• 1.采用后端渲染的方式，部分界面我自己借助框架渲染，例如购物车这种大量界面交互的界面。开发速度快。但是后期转型极其麻烦

• 2.后端统一配置前端界面，将路由权限放宽，由前端自由把握，不在采用后端渲染，所有界面完全由前端自由渲染。开发方向往前端偏移，但是开发速度较快，后期转型要容易的多

• 3.采用网上的各种脚手架进行SPA开发模式。一步到位，不存在转型问题，但是开发速度慢

以上的开发速度是基于我自己的公司现状分析的，上面的第三种模式开发速度3其实是最快的，其次是2最后是1,现在之所以慢是因为公司目前缺少符合这方面的人才。我虽然技术方面没有问题，对相关的技术站早已经学会了，但是没有实操经验。在时间充足的情况下我还挺有把握的，但是项目工期是在太紧张了，我可不想闲着没事就加班到凌晨4,5点的。最后我从延长时间，减少需求，添加人员三方面着手。希望能够给与支持。不过没有一方面能够满足我的，所以只能够采取折中的办法，使用了方案二，先把首版推上去。推上去之后再进行一次大的重构,从而彻底实现前后端分离。

技术选型

目前比较火的前端渲染框架主要是Angular，React，Vue。我选择了比较轻量级的Vue，原因主要出于以下几点：

• 1.简单易学，Angular目前使用的是TS开发这使得学习成本提高，React官网对中文支持很差，Vue是中国人搞的，所以中文翻译挺棒的，而且主要用于Web开发。

• 2.支持不打包只引入资源即可跑项目，适合目前的方案

界面布局采用rem布局，原因如下：

• 1.可以跟设计图同尺寸作图，很方便

• 2.公司一直采用这种方式，已经习惯了这个套路。

不过也带来了很多麻烦，这里先卖个关子，后面再说。

数据请求axios：

• 1.采用了promise的方式，相当于对现在的ajax的一个扩展

• 2.拥有钩子机制，可以监控拦截请求前，请求后状态。

MintUI：

• 1.这是我接触的第一个集成自Vue的UI框架

• 2.能够支持一次性加载和分开加载

• 3.教程中文，上手简单

• 4.由饿了么团队开发，大厂家莫名的细分

所以选择这个有些任性，嘿嘿。以上的选择也是为了后期进行完整的分离方案设计的，能够最简化工作量的移植。

后期完整的前后端分离方案

采用Vue的全家桶进行SPA模式开发，获得更好的用户体验。

• 1.Vue-Router:路由管理系统，模拟浏览器的history机制，使用方便。不反人类

• 2.VueX：官方的解释是这就像你的眼镜，你自然知道什么时候去用它。

• 3.axios：用来做数据请求

• 4.Mint：UI框架

• 5.npm：包管理工具

• 6.webpack：打包工具

• 7.Vue：数据渲染框架