web前端研发工具篇

最新推荐文章于 2023-04-14 07:22:35 发布
最新推荐文章于 2023-04-14 07:22:35 发布
阅读量951 收藏 7
点赞数
分类专栏： 前端 文章标签： 前端工具 工具 nginx 研发工具
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/xqli2011/article/details/83791069
版权

web前端研发工具篇

一、常见前端开发IDE

1、Visual Studio Code

下载地址：https://code.visualstudio.com/
功能介绍：微软在2015年4月30日Build 开发者大会上正式宣布了 Visual Studio Code 项目：一个运行于 Mac OS X、Windows和 Linux 之上的，针对于编写现代 Web 和云应用的跨平台源代码编辑器。
Visual Studio Code软件功能非常强大，界面简洁明晰、操作方便快捷，设计得很人性化。软件主要改进了文档视图，完善了对 Markdown的支持，对前端的框架的语法支持也是比其他IDE要好的多。
在这里插入图片描述

2、hbuilder

下载地址：http://www.dcloud.io/
功能介绍：前端开发小白入门首选，hbuilder是国产的一款前端开发工具而且是免费的，对于英语不好的前端工程师是一个不错的消息。优点是有强大的其他语言支持和开发webapp等功能，强大到没朋友。在语法提示、转到定义、重构、调试等方面都非常高效。缺点也是有一些的，就是其有些稳定，有时可能会有些卡顿的现象，希望官方修复。
在这里插入图片描述

3、sublime text3

下载地址：http://www.sublimetext.com/
功能介绍：sublime text是一个轻量级的编辑器，也是支持各种编程语言，sublime text所有的强大功能都是支持插件的，而且快捷键十分的好用，可以极大的减少开发的劳动程度，使用sublime就是要使用其快捷键和插件。
sublime text3的优点的轻量级但是功能强大，优雅小巧启动速度快，有着丰富的第三方支持，能够满足各种各样的扩展缺点是对于项目的管理等不是很方便，但代码提示不如hubuilder强大。
在这里插入图片描述

4、WebStorm

下载地址：https://www.jetbrains.com/webstorm/
功能介绍：WebStorm 是jetbrains公司旗下一款JavaScript 开发工具。官方提供的插件支持，满足许多不会配置的同学，ESlint，词法高亮，emmet，CSS预处理器，新版本也添加了对ES6的支持，内建了服务器调试。
目前已经被广大中国JS开发者誉为“Web前端开发神器”、“最强大的HTML5编辑器”、“最智能的JavaScript IDE”等。与IntelliJ IDEA同源，继承了IntelliJ IDEA强大的JS部分的功能。
在这里插入图片描述

5、Atom

下载地址：https://atom.io/
功能介绍：Atom 是github专门为程序员推出的一个跨平台文本编辑器。平易近人,但可删节的核心工具定制做任何事,也可以使用有效不沾一个配置文件。为开源而生。具有简洁和直观的图形用户界面，并有很多有趣的特点：支持CSS，HTML，JavaScript等网页编程语言。它支持宏，自动完成分屏功能，集成了文件管理器。
在这里插入图片描述

6、Dreamweaver CC 2017

下载地址：https://www.adobe.com/products/dreamweaver.html
功能介绍：老牌的IDE ，曾经以PS+DW+FW称霸网页领域，号称网页三剑客，然而之前的版本更新较慢，版本陈旧，已经满足不了广大前端开发者的项目需求，逐渐被市场淘汰。
好在2017版本及时修正，外观、界面、语法高亮等已经很漂亮，并且添加了CSS预处理器支持，同时保留了部分预制组件，方便对语法还不熟悉的同学，对于不会node的同学也有提供实时预览，适合对前端有进一步了解的同学。
在这里插入图片描述

二、常见前端测试工具

1、Selenium

Selenium 是ThoughtWorks专门为Web应用程序编写的一个验收测试工具。Selenium也是一个用于Web应用程序测试的工具。Selenium测试直接运行在浏览器中，就像真正的用户在操作一样。
这个工具的主要功能包括:
1、测试与浏览器的兼容性——测试你的应用程序看是否能够很好得工作在不同浏览器和操作系统之上。
2、测试系统功能——创建回归测试检验软件功能和用户需求。
3、支持自动录制动作和自动生成 .Net、Java、Perl等不同语言的测试脚本
链接：https://www.cnblogs.com/wmhuang/p/8011815.html

2、karma

Karma - Spectacular Test Runner for Javascript(基于node.js的Javascript测试运行环境)
Karma是Testacular的新名字，在2012年google开源了Testacular，2013年Testacular改名为Karma。
Karma的主要目标是为开发人员提供高效的测试环境。 这种环境不需要设置大量的配置，而是开发人员只需编写代码并从测试中立即获得结果。 从而提高你的生产力和创造力。
在AngularJS团队，我们依靠测试，我们总是寻求更好的工具，让我们的生活更轻松。 这就是我们创造的原因。该工具可用于测试所有主流Web浏览器，也可集成到CI工具，也可和其他代码编辑器(例如webstrom)一起使用。这个测试工具的一个强大特性就是，它可以监控(Watch)文件的变化，然后自行执行，通过console.log显示测试结果。
为什么使用Karma？
你想在真实的浏览器中测试代码。你想在多个浏览器（桌面，手机，平板电脑等）测试代码。你想在开发过程中在本地执行你的测试。您想要在持续集成服务器上执行测试。你想在每次保存时执行你的测试。你爱你的终端(命令行)。你不想让你的（测试）生活陷入困境。你想使用 Istanbul 自动生成覆盖率报告。你想为你的源文件使用RequireJS。
链接：http://karma-runner.github.io/1.0/index.html

3、Mocha

Mocha（发音"摩卡"）诞生于2011年，是现在最流行的JavaScript测试框架之一，在浏览器和Node环境都可以使用。
所谓"测试框架"，就是运行测试的工具。通过它，可以为JavaScript应用添加测试，从而保证代码的质量。
本文全面介绍如何使用Mocha，让你轻松上手。如果你以前对测试一无所知，本文也可以当作JavaScript单元测试入门。值得说明的是，除了Mocha以外，类似的测试框架还有Jasmine、Karma、Tape等，也很值得学习。
链接：https://mochajs.org/

三、常见前端构建工具

构建就是做这件事情，将源代码转换成可执行的JavaScript、CSS、HTML代码，包括如下内容。
代码转换：将TypeScript编译成JavaScript、将SCSS编译成CSS等。
文件优化：压缩JavaScript、CSS、HTML代码，压缩合并图片等。
代码分割：提取多个页面的公共代码，提取首屏不需要执行部分的代码让其异步加载。
模块合并：在采用模块化的项目里会有很多个模块和文件，需要通过构建功能将模块分类合并成一个文件。
自动刷新：监听本地源代码的变化，自动重新构建、刷新浏览器。
代码校验：在代码被提交到仓库前需要校验代码是否符合规范，以及单元测试是否通过。
自动发布：更新代码后，自动构建出线上发布代码并传输给发布系统。
构建其实是工程化、自动化思想在前端开发中的体现，将一系列流程用代码去实现，让代码自动化地执行这一系列复杂的流程。构建为前端开发注入了更大的活力，解放了我们的生产力。

1、Npm Script

Npm Script（https://docs.npmjs.com/misc/scripts） 是一个任务执行者。Npm是在安装Node. js时附带的包管理器，Npm Script则是Npm内置的一个功能，允许在package.json文件里面使用scripts字段定义任务
Npm Script的优点是内置，无须安装其他依赖。其缺点是功能太简单，虽然提供了pre和post两个钩子，但不能方便地管理多个任务之间的依赖。

2、Grunt

Grunt（https://gruntjs.com） 和Npm Script类似，也是一个任务执行者。Grunt有大量现成的插件封装了常见的任务，也能管理任务之间的依赖关系，自动化地执行依赖的任务，每个任务的具体执行代码和依赖关系写在配置文件Gruntfile.js里，例如：
在项目根目录下执行命令grunt dev，就会启动JavaScript文件压缩和自动刷新功能。
Grunt的优点是：
灵活，它只负责执行我们定义的任务；
大量的可复用插件封装好了常见的构建任务。
Grunt的缺点是集成度不高，要写很多配置后才可以用，无法做到开箱即用。
Grunt相当于进化版的Npm Script，它的诞生其实是为了弥补Npm Script的不足。

3、Gulp

Gulp（http://gulpjs.com） 是一个基于流的自动化构建工具。除了可以管理和执行任务，还支持监听文件、读写文件。Gulp被设计得非常简单，只通过下面5种方法就可以支持几乎所有构建场景：
通过gulp.task注册一个任务；
通过gulp.run执行任务；
通过gulp.watch监听文件的变化；
通过gulp.src读取文件；
通过gulp.dest写文件。
Gulp的最大特点是引入了流的概念，同时提供了一系列常用的插件去处理流，流可以在插件之间传递，大致使用如下：
Gulp的优点是好用又不失灵活，既可以单独完成构建，也可以和其他工具搭配使用。其缺点和Grunt类似，集成度不高，要写很多配置后才可以用，无法做到开箱即用。
可以将Gulp看作Grunt的加强版。相对于Grunt，Gulp增加了监听文件、读写文件、流式处理的功能。

4、Fis3

Fis3（https://fex.baidu.com/fis3/） 是一个来自百度的优秀国产构建工具。相对于Grunt、Gulp这些只提供了基本功能的工具，Fis3集成了Web开发中的常用构建功能，如下所述。
读写文件：通过fis.match读文件，release配置文件的输出路径。
资源定位：解析文件之间的依赖关系和文件位置。
文件指纹：在通过useHash配置输出文件时为文件URL加上md5戳，来优化浏览器的缓存。
文件编译：通过parser配置文件解析器做文件转换，例如将ES6编译成ES5。
压缩资源：通过optimizer配置代码压缩方法。
图片合并：通过spriter配置合并CSS里导入的图片到一个文件中，来减少HTTP请求数。
大致使用如下：
可以看出Fis3很强大，内置了许多功能，无须做太多配置就能完成大量工作。
Fis3的优点是集成了各种Web开发所需的构建功能，配置简单、开箱即用。其缺点是目前官方已经不再更新和维护，不支持最新版本的Node.js。
Fis3是一种专注于Web开发的完整解决方案，如果将Grunt、Gulp比作汽车的发动机，则可以将Fis3比作一辆完整的汽车。

5、Webpack

Webpack（https://webpack.js.org） 是一个打包模块化JavaScript的工具，在Webpack里一切文件皆模块，通过Loader转换文件，通过Plugin注入钩子，最后输出由多个模块组合成的文件。Webpack专注于构建模块化项目。
其官网的首页图很形象地展示了Webpack的定义，如图1-1所示。

图1-1 Webpack 简介
一切文件如JavaScript、CSS、SCSS、图片、模板，对于Webpack来说都是一个个模块，这样的好处是能清晰地描述各个模块之间的依赖关系，以方便Webpack对模块进行组合和打包。经过Webpack的处理，最终会输出浏览器能使用的静态资源。
Webpack的优点是：
专注于处理模块化的项目，能做到开箱即用、一步到位；
可通过Plugin扩展，完整好用又不失灵活；
使用场景不局限于Web开发；
社区庞大活跃，经常引入紧跟时代发展的新特性，能为大多数场景找到已有的开源扩展；
良好的开发体验。
Webpack的缺点是只能用于采用模块化开发的项目。

6、Rollup

Rollup（https://rollupjs.org） 是一个和Webpack很类似但专注于ES6的模块打包工具。它的亮点在于，能针对ES6源码进行Tree Shaking，以去除那些已被定义但没被使用的代码并进行Scope Hoisting，以减小输出文件的大小和提升运行性能。然而Rollup的这些亮点随后就被Webpack模仿和实现。由于Rollup的使用方法和Webpack差不多，所以这里就不详细介绍如何使用Rollup了，而是详细说明它们的差别：
Rollup是在Webpack流行后出现的替代品；
Rollup生态链还不完善，体验不如Webpack；
Rollup的功能不如Webpack完善，但其配置和使用更简单；
Rollup不支持Code Spliting，但好处是在打包出来的代码中没有Webpack那段模块的加载、执行和缓存的代码。
Rollup在用于打包JavaScript库时比Webpack更有优势，因为其打包出来的代码更小、更快。但它的功能不够完善，在很多场景下都找不到现成的解决方案。

四、常见前端测试环境&生产环境容器

1、Nginx

Nginx (“engine x”) 是一款高性能的，轻量级的HTTP Web 服务器 和 反向代理服务器及电子邮件 IMAP/POP3/SMTP 代理服务器。
自 Nginx 发布四年来，Nginx 已经因它的稳定性、丰富的功能集、示例配置文件和低系统资源的消耗而闻名了。Nginx 超越Apache的高性能和稳定性，使得国内使用 Nginx 作为 Web 服务器的网站也越来越多。

1.1Nginx 配置反向代理

什么是代理服务器
代理服务器，客户机在发送请求时，不会直接发送给目的主机，而是先发送给代理服务器，代理服务接受客户机请求之后，再向主机发出，并接收目的主机返回的数据，存放在代理服务器的硬盘中，再发送给客户机。
为什么要使用代理服务器
1）提高访问速度
由于目标主机返回的数据会存放在代理服务器的硬盘中，因此下一次客户再访问相同的站点数据时，会直接从代理服务器的硬盘中读取，起到了缓存的作用，尤其对于热门站点能明显提高请求速度。
2）防火墙作用
由于所有的客户机请求都必须通过代理服务器访问远程站点，因此可在代理服务器上设限，过滤某些不安全信息。
3）通过代理服务器访问不能访问的目标站点
互联网上有许多开发的代理服务器，客户机在访问受限时，可通过不受限的代理服务器访问目标站点，通俗说，我们使用的翻墙浏览器就是利用了代理服务器，虽然不能出国，但也可直接访问外网。

反向代理 VS 正向代理

什么是正向代理？什么是反向代理？
正向代理，架设在客户机与目标主机之间，只用于代理内部网络对Internet的连接请求，客户机必须指定代理服务器,并将本来要直接发送到Web服务器上的http请求发送到代理服务器中。
反向代理服务器架设在服务器端，通过缓冲经常被请求的页面来缓解服务器的工作量，将客户机请求转发给内部网络上的目标服务器；并将从服务器上得到的结果返回给Internet上请求连接的客户端，此时代理服务器与目标主机一起对外表现为一个服务器。
反向代理有哪些主要应用？
现在许多大型web网站都用到反向代理。除了可以防止外网对内网服务器的恶性攻击、缓存以减少服务器的压力和访问安全控制之外，还可以进行负载均衡，将用户请求分配给多个服务器。
反向代理服务器Nginx
Nginx作为近年来较火的反向代理服务器，安装在目的主机端，主要用于转发客户机请求，后台有多个http服务器提供服务，nginx的功能就是把请求转发给后面的服务器，决定哪台目标主机来处理当前请求。下面演示如何进行配置使Nginx发挥作用。
1、模拟n个http服务器作为目标主机
用作测试，简单的使用2个tomcat实例模拟两台http服务器，分别将tomcat的端口改为8081和8082
2、配置IP域名

192.168.72.49 8081.max.com
192.168.72.49 8082.max.com

3、配置nginx.conf

upstream tomcatserver1 {
	server 192.168.72.49:8081;
    }
upstream tomcatserver2 {
	server 192.168.72.49:8082;
    }
server {
        listen       80;
        server_name  8081.max.com;
        #charset koi8-r;
        #access_log  logs/host.access.log  main;
        location / {
            proxy_pass   http://tomcatserver1;
            index  index.html index.htm;
        }     
    }
server {
        listen       80;
        server_name  8082.max.com;
        #charset koi8-r;
        #access_log  logs/host.access.log  main;
        location / {
            proxy_pass   http://tomcatserver2;
            index  index.html index.htm;
        }        
    }

流程：
1）浏览器访问8081.max.com，通过本地host文件域名解析，找到192.168.72.49服务器（安装nginx）
2）nginx反向代理接受客户机请求，找到server_name为8081.max.com的server节点，根据proxy_pass对应的http路径，将请求转发到upstream tomcatserver1上，即端口号为8081的tomcat服务器。
4、效果展示
请求8081.max.com，tomcat1接收返回首页
在这里插入图片描述
请求8082.max.com，tomcat2接收返回首页
在这里插入图片描述

通过分析我们不难得出，以百度为例，如果客户机的IP和百度服务器（目标主机）的IP在同一个网段，那就形同局域网内部发送请求，速度极快。
但如果满足不了这种需求还想到达到一个较好的请求响应时，百度服务器就可以对外提供一个与目标服务器在一个网段的公网IP,也就是反向代理服务的IP，通过代理服务器转发客户机请求，决定幕后的N台服务器谁来处理这个请求，并且由于反向代理服务器与目标主机在一个网段，访问速度也会很快。
Nginx用作反向代理服务器时，它就是众多反向代理服务器中的一种，通过简单的配置，指定到服务器IP或域名地址便可将客户机请求转发给指定服务器处理请求。
1.2Nginx 配置负载均衡
企业在解决高并发问题时，一般有两个方向的处理策略，软件、硬件，硬件上添加负载均衡器分发大量请求，软件上可在高并发瓶颈处：数据库+web服务器两处添加解决方案，其中web服务器前面一层最常用的的添加负载方案就是使用nginx实现负载均衡。

负载均衡的作用

1、转发功能
按照一定的算法【权重、轮询】，将客户端请求转发到不同应用服务器上，减轻单个服务器压力，提高系统并发量。
2、故障移除
通过心跳检测的方式，判断应用服务器当前是否可以正常工作，如果服务器期宕掉，自动将请求发送到其他应用服务器。
3、恢复添加
如检测到发生故障的应用服务器恢复工作，自动将其添加到处理用户请求队伍中。

Nginx实现负载均衡

同样使用两个tomcat模拟两台应用服务器，端口号分别为8080 和8081

1、Nginx的负载分发策略
Nginx 的 upstream目前支持的分配算法：
1)、轮询 ——1：1 轮流处理请求（默认）
每个请求按时间顺序逐一分配到不同的应用服务器，如果应用服务器down掉，自动剔除，剩下的继续轮询。
2)、权重 ——you can you up
通过配置权重，指定轮询几率，权重和访问比率成正比，用于应用服务器性能不均的情况。
3)、ip_哈希算法
每个请求按访问ip的hash结果分配，这样每个访客固定访问一个应用服务器，可以解决session共享的问题。
2、配置Nginx的负载均衡与分发策略
通过在upstream参数中添加的应用服务器IP后添加指定参数即可实现，如：

upstream tomcatserver1 {  
    server 192.168.72.49:8080 weight=3;  
    server 192.168.72.49:8081;  
    }   
 server {  
        listen       80;  
        server_name  8080.max.com;  
        #charset koi8-r;  
        #access_log  logs/host.access.log  main;  
        location / {  
            proxy_pass   http://tomcatserver1;  
            index  index.html index.htm;  
        }  
     } 

  通过以上配置，便可以实现，在访问8080.max.com这个网站时，由于配置了proxy_pass地址，所有请求都会先通过nginx反向代理服务器，在服务器将请求转发给目的主机时，读取upstream为 tomcatsever1的地址，读取分发策略，配置tomcat1权重为3，所以nginx会将大部分请求发送给49服务器上的tomcat1，也就是8080端口；较少部分给tomcat2来实现有条件的负载均衡，当然这个条件就是服务器1、2的硬件指数处理请求能力。

3、nginx其他配置

upstream myServer {    
    server 192.168.72.49:9090 down;   
    server 192.168.72.49:8080 weight=2;   
    server 192.168.72.49:6060;   
    server 192.168.72.49:7070 backup;   
}

1）Down
表示单前的server暂时不参与负载
2）Weight
默认为1.weight越大，负载的权重就越大。
3）max_fails
允许请求失败的次数默认为1.当超过最大次数时，返回proxy_next_upstream 模块定义的错误
3）fail_timeout
max_fails 次失败后，暂停的时间。
5）Backup
其它所有的非backup机器down或者忙的时候，请求backup机器。所以这台机器压力会最轻。
使用Nginx的高可用
除了要实现网站的高可用，也就是提供n多台服务器用于发布相同的服务，添加负载均衡服务器分发 请求以保证在高并发下各台服务器能相对饱和的处理请求。同样，负载均衡服务器也需要高可用，以防如果负载均衡服务器挂掉了，后面的应用服务器也紊乱无法工作。
实现高可用的方案：添加冗余。添加n台nginx服务器以避免发生上述单点故障。具体方案详见下文：keepalive+nginx实现负载均衡高可用
总结一点，负载均衡不论是各种软件或硬件上的解决方案，主要还是将大量的并发请求按照一定的规律分发给不同的服务器处理，从而减少某台服务器的瞬时压力，提高网站的抗并发能力。nginx在负载均衡的应用之所以广泛，笔者认为这归功于它的灵活配置，一个nginx.conf文件解决大部分问题，不论是nignx创建虚拟服务器、nginx的反向代理服务器，还是本文介绍的nginx的负载均衡，几乎都在这个配置文件中进行。服务器上只负责把nginx搭好，跑起来即可。而且它本身轻量级，不需要占用服务器太多资源就可以达到较好的效果

1.3Nginx 配置虚拟主机

虚拟主机的概念
虚拟主机，就是把一台物理服务器划分成多个“虚拟”的服务器，每一个虚拟主机都可以有独立的域名和独立的目录
nginx虚拟主机的配置
nginx的虚拟主机就是通过nginx.conf中server节点指定的，想要设置多个虚拟主机，配置多个server节点即可
先看一个最简单的虚拟主机配置示例

	server { 
		listen 80; 
		server_name a.test.com; 
		location / { 
			index index.html; 
			root /home/www/host_a/; 
		} 
	}

listen 80;
指定这个虚拟主机监听的是80端口
server_name a.test.com;
指定这个虚拟主机名为a.test.com，当用户访问a.test.com时，就有这个虚机主机进行处理
虚拟主机名可以有4种格式：
（1）准确的名字，例如此例中的a.test.com
（2）*号开头的，例如 *.test.com
（3）号结尾的，例如 mail.
（4）正则表达式形式，例如
server_name ~^www\d+.test.com$;
注意，使用正则表达式形式时，必须以’~'开头
server_name也可以同时指定多个，例如：
server_name test.com www.test.com *.test.com;
这时优先级为：

（1）确切的名字
（2）最长的以*起始的通配符名字
（3）最长的以*结束的通配符名字
（4）第一个匹配的正则表达式名字
location / 
	因为所有请求都是/开头的，所以这行表示匹配所有请求
index index.html; 
	指定此虚拟主机的默认首页为index.html
root /home/www/host_a/;
指定此虚拟主机的物理根目录为/home/www/host_a/
案例
	（1）对两个域名配置相应的虚拟主机，指定不同的目录
	 a.test.com -> /home/www/a
	 b.test.com -> /home/www/b
配置

	server { 
		listen 80; 
		server_name a.test.com; 
		#开启网站目录文件列表功能，访问目录时列出其中的文件列表，默认不开启
		autoindex on; 
		index index.html; 
		root /home/www/a/; 
	}
	server { 
		listen 80; 
		server_name b.test.com; 
		index index.html; 
		root /home/www/b/; 
		#禁止对self目录的访问
		location /(self)/ { 
		deny all; 
		} 
	}

（2）对不同访问目录指定不同物理目录

	server {
		listen 80;
		#使用正则格式，这里表示接受任何ip
		server_name ~^\d+\.\d+\.\d+\.\d+$;
		index index.html index.htm;
		root /home/lg/www/;
		location /share {
			root /home/lg/Downloads;
		}

		location ^~ /Videos {
			root /home/lg/;
			autoindex on;
			autoindex_exact_size on;
			autoindex_localtime on;
			allow all;
		}
		location ^~ /html5 {
			root /home/lg/workspace/nodejs/;
			index index.html index.htm;
		}
	}

autoindex_exact_size
默认为on，显示出文件的确切大小，单位是bytes
改为off后，显示出文件的大概大小，单位是kB或者MB或者GB
autoindex_localtime
默认为off，显示的文件时间为GMT时间。
改为on后，显示的文件时间为文件的服务器时间
allow all;
允许所以访问

1.4Nginx跨域设置

例子：访问http://10.0.0.10/ 需要能实现跨域,操作：
http://10.0.0.10/项目是部署在tomcat里面，tomcat跨域暂时还不会，按照网上的方法操作也没成功
只有用Nginx做个代理，解决跨域问题了！
1、将www.tangxiaoyue.com域名指向http://10.0.0.11/。只有在域名上设置才能实现跨域。(10.0.0.11是Nginx的IP)
2、在nginx上的配置文件tang.conf进行设置
配置文件例如：

server {
listen 80;
server_name tangxiaoyue.com;
if ( $http_user_agent = "Mozilla/5.0"){
return 403;
}
location / {
add_header 'Access-Control-Allow-Origin' '*';
###  Om nom nom cookies
add_header 'Access-Control-Allow-Credentials' 'true';
add_header 'Access-Control-Allow-Methods' 'GET, POST, OPTIONS';
###  Custom headers and headers various browsers *should* be OK with but aren't#
add_header 'Access-Control-Allow-Headers' 'DNT,X-CustomHeader,Keep-Alive,User-Agent,X-Requested-With,If-Modified-Since,Cache-Control,Content-Type';
proxy_pass http://10.0.0.10/;
proxy_set_header Host "tangxiaoyue";
}
}

CORS on Nginx
The following Nginx configuration enables CORS, with support for preflight requests.

location / {
if ($request_method = 'OPTIONS') {
add_header 'Access-Control-Allow-Origin' '*';
add_header 'Access-Control-Allow-Methods' 'GET, POST, OPTIONS';
# Custom headers and headers various browsers *should* be OK with but aren't
add_header 'Access-Control-Allow-Headers' 'DNT,X-CustomHeader,Keep-Alive,User-Agent,X-Requested-With,If-Modified-Since,Cache-Control,Content-Type,Content-Range,Range';
# Tell client that this pre-flight info is valid for 20 days
add_header 'Access-Control-Max-Age' 1728000;
add_header 'Content-Type' 'text/plain charset=UTF-8';
add_header 'Content-Length' 0;
return 204;
}
if ($request_method = 'POST') {
add_header 'Access-Control-Allow-Origin' '*';
add_header 'Access-Control-Allow-Methods' 'GET, POST, OPTIONS';
add_header 'Access-Control-Allow-Headers' 'DNT,X-CustomHeader,Keep-Alive,User-Agent,X-Requested-With,If-Modified-Since,Cache-Control,Content-Type,Content-Range,Range';
add_header 'Access-Control-Expose-Headers' 'DNT,X-CustomHeader,Keep-Alive,User-Agent,X-Requested-With,If-Modified-Since,Cache-Control,Content-Type,Content-Range,Range';
}
if ($request_method = 'GET') {
add_header 'Access-Control-Allow-Origin' '*';
add_header 'Access-Control-Allow-Methods' 'GET, POST, OPTIONS';
add_header 'Access-Control-Allow-Headers' 'DNT,X-CustomHeader,Keep-Alive,User-Agent,X-Requested-With,If-Modified-Since,Cache-Control,Content-Type,Content-Range,Range';
add_header 'Access-Control-Expose-Headers' 'DNT,X-CustomHeader,Keep-Alive,User-Agent,X-Requested-With,If-Modified-Since,Cache-Control,Content-Type,Content-Range,Range';
}
}

1.5Nginx SSI(Server Side Includeds)使用详解

SSI：Server Side Include，是一种基于服务端的网页制作技术，大多数（尤其是基于Unix平台）的web服务器如Netscape Enterprise Server等均支持SSI命令。
它的工作原因是：在页面内容发送到客户端之前，使用SSI指令将文本、图片或代码信息包含到网页中。对于在多个文件中重复出现内容，使用SSI是一种简便的方法，将内容存入一个包含文件中即可，不必将其输入所有文件。通过一个非常简单的语句即可调用包含文件，此语句指示 Web 服务器将内容插入适当网页。而且，使用包含文件时，对内容的所有更改只需在一个地方就能完成。
如何在nginx上配置SSI
需要的选项主要是以下三个：
ssi: 默认值off，启用ssi时将其设为on
ssi_silent_errors: 默认值off，开启后在处理SSI文件出错时不输出错误提示"[an error occurred while processing the directive]"。
ssi_types: 默认是text/html，所以如果需支持html，则不需要设置这句，如果需要支持shtml则需要设置：ssi_types text/shtml
三个参数可以放在http, server或location作用域下。

server {
    listen  10.3.9.27:80;
    server_name  www.ball.com;
    location / {
        ssi on;
        ssi_silent_errors on;
        ssi_types text/shtml;
        index index.shtml;
        root /usr/local/web/wwwroot;
        expires 30d;
        access_log      /data/logs/www.ball.com-access_log main;
    }
}
oldqun
关注
  • 0
    点赞
  • 踩
  • 7
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
专栏目录
Web文本编辑工具
04-22
UEditor是由百度WEB前端研发部开发的所见即所得的开源富文本编辑器
前端之常用库与框架
qq_597221342的博客
09-10 1258
Javascript 库 Particles.js — 一个用来在 web 中创建炫酷的浮动粒子的库Three.js — 一个用来在 web 中创建 3d 物体和 3d 空间的库Fullpage.js— 快速实现全屏滚动特性Typed.js — 打字机效果Waypoints.js — 滚动到某个元素位置时触发一个功能Highlight.js — web 语法高亮Chart.js — 使用 JavaS
25 个实用前端网站工具推荐
weixin_38754349的博客
11-16 476
code小生一个专注大前端领域的技术平台公众号回复Android加入安卓技术群来自公众号:麻瓜编程作者:凉皮给大家整理了 25 个前端相关的学习网站和一些靠谱的小工具，包括一些小游戏、...
现代前端常用工具
文洲的专栏
11-29 687
使用工具前，必须要理解为什么需要这些工具，这些工具解决了什么问题。本文，先带大家看下前端发展主流方向，然后基于此介绍常见工具的作用和使用。
你真的会用iPad吗，如何使iPad秒变生产力工具？在iPad上用vscode写代码搞开发
感谢您的关注！
04-14 1914
随着平板电脑的普及，大多数人的生活习惯和生活场景都离不开平板电脑的使用,刷剧,看短视频,玩主流游戏等,但是这些只是娱乐性质的场景,那想实现把平板结合到工作或者生产之中场景中呢,如编辑文档,制作工作表格,编写代码?所以在入手ipad后，为了防止“买前生产力，买后爱奇艺”。我们可以在linux上搭建code server，然后用ipad通过浏览器或者或app，来远程访问code server。使用服务器的资源来跑代码，而ipad前端上只需要负责撸代码和运行就可以啦，让ipad完美变身移动开发工具！！
安卓手机,平板运行 vs code ,写前端代码
qq_45385505的博客
12-29 5822
手机,平板运行 vs code ,写前端代码,感谢大佬写的软件
2021 前端面试笔试题及答案.pdf
12-14
2021 前端面试笔试题及答案.pdf
DoKit诞生于滴滴城运服体验技术部，是一款面向泛前端产品研发全生命周期的效率平台
08-18
DoKit诞生于滴滴城运服体验技术部，是一款面向泛前端产品研发全生命周期的效率平台。经过两年的发展，当前DoKit已经发展成了一个相对完整的生态，比如DoKit For Android、DoKit For iOS、DoKit For 小程序、DoKit ...
awesome-frontend：前端程序猿工具箱
02-04
WebGL和WebXR）分享平台不会产品的研发不是一个好测试一个Git学习网站技术社区 Node.js专业中文社区预测的技术社区建立以业务为中心的Web全流程解决方案的团队教程类javascript相关阮一峰出品阮一峰出品免费的计算机...
WijmoJS 前端开发工具包 2018V1历史版本的下载包
12-19
WijmoJS 前端开发工具包由多款高效、灵活的纯前端控件组成，全面支持 Angular、React、Vue、TypeScript、Knockout 和 Ionic 框架，用于快速搭建企业级桌面/移动 Web 应用程序。WijmoJS 可灵活应对客户需求变化，缩短...
初学者须知 常见Web前端开发工具有哪些
qq_43444478的博客
03-16 1521
　　Web前端入门简单，就业前景广、薪资福利高，这促使越来越多的人转行学习Web前端。学习要一步一个脚印，下面就来给初学者介绍一下常见的Web前端开发工具有哪些。 ​ 　　1、Sublime Text 　　Sublime Text 是一个跨平台的代码编辑器，同时支持Windows、Linux、Mac OS X等操作系统，也是HTML和散文先进的文本编辑器。Sublime Text具有漂亮的用户界面和强大的功能，主要功能包括:拼写检查，书签，完整的 Python API ，Goto 功能，即时项目切..
前端实时刷新数据_10款前端开发神器，助你成前端高手？
weixin_39942488的博客
12-01 563
学习前端开发，工具是必不可少的。下面这10款工具是前端开发经常用到的，掌握这些工具有助于高效地开发出“高大上”的网站和app界面，也是初学前端小白成为前端开发高手的有力“神器”哦！01 Grid Guide 前端开发神器-前端开发工具1Grid Guide能让你在线生成栅格。这个小巧的应用能让你通过自定义间距和列数建立你自己的栅格方案。你甚至可以将每种栅格方案下载为PNG图片，用于导入Photos...
android前端开发工具,分享七个非常有用的Android开发工具和工具包
weixin_34112863的博客
05-25 1958
过去的2010年是Android全面爆发的一年，出众的扩展性使其成为了众多玩家的购机首选，市场占有率节节攀高。本文与大家分享七个非常有用的Android开发工具和工具包，希望对从事Android开发的朋友有所帮助。1. Android Honeycomb Stencils & Sketchsheets谷歌发布了专用于平板电脑的Android 3.0 Honeycomb系统，这个工具用于Ho...
给徒弟说一下前端开发工程师的19个救生工具
qq_43623970的博客
07-06 226
今天看见徒弟写个css属性这么慢，是在是看不下去了，就问了他有没有用过一些辅助工具，他说没有，额。。。我也是很无语，没办法，谁叫我是他师傅呢。还是要尽到一个师傅的责任。所以就利用休息时间给他讲了19个辅助工具，满满的干货呀。我这也是第一次给别人说这么多，这么详细，想想还不错，教给别人东西的感觉是不一样的，别说是徒弟呢。 CSS代码生成器 我："你曾经是不是想记住如何声明渐变，文本阴影，Flexbox或Grid的CSS属性。 徒弟：“是的” 我：“那你还真是不容易呀，你如果不是一直在用某些css功能和属性，不
node-v9.6.0-x86.msi
04-29
Node.js，简称Node，是一个开源且跨平台的JavaScript运行时环境，它允许在浏览器外运行JavaScript代码。Node.js于2009年由Ryan Dahl创立，旨在创建高性能的Web服务器和网络应用程序。它基于Google Chrome的V8 JavaScript引擎，可以在Windows、Linux、Unix、Mac OS X等操作系统上运行。 Node.js的特点之一是事件驱动和非阻塞I/O模型，这使得它非常适合处理大量并发连接，从而在构建实时应用程序如在线游戏、聊天应用以及实时通讯服务时表现卓越。此外，Node.js使用了模块化的架构，通过npm（Node package manager，Node包管理器）,社区成员可以共享和复用代码，极大地促进了Node.js生态系统的发展和扩张。 Node.js不仅用于服务器端开发。随着技术的发展，它也被用于构建工具链、开发桌面应用程序、物联网设备等。Node.js能够处理文件系统、操作数据库、处理网络请求等，因此，开发者可以用JavaScript编写全栈应用程序，这一点大大提高了开发效率和便捷性。 在实践中，许多大型企业和组织已经采用Node.js作为其Web应用程序的开发平台，如Netflix、PayPal和Walmart等。它们利用Node.js提高了应用性能，简化了开发流程，并且能更快地响应市场需求。
Python基于机器学习的分布式系统故障诊断系统源代码，分布式系统的故障数据进行分析，设计故障诊断模型，高效地分析并识别故障类别
04-29
基于技术手段（包括但不限于机器学习、深度学习等技术）对分布式系统的故障数据进行分析，设计故障诊断模型，高效地分析并识别故障类别，实现分布式系统故障运维的智能化，快速恢复故障的同时大大降低分布式系统运维工作的难度，减少运维对人力资源的消耗。在分布式系统中某个节点发生故障时，故障会沿着分布式系统的拓扑结构进行传播，造成自身节点及其邻接节点相关的KPI指标和发生大量日志异常
JavaScript前端开发的核心语言前端开发的核心语言
最新发布
04-29
javascript 当今互联网时代，JavaScript已经成为了前端开发的核心语言它是一种高级程序设计语言，通常用于网页的交互和动态效果的实现。JavaScript的灵活性以及广泛的使用使得它变得异常重要，能够为用户带来更好的用户体验。 JavaScript的特点之一是它的轻量级，它可以在网页中运行无需单独的编译或下载。这意味着网页可以更快地加载并且用户无需安装额外的软件才能运行网页上的JavaScript代码。此外，与HTML和CSS紧密结合，可以直接在HTML文档中嵌入，使得网页的开发变得非常便捷。 JavaScript具有动态性，它可以在浏览器中实时修改页面内容和样。它可以通过操作DOM（文档对象模型来动态地修改网页的结构和布局，并且可以根据用户的行为实时地响应各种事件，如点击、标悬停、滚动等。这使得开发者可以轻松地为网页添加交互性和动态效果，提供更好的用户体验。 JavaScript也是一种面向对象的语言。它支持对象、类、继承、多态等面向对象编程的概念，使得代码结构更加清晰和可维护。开发者可以创建自定义的对象和方法，对功能进行封装和复用，提高代码的可读性和可维护性。
四则运算自动生成程序安装包
04-29
四则运算自动生成程序安装包
基于Linux的私有文件服务器(网盘).zip
04-29
基于Linux的私有文件服务器(网盘)
web前端富文本插件
10-25
UEditor是由百度Web前端研发部开发的，而KindEditor则是一套开源的在线HTML编辑器，可以无缝地与Java、.NET、PHP、ASP等程序集成，比较适合在CMS、商城、论坛、博客、Wiki、电子邮件等互联网应用上使用。如果你需要...

“相关推荐”对你有帮助么？

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值