Web应用开发为什么选择Node.js

这次给大家带来Web应用开发为什么选择Nodejs，Web应用开发选择Nodejs的注意事项有哪些，下面就是实战案例，一起来看一下。

一项颠覆性的技术进入技术市场总会带来一阵震惊，但随之而来往往是被放弃。然而，Nodejs 当然不是这样的情况，它是一个开源的、跨平台的基于 Chrome 的 JavaScript 运行时。Nodejs 由 Ryan Dahl 于 2009 年开发，该平台现在已成为实时 Web 应用开发的独特选择，通过提供高度交互的用户体验来提高 ROI。

使用 Nodejs 的最大优点是开发人员可以在客户端和服务器端编写 JavaScript。值得一提的是，像 PayPal, Yahoo, eBay, Netflix, The Mail Online, 和 Walmart 这样的企业已经通过使用 Nodejs 实现了各自的业务。继续阅读下面的内容，了解大多数企业选择 Nodejs 开发 Web App 的十大主要原因。

使用 Nodejs 进行 Web App 开发人气暴涨背后的十大原因：

Image Source: CronJ

1 加快开发进度Nodejs 使用由 Google 开发的 V8 引擎，它可以将 JavaScript 编译成原生机器码并快速执行。由于 Nodejs 使用事件驱动的非阻塞 I/O 模型，因此对于内存使用和数据密集的实时 Web 应用十分高效和轻便，可在多个设备上工作。

使用 Nodejs，可以非常快速地执行常见的 Web 应用任务，例如读取或写入数据库，读取或写入网络连接，以及读取或写入文件系统。Nodejs 对于希望构建快速、强大的 Web 应用的开发人员来说是一个福音，它可以有效地处理并行连接并增加吞吐量。

在 LinkedIn 选择了 Nodejs 之后，它的移动流量大幅上升，而且服务器的数量从 30 个减少到 3 个。PayPal 是另一个受益于 Nodejs 的案例。在使用 Nodejs 之后，PayPal 的响应时间缩短了 35%，与之前相比，每秒处理双倍的请求。可在包括 Microsoft Windows, Mac OS X, 和 Unix 在内的多个服务器上运行 Nodejs 应用。

2 非常适合实时应用程序开发

Image Source: agriyaservicesblogspotcom

当前几乎每个公司都会实时查找用户信息。一个简单的原因是，在生成客户信息时，可靠地访问客户信息为业务销售提供了重要的推动途径，通过为用户提供实际寻找的内容，而不是对其感兴趣的随机性。而且在过去的几年里，使用 Nodejs 构建实时 Web APP 已经成为最佳方法。

使用 Nodejs，所有与底层套接字和协议有关的担心都会烟消云散。使用 Nodejs，可以像在 PHP 中创建一个简单的博客一样快速构建一个实时的 Web 应用。Nodejs 非常适合多用户实时 Web 应用的场景，如游戏和聊天应用。多用户功能由事件循环通过 WebSocket 协议解决，该协议在 TCP 上工作。它还可以为 Web 开发防止 HTTP 的过度开销。

3 数据流

mage Source: Quora

虽然 HTTP 请求和响应被认为是两个孤立的事件，但实际上它们是数据流。Nodejs 的好处在于它可以在上传时进行文件处理。因此，在数据以流的形式出现的情况下，可以节省在整体流程中所浪费的大量时间。实时视频或音频也是这样的情况。

4 Nodejs 是无处不在的在浏览器和服务器都可以使用 JavaScript。如果一家公司需要为浏览器端更改构建逻辑以转移到服务器端，开发人员可通过使用 Nodejs 代码迁移来轻松实现。尽管如此，编写运行在浏览器或服务器端的代码并没有太大的差异。

5 允许让 Web 应用使用单个代码库使用 Nodejs，开发人员可以自动发送和同步服务器端和客户端之间的数据，因为它允许开发人员为服务器和客户端编写 JavaScript 代码。Meteor 是在 Nodejs 之上创建的 Web 应用框架，为客户端和服务器端提供了相同代码库的支持。服务器上任何的数据更改都会在客户端立即显示。

“Nodejs 不是一个支配 Web 开发世界的新平台。相反，它是一个满足特定需求的平台”，根据 Web 工程公司 Toptal 的说法，Nodejs 真正的亮点在于构建快速的、可扩展的网络应用。

6 为代理服务器提供服务使用 Nodejs 最大的优点之一是它作为一个代理服务器时，为不同响应时间的服务提供服务，或为从多个源点收集数据提供服务。

为了更好地理解请看下面这个例子：一个企业有一个服务器端应用，用于与第三方资源进行通信，从不同来源收集数据，或将图像和视频存储到第三方云服务中。现在，尽管企业可以使用专用服务器，但在不存在基础架构或当需要解决方案进行本地开发时，Nodejs 是更好的选择。

7 强大的 Nodejs 包管理器(NPM)Nodejs 具有动态工具和模块的动态存储库，程序员可以使用它们共享应用开发。Nodejs 可以通过框架，模板系统以及与访问者的实时通信管理等使用成千上万个模块用于各种任务，如文件上传管理，连接到 MySQL 数据库或 Redis。

Image Source: HostOnNetcom

对于需要重新使用外部 JavaScript 开发者创建的代码来解决某个特定的问题的程序员来说，Nodejs 的包管理器或 NPM 是他们的救星。NPM 还允许 JavaScript 开发者下载针对以前在其应用中使用的特定代码所做的更新。即使不想重用组织外的 JavaScript 开发者创建的代码，也可以采用基于模块的方式来改进团队成员之间的协同效应。

使用 NPM 后，PayPal 显著提高了开发者的生产力。此外，互联网支付巨头不需要太多的开发者来构建一个应用，就像使用 Nodejs 之前一样。

8 Nodejs 非常适合数据库查询对于数据库查询，Nodejs 有一个优势，因为 JavaScript 可用于为 MongoDB，CouchDB 等新的 NoSQL 数据库编写数据库查询。对于开发者来说，这是一个很大的缓解，因为他们在执行组合 Nodejs 和 NoSQL 数据库的任务时不需要记住语法差异。由于 JSON 存储的数据格式允许平滑运行，在数据转换或不匹配中没有任何障碍。因此 Nodejs 对于实时 Web 应用来说确实是一个福音。

9 Nodejs 托管已经达到一个新的台阶由于 Nodejs 在开发人员中十分受欢迎，因此它的托管已经取得了很大的成功。 PaaS（平台即服务）服务提供商（如 Heroku 和 Modulus）为单个命令的节点部署提供了支持。通过 Nodejs 托管，可将页面加载时间减少高达 50%，并降低托管应用程序所需的服务器数量。

10 蓬勃发展的开源社区

Nodejs 还有着非常有好的社区。因为拥有开源社区，Nodejs 提供了许多出色的模块，可为 Web 应用增加更多优秀的功能。例如，Socketio 可用于处理客户端和服务器之间的恒定通信，从而使服务器可向客户端发送实时更新。Expressjs, Koajs, Hapijs, Sailsjs, Meteor 和 Derby 是由 Nodejs 社区开发的一些其他顶级框架，用于加速应用开发过程。

IoT 社区也欢迎将 Nodejs 用于嵌入式设备和机器人，如 Cylon 和 Nodebots。此外，它已经成为实时 Web APP 开发世界的巨人。上面提到有关 Nodejs 的所有优点是许多公司认为 Nodejs 是运行重负载 Web 应用的很好的技术，并允许团队将其用于生产环境的原因。

相信看了本文案例你已经掌握了方法，更多精彩请关注Gxl网其它相关文章！

推荐阅读：

datepicker怎么使用

mixin的高阶组件使用详解

ejsExcel模板在Vuejs中的使用

你的代理设置的是/api前缀的就转发到代理服务器上，所以在你的代码发起请求的时候加上api,比如：this$axiospost('/api/tcCodeSwitchid/getSwitchInfos', )

在开发环境，vue-cli 会帮我们创建一个开发服务器( http://localhost:8080 )，因此，我们请求后端服务器的时候，可能会出现跨域问题，因为跨域的三要素：域名、端口、协议其一不同。

完整的请求地址：

我的这个地址，里面本身就携带有 api 字段的

利用 vue-cli 中的 devServer 配置

记住，如果你的地址没有类似我那个地址那样，有个 api 作为标识的，你可以手动在地址上加上一些标识，然后利用 pathRewrite 再抹掉即可。

一般不会这么做，这样做意义也不大。因为这么做的话，不单单ajax请求都用的远程，连js、css、等其他资源都是远程返回的。。。

用了这个方法，在开发阶段，就不用设置 axios 中的 baseUrl 了，或者这样设置：

然后开发阶段，你的一些ajax的请求的 url 就会匹配到 /api 开头，设置 proxy了

千万不要这么设置：

看似匹配到了，实际上没有生效。。。（我也不知道为什么，知道的同学说一下）

实际上，这里是看不到的。。

因为，F12 这里的这个请求，实际上是发给了 本地的临时服务器，再由本地的服务器发送给远程服务器。

可以这么理解：本地服务器将F12的这个请求拦截了，然后自己偷偷改掉 url，再请求的远程服务器。

正因为本地服务器脱离浏览器的束缚，解决了跨域问题！

请问您想问的是如何删除JavaScript吗？删除静态JavaScript有如下步骤：

1、在浏览器的设置中找到JavaScript并将其禁用即可。

2、使用插件或扩展程序，许多浏览器都允许您安装插件或扩展程序，以增强浏览器的功能。有些插件或扩展程序可以帮助您彻底删除JavaScript，例如NoScript和ScriptSafe。

3、使用代理服务器或防火墙，某些代理服务器和防火墙可以帮助您彻底删除JavaScript。这些工具可能允许您设置规则，使所有Javascript请求被阻止或删除。此外，一些代理服务器和防火墙可能还提供其他安全性和隐私保护功能。

4、重新配置浏览器或操作系统，某些浏览器或操作系统可能允许您重新配置以删除JavaScript。例如，您可以尝试在操作系统中禁用JavaScript引擎，或重新配置浏览器以删除JavaScript引擎。这些方法可能需要更多的技术知识，并且可能会对您的系统或浏览器产生负面影响。

第一步：

可以设置浏览器代理，本文章推荐使用火狐浏览器

在浏览器—首选项--网络设置里面设置代理服务器

注意：端口号可以自行设置，但是不可以与本机其他代理产生冲突

第二步：

打开jmeter工具，添加非测试原件—HTTP代理服务器，

第三步：

设置端口号与浏览器设置的代理端口保持一致，注意线程组下面记得添加：HTTP Cookie 管理器

第四步：

填写录制的过滤条件，可以过滤掉一些不必要的接口

过滤条件可以使用：

\(js|css|PNG|jpg|ico|png|gif|woff|ttf|txt)

这样基本设置就完成了，可以点击jmeter的代理服务器，录制脚本了；

点击启动，复制要测试的网址在火狐浏览器上，点击项目进行正常操作，接口就会自动录制，录制的接口可以手动筛除重复的；

注意： （这个已经改过了，不需要改，可以按照步骤去看一下文件哪个位置改了）

 

 

常见问题：

录制的Jmeter脚本回放时，发现输入的中文解析成乱码了

解决步骤：

1、打开Jmeter的安装目录，进入bin文件夹，编辑文件：jmeterproperties

2、将文件内容#sampleresultdefaultencoding=ISO-8859-1

更改为：sampleresultdefaultencoding=utf-8

(注意去掉前面的#号注释，否则不生效)。

1 新建HTTP代理服务器

2 配置HTTP代理服务器

弹出HTTPS提示，点击“确定”。在Jmeter文件夹的bin目录下会有证书文件ApacheJMeterTemporaryRootCAusr和ApacheJMeterTemporaryRootCAcrt生成

3浏览器设置HTTP代理服务器

这里以firefox浏览器为例，设置代理服务器

4浏览器访问网站

如果访问HTTP服务，默认是可以直接访问到，但是访问HTTPS网址会报错，这里以百度为例

此时需要浏览器添加证书信任，打开首选项，搜索“证书”即可快速找到，点击“查看证书”

在“证书颁发机构”里点击“导入”

勾选信任，点击确定即可。

再次访问HTTPS资源网址，即可正常显示。

5Jmeter找到的请求包

可以看到上面的图里还有一个百度的png，如果我们需要过滤，需要在启动代理服务器前设置一下排除模式

排除模式添加 \(js|css|PNG|jpg|png|gif) ，过滤掉js、css、png、jpg等信息

贴上 官网

vue-cli3 创建的时候并不会自动创建vueconfigjs，因为这个是个可选项，所以一般都是需要修改webpack的时候才会自己创建一个vueconfigjs

再然后因为vue-cli3内部高度集成了webpack，一般来说使用者不需要再去知道weboack做了什么，所以没有暴露webpack的配置文件，我们可以手动去创建vueconfigjs 去修改默认的webpack。注意，只能叫vueconfigjs。

publicPath （从 Vue CLI 33 起已弃用baseUrl，请使用publicPath）

参考： https://myoschinanet/u/4446873/blog/4882847

默认情况下，Vue CLI 会假设你的应用是被部署在一个域名的根路径上，例如 https://wwwxxxcom/ 。如果应用被部署在一个子路径上，你就需要用这个选项指定这个子路径。例如，如果你的应用被部署在 https://wwwxxxcom/my-app/ ，则设置 publicPath 为 /my-app/。

这个值在开发环境下同样生效。如果你想把 开发服务器架设在根路径 ，你可以使用一个条件式的值：

通常开发环境，本地运行都会直接部署在根路径上，publicPath设置为'/'，访问地址是你的IP地址。如下是设置成'/app'的效果：

从上面可以得知，静态资源文件都是在app下的，所以在dist下新增添一个app目录，把dist下文件放到app下，相当于一个文件的路径，可以发现项目会正常启动。一般nginx都会配置一个静态资源目录，打包后的文件都会放到这个静态资源目录里面，nginx去做映射，所以publicPath这个属性基本不用改。'/'就行。

结论： publicPath配置成'/aaa/bbb/ccc'， 则需在相应的服务器路径中新建aaa>bbb>ccc的文件夹，然后将打包后的文件放进去，就ok啦。

项目中，我会在envproduction文件中设置一个变量VUE_APP_BASE_URL ，项目打包后告诉相关人员 nginx 路由前缀是什么即可

outputDir

assetsDir

indexPath

filenameHashing

直观效果：当运行npm run build时，

打包后的文件后面都会带一个8位的hash值，那啥是个hash值？

在打包出来的文件名上加上文件内容的hash是目前最常见的有效使用浏览器长缓存的方法，js文件如果有内容更新，hash就会更新，浏览器请求路径变化所以更新缓存，如果js内容不变，hash不变，直接用缓存。（这段话是从别的文章里面参考的）。

将filenameHashing这个值设置为false试试，就不会带那个后缀hash值。

pages

lintOnSave

runtimeCompiler

transpileDependencies

productionSourceMap

crossorigin （不理解）

integrity

configureWebpack

chainWebpack

Css相关配置

devServer

如果你的前端应用和后端 API 服务器没有运行在同一个主机上，你需要在开发环境下将 API 请求代理到 API 服务器。这个问题可以通过 vueconfigjs 中的 devServerproxy 选项来配置。

补充知识

所谓的跨域就是不同源，不满足协议、域名、端口都相同的约定

http://wwwtestcom/dir/loginhtml 同源

https://wwwtestcom/indexhtml 不同源 协议不同(https)

http://wwwtestcom:90/indexhtml 不同源 端口不同(90)

http://wwwdemocom/indexhtml 不同源 域名不同(demo)

当协议、域名、端口中任意一个不相同时，就是不同源。若不同源之间相互请求资源，就算作跨域

补充知识

反向代理（Reverse Proxy）方式是指以代理服务器来接受网络上的连接请求，然后将请求转发给内部网络上的服务器，并将服务器上得到的结果返回给请求连接的客户端，此时代理服务器对外就表现为一个反向代理服务器。客户端无需做任何配置。

修改config/indexjs /vueconfigjs文件（改完之后千万记得要重新 npm run dev）

host 将他的值修改为 0000，代表可以访问本机所有的IP地址，让vue项目可通过localhost和IP同时访问。

port 设置端口号

open 是否在第一次编译时是自动打开浏览器

hot 开启为true，启动热重载，自动刷新页面

https

inline

overlay

targe 代理的服务器，也就是api要访问的服务器。

changeOrigin 允许跨域， 为false时，请求头中host仍然是浏览器发送过来的host;如果设置成true：发送请求头中host会设置成target的值

ws 是否代理websocket

pathRewrite 重写 url 的 path 部分

此文记录下来，方便自己遗忘的时候能够快速查阅，如有错误请指出。

参考链接：

https://wwwjianshucom/p/b358a91bdf2d

https://wwwjb51net/article/174200htm

https://blogcsdnnet/liu_yunzhao/article/details/90520028

这篇文章讲的也很详细 https://blogcsdnnet/guozhangqiang/article/details/87197870

在JMeter中可以使用自身就带的HTTP代理服务器组件录制脚本，可以录制在WEB上的操作，也可以录制在手机App上的操作。

1、测试计划内包含的元件

添加元件操作步骤：

　创建测试计划

　创建线程组：选中“测试计划”右键 —> 添加 —> 线程（用户） —> 线程组。

　在线程组中，添加配置原件“HTTP Cookie管理器”组件：选中“线程组”右键 —> 添加 —> 配置元件 —> HTTP Cookie管理器。

　说明：如果录制的操作包括 用户登录操作 ，则需要添加“HTTP Cookie管理器”，添加之后不需要任何配置，录制后，脚本中便保存用户登录的相关信息。

　在测试计划下，添加非测试元件“HTTP代理服务器”组件：选中“测试计划”右键 —> 添加 —> 非测试元件 —> HTTP代理服务器。

　在HTTP代理服务器组件下，添加监听器“察看结果树”组件：选中“HTTP代理服务器”右键 —> 添加 —> 监听器 —> 察看结果树。

　最终测试计划中的元件如下：

点击运行按钮，会提示你先保存该脚本，脚本保存完成后会直接自动运行该脚本。

2、HTTP代理服务器的设置内容

　在HTTP代理服务器组件中，我们需要编辑：

　 端口： 默认8888，一般使用默认即可。主要不能与本地其他服务的端口号冲突，否则启动不了。

　 HTTPS Domains： 我的理解就是，设置代理服务器的主机IP地址或者域名。因为在我们本地使用，一般就是 localhost 或者127001即可，当然不填写也是可以的。（此填写的地址一定要能够连接外网）

　 设置目标控制器： 也就是录制的组件存储到什么位置。这个一定要选，下图中选择了存储到目标线程组中。

　配置完的界面内容，如上图所示。

3、设置浏览器的代理服务器

　每个浏览器都可以设置服务器的代理，以Chrome浏览器为例。设置需要区分是否为局域网

　点击右上角的设置 —> 高级 —> 系统 —> 最下面的‘’打开您计算机的代理设置‘’，点击右侧图标，就可以进入到代理服务器的设置页面了。

　选要选中手动配置代理服务器，然后输入代理服务器的地址或者域名，还有端口号。

　这里的配置，要和上面JMeter的HTTP代理服务器中的端口和HTTPS Domains的配置要对应上。

　这样的话，浏览器中的操作，会先发送到JMeter中的HTTP代理服务器，在通过网络进行传输。这样JMeter中就可以录制下我们的操作，生成脚本了。

　如下图所示：

4、录制脚本

　以上内容设置完毕后，在浏览器地址栏中输入要录制脚本的地址。

　然后在JMeter中的HTTP代理服务器界面，点击启动按钮。

　提示：在HTTP代理服务器界面点击“启动”时，Meter将生成自己的证书。证书生成可能需要一些时间，在此期间，GUI将无响应。证书生成完成后，GUI将显示一个弹出对话框，其中包含根CA证书的详细信息，证书有效期为7天。该证书需要由浏览器安装，以便接受JMeter生成的主机证书。

　如下图所示：

　浏览器配置证书: 浏览器中导入证书 ，jmeter安装目录下的ApacheJMeterTemporaryRootCAcrt

        之后开始在网站上进行操作，所有操作发出的请求，都会录制到JMeter脚本中。

　操作完成之后，到JMeter的HTTP代理服务器中点击“停止”，然后将浏览器的代理设置恢复原样即可。

　不恢复的话，会导致你无法使用浏览器访问外网。

　如下图所示：录制时弹出的控制器，不用进行设置，关闭时 点击 停止 即可

　5、查看录制的脚本

在JMeter中我们可以看到已经 记录 了许多请求对应的信息，包括PHP、js、jpg、png、txt等请求。

　如下图所示：

　我们可以看到，我们只进行了简单的几步操作，却录制这么的请求。是因为JMeter录制很多非关键性的请求，这就需要我们进行一些优化。

　录制脚本的优化有两个步骤：

　在录制的时候，做一些过滤和排除操作。

　在录制后的脚本中手动优化，删除不需要的组件，增加自己需要的组件。

　1）服务器名称或IP与目标网站不同的、无关的，可以删除。

　2）js/css/png/jpeg等这类请求删掉。

　3）没有传递任何数据的请求可以屏蔽掉，等流程能回放成功了，这些再删除。如果回放不成功，再一个一个打开，进行检查。

6、HTTP代理服务器的排除模式

　在测试脚本中有一些录制的信息是没有任何作用的，所以我们在录制脚本的时候，就可以通过HTTP代理服务器的排除模式，排除一些不需要的请求信息，如css、gif、png等请求。

　例如：

　在包含模式添加填上 \jsp，只在请求JSP文件时录制脚本。

　这里通常都是设置JSP或者HTML，可以根据具体情况进行填写。

　在排除模式处填上\js ，在请求js文件时不录制脚本。

　这里通常都是设置js、jpg、png、gif、css等，这些类型文件请求都是不需要录制的。

　当然我们也可以点击添加建议排除按钮，会自动生成一个过滤的正则表达式。

　如下图所示：

　添加上这些时候，录制出来的脚本，多余的累赘会减少很多。

7、保存脚本

　脚本录制完成后，需要进行脚本的保存。

　把脚本保存到本地，可以分享给其他成员，进行查看、编辑、回放等操作。