前后端分离下的前端架构选型_SaiwenOutMan的博客-程序员宝宝_前后端分离 前端用什么

技术标签: 前后端分离  前端架构  

一.主要目标

1.前后端解耦。前端主要任务是将原有页面中的大量的Python Flask框架里的jinja2模板内容给替换,采用纯粹的JavaScript模板引擎来进行解耦。
2.前后端分离。前端拥有自己的静态资源服务器和路由,负责静态文件的转发和html页面的返回。

二.几种技术选型方案

选型方案,将从重构成本,人员成本(即学习成本),部署难度等几方面考虑。

方案一art-template(用于html文件解耦) + node.js(express)(用于静态资源返回 + 前端路由) + Mock.js(用于模拟伪后端数据)

方案优缺点:
1.art-template。由腾讯出品,github 有人维护,API 详细,插件相关生态也还不错,利于快速上手,重构成本相对较低。但是此模板引擎的模板继承功能必须由 node 服务提供,所以前端中间层只能是 node,强耦合。
2. node.js(express)。node + express 提供前端的本地服务和路由层,学习成本不高,利于快速上手。但是不适合初级前端工程师来维护,另外,部署项目是,合并前后端资源时也是个需要处理的问题,因为需要将 node 引擎打进包里。
3.mock.js,不论什么技术方案,mockjs 都能极大地提高前端的开发效率,它让前端不再需要等待后台接口开发完毕,只要拿到 RESTful API 接口,前端可以自己按数据格式模拟数据,与后端并行开发。


方案二art-template(用于html文件解耦) + Nginx(用于静态资源返回) + 前端路由拦截器(类似vue-router,需要自己造轮子) + Mock.js(用于模拟伪后端数据)

方案优点
1.最大限度的减少其他库的引入,降低了重构的成本
2.最大限度的降低了部署的难度。

方案缺点
1.缺点是部分关键功能需要自己实现,踩坑,填坑的过程必不可少,当然,研发同样能得到锻炼。
2.art-template中的模板继承功能由于是非 node 提供服务所以使用不了,需要前端自己实现。


方案三:
marko.js(用于解耦html文件) + Nginx(用于静态资源返回) + 前端路由拦截器(类似vue-router,需要自己造轮子) + Mock.js(用于模拟伪后端数据)

方案优点:
1.最大限度的减少其他库的引入,降低了重构的成本
2.最大限度的降低了部署的难度。
3.marko.js自带 SSI 的 shtml 模板继承功能。
方案缺点
1.缺点是路由拦截器需要自己实现,踩坑,填坑的过程必不可少,当然,研发同样能得到锻炼。
2.marko.js为 ebay 研发,现已开源。但是社区生态不太好,活跃度低;库过于庞大,其实我们只需要使用它的模板继承功能。

方案四:
vue.js(解耦) + Mock.js(用于模拟伪后端数据)
方案优点:
1.重构思路清晰,此法案使用的人很多,可以避免踩一些坑。
2.VUE生态健壮,各种方案极多,避免重复造轮子。
3.降低了部署的难度。
方案缺点:
1.重构成本高,对前端来说基本属于重写项目。
2.vue为spa单页应用,对于复杂的项目来说前端的复杂性会提高。
3.有一点学习成本,需要前端具备一定的 ES6,webpack,babel 的基础。

版权声明:本文为博主原创文章,遵循 CC 4.0 BY-SA 版权协议,转载请附上原文出处链接和本声明。
本文链接:https://blog.csdn.net/dk2290/article/details/85128974

智能推荐

c++基础 | stuck_Way798的博客-程序员宝宝

文章目录stack 对象的默认构造stack 的 push() 与 pop() 方法stack 对象的拷贝构造与赋值stack 的数据存取stack 的大小stuck简介:stack 是堆栈容器,是一种“先进后出”的容器。stack 是简单地装饰 deque 容器而成为另外的一种容器。#include stack 对象的默认构造// stack 采用模板类实现, stack 对象的默认构造形式: stack <T> stkT; stack <int> stkI

LeetCode:34. 在排序数组中查找元素的第一个和最后一个位置_flamingobaby的博客-程序员宝宝

给定一个按照升序排列的整数数组 nums,和一个目标值 target。找出给定目标值在数组中的开始位置和结束位置。你的算法时间复杂度必须是O(log n) 级别。如果数组中不存在目标值,返回[-1, -1]。示例 1:输入: nums = [5,7,7,8,8,10], target = 8输出: [3,4]示例2:输入: nums = [5,7,7,8,8,1...

AOJ 2321 Butterfly_birdstorm的博客-程序员宝宝

/*author: birdstorm*/#include #include #include #include #include #define MAXN 100005#define N 105#define INF 1<<30#define eps 1.0e-10#define For(i,m,n) for(i=(m);i<n;i++)#define MAX(x,y)

Flink学习笔记【巨详细!】(二)_水花还在漂移的博客-程序员宝宝_flink笔记

第三章:Flink集群配置和部署第四章:Flink运行架构的介绍

转一个linux apache 日志分析与状态 _tiandiqing的博客-程序员宝宝

ps.转的一篇文章 假设apache日志格式为:118.78.199.98 – - [09/Jan/2010:00:59:59 +0800] “GET /Public/Css/index.css HTTP/1.1″ 304 – “http://www.a.cn/common/index.php” “Mozilla/4.0 (compatible; MSIE 6.0; Windows NT 5....

Android中framework_丁小先生的博客-程序员宝宝_android framework

Android系统一共分为5层:Application(系统应用)FrameWork(Java API 框架)Native Libraries(原生 C/C++ 库 )+Android Runtime(ART虚拟机+Core Libraries[Android核心库])硬件抽象层 (HAL)Linux Kernel其中Framework在第二层,他是把一些基本的的或者和设备打交道的服务抽象起来作API给Application应用调用。这里是...

随便推点

Unsafe_yangmengjiao_的博客-程序员宝宝_unsafe分配内存

一、简介Unsafe类提供了硬件级别的原子操作,主要提供了以下功能:1、通过Unsafe类可以分配内存,可以释放内存类中提供的3个本地方法allocateMemory、reallocateMemory、freeMemory分别用于分配内存,扩充内存和释放内存。2、可以定位对象某字段的内存位置,也可以修改对象的字段值,即使它是私有的字段的定位:JAVA中对象的字段的定位可能通过staticFieldOffset方法实现,该方法返回给定field的内存...

android adb打开gps,adb 命令行模拟GPS位置信息_古筝圈小透明的博客-程序员宝宝

查看模拟器序列号&gt;adb devicesList of devices attached deviceemulator-5554然后用adb emu命令执行设备的console命令geo fix&gt;adb -s emulator-5554 emu geo fix 121.49612 31.24010参考:http://code.metager.de/source/xref/android...

2.关于RT-Thread 移植SPI NRF24L01_☆摔得流行★的博客-程序员宝宝

一、描述我默认你有良好的基础,使用过RT-Thread Studio、CubeMX等软件开发程序,所以文章只会讲解细节,毕竟时代在变化。对于NRF24L01,作为从机与stm32使用SPI协议进行通信,你得先了解写SPI协议,什么是CPOL、CPHA,配置他们有什么用,推荐看下原子哥视频,简单,速度快,最好标准库3.5裸机也写下程序,了解下结构体对相关寄存器的配置,毕竟使用CubeMX或IDE配置实在是太简单了,当然也忘得快。当然你想速成也可以。二、CubeMX或CubeIDE配置程序

你选择25k的996还是18k的965?_R语言中文社区的博客-程序员宝宝

来源:http://h5ip.cn/hSDk很多互联网公司,更多的创业公司,老板都喜欢玩996。一些情况是工作真的做不完,更多的情况是老板为了心里的满足,更多的是给投资人...

JASS代码加翻译更新(第四篇)_朴嵩澪的博客-程序员宝宝

[YDWEMemoryLeakHelperProtectLocation]title = "自动排泄系统-保护-点"description = "保护点 ${点},使其不被系统自动清除"comment = "自动排泄系统从收集到的反馈来看不是很理想,请尽量不要使用它。"category = TC_YDHIDEkeynum = 1type1 = location[YDWEMemoryLeakHelperProtectGroup]title = "自动排泄系统-保护-单位组...

推荐文章

热门文章

相关标签