记得最新的Nodejs全栈开发经验
背景：前段时间大部分部门下成立了一个新的子部门，推动百度的OCR、文字识别、图像识别等技术能力在金融领域的应用。由于该部门刚刚成立，基础设施和人手都缺乏。当时分配给我们部门的任务是调一个人去做新部门主站的前端开发工作。本来只负责页面的开发。参加需求产品评审会后得知新部门人手不足，今年的主要任务是升级我们部门基于Nodejs的前后端架构。之前用Nodejs写过两个内部系统，并没有大规模的在线web开发经验，所以想借此机会锻炼一下。然后就主动和老板商量这件事，老板很支持。之后和新部门的产品商量，他们很乐意在我这边承担更多的开发任务，虽然人手已经很紧了。这篇文章的风格会和我之前的文章有很大的不同。一些具体的技术点和遇到的问题的具体解决方案就不写了。主要讲一下整个开发过程中遇到的一些问题和问题。想办法对付他们。内容列表：技术选型思考相关服务应用前端工程技术目标Web安全内网机器访问外网发送邮件网络优化收割技术选型在文章开头的背景介绍中，大致说了后台-网站的最后是使用Nodejs开发的。为了突出技术能力，网站需要一些特殊效果。因为想用CSS3来写这些特效，经过与产品的比对，结果是浏览器兼容性在IE8.0以上，特效可以满足大部分主流浏览器。那么基于Nodejs的其他技术的选择如下：选择这些技术的原因如下：yog2（点击进入首页））是百度基于Express开发的一款比较成熟的Nodejsweb框架。提供的能力都符合公司内部的基础服务（同机房接入、运维、日志等），部分部门已经大规模上线使用。如果遇到问题，可以借鉴很多经验。swig是yog2默认支持的模板引擎。因为Nodejs的语法遵循CMD规范。而且百度内部也提倡使用FIS3和Mod.js。所以选择了公司内部的FIS3（点击进入首页）和Mod.js（点击进入首页）。FIS3不仅被百度自己使用，也被许多外部公司使用，比如滴滴。因为交互需求兼容一些低版本的浏览器和一些国产的奇葩浏览器。为了保证开发时间可控，我选择了自己熟悉的jQuery；技术选型确定后开始申请相关服务，申请服务主要包括以下相关内容：域名申请服务器申请Mysql数据库申请bos存储服务（使用百度云的bos存储）以上均为公司内部流程，所以我不会详细介绍它们。主要介绍一些服务的功能。一个运行在互联网上的网站肯定需要域名，当然也需要在线服务器才能让网站运行起来。需要一个数据库来存储用户的注册数据。因为使用OCR进行人脸识别，需要识别一张图片上的多张人脸。需要裁剪用户的图片。因为网站是部署在多台机器上的，所以一定不能存放在网站运行的服务器上。需要将裁剪后的图片存储在专用的存储服务器上，并将图片链接返回给网站。如果前端项目是使用Nodejs开发的，那么前端工程的概念可能会更广一些，涉及到Nodejs相关的工程。本部分分为两部分：1.前端目标：将不同页面的公共模块开发成组件，方便不同页面之间的引用；使用SASS对css进行模块化管理，实时编译成css生成map文件，方便本地调试；将使用CMD规范编写的组件和模块化代码进行封装和编程，供页面业务代码引用；需要以制造商为前缀的css属性自动添加制造商前缀；可将代码实时部署到测试环境，方便QA测试；使用FIS3及相关插件即可实现上述目标。将公共模块拆分成组件当我们观察一个页面时，我们会发现一个页面的这些块在不同的页面之间是通用的。我把这些页面的js、css（scss）、html（tpl）写在一个目录下，方便管理。也就是说，我无法一次将我的修改应用到所有页面。组织组件的目录：当我在不同页面之间使用相同的nav和footer时，我只需要包含一次。2.后端因为我们在网上大量使用的Nodejs版本是6.x版本。而async和await是用来处理开发中的异步的。所以需要借助编译引擎将这些es7语法编译成6.x支持的语法。另外process.env.NODE_ENV可以读取环境变量的特性来区分配置一些在线和离线的配置，比如：constYOG_DEBUG=process.env.YOG_DEBUG;constPANSHI_DEBUG=process.env.PANSHI_DEBUG;letmysqlConf;if(PANSHI_DEBUG==='true'){mysqlConf={主机：'10.00.00.00'，用户：'ppui'，密码：'ppui'，数据库：'excel',port:'5003'};}elseif(YOG_DEBUG==='true'){mysqlConf={host:'127.0.0.1',user:'root',password:'',database:'pass_panshi',port:'3306'};}technicaltargethere主要说一下前端的一些技术目标1.样式展示和dom操作的分离在开发过程中，经常遇到需要一个html节点的样式的情况，以及不小心改了类名。而js只是用这个类来操作dom。这时候页面运行肯定会报错，增加了项目的维护成本。有两种方案可以有效解决这个问题。首先是添加自定义属性，比如
当我需要操作dom时，我使用jQuery属性选择器来操作dom，而不使用class.这样当我调整样式需要修改类名时，不会影响js代码。二是按照大家常说的用-作为html类名的连接符，我们规定了一个规范，使用下划线（_）来标记我要操作的dom节点的名字，比如
.这两种方式，如果你是开发一个多人维护的项目，需要提前预定规范，我在项目中使用的是前者。2、业务代码和功能代码分离前面已经介绍过，就是使用cmd规范来组织前端代码。比如为了满足我需要使用属性选择器来操作dom。我特地自己封装了一些代码段，比如base.js文件中有这样一段代码：/***根据node-type获取节点信息**@param{any}params获取节点元素*@param{any}上下文上下文*@returns*/exports.nodeTypeDom=function(params,context){if(context&&context!==''){return$('[node-type="'+params+'"]',$('[node-type="'+context+'"]'));}else{return$('[node-type="'+params+'"]');}};我在其他文件中需要用到这段代码段的时候，只需要像下面这样操作即可。varbaseJs=require('../libjs/base');varnode=baseJs.nodeTypeDom;//需要选择dom的地方，直接传入自定义属性的值node('pagesecond').xxxx除外一些常用的代码段是这样封装的，一些组件也是这样封装的。例如：轮播组件、文件上传组件、表单验证组件、选项卡滚动组件。以上两种方式的好处可以大大提高代码的可维护性和可读性。Web安全我在开发过程中关注的Web安全主要是sql注入接口攻击1.防止sql注入SQL注入简单来说就是一些非法用户拼接一个特殊的用户名或者密码，因为我们需要插入用户名和密码数据库肯定会根据用户名和密码拼接一条sql语句。而这种非法用户的特殊用户名声明可能会删除我们数据库中的所有数据。因为使用的是mysql数据库。Nodejs模块也使用了npm上使用最多的Mysql模块。这个模块本身已经提供了访问mysql集群的能力和防注入的能力。具体方法请参考官方文档。点这里直接进入2.防止接口攻击。这里我们需要做的是写一个循环，当一些非法用户获取到我们的界面时，可以频繁的访问我们的界面。为了防止一些非法用户，在请求中添加token。是向服务器发起请求时返回给前端的token，前端向后端请求时带上这个token。如果token在后台验证通过，则token会被销毁。再比如验证请求的源IP。这里需要注意的是，我们在校验IP的时候，要获取HTTP协议头域中x-forwarded-for属性的值。（这两种方法可以一起使用）但是后来从后台RD了解到，公司有专门的服务可以用来防作弊，策略比较全面。目前正在研究访问。内网机器访问外网关于跨机房访问，同机房访问，内网访问外网，这些基本都涉及到运维的话题。百度内部有现成的服务接入文档。不同的公司可能以不同的方式提供能力。这里就不多介绍了。这里有一些小细节。看下图：一句话总结：当一个请求到达接入层时，并不知道需要访问内网环境下机房的服务器。反之，如果内网机器上有请求外网的链接，比如：http://weibo.com。需要通过代理访问外网服务器。要访问接口，我使用请求模块。有了promise，npm上就有了request-promise，通过名字我们就知道每个方法或者调用结果返回了什么。本模块默认提供了代理参数的相关配置。具体可以参考文档，点击直接前往。这里涉及到很多知识，比如代理隧道、https请求代理等。在看官方配置文档的时候，搜索一些关键词，学习一些其他的相关知识。如果你有相关需求，可以参考我的配置。如果我的配置不能解决你的问题，请仔细阅读官方文档。、letoptions={'url':params.url,'encoding':'binary','rejectUnauthorized':false//取消对https证书的验证};//解决代理https请求行为测试机需要配置环境变量PANSHI_HTTPS_PROXYif(process.env.PANSHI_DEBUG!=='true'||PANSHI_HTTPS_PROXY){options.tunnel=false;options.proxy='http://xxxx.proxy.com:8080';在这里发邮件关于开发相关介绍已经完成。这里介绍的是运营和产品需求的一些功能开发。注册用户每天都会发送给相应的负责人。如果要满足这个功能，就需要一个邮件服务器。这在公司内部是公开的，很容易找到。另一种是配置服务的crontab定时执行脚本查询数据库和发送邮件。这里主要用到了nodejs模块nodemailer。具体的相关配置和发送邮件的方法可以参考官方文档配置点击直连网络优化静态文件CDN部署；合并静态文件；缓存静态文件；图标使用Base64上面列举的是几个典型点。比如css放在head标签的头部，script标签放在body标签的底部。这些应该属于一个前端工程师的常识。静态文件部署CDN就不多介绍了，每个公司都会有自己的一套方法。这里主要介绍合并静态文件和缓存静态文件。1.合并静态文件FIS3默认有一个插件支持合并静态文件。因为我这次开发了很多页面（一共11个主要网站页面），而且因为加载模块和静态文件的块开发。如果不合并，一个页面加载后需要有10-20个静态文件的请求。会影响页面的加载速度。准备使用FIS3插件合并静态文件的时候，发现配置静态文件逐页打包合并还是有点麻烦。最后请教其他部门的同事使用我们接入层服务器提供的comb功能，服务器会帮我们合并静态文件（其实就是Nginx的concat模块提供的功能）。这里就不做过多介绍了，大家自行搜索文章了解即可。2.缓存静态文件我们先看下图。上图中红框部分是http协议中静态文件缓存相关的字段。如果对这些字段的概念比较模糊，可以看这篇文章加深印象《HTTP缓存》点击直接是使用express还是koa（koa可以使用koa-static-cache中间件）提供相应静态文件的配置servicemiddleware这些字段的能力。express可以通过以下方式配置（具体可以看express文档）constexpress=require('express')//配置静态文件相关参数express.static('xxxxx')收获最后说说这次开发的收获项目开发上线后，正好是大部分部门的年中总结会，因为我独立负责了前后端开发工作，获得了“闪亮之星”》的奖项和大部分部门的一些物质奖励（虽然我还没看过片子？？）。熟悉公司内部应用相关的服务流程和使用这些服务的方法，了解整个公司的后台服务体系；这次开发还是遇到了很多坑，别人都说代码写的“烂”，但我觉得主要原因还是没有后端思维。想要写好Nodejs，就需要用后端思维来写Nodejs。这需要更多的写作和更多的陷阱。这个过程中经历的很多事情，也是心态上的考验。既然下定决心要做一件事，如果不放弃自己，谁也放弃不了自己。
