基于 Node.js 实现前后端分离

基本介绍

首先从一个重要的概念“模板”说起。 广义上来说，web中的模板就是填充数据后可以生成文件的页面。 严格意义上来说，应该是模板引擎利用特定格式的文件和所提供的数据编译生成页面。模板大致分为前端模板（如ejs）和后端模板（如freemarker）分别在浏览器端和服务器端编译。

由于当场有一部分同学对node.js并不是很了解，这里补充一下node.js的相关知识。官网上的给他的定义事件驱动、异步什么的就不说了。这里借用朴灵书上的一张图来解释一下node.js这个玩意的结构。如果懂java的同学可以将其理解为js版本的jvm。 浏览器一般包括渲染器和js脚本引擎，以chrome浏览器为例，用的webkit内核的渲染器，V8的脚本引擎，而node.js用到了v8引擎。总而言之它就是一个js的运行环境，就好比浏览器的F12调试工具，只不过node.js没有DOM和BOM。

这张图描述的是node.js周边的一些信息，比如npm这个出色的包管理器和cnode社区以及github，都在一定程度上促进了node.js的繁荣，提供了技术保障。

大公司通常都是技术的风向标，例如google的angular、facebook的react现在都很火。这里只列了3个大公司当作例子。淘宝的中途岛架构就不用说了，国内node.js的先行者朴灵就来自淘宝。去哪儿也出了个应该叫做“QTX”的技术框架。360月影带领的75团队出了个基于ES6/ES7的web服务器框架——thinkjs，当时我们技术总监很看好，但是由于鄙人没有时间学习ES6再加上插件不够丰富，所以还是选用了较为成熟的Express。

言归正传，这个表格列出了我所接触过的3种前后端分离的开发方式。 第一种是最常见的使用java之类的后端语言模板，SEO友好，缓存利用率和减轻浏览器渲染负担方面都比较好，最大的问题就是模板文件的耦合度太高，出了问题谁都不想来解决，前端人员看不到数据，后端人员不懂页面，模板文件就像是一个烫手的山芋。 第二种是目前我们项目移动端的实现方案，利用angular这种框架（angular的指令可以看成是前端模板）和nginx这种反向代理服务器，让前后端彻底解耦，只通过ajax交互数据。这种方案和前一种的优缺点刚好相反。前端模板的性能始终是个问题，尤其是在移动端，更尤其是在低端的移动设备上。 最后一种是新项目使用的用node.js做前端服务器，将前端的职责从浏览器划分到了模板这一层，解决了以上所有的问题，不过确实也有新的问题，这种问题稍后再分析。

当然全栈开发在小型项目中也是非常适合的。对于传统的jsp/php开发来说，全栈开发的沟通成本更低，开发人员能更容易理解整个功能模块，从而更好的还原产品的设计。尤其现在出现的以js语言为基础的全栈开发：meteor和MEAN技术，更是使得前后端开发用一种语言直接搞定，再配上Mongodb，数据从浏览器到数据库都无需转义直接使用，还不用写sql，开发成本又大大降低。

这次搭建node.js服务器用到的一些插件。 鼎鼎大名的express不用多介绍了，轻量级web服务器框架。 用handlebars模板引擎也属巧合，因为express4默认就是它，handlebars不愧为“弱逻辑”的模板引擎，主张的是减少模板逻辑，尽量只用变量和分页，基于它的设计理念，我只扩充了两个helper。具体文章：https://yalishizhude.github.io/2016/01/22/handlebars/superagent的使用还是因为express4，因为它的测试代码用的是supertest，supertest是基于superagent，所以用了superagent来转发和发起请求。superagent还是太弱了，长连接都无法建立，还是推荐request插件。 restfuleAPI就没什么好介绍了，前端服务器与浏览器，前端服务器与后端服务器都是用的这一套规范，基本上就是url指向资源，增删改查又具体的请求方法表示，状态码表示结果等~ gulp打包工具，webpack研究了很久，发现每增加一个页面都要修改配置文件，这个太蛋疼，遂放弃。

开发流程

如果这次分享主要是讲怎样将node.js做为前端服务器来实现前后端分离的话那也没什么好讲的，看看淘宝UED的文章就好了。前后端分离其实最大的问题是带来沟通成本的上升，具体来说就是接口的定义和调试。在上图的传统开发流程中，接口的定义会放在接口服务器中，然后前后端各自根据接口文档造假数据进行本地调试，之后进行联调。这个环节就是前后端开始撕逼的时候了，这个参数不对，那个返回值不对，总之很浪费时间。接下来看这个问题在我们项目中是怎么解决的~

前后端因为接口撕逼的问题一直存在，作为保守主义的我相信迭代开发，所以第一步做的只是增加了一个mock服务器。这个服务器的神奇之处就是根据接口文档自动生成假数据，实现了接口即API，前端同学再也不用把数据写死进行测试了。没办法，谁叫我是前端开发，首先想到自己人，嘿嘿~当然这个只在一定程度上有利于前端开发，后端的接口和文档不一致联调时也会出现问题。怎么办？

偶然在破浪大神的博客上看到老马的一篇专门讲前后端分离的文章，其中一个重要的概念就是契约测试也叫双边测试吧。核心概念就是为了解决远程联调的问题。对前后端的参数都进行校验，要求大家按照接口文档进行开发。受其启发，加入json-schema规则，实现了对http请求的参数校验，谁不按规矩来谁改。

这个redmine是我们最早的接口文档管理器，除了记录和查看功能再无其他作用。

swagger号称世界最流行的接口文档服务器，界面美观，插件也还比较多，可以针对后端语言直接生成测试代码。不过部署的时候始终没玩懂，而且yaml格式不如json习惯，放弃了它。

这就是现在我们项目上用的文档服务器和mock服务器，基于MEAN技术实现的服务器，基本功能：

利用mockjs插件，可以动态生成随机数据基于json-schema对接口参数实行校验和接口测试，并保存测试状态和接口响应时间。简单的json编辑器带有登陆校验功能，可登陆后进行接口调试mock服务器按照api服务器来响应请求，接口更新时自动更新

一些问题

node.js是前端工程师的翅膀，而插上翅膀是变成天使还是变成恶魔？这个要看能不能解决的使用它时带来的问题了。

首先前端的工作量毫无疑问地会增加，但沟通成本会降低。node.js单线程的服务器稳定性确实不够好，不过代码的健壮性和完善的日志可以有效的规避。回调。这个问题解决方法就太多了，node.js的q/async模块以及ES6/ES7。node.js调试。虽然我一直排斥IDE，但不得不承认webstorm在调试上确实很方便。我用的node-inspector也还凑合，界面类似chrome开发者工具，看上去挺熟悉的。

如果对于后端程序员，更加应该拥簇node.js了。接口整合的工作交给了前端服务器进行处理，同时和前端耦合度大大降低，工作量和工作效率都减少了。

心得体会有两点

node.js的使用虽然有一定的学习成本，但对于前端开发人员还是很友好的。而且前端使用node.js的话，无论是技术含量还是工作量都会有所提升，从而提升了岗位的重要性。当前端开发人员能创造更多价值的时候才有资格要求更高的薪水~工作中建议少提建议多给可行性方案，同时进行技术预研而不是写个简单的helloworld。

总结

可能有人说你介绍的这一套东西这么复杂，用起来太麻烦了，还不如面对面沟通。 对于这样的质疑我只能用腾讯高级UI工程师余果在《web全栈工程师的自我修养》中讲到的一个例子。有一次他电面一家小公司的前端负责人问他怎么管理代码时，对方说直接用ftp上传，同时抱怨手下人老是更新错代码，又问他为什么不用svn或git，他说还不如手动更新方便。 这个故事的道理就是我面对质疑的回答~

ppt下载地址

赞 (0)

相关推荐

  • 基于NodeJS的前后端分离的思考与实践（三）轻量级的接口配置建模框架

    基于NodeJS的前后端分离的思考与实践（三）轻量级的接口配置建模框架

    前言 使用Node做前后端分离的开发模式带来了一些性能及开发流程上的优势, 但同时也面临不少挑战.在淘宝复杂的业务及技术架构下,后端必须依赖Java搭建基础架构,同时提供相关业务接口供前端使用.Node在整个环境中最重要的工作之一就是代理这些业务接口,以方便前端(Node端和浏览器端)整合数据做页面渲染.如何做好代理工作,使得前后端开发分离之后,仍然可以在流程上无缝衔接,是我们需要考虑的问题.本文将就该问题做相关探讨,并提出解决方案. 由于后端提供的接口方式可能多种多样,同时开发人员在编写Nod

  • 基于NodeJS的前后端分离的思考与实践（六）Nginx + Node.js + Java 的软件栈部署实践

    基于NodeJS的前后端分离的思考与实践（六）Nginx + Node.js + Java 的软件栈部署实践

    淘宝网线上应用的传统软件栈结构为 Nginx + Velocity + Java,即: 在这个体系中,Nginx 将请求转发给 Java 应用,后者处理完事务,再将数据用 Velocity 模板渲染成最终的页面. 引入 Node.js 之后,我们势必要面临以下几个问题: 技术栈的拓扑结构该如何设计,部署方式该如何选择,才算是科学合理?项目完成后,该如何切分流量,对运维来说才算是方便快捷?遇到线上的问题,如何最快地解除险情,避免更大的损失?如何确保应用的健康情况,在负载均衡调度的层面加以管理?承系

  • Node.js的Koa框架上手及MySQL操作指南

    由 Express 原班人马打造的 koa,致力于成为一个更小.更健壮.更富有表现力的 Web 框架.使用 koa 编写 web 应用,通过组合不同的 generator,可以免除重复繁琐的回调函数嵌套,并极大地提升常用错误处理效率.Koa 不在内核方法中绑定任何中间件,它仅仅提供了一个轻量优雅的函数库,使得编写 Web 应用变得得心应手. 安装koa koa 依赖支持 generator 的 Node 环境,也就是说,node的版本要在 0.11.9 或者更高,否则将无法执行. 用npm: $

  • 基于NodeJS的前后端分离的思考与实践（四）安全问题解决方案

    基于NodeJS的前后端分离的思考与实践（四）安全问题解决方案

    前言 在前后端分离的开发模式中,从开发的角色和职能上来讲,一个最明显的变化就是:以往传统中,只负责浏览器环境中开发的前端同学,需要涉猎到服务端层面,编写服务端代码.而摆在面前的一个基础性问题就是如何保障Web安全? 本文就在前后端分离模式的架构下,针对前端在Web开发中,所遇到的安全问题以及应对措施和注意事项,并提出解决方案. 跨站脚本攻击(XSS)的防御 问题及解决思路 跨站脚本攻击(XSS,Cross-site scripting)是最常见和基本的攻击Web网站的方法.攻击者可以在网页上发布

  • 基于NodeJS的前后端分离的思考与实践（五）多终端适配

    基于NodeJS的前后端分离的思考与实践（五）多终端适配

    前言 近年来各站点基于 Web 的多终端适配进行得如火如荼,行业间也发展出依赖各种技术的解决方案.有如基于浏览器原生 CSS3 Media Query 的响应式设计.基于云端智能重排的「云适配」方案等.本文则主要探讨在前后端分离基础下的多终端适配方案. 关于前后端分离 关于前后端分离的方案,在<基于NodeJS的前后端分离的思考与实践(一)>中有非常清晰的解释.我们在服务端接口和浏览器之间引入 NodeJS 作为渲染层,因为 NodeJS 层彻底与数据抽离,同时无需关心大量的业务逻辑,所以十分

  • 基于NodeJS的前后端分离的思考与实践（一）全栈式开发

    基于NodeJS的前后端分离的思考与实践（一）全栈式开发

    前言 为了解决传统Web开发模式带来的各种问题,我们进行了许多尝试,但由于前/后端的物理鸿沟,尝试的方案都大同小异.痛定思痛,今天我们重新思考了"前后端"的定义,引入前端同学都熟悉的NodeJS,试图探索一条全新的前后端分离模式. 随着不同终端(Pad/Mobile/PC)的兴起,对开发人员的要求越来越高,纯浏览器端的响应式已经不能满足用户体验的高要求,我们往往需要针对不同的终端开发定制的版本.为了提升开发效率,前后端分离的需求越来越被重视,后端负责业务/数据接口,前端负责展现/交互逻

  • 利用Node.js+Koa框架实现前后端交互的方法

    利用Node.js+Koa框架实现前后端交互的方法

    前言 对于一个前端工程师来说不仅仅要会前端的内容,后端的技术也需要熟练掌握.今天我就要通过一个案例来描述一下前端是如何和后端进行数据交互的. koa 是由 Express 原班人马打造的,致力于成为一个更小.更富有表现力.更健壮的 Web 框架.使用 koa 编写 web 应用,通过组合不同的 generator,可以免除重复繁琐的回调函数嵌套,并极大地提升错误处理的效率.koa 不在内核方法中绑定任何中间件,它仅仅提供了一个轻量优雅的函数库,使得编写 Web 应用变得得心应手. 准备工作 首先

  • 基于NodeJS的前后端分离的思考与实践（二）模版探索

    基于NodeJS的前后端分离的思考与实践（二）模版探索

    前言 在做前后端分离时,第一个关注到的问题就是 渲染,也就是 View 这个层面的工作. 在传统的开发模式中,浏览器端与服务器端是由不同的前后端两个团队开发,但是模版却又在这两者中间的模糊地带.因此模版上面总不可避免的越来越多复杂逻辑,最终难以维护. 而我们选择了NodeJS,作为一个前后端的中间层.试图藉由NodeJS,来疏理 View 层面的工作. 使得前后端分工更明确,让专案更好维护,达成更好的用户体验. 本文 渲染这块工作,对于前端开发者的日常工作来说,佔了非常大的比例,也是最容易与后端

  • 基于 Node.js 实现前后端分离

    基于 Node.js 实现前后端分离

    基本介绍 首先从一个重要的概念"模板"说起. 广义上来说,web中的模板就是填充数据后可以生成文件的页面. 严格意义上来说,应该是模板引擎利用特定格式的文件和所提供的数据编译生成页面.模板大致分为前端模板(如ejs)和后端模板(如freemarker)分别在浏览器端和服务器端编译. 由于当场有一部分同学对node.js并不是很了解,这里补充一下node.js的相关知识.官网上的给他的定义事件驱动.异步什么的就不说了.这里借用朴灵书上的一张图来解释一下node.js这个玩意的结构.如果懂

  • nginx+vue.js实现前后端分离的示例代码

    1.nginx 是一个高性能的HTTP和反向代理服务器,常用于分布式服务器管理. 它常用于做负载均衡(通过调用多台服务器达到此目的) 静态资源输出更快,可以对资源实现gzip压缩后输出(这也是本文为什么用它做静态资源访问的一个重要原因) 适合解决跨域问题和反向代理(因为谁也不想看到在本域名下看到访问其他域名的情况发生,跨域可导致csrf攻击,这是本文用它的第二个原因) 占用内存少,秒启,能快速切换结点,防止宕机 2.es6 是ECMAScript的第六个版本,如果想要学好vue.js等js框架,

  • vue+mock.js实现前后端分离

    vue+mock.js实现前后端分离

    之前都是介绍在普通项目中使用mock.js,那么本次就来介绍一下在vue中使用mock.js实现前后端分离. 安装: npm install mockjs 这里先写个小案例介绍一下具体使用,写法不规范,仅供参考. 然后案例讲完后我们讲具体的规范使用 那么一起来看看这个案例吧: <script> import Mock from "mockjs" export default { name: "FunctionsDbSource", methods:{ /

  • 基于Java SpringBoot的前后端分离信息管理系统的设计和实现

    基于Java SpringBoot的前后端分离信息管理系统的设计和实现

    目录 前言 视频演示 主要功能说明 功能截图 主要代码实现 主要数据表设计 前言 当今社会,随着科学技术的发展,以及市场经济的多元化,使人才的流动速度大大增加,因此也对党建工作的管理层面工作带来了空前且复杂的挑战, 从而使得如何高效的开展管理党建工作成为了亟待解决的问题.为此将高速发展的信息科学技术引入到党建工作管理的应用中,力求合理有效的提升全面各项工作的进展,实现以人为本的科学发展思想和意识,是一种高效可实现的方法. Java作为一种面向对象的.可以撰写跨平台应用软件的程序设计语言,其技术具

  • Django+Vue.js搭建前后端分离项目的示例

    Django+Vue.js搭建前后端分离项目的示例

    在写这篇文章的时候,顺带学习了一下关于Markdown的使用方法. 笔者是个渣渣,一切都是自己在摸索的学着,所以也谈不上什么体系.系统学习.在这里主要是为了实现把项目前后端分离开. 这里假设你的电脑上所需的django.vue.js已经有了,如果没有,往下拉就是vue.js的安装流程.django前面写过了,就不赘述了. 一,正常搭建前后端分离项目流程 1.创建django项目 命令: django-admin startproject ulb_manager 结构: ├── manage.py

  • SpringBoot+Vue.js实现前后端分离的文件上传功能

    这篇文章需要一定Vue和SpringBoot的知识,分为两个项目,一个是前端Vue项目,一个是后端SpringBoot项目. 后端项目搭建 我使用的是SpringBoot1.5.10+JDK8+IDEA 使用IDEA新建一个SpringBoot项目,一直点next即可 项目创建成功后,maven的pom配置如下 <dependencies> <dependency> <groupId>org.springframework.boot</groupId> &l

  • 详解利用 Vue.js 实现前后端分离的RBAC角色权限管理

    项目背景:物业管理后台,不同角色拥有不同权限 采用技术:Vue.js + Vuex + Element UI 实现 RBAC 权限管理需要后端接口支持,这里仅提供前端解决方案. 因代码篇幅较大,对代码进行了删减,文中 "..." 即为省略的一部分代码. 大致思路: 首先登录成功后,从后台拉取用户当前可显示的菜单和可用权限列表,分别将其存入 store 的 nav(菜单导航) 和 auth(用户可用权限) 中,在用户切换路由时,判断是否存在 auth ,如果不存在,则重新获取,判断当前访

  • vue项目使用node连接数据库的方法(前后端分离)

    目录 写在前面 编写顺序 开始 2.制作后端 node 服务器 3.编写 node 连接数据库 4.实现登录.修改密码和获取用户信息接口 5.完成前后端交互 结束 学习关键语句:vue连接mysql数据库vue项目连接后台数据库配置vue通过node连接MySQL数据库 写在前面 为了快速学习nodejs制作后端并和数据库进行交互的方法,所以赶紧写一篇这样的文章出来,如果你对这篇文章中提到的内容有所疑惑,请飞快的将你的疑惑输入到下方评论区中!另外一个真实原因是我在做这个练习时很难找到完整的教学性

  • 基于vue实现网站前台的权限管理(前后端分离实践)

    基于vue实现网站前台的权限管理(前后端分离实践)

    Javascript做为当下的热门语言,用途很广泛,从前端到后端处处可见其存在,该技术如今在我们项目内部也大量使用来开发诸如CMS系统以及其他其他一些数据分析系统的前端页面,为此个人非常感兴趣并将其作为帽子卡的扩展内容来进行课余学习. Javascript框架鳞次栉比,但基本原理大致相同,因此选用国内人开发的vue.js进行一个初步的尝试.学习vue.js也一周多的时间了,说起vue的主要用法,无外乎Declarative Rendering.Component System.Client-si

  • Springboot与vue实例讲解实现前后端分离的人事管理系统

    Springboot与vue实例讲解实现前后端分离的人事管理系统

    目录 一,项目简介 二,环境介绍 三,系统展示 四,核心代码展示 五,项目总结 一,项目简介 系统是前后端分离的项目,直接启动Springboot应用程序类后,再启动前端工程访问即可.主要实现了企业的人事管理功能,主要包含员工管理.薪资管理.职位管理.权限管理.网盘文件分享管理等模块. 系统亮点:使用REDIS进行数据缓存,优化查询性能:使用分布式文件系统进行文件存储服务:基于Springboot+vue实现前后端分离开发 二,环境介绍 语言环境:Java: jdk1.8 数据库:Mysql:

随机推荐