澳门新萄京官方网站-www.8455.com-澳门新萄京赌场网址

办事中用到的局地node模块的简练memo,javaweb男的

2019-05-04 作者:澳门新萄京赌场网址   |   浏览(99)

在线调试方案的思考与实践

2015/08/28 · HTML5 · 调试

原文出处: 李靖(@Barret李靖)   

本文的要点不在移动端调试上,移动端调试无非就是调试页面和调试工具之间存在分离,消除这种分离并创建连结就能解决移动端的调试问题。重点阐述的是所见即所得的调试模式下会遇到的阻碍。

当我们打开网页,发现一个模块没有正确地渲染或者空白时,如果控制台有报错,会直接根据报错定位到源码位置开始 debug;如果控制台没有报错,则会根据模块名或者模块特征的一个值,通过全局搜索找到这个模块的位置,然后在调试工具中断点,单步调试,找到问题所在,此时我们可能会这样做:

情形一:

小A同学打开控制台,发现断点调试不好写代码,于是将压缩的源码复制一份保存到本地,格式化,然后将线上资源通过代理工具代理到本地文件。

情形二:

小B同学早早的为自己配了一份本地开发环境,于是他遇到问题之后,直接去源码中定位错误位置,由于使用的是预处理语言,所以需要先打包编译之后再在本地预览效果。

情形三:

小C同学的调试方式是小A和小B的综合版本,将线上的资源代理到本地 build 目录文件,在 src 目录下修改之后编译打包到 build,然后预览。

cmd命令:

   ./  当前目录

   ../ 上一级

   dir  查看当前目录

   ls  查看当前目录下文件

   windows 切换盘符 d:

   cls清屏

   cd 文件加名

nodejs第二章节

前言

前端圈里,现在工程化的前端已经是主流.各种前端工程化的技术比比皆是.webpack.grunt ,gulp等等等,应接不暇.

而再回看jsp当前的环境.当真的落后了前端圈太多.整体的开发模式,还是很多年前传统的企业级web开发模式.大把的jsp标签.struts标签去实现页面.也无怪乎只能做传统企业后台网址.

我之前工作的杭州某公司就是如此,用jsp标签包装了extjs的组件. 所有的html代码都写在java代码里.通过xml配置来构造页面.确实很大的提升了开发效率(所有的开发都在配xml和写一些基本的逻辑).但是蛋疼的就是,写完页面后,整体风格丑陋.客户总是会让你修改页面.这个时候你固化的组件反而会成为你的硬伤,可能修改页面一点点布局和风格.就要大把的改java代码.

后面摆脱了这样的公司,我开始尝试更主流的一下web开发方式.放弃丑陋的ext,经历了纯jquery时代,逐渐过渡到当前的angular/vue 的MVVM前端框架.更快的开发效率.和更大气美观的页面风格.已经成为我们这边开发的主要技术体系.后台java实现.弱化了后台业务.主要的交互页面都放在了angular的控制层和service层来实现.

澳门新萄京官方网站 1

Paste_Image.png

当技术体系逐渐完善后,效率问题也随之而来.之前的传统企业网站是没有考虑过js,css压缩,合并等等.现在考虑的时候,选择一个工程化的前端工具就至关重要. 调研过webpack和百度的fis等技术后.我最终选择了gulp.首先因为gulp的流式编写方式特别清晰.其次,我们的开发工具全都是IntelliJ IDEA ,作为世界上最好用的java开发idea.居然在界面上友好的支持gulp的任务执行.支持界面的gulp task调试刚发现的时候我激动哭了好吗?

澳门新萄京官方网站 2

Paste_Image.png

澳门新萄京官方网站 3

Paste_Image.png


工作中用到的一些插件,简单做个memo
body-parser
express的中间件
bodyParser用于解析客户端请求的body中的内容,内部使用JSON编码处理,url编码处理以及对于文件的上传处理.

☞ 代理调试的烦恼

而对于比较复杂的线上环境,代理也会遇到很多障碍,比如:

线上资源 combo

出现错误的脚本地址为  ,它对应着 a.js,b.js,c.js 三个脚本文件,如果我们使用 Fiddler/Charles 这样的经典代理工具调试代码,就必须给这些工具编写插件,或者在替换配置里头加一堆判断或者正则,成本高,门槛高。

线上代码压缩

打包压缩,这是上线之前的必经流程。由于我们在打包的环节中并没有考虑为代码添加 sourceMap,而线上之前对应 index-min.jsindex.js 也因为安全方面的原因给干掉了,这给我们调试代码造成了极大的不便利。

代码依赖较多,拉取代码问题

很多时候,我们的页面依赖了多个 asserts 资源,而这些资源各自分布在多个仓库之中,甚至分布在不同的发布平台上,为了能够在源码上清晰的调试代码,我们不得不将所有的资源下载到本地,期间一旦存在下载代码的权限问题,整个调试进度就慢下来,这是十分不能忍受的事情。比如某系统构建的页面,页面上的模块都是以仓库为维度区分的,一个页面可能对应了5-50个仓库,下载代码实为麻烦。

最可怕的调试是,本地没有对应的测试环境、代理工具又不满足我们的需求,然后就只能, 编辑代码->打包压缩->提交代码->查看效果->编辑代码->... ,如果你的项目开发是这种模式,请停下来,思考调试优化方案,正所谓磨刀不误砍柴工。

es6:

1.let/const

2.对象里的方法function可以省略

3.函数中的默认参数

4.template

5.箭头函数

6.展开操作符

7.解构赋值

8.Symbol

9.class 模拟类,但本质是基于原型的

10.for ...of

11.promise 解决回调金字塔.回调地狱

12.生成器函数,可以退出函数

13.JS模块化

回调函数

一.gulp入门

gulp是前端开发过程中对代码进行构建的工具,是自动化项目的构建利器;她不仅能对网站资源进行优化,而且在开发过程中很多重复的任务能够使用正确的工具自动完成;使用她,我们不仅可以很愉快的编写代码,而且大大提高我们的工作效率。

安装和使用gulp.需要安装node环境.并且使用node的npm管理工具. 如果没有接触过前端知识.看见node和npm确实挺懵逼的. 其实不然,对于一个java老鸟来说.npm你就简单的理解成maven即可.其实是前端圈里形成的一个类maven的仓库,npm提供各种node插件的下载.命令也很简单. npm init 就类似于mvn:eclipse 项目下会生成package.json文件,类似于pom.xml
请自学教程.
再自行安装gulp.传送门如下.
gulp详细入门.node,npm和gulp安装.
需要注意的是.npm安装插件分为全局安装和局部安装.全局安装指安装好的组件会全部工程通用.而局部安装只对当前工程使用. 而gulp不但需要全局安装,同时需要对当前项目局部安装.否则无法正常使用.
在根目录添加一个gulpfile.js 即gulp的任务脚本文件.
在命令行输入 gulp 任务名 即可执行脚本里对应任务名的任务.
<pre>

以下是任务代码范例

var gulp = require('gulp')
var concat = require('gulp-concat');//合并组件

var uglify=require('gulp-uglify');//压缩组件

var clean = require('gulp-clean');//清空文件夹组件

var replace = require('gulp-replace');

var cheerio = require('gulp-cheerio');//dom操作组件

gulp.task('testConcat', function () {

gulp.src('dist/js')
    .pipe(clean());
gulp.src('js/*.js')
    .pipe(concat('all.min.js'))//合并后的文件名
.pipe(gulp.dest('dist/js'));

});

</pre>

gulp
gulp是前端开发过程中对代码进行构建的工具,是自动化项目的构建利器;她不仅能对网站资源进行优化,而且在开发过程中很多重复的任务能够使用正确的工具自动完成;使用她,我们不仅可以很愉快的编写代码,而且大大提高我们的工作效率。
gulp是基于Nodejs的自动任务运行器, 她能自动化地完成 javascript/coffee/sass/less/html/image/css 等文件的的测试、检查、合并、压缩、格式化、浏览器自动刷新、部署文件生成,并监听文件在改动后重复指定的这些步骤。在实现上,她借鉴了Unix操作系统的管道(pipe)思想,前一级的输出,直接变成后一级的输入,使得在操作上非常简单。通过本文,我们将学习如何使用Gulp来改变开发流程,从而使开发更加快速高效。
gulp 和 grunt 非常类似,但相比于 grunt 的频繁 IO 操作,gulp 的流操作,能更快地更便捷地完成构建工作。
gulp.task(name, fn)这个你应经见过了
gulp.run(tasks...)尽可能多的并行运行多个task
gulp.watch(glob, fn)当glob内容发生改变时,执行fn
gulp.src(glob)返回一个可读的stream
gulp.dest(glob)返回一个可写的stream

☞ 开启懒人调试模式

当看到线上出现问题(可能是其他同学负责页面的问题),脑中浮出这样的场景:

复制代码 我:"嘿,线上有问题啦!我要调试代码!" 电脑:"好的,主人。请问是哪个页面?"(弹出浮层) 我:浮层中输入URL。 电脑:"请问是哪个地方出问题了?" 我:(指着电脑)"模块A和模块B。" 电脑:正在下载A、B资源...正在将上线A、B映射到本地...自动打开A、B对应文件夹 我:编辑代码,然后实时预览效果。

1
2
3
4
5
6
7
8
复制代码
  我:"嘿,线上有问题啦!我要调试代码!"
电脑:"好的,主人。请问是哪个页面?"(弹出浮层)
  我:浮层中输入URL。
电脑:"请问是哪个地方出问题了?"
  我:(指着电脑)"模块A和模块B。"
电脑:正在下载A、B资源...正在将上线A、B映射到本地...自动打开A、B对应文件夹
  我:编辑代码,然后实时预览效果。

在这里我们需要解决这样几个问题

  • 将页面对应的所有仓库/资源罗列在用户面前
  • 下载资源的权限提示和权限处理
  • 线上资源解 combo,然后映射到本地

当然调试之后,可以还有一个操作:

我:"哈,已经修复了,帮我提交代码~" 电脑:正在diff代码...收到确认提交信号,提交到预发环境...收到已经预览信号...正在发布代码...收到线上回归信号...流程结束

1
2
我:"哈,已经修复了,帮我提交代码~"
电脑:正在diff代码...收到确认提交信号,提交到预发环境...收到已经预览信号...正在发布代码...收到线上回归信号...流程结束

除了 debug 代码,我们需要做的就只是用眼睛看效果是否 ok,整个流程优化下来,体验是很赞的!

NodeJS:

1.node.js开发环境搭建

2.npm nodejs包管理器

3.CommonJS模块化标准化,AMD(require)

4.导出模块/加载模块

Node.js 异步编程的直接体现就是回调

二,日常应用场景和gulp插件

从上面的代码范例可以看到.gulp的任务在一开始需要引入各式各样的插件.其实gulp本身只是提供了一种对文件处理的平台.
读入一个或者一批文件.调用不同的插件串式的对文件进行一步步的处理.最终输出到taregt目录.
整体跟java的流处理没什么大的区别.输入文件.最后写入等等.
<pre>
gulp.src('js/*.js') //读取统配命令命中的所有文件
.pipe(concat('all.min.js'))//地阿偶concat插件对输入流合并处理,方法的参数是合并后的新文件名
.pipe(gulp.dest('dist/js'));//把流输出到dist/js目录下
</pre>

日常最项目上其实用的场景大概是这样的:
使用angular进行开发,angular的service.js,controller.js,filter.js各是一个文件.文件都未曾压缩.源文件jsp上有三个<script>引入文件.
而开发结束后.基于网页优化要做的就是:

  1. 为了减少http请求,把三个js合并成一个js,
  2. 为了减少js请求的加载时间,把合并后的js压缩成一个min.js
  3. 原来的三个js已经变成了一个js.需要把输出的jsp文件里的三个<script>去掉.换成引用新的min.js

所使用到的插件分别是

  • gulp-concat 文件合并插件
  • gulp-uglify 文件压缩插件
  • gulp-cheerio dom操作修改dom插件
    <pre>
    源文件:
    <%@ page contentType="text/html;charset=UTF-8" language="java" %>
    <!DOCTYPE html>
    <html>
    <head>
    <title>Hello, World</title>
    <jsp:include page="/WEB-INF/jsp/include/jquery.jsp"></jsp:include>
    <script src="js/angular.js"> </script>
    <script src="js/service.js"> </script>
    <script src="js/controller.js"> </script>
    <script src="js/filter.js"> </script>
    </head>
    <body>
    <%=aa%>
    </html>
    </pre>

<pre>
期望结果:
<%@ page contentType="text/html;charset=UTF-8" language="java" %>
<!DOCTYPE html>
<html>
<head>
<title>Hello, World</title>
<jsp:include page="/WEB-INF/jsp/include/jquery.jsp"></jsp:include>
<script src="js/all.min.js"></script></body>
</head>
<body>
<%=aa%>
</html>
</pre>

对此,我们修改gulpfile.js.写上自己的合并压缩替换任务代码
<pre>

var gulp = require('gulp');

var concat = require('gulp-concat');//合并组件

var uglify=require('gulp-uglify');//压缩组件

var cheerio = require('gulp-cheerio');//dom操作组件

gulp.task('testConcat', function () { // testConcat就是任务名 在命令行执行gulp testConcat即可执行此任务
// 任务第一步,对js文件进行处理
gulp.src('js/*.js') //加载所有的js
.pipe(concat('all.min.js'))//调用合并组件方法concat(),合并这些js.并起一个新的名称
//任务第二步,对合并的文件进行压缩
.pipe(uglify()) //调用压缩组件方法uglify()
.pipe(gulp.dest('dist/js')); //输出到目标目录

//任务第三步,对jsp文件进行处理.
gulp.src('index.jsp') //加载源jsp.
.pipe(cheerio(function ($) { //调用cheerio插件进行dom操作
$('script').remove(); //cheerio类似于jquery dom操作. 通过jq操作移除原节点,append新节点
$('head').append('<script src="js/all.min.js"></script>');

  }))

.pipe(gulp.dest('dist'));

});

</pre>
命令行,或者idea运行 gulp的任务.即可得到结果

澳门新萄京官方网站 4

Paste_Image.png

这里有一个坑.,能看到运行结果并不是我们期望的完好的jsp. 页面的jsp标签乱掉了.
这是因为cheerio 插件他在做dom操作的时候,首先需要把源文件html进行智能补全处理,会把未结束的标签补齐.他本身是操作html的.并不支持jsp的dom操作.
当然,我们也有处理的办法.稍微调整一下任务代码.在调用cheerio 之前,先把jsp标签的<% 和%>替换掉. 这样cheerio 会以为他们是普通的字符串.等cheerio 处理结束后,我们在替换回来.
<pre>
gulp.task('testConcat2', function () {

  gulp.src('js/*.js')
    .pipe(concat('all.min.js'))//合并后的文件名
    .pipe(uglify())
    .pipe(gulp.dest('dist/js'));

  gulp.src('index.jsp')
     .pipe(replace("<%","~%")) //替换掉jsp标签的<%
     .pipe(replace("%>","%~"))//替换掉jsp标签的<%
     .pipe(cheerio(function ($) {
        $('script').remove();
                $('head').append('<script src="js/all.min.js"></script>');

     }))
     .pipe(replace("%~","%>")) //替换回来jsp标签的<%
     .pipe(replace("~%","<%"))//替换回来jsp标签的<%
    .pipe(gulp.dest('dist'));

});
</pre>

这样,一个简单的jsp上场景就用gulp做了压缩优化处理了.最终结果

澳门新萄京官方网站 5

Paste_Image.png

澳门新萄京官方网站 6

Paste_Image.png

当然gulp还有很多其他插件,比如压缩html内容.混淆压缩js等等.按照情况选用

// 载入外挂
var gulp = require('gulp'),
browserify = require('browserify'),//这里用不上,管理js依赖的
source = require('vinyl-source-stream'),//同样这里用不上,和上面那个一起的
uglify = require('gulp-uglify'),//使用gulp-uglify压缩javascript文件,减小文件大小。
clean = require('gulp-clean'),//清理文件
notify = require('gulp-notify'),//加控制台文字描述用的
buffer = require('vinyl-buffer'),
less = require('gulp-less'),//转换less用的
autoprefixer = require('gulp-autoprefixer'),//增加私有变量前缀
minifycss = require('gulp-minify-css'),//压缩
concat = require('gulp-concat'),//合并
fileinclude = require('gulp-file-include'),// include 文件用
template = require('gulp-template'),//替换变量以及动态html用
rename = require('gulp-rename'),//重命名
webserver = require('gulp-webserver'),//一个简单的server,用python的SimpleHttpServer会锁文件夹
imagemin = require('gulp-imagemin'),//图片压缩
gulpif = require('gulp-if'),//if判断,用来区别生产环境还是开发环境的
rev = require('gulp-rev'),//加MD5后缀
revReplace = require('gulp-rev-replace'),//替换引用的加了md5后缀的文件名,修改过,用来加cdn前缀
addsrc = require('gulp-add-src'),//pipeline中途添加文件夹,这里没有用到
del = require('del'),//也是个删除···
vinylPaths = require('vinyl-paths'),//操作pipe中文件路径的,加md5的时候用到了
runSequence = require('run-sequence');//控制task顺序 Runs a sequence of gulp tasks in the specified order

☞ 解决代理遇到的问题

上面我们提到了三个问题,平时开发遇到最头疼的一个是 combo ,曾经我们页面上的代码加一个 ?_xxx  参数就能够直接开始调试模式,那是因为程序的入口只有一个,而且所有脚本的依赖也打包到一个叫做 deps.js  文件中,加上调试参数之后,可以将原来 combo 加载的文件:  ,按照非 combo 的方式加载:

1
2
3
http://example.com/path/a.js
http://example.com/path/b.js
http://example.com/path/c.js

上面的代码可以轻松地代理到本地,但是有的系统生成的代码并没有 deps.js  文件,它是将脚本直接输出到页面上:

<script src=";

1
<script src="http://example.com/path/??a-min.js,b-min.js,c-min.js"></script>

☞ 解决 combo 问题

此时通过 Fiddler/Charles 工具比较难满足需求,对于这个问题有两个处理方案:

1). 浏览器请求全部代理到本地的一个服务

首先写一个本地服务:

JavaScript

var http = require('http'); // npm i http-proxy --save var httpProxy = require('http-proxy'); var proxy = httpProxy.createProxyServer({}); var server = http.createServer(function(req, res) { console.log(req.url); if(req.url.indexOf("??") > -1){ // combo资源让 3400 端口的服务处理 proxy.web(req, res, { target: '' }); } else { // 直接返回 proxy.web(req, res, { target: req.url }); } }).listen(3399, function(){ console.log("在端口 3399 监听浏览器请求"); });

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
var http = require('http');
// npm i http-proxy --save
var httpProxy = require('http-proxy');
var proxy = httpProxy.createProxyServer({});
 
var server = http.createServer(function(req, res) {
  console.log(req.url);
  if(req.url.indexOf("??") > -1){
    // combo资源让 3400 端口的服务处理
    proxy.web(req, res, { target: 'http://127.0.0.1:3400' });
  } else {
    // 直接返回
    proxy.web(req, res, { target: req.url });
  }
}).listen(3399, function(){
    console.log("在端口 3399 监听浏览器请求");
});

代码的意思是,利用 http-proxy 这个 npm 包,代理浏览器的请求,浏览器上使用 switchSharp 设置本地代理为  ,当请求过来,先判断 url,如果 url 中包含了 ?? 则将其作为 combo 资源处理,代理给本地的另一个服务  ,这个服务收到请求后会将 combo 内容分解成多个,全部请求完之后再吐出来。

2). 使用本地服务请求 html 代码,替换 html 代码内容

使用强制手段(源码替换)将代码解 combo,比如源码页面为:

<!-- html code --> <script src="; <!-- html code -->

1
2
3
<!-- html code -->
<script src="http://example.com/path/??a-min.js,b-min.js,c-min.js"></script>
<!-- html code -->

使用本地服务请求这个url,然后转换成:

<!-- html code --> <script src="; <script src="; <script src="; <!-- html code -->

1
2
3
4
5
<!-- html code -->
<script src="http://example.com/path/a.js"></script>
<script src="http://example.com/path/b.js"></script>
<script src="http://example.com/path/c.js"></script>
<!-- html code -->

实现这个操作的代码:

JavaScript

var http = require('http'); // npm i request --save; var request = require('request'); http.createServer(function(req, res){ var path = req.url.slice(req.url.indexOf("path=") 5); console.log(path); if(!path) { res.write("path is empty"); res.end(); return; } request(path, function (error, response, body) { if (!error && response.statusCode == 200) { console.log(body); // 代码替换 body = body.replace('<script src=";', '<script src=" <script src=" <script src=";' ); res.write(body); res.end(); } }); }).listen(3399, function(){ console.log("listening on port 3399"); });

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
var http = require('http');
// npm i request --save;
var request = require('request');
http.createServer(function(req, res){
    var path = req.url.slice(req.url.indexOf("path=") 5);
    console.log(path);
    if(!path) {
        res.write("path is empty");
        res.end();
        return;
    }
    request(path, function (error, response, body) {
        if (!error && response.statusCode == 200) {
            console.log(body);
            // 代码替换
            body = body.replace('<script src="http://example.com/path/??a-min.js,b-min.js,c-min.js"></script>',
                '<script src="http://example.com/path/a.js"></script>
                <script src="http://example.com/path/b.js"></script>
                <script src="http://example.com/path/c.js"></script>'
            );
            res.write(body);
            res.end();
        }
    });
}).listen(3399, function(){
    console.log("listening on port 3399");
});

比如请求  ,即可拿到淘宝首页的源码,然后对拿到的代码做替换。

☞ 解决代码压缩问题

对于这个问题,建议在线上放两份源码,一份是压缩源码,一份是未压缩源码,当页面 url 存在 debug 参数的时候,返回未压缩版本,正常返回压缩版本。当然,也可以采用上述方式处理问题。

不过,更合理的方式应该是 sourceMap,前端没有秘密,压缩代码只是增加了 hacker 的攻击成本,并不妨碍有能力的 hacker 借系统漏洞入侵。所以可以为源码提供一份 sourceMap 文件。

JavaScript

var gulp = require('gulp'); var sourcemaps = require('gulp-sourcemaps'); gulp.task('javascript', function() { gulp.src('src/**/*.js') .pipe(sourcemaps.init()) //.pipe(xx()) .pipe(sourcemaps.write()) .pipe(gulp.dest('dist')); });

1
2
3
4
5
6
7
8
9
10
var gulp = require('gulp');
var sourcemaps = require('gulp-sourcemaps');
 
gulp.task('javascript', function() {
  gulp.src('src/**/*.js')
    .pipe(sourcemaps.init())
      //.pipe(xx())
    .pipe(sourcemaps.write())
    .pipe(gulp.dest('dist'));
});

关于 sourceMap 的 gulp 插件配置,详情可以戳这里。不仅仅是 JavaScript,CSS 也有 source maps,这个信息可以在 Chrome 控制台的设置选项中看到:

澳门新萄京官方网站 7

☞ 代码的拉取

如果一个项目只有你知道如何修改,那这个项目的技术设计就有点糟糕了,为了让众人都能处理你项目中的问题,一定要需要一个简洁的模式为开发者快速搭建测试环境,文档是一方面,如果有个一键操作的命令,那就更棒了!

# 启动脚本 start: createFile getMod getPage # 创建目录 createFile: @[ -d module ] || mkdir module @[ -d page ] || mkdir page # 拉取模块仓库,这里有几十个,比较费时,请耐心等待... getMod: cd module; for i in $(MODS); do [ -d $(MODPATH)$$i ] || git clone $(MODPATH)$$i; git co -b master; git co -b $(MODSV); done # 拉取页面仓库,tbindex getPage: cd page; @[ -d tbindex ] || git clone $(PAGEPATH)$PAGE;

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
# 启动脚本
start: createFile getMod getPage
 
# 创建目录
createFile:
  @[ -d module ] || mkdir module
  @[ -d page ] || mkdir page
 
# 拉取模块仓库,这里有几十个,比较费时,请耐心等待...
getMod:
  cd module;
  for i in $(MODS); do
    [ -d $(MODPATH)$$i ] || git clone $(MODPATH)$$i;
    git co -b master;
    git co -b $(MODSV);
  done
 
# 拉取页面仓库,tbindex
getPage:
  cd page;
  @[ -d tbindex ] || git clone $(PAGEPATH)$PAGE;

 

上面是一个 MakeFile 的部分代码,作用是创建开发目录,拉取分支信息,然后开始服务器,打开浏览器,使用 IDE 打开目录,万事就绪,只等主人敲代码。

整个流程就一两分钟,完成开发之前所有的准备工作。这个脚本不仅仅是给自己使用,如果其他人也需要参与开发,一个命令就能让参与者进入开发模式,加上文档说明,省却了很多沟通成本。

fs模块(读写文件)

var fs = require("fs");//加载模块

//异步读取文件

fs.readFile("./readme.txt","utf8", (err, data) => {

if(err) throw err;

console.log(data);

});

//同步读取文件 Synchrous

var data = fs.readFileSync("./readme.txt","utf8");

console.log(data);

//异步写入文件

fs.writeFile("./test.txt", "This is test content~~~",(err) => {

if(err)throw err;

console.log("写入成功");

})

console.log("write");

//同步写入文件

fs.writeFileSync("./test.txt", "This is test content~~~");

console.log("write");

查看路径信息stat:fs.stat(path, (err, stat) => {})

fs.stat("./test", (err, stat) => {

if(err) throw err;

console.log(stat);

if(stat.isFile()) {

console.log("该路径为文件");

}else if (stat.isDirectory()) {

console.log("该路径为文件夹");

}

})

异步编程依托于回调来实现

一个简单的例子
var gulpif = require('gulp-if');
var uglify = require('gulp-uglify');

☞ 在线调试实践(一个系统的调试工具)

输入需要调试的页面URL(如 http://www.taobao.com):

澳门新萄京官方网站 8

插件会分析 DOM,遍历拿到页面所有被引用到的仓库:

澳门新萄京官方网站 9

选择需要调试的模块(颗粒度细分到了html/js/css),点击调试按钮,可以看到调试页面的资源都会引用本地下载的文件。

path模块

var path = require("path"); //加载模块

path.dirname(url) 获取目录名

path.extname(url)获取后缀名

path.join([...paths]) 拼接路径

var url = "";

var p1 = path.basename(url,".html");

console.log(p1); //path

var p2 = path.dirname(url);

console.log(p2); //

var p3 = path.extname(url);

console.log(p3); //.html

var p4 = path.join(__dirname, "./a", "../b", "c");

console.log(p4); //E:nodenodejs_2bc

例子1:http服务器回调

var condition = true; // TODO: add business logic

☞ 小结

优化流程、优化架构是我们矢志不渝坚持的方向,本文主要阐述,编辑代码到调试线上效果的过程,提出了解决 combo 和代码压缩等问题的方案和建议。希望可以给不擅长代理调试的同学一点启示。

1 赞 收藏 评论

澳门新萄京官方网站 10

querystring模块 查询字符串

var qs = require("querystring");

var o = {

color: "red",

border: "1px solid red",

"font-size": "16px"

}

var ret = qs.stringify(o, ";", ":");

console.log(ret);

// "color:red;border: 1px solid red;font-size: 16px"

  • var http = require(“http”);//引入一个http的模块

    var server = http.createServer(function (req,res) {

        //向前台响应内容(数据)
        res.end(“大家好,我是yuk”);
    });
    //listen(端口,域名,成功的回调)
    server.listen(8080,”localhost”, function () {
        console.log(“服务器启动成功!”);
    });

gulp.task('task', function() {
gulp.src('./src/*.js')
.pipe(gulpif(condition, uglify()))
.pipe(gulp.dest('./dist/'));
});

http模块

var http = require("http"); //加载模块

var server = http.createServer((request, response) => {

//创建一个web服务器

//request

//response

//设置响应头

console.log(request.url);

switch(request.url) {

             case "/":

                    response.write("首页");

                     break;

case "/list":

response.write("列表页");

break;

case "/detail":

response.write("详情页");

break;

}

response.writeHead(200, {

"Content-Type":"text/html; charset=utf8"

})

response.end();

//if(request.url)

})

//http80端口号 ftp23端口号

server.listen(3000, function() {

console.log("server has started at port 3000");

})

例子2:读取文件操作

 

1.http请求页面,不是该文件目录下的页面重定向,其余的根据目录查找

var http = require("http"); //CommonJS规范 加载模块

var fs = require("fs");

var path = require("path");

var server = http.Server(); //创建服务器

server.on("request", function(req, res) {

var filepath = path.join(__dirname, "./www", req.url);

if(req.url === "/") {

filepath = path.join(filepath, "index/html");

}

try{

var stat = fs.statSync(filepath);

if(stat.isFile()) {

var content = fs.readFileSync(filepath);

res.setHeader("Content0length", Buffer.bytelength(content))

res.write(content);

}else if(stat.isDirectory() {

//当请求的路径是目录的时候

})

}catch(e) {

//重定向301(永久) 302(暂时)

res.writeHead(302, {

"Location" : "/"

})

}

res.end();

})

server.listen(3000, function() {

console.log("server has started");

})

  • var fs = require(“fs”);//文件模块

    //异步的方式->当文件读取完成后执行回调函数内容,不影响其他后续程序的执行
    /*var data = fs.readFile(“1.txt”,”utf8”, function (err,data) {

        console.log(“读取文件成功”);
        console.log(data);
    });*/
    //同步获取文件的方式->必须读取完成以后再执行之后的程序
    var data = fs.readFileSync(“1.txt”,”utf8”);
    console.log(data);
    console.log(“我是其他的代码”);

express

serve-favicon
Node.js middleware for serving a favicon.
Examples

Typically this middleware will come very early in your stack (maybe even first) to avoid processing any other middleware if we already know the request is for /favicon.ico.

express

var express = require('express')
var favicon = require('serve-favicon')
var path = require('path')

var app = express()
app.use(favicon(path.join(__dirname, 'public', 'favicon.ico')))

// Add your routes here, etc.

app.listen(3000)


morgan
morgan是express默认的日志中间件,也可以脱离express,作为node.js的日志组件单独使用
var express = require('express');
var app = express();
var morgan = require('morgan');

app.use(morgan('short'));
app.use(function(req, res, next){
res.send('ok');
});

app.listen(3000);
ode basic.js运行程序,并在浏览器里访问 ,打印日志如下

➜ 2016.12.11-advanced-morgan git:(master) ✗ node basic.js
::ffff:127.0.0.1 - GET / HTTP/1.1 304 - - 3.019 ms
::ffff:127.0.0.1 - GET /favicon.ico HTTP/1.1 200 2 - 0.984 ms


express 的 模板引擎
jade 和 ejs

jade
index.jade
doctype
html
head
title hello
body
h1 hello world

接着在命令行执行 jade -P index.jade ,编译后的文件 index.html 内容如下:
<!DOCTYPE html>
<html>
<head>
<title>hello</title>
</head>
<body>
<h1>hello world</h1>
</body>
</html>

ejs
特性

<% %> 用于控制流

<%= %> 用于转义的输出

<%- %> 用于非转义的输出

 


handlebars
模板引擎
在模板中使用{{ }}或{{{ }}}的地方就是表示
{{ }} 会转译标签
{{{ }}} 则直接替换

const productTemplateContent = fs.readFileSync(path.join(__dirname, '../templates/product.xml.hbs'), 'utf-8');
const productTemplate = handlebars.compile(productTemplateContent);
let html = productTemplate({ product: product, productJson: (new Buffer(JSON.stringify(product))).toString('base64') });

 


crypto
node自带模块.这个模块的主要功能是加密解密。
var md5 = crypto.createHash(‘md5’);
var sha1 = crypto.createHash('sha1');

 


needle
Nimble, streamable HTTP client for Node.js. With proxy, iconv, cookie, deflate & multipart support.
轻量级的http client模块,集成了iconv-lite,跟request类似
var needle = require('needle');

needle.get('', function(error, response) {
if (!error && response.statusCode == 200)
console.log(response.body);
});

Callbacks not floating your boat? Needle got your back.

var data = {
file: '/home/johnlennon/walrus.png',
content_type: 'image/png'
};

needle
.post('', data, { multipart: true })
.on('readable', function() { /* eat your chunks */ })
.on('done', function() {
console.log('Ready-o, friend-o.');
})

needle.post(url, data, requestOptions, function(err, resp, body) {
let data;
if (body) {
let bodyText = body.toString('utf-8');
try {
data = JSON.parse(bodyText);
} catch (e) {
data = bodyText;
}
}
mainCallBack(err, body);
});


superagent
superagent是nodejs里一个非常方便的客户端请求代理模块,当你想处理get,post,put,delete,head请求时,你就应该想起该用它了:)

superagent 是一个轻量的,渐进式的ajax api,可读性好,学习曲线低,内部依赖nodejs原生的请求api,适用于nodejs环境下.

一个简单的post请求,并设置请求头信息的例子

request
.post('/api/pet')
.send({ name: 'Manny', species: 'cat' })
.set('X-API-Key', 'foobar')
.set('Accept', 'application/json')
.end(function(res){
if (res.ok) {
alert('yay got ' JSON.stringify(res.body));
} else {
alert('Oh no! error ' res.text);
}
});

SuperAgent请求的默认方法为GET,所以你可可以简单地写如下代码:

request('/search', function(res){

});



 

http协议:

HyperText Transport Protocol)是超文本传输协议的缩写.

http请求:get/post/put/delete(get在地址栏,传输速度快,大小有限制.在头,只能传输一些文本;post加密传输,在正文)

可以发起http请求的方式:浏览器/postman/curl/Fiddle/php/node.js

http1.0和http1.1的区别:1.0是每次请求都建立一个连接,而1.1是多个请求一个连接.

报文:请求头(post有content-type:"application-x-www-form-urlencoded", cookie) 正文

xhr.readystate

XMLHttpRequest.UNSENT  0        初始化连接

XMLHttpRequest.OPENED  1        连接建立

XMLHttpRequest.HEADER_RECEIVED 2  接收到请求头

XMLHttpRequest.LOADING  3        处理数据

XMLHttpRequest.DONE    4        处理完毕

xhr.status HTTP响应状态码

1开头  101 切换协议

2开头  成功  200

3开头  重定向  304 301/302

4开头  客户端错误  404 403

5开头  服务器端错误

常用模块讲解

2.爬虫 cheerio

原理: 1.拉取页面(字符串)http.get/request(node),file_get_content(php)

2.使用模块,方便快捷筛选.cheerio(node), simple.html.dom.php(php)

3.收集信息

办事中用到的局地node模块的简练memo,javaweb男的gulp出手实行。npm install cheerio //安装cheerio模块

npm init

// spider.js

var http    = require("http");

var cheerio = require("cheerio");

var fs      = require("fs");

util

3.express 基于 Node.js 平台,快速、开放、极简的 web 开发框架。

nmp install express -g

npm install express-generator -g(快速创建express的整体目录)

express -h

express myapp

cd myapp

npm start

express

1.新建文件夹

cd到该文件目录下

npm init (enter name:myapp enter....)

npm install express

在myapp里面新建app.js

在app.js里面写代码

var express  = require("express"),//加载express模块

http = require("http"), //加载http模块

app  = express(), //创建一个express实例

server  = http.createServer(app); //app可以作为http创建服务器的回调函数

//静态资源挂载,设置静态资源目录

//中间件 express.static

//挂载中间件 使用use

app.use(express.static("public"));

//定义一个获取访问用户IP的中间件

//哪个先挂载,先使用哪个的代码

var ips = [];

function getIp(req, res, next) {

console.log(req.ip);

ips.push(req.ip);

next();

}

function responseIP (req, res, next) {

res.send(req.ip);

}

app.use((req, res, next) => {

console.log("hello");

next();

})

app.use(getIp);

app.use(responseIP);

app.get("/", (req, res) => {

res.send("首页");

})

app.get("/list", (req, res) => {

// console.log(req.ip);获取ip

res.send("列表页");

})

app.get("/details", (req, res) => {

res.send("详情页");

})

server.listen(3000, function() {

//监听端口号3000,并提示服务成功开启

console.log("Server has started");

})

总结express:中间件和路由.

实现继承

3.websocket 构建实时应用(你猜我画,视频直播)

全双工、双向数据、长连接的协议,h5新增特性

服务器端能够主动向浏览器端发送消息

必须浏览器要支持,服务器要支持,数据传输格式是Frame

过程:第一次是由客户端发起,请求的报文的请求头会多一些内容,要求服务器更换协议.

服务器端响应回报文,响应头也会多几条数据,之后就能建立长的连接.

a. 发起请求,跟一般的http请求不同的地方,

请求头 包括:

Sec-WebSocket-Key:asgK0L1sVa22xbiq8MU58w==

Sec-WebSocket-Version:13

Upgrade:websocket

让服务器更新切换协议 websocket

b. 服务器收到请求,upgrade

经过一定的步骤算法 产生

Sec-WebSocket-Accept:IQcF4EGKE8sALj3PxJRvYQ1iG2Y

2.  npm init

npm install socketio express --save-dev

例子

socketio 是对websocket协议封装的一个模块,让客户端和服务器端的写法都是一样的

socket.emit()发数据

socket.on()收数据

监听客户端连接,回调函数会传递本次连接的socket

io.on('connection',function(socket));

给所有客户端广播消息

io.sockets.emit('String',data);

给指定的客户端发送消息

io.sockets.socket(socketid).emit('String', data);

监听客户端发送的信息

socket.on('String',function(data));

给该socket的客户端发送消息

socket.emit('String', data);

3.WebSocket

new Websocket("ws:localhost/chat")

  • var util = require(“util”);
    //实现继承
    function Parent(){
        this.name = “老爸”;
        this.age = 50;
        this.sayHello = function (){

            console.log(‘hello’);
        }
    }
    Parent.prototype.showName = function (){

        console.log(this.name);
    }
    function Child(){
        //要继承函数内部的可以使用call或者apply
        this.name = “儿子”;
    }
    //通过这种方式可以继承父类原型中的方法和属性
    util.inherits(Child,Parent);
    var parentObj = new Parent();
    parentObj.showName();
    var childObj = new Child();
    childObj.showName();

gulp

npm init

npm install gulp --save-dev

新建 gulpfile.js(默认执行的文件)

//gulpfile.js

//1.安排任务, 2.自动执行

var gulp = require("gulp");

var uglify = require("gulp-uglify");

//task1 定义一个任务ufligy 压缩js

gulp.task("uglify" ,function() {

gulp.src("./src/js/*.js")

.pipe(uglify())

.pipe(gulp.dest("./dist/js"))

})

安装gulp-uglify插件 npm install gulp-uglify --save-dev

新建src文件夹 > js文件夹 >demo.js

新建dist文件夹> js文件夹 >

运行 gulp uglify

然后在dist文件夹就能找到已经压缩的demo.js

插件:gulp-less

插件:gulp-minify-css

//文件看守, 监听./src/less/*.less 文件的变化,变化运行该less任务

gulp.task("default", ["uglify", "less"], function() {

gulp.watch("./src/less/*.less", ["less"]);

})

//运行 gulp即可即使更改代码

输出对象

webpack

全局安装webpack npm install webpack --save-dev

新建文件夹webpack

1.初始化一个项目 npm init

name:不能为webpack

2.在该文件夹下面安装npm install webpack --save-dev

  1. webpack 资源模块化

webpack ./app/main.js ./app/bundle.js

  1. mongodb 非关系型数据库

mongoose Nodejs操作mongodb数据库的模块

  • console.log(util.inspect(obj));

类型验证

  • console.log(util.isArray([]));//判断是否为一个数组
    console.log(util.isRegExp(/d/));//判断是否为一个正则表达式

event

事件概念

  • 事件
    * 又称为发布订阅模式
    * 又称为观察者模式
    * 当主题对象发生变化时,会通知所有的观察者对象,更新自己的行动

获取事件模块

  • var events = require(“events”).EventEmitter();//老的写法,跟下面的写法是等价的
    var events = require(“events”);

例子:

  • var events = require(“events”);
    var util = require(“util”);

    function Girl(){
        //创建一个女神类,它拥有一些事件
    }
    //要让女神拥有事件方法需要先继承events模块
    util.inherits(Girl,events);

    function Boy(name,response){
        this.name = name;
        this.response = response;
    }

    var boy1 = new Boy(“备胎1”,function (){

        console.log(“吃鸡腿”);
    });

    var boy2 = new Boy(“备胎2”, function (){

        console.log(“吃牛肉”);
    });

    • var girl = new Girl();
      girl.on(“lee”,boy1.response);
      girl.addListener(“lee”,boy2.response);
      girl.once(“die”,function (){
          console.log(“死了”);
      });

    girl.emit(“die”);//发射事件
    girl.emit(“die”);

事件

注册事件

  • on
  • addListener
  • once

发射事件

  • emit

其他方法

设置最大的监听数量

  • girl.setMaxListeners(2);

移除掉单个事件

  • girl.removeListener(“ele”,boy1.response);//移除掉单个事件

代码:

  • //设置最大的监听数量
    girl.setMaxListeners(2);
    //girl.on(“lee”,boy1.response);
    girl.removeListener(“lee”,boy1.response);//移除掉单个事件
    girl.removeAllListeners(“lee”);
    girl.emit(“lee”);

buffer

buffer:缓存区,暂时存放在内存里的一段数据

JavaScript 语言自身只有字符串数据类型,没有二进制数据类型,在处理文件流时,必须使用到二进制数据,因此在 Node.js中,定义了一个 Buffer 类,该类用来创建一个专门存放二进制数据的缓存区

由一个八位字节一个字节元素组成的数组,单位用16进制表示,取值范围为0-255

创建buffer对象的方法:

直接创建长度为12的代码

  • var buff = new Buffer(12);//创建长度为12的数组console.log(buff);buf1.fill(255,0);//fill(填充的值,开始位置,结束位置(没有既全部))console.log(buff);

通过数组

  • var buff = new Buffer([1,255,0xb3]);
    console.log(buff);

通过字符串

  • var buff = new Buffer(“唐菜也”);
    console.log(buff);

将buffer转成字符串通过toString

  • var buff = new Buffer([0xe5, 0x94, 0x90, 0xe8, 0x8f, 0x9c, 0xe4, 0xb9, 0x9f]);
  • console.log(buf4.toString())

Node中推荐使用的方式

  • var buff = new Buffer([0xe5, 0x94, 0x90, 0xe8, 0x8f, 0x9c, 0xe4, 0xb9, 0x9f]);
    var buff = new Buffer([0xe5, 0x94, 0x90, 0xe8, 0x8f]);
    var buff = new Buffer([0x9c, 0xe4, 0xb9, 0x9f]);
    console.log(buf4.toString());
    console.log(buf5.toString());

    //占用的内存高
    //console.log(Buffer.concat([buf4,buf5]).toString());

    //Node中推荐使用的方式
    var StringDecoder = require(“string_decoder”).StringDecoder;
    var decoder = new StringDecoder();
    console.log(decoder.write(buff));
    console.log(decoder.write(buff));

fs

文件操作

读取文件

  • readFile
  • readFileSync

写入文件

writeFile

第一个参数为写入的文件名

第二个为写入写入的文件内容

第三个为配置参数

{    flag:”a”}

  • a:追加
  • w:写入
  • r:读取

第四个为回调

代码:

  • var fs = require(“fs”);fs.writeFile(“file.txt”,”我是通过写入的文件内容”,{    flag:”a”},function (err){    if (err){        return console.error(err);    }    console.log(“文件写入成功”);    fs.readFile(“file.txt”,”utf8”,function (err,data){        console.log(data);    })});

appendFile

  • fs.appendFile(“file.txt”,”n最佳”,function (err){    if (err){        return console.error(err);    }    console.log(“追加成功”);});

复制文件

  • fs.readFile(“file.txt”,”utf8”,function(err,data){    //console.log(data);    fs.writeFile(“file2.txt”,data,{        encoding:”utf8”    },function (err){        if (err){            return console.error(err);        }        console.log(“复制成功”);    })});

目录操作

创建目录

  • fs.mkdir(“test”,0777, function (err) {
        if(err){
            console.error(err);
        }
    });
  • mode 的三个数字,分别表示owner(所有者),group(组用户),others(其他用户)所具有的权限。
     1 = x 执行 2 = w 写 4 = r 读,比如owner具有所有权限,1 2 4=7,
     又比如group 具有读 和执行权限 1 4 = 5

读取目录

  • fs.readdir(“test”, function (err,files) {
        if (err){
            console.error(err);
        }else{
            console.log(files);
        }
    });

查看文件或者目录详情

  • fs.stat(‘test’, function (err,stat) {

        if (err){
            console.error(err);
        }else{
            console.log(stat);
        }
    });

判断文件是否存在

  • fs.exists(“test/1.jpg”, function (exists) {

        console.log(exists);
    })

相对路径获取绝对路径

  • fs.realpath(“test”, function (err,path) {

        console.log(path);
    });

修改文件名

  • fs.rename(“test2”,”test”, function (err) {
        if (err){
            console.error(err);
        }
    });

stream

Stream可以算是node里的一出重头戏,与大数据处理方面有密切不可分的关系

  • var fs = require(‘fs’);
    function copy( src, dest ){
        fs.writeFileSync( dest, fs.readFileSync(src) );
    }
    copy(‘data.son’, ‘dataStream.json’);
  • 上面是一个对文件拷贝的代码,看似没什么问题,也的确在处理小文件的时候没什么大问题,但是一旦处理数量级很大的文件的时候可以看出,先将数据读取出来,在写入,内存作为中转,如果文件太大就会产生问题。

如果是大文件就得使用file system的另外几个API,createReadStream和fs.createWriteStream,将文件作为一块一块小的数据流进行处理,而不是一整块大型数据

// 也可能出现内存爆仓 写入数据跟不上读取速度 一直读取的文件不断放入内存中
// 但是两个操作速度绝对是不一样的,于是未被写入的数据在内存中不断变大,就可能会导致内存的爆仓。
var 澳门新萄京官方网站,fs = require(‘fs’);
var rs = fs.createReadStream(‘data.son’);
var ws = fs.createWriteStream(‘dataStream.json’)
rs.on(‘data’,function(chunk){
    console.log(‘data chunk read ok’);
    times ;
    ws.write(chunk,function(){
        console.log(‘data chunk write ok’);
    });
});
rs.on(‘end’,function(){
    console.log(times);
});

可以先写一个129k的文件

  • var fs = require(“fs”);
    fs.writeFile(“128k.txt”,new Buffer(129 * 1024));

对于这种情况 node里面有一个pipe的方法 连接两个数据流,犹如导管一样将数据读入写入

  • function copy( src, dest ){
        fs.createReadStream( src ).pipe( fs.createWriteStream( dest ) );
    }
    copy(‘data.son’, ‘dataStream.json’);

path

normalize:规范化字符串路径

  • console.log(path.normalize(“./../a///b/c/.././d//“));

__dirname

join 将多个参数值字符串结合成一个路径字符串

  • console.log(path.join(__dirname,”a”,”b”,”..”,”c”));

resolve:把参数解析为一个绝对路径
* 1.以应用程序的根目录为起点,根据参数的值解析出一个绝对路径
* 2. .当前目录 ..上级目录
* 3. 普通字符串代表下一级目录
* 4. 如果没有下一个参数,返回当前路径
* 5. /代表盘符的根目录

  • console.log(path.resolve(“/test/index.html”));
    console.log(path.resolve(‘wwwroot’, ‘static_files/png/‘, ‘../gif/image.gif’));
    console.log(path.resolve(“../7.fs/img.js”));

http模块深入讲解

http协议讲解

  • http:超文本传输协议,是互联网使用最广的一个协议
  • http 模块主要用于搭建 HTTP 服务端和客户端,使用 HTTP 服务器或客户端功能必须调用 http 模块

http——api讲解

创建服务器

  • var http = require(“http”);
    var url = require(“url”);
    //创建服务器
    //http继承自tcp
    var server = http.createServer(function (req,res) {

        var urlstr = req.url;//获取请求的路径
        var urlMethod = req.method;//获取请求的方法
        /*var urlObj = url.parse(urlstr,true);
        console.log(urlObj);*/
        //console.log(urlMethod);
        res.end(“hello”);
    });
    server.listen(8080);

对请求进行处理

  • var server = http.createServer(function (req,res) {

        var urlstr = req.url;//获取请求的路径
        var urlMethod = req.method;//获取请求的方法
        var urlObj = url.parse(urlstr,true);
        console.log(urlObj);
        console.log(urlMethod);
        console.log(req.headers);//获取请求头
        console.log(req.httpVersion);//获取http的版本
        req.on(“data”, function (chunk) {//获取POST方式发送过来的数据
            console.log(chunk.toString());//chunk:数据块
        });

        /*res.statusCode = 404;//设置返回的状态码
        res.setHeader(“name”,”tangcaiey”);//设置返回的头*/
        //res.setHeader(,);
        res.writeHead(200,{name:”tangcaiye”,pass:”1234”,”Content-Type”:”text/html;charset=utf-8”});
        res.write(“hello”);
        res.write(“yuk”);
        res.end();
    });
    server.listen(8080);

前端发送post请求

  • <!DOCTYPE html>
    <html lang=“en”>
    <head>
        <meta charset=“UTF-8”>
        <title>这是表单页的标题</title>
    </head>
    <body>
    <!—
        如果没有文件的话可以使用application/x-www-form-urlencoded
        但是如果有文件的话一定更要用multipart/form-data
    —>
    <form action=“/upimg” method=“post” enctype=“multipart/form-data”>
        用户名: <input type=“text” name=“user”><br>
        密码: <input type=“password” name=“pass”><br>
        上传图片: <input type=“file” name=“file1”><br>
        <input type=“submit” value=“**提交**”>
    </form>
    </body>
    </html>

上传文件的处理

  • var http = require(“http”);
    var url = require(“url”);
    var fs = require(“fs”);
    var query string = require(“query string”);
    var formidable = require(“formidable”);
    //创建服务器
    //http继承自tcp
    var server = http.createServer(function (req,res) {

        //获取请求的路径
        var urlObj = url.parse(req.url,true);
        var pathname = urlObj.pathname;

        if(pathname == “/upimg.html”){
            var rs = fs.createReadStream(“./upimg.html”);
            rs.pipe(res);
        }else if(pathname == “/upimg”){

            var form = new formidable.IncomingForm();
            form.parse(req, function (err,fields,files) {
                //fields->以对象格式返回字段
                /*console.log(fields);
                console.log(files);*/
                //将暂存文件写入到upload文件目录中
                fs.createReadStream(files.file1.path).pipe(fs.createWriteStream(“./upload/“ files.file1.name));
                res.setHeader(“Content-Type”,”text/html;charset=utf8”);
                res.write(JSON.stringify(fields));
                res.end(‘<img src=“/upload/‘ files.file1.name ’”>’);
            });
        }else if(pathname != “/favicon.ico”){

            fs.createReadStream(“.” pathname).pipe(res);
        }
    });
    server.listen(8080);

http模拟客户端

  • var http = require(“http”);
    //request函数允许后台发布请求,第一个参数是一个对象或者字符串
    var options = {
            host: ‘localhost’,
            port: ‘8080’,
            path: ‘/reg’,
            method:”POST”,
            headers:{
                “Content-Type”:”application/json”
            }
    };
    /*
    * request :发请求
    * http.request() 返回一个 http.ClientRequest类的实例。ClientRequest实例是一个可写流对象。
    * 如果需要用POST请求上传一个文件的话,就将其写入到ClientRequest对象
    * */
    var request = http.request(options, function (res) {
        console.log(res.statusCode);
        //获取响应回来的内容
        res.setEncoding(“utf8”);
        res.on(“data”, function (chunk) {

            console.log(chunk);
        });
    });
    request.write(‘{“user”:”tangcaiye”,”pass”:”12345”}’);
    request.end();//结束写请求体,真正向服务器发起请求

本文由澳门新萄京官方网站发布于澳门新萄京赌场网址,转载请注明出处:办事中用到的局地node模块的简练memo,javaweb男的

关键词: