刘新修个人博客

node.js post json格式数据到服务器的几种方法

[

2016/09/04 20:31 | by 刘新修 ]

json格式被越来越多的开发者说青睐,我们常常在接口定义时使用这种格式参数进行数据交换.

今天主要给大家从繁到简的几个node.js下使用的提交 json个数参数的方式方法.

下面示例中出现的参数都做了处理,拷贝代码后需要更改这些参数同时自己写一个接收json格式的api,请求成功后再返回json格式

(一) node.js 原生自带http模块,可以解决基于http协议下的请求及回发,执行效率高,但是好多东西需要开发人员自己动手来实现,看下面代码

JavaScript代码

var http=require('http');
var body = {
"data":{
"channel" : "aaa",
"appkey" : "bbb"
},
"sign" : "22334455",
"token" : "bb667788"
};
var bodyString = JSON.stringify(body);
var headers = {
'Content-Type': 'application/json',
'Content-Length': bodyString.length
};
var options = {
host: '127.0.0.1',
port: 3005,
path: '/Config',
method: 'POST',
headers: headers
};
var req=http.request(options,function(res){
res.setEncoding('utf-8');
var responseString = '';
res.on('data', function(data) {
responseString += data;
});
res.on('end', function() {
//这里接收的参数是字符串形式,需要格式化成json格式使用
var resultObject = JSON.parse(responseString);
console.log('-----resBody-----',resultObject);
});
req.on('error', function(e) {
// TODO: handle error.
console.log('-----error-------',e);
});
});
req.write(bodyString);
req.end();

http模块比较原始,请求参数里我们要手动指定请求头类型,头长度,请求方式,主机头和端口等.

当我们将json格式参数post上去以后,得到的response 对象需要我们在 data 事件上手动处理获取到的数据, end 事件表示接收数据流已结束, error 事件是当回发数据发生错误时将自动触发此事件响应函数

(二)

大名鼎鼎的 request 模块上场了,这个模块帮我们做了很多我们不关心的东西,比如请求后得到的 response 对象,我们将不会非常繁琐的去手动捕获 data ,end ,error 事件. 取而代之的是回调函数里直接将我们关心的回发数据放到了一个变量里,看下面的代码:

此模块并发node.js 原生自带模块,首先需要 npm install request ,下面代码的参数同样做了处理

JavaScript代码

var request=require('request');
var options = {
headers: {"Connection": "close"},
url: 'http://127.0.0.1:3005/Config',
method: 'POST',
json:true,
body: {data:{channel : "aaa",appkey : "bbb"},sign : "ccc",token : "ddd"}
};
function callback(error, response, data) {
if (!error && response.statusCode == 200) {
console.log('----info------',data);
}
}
request(options, callback);

代码明显比第一种方式少了很多,callback 里面的 data 参数就是我们请求路径后得到的内容,而且我们在 options 中指定了 json:true ,所以请求和回发的数据自动转变成了 json 对象.我们看下这次的运行结果:

node request.js

下面还有一种更简单的方法和大家分享

(三)

也是一个第三方模块,叫做 request-json

看名字就非常容易理解,有关json 格式参数的请求模块,使用也非常方便.

首先 npm install request-json 安装此模块,定义好 json请求参数对象,见下面代码:

JavaScript代码

request = require('request-json');
var client = request.newClient('http://127.0.0.1:3005/');
var data = {data:{channel : "aaa",appkey : "bbb"},sign : "4444",token : "555"};
client.post('Config', data, function(err, res, body) {
console.log(res.statusCode,body);
});

返回的body 也是自动序列化成json对象,见运行结果

前面的 200 是 res.statusCode 回发状态值,接着输出的是我们得到的json对象,无论从使用还是理解上,都是最简单的一种方法.

NodeJs平台 | 评论(0) | 引用(0) | 阅读(1090)

nodeJs构建一个HttpServer

[

2016/09/04 20:19 | by 刘新修 ]

将下面代码放入server.js中

JavaScript代码

var http = require("http");
http.createServer(function(request, response) {
console.log('request received');
response.writeHead(200, {"Content-Type": "text/plain"});
response.write("Hello World");
response.end();
}).listen(8888);
console.log('server started');

执行node server.js
打开http://localhost:8888/，页面显示Hello World

JavaScript代码

var http=require('http');
var data={key:'value', hello:'world'};
var srv=http.createServer(function (req, res) {
res.writeHead(200,{'Content-Type': 'application/json'});
res.end(JSON.stringify(data));
});
srv.listen(8080,function() {
console.log('listening on localhost:8080');
});

Tags: node , httpserver

NodeJs平台 | 评论(0) | 引用(0) | 阅读(1048)

nodejs 提供了一个 node-uuid 模块用于生成 uuid:

[

2016/09/04 14:07 | by 刘新修 ]

首先执行：npm install node-uuid -g

JavaScript代码

var uuid = require('node-uuid');
//var uuid = require('/usr/local/nodejs/lib/node_modules/node-uuid');
console.log(uuid.v1())
console.log(uuid.v4())

注明：如果在linux下编译安装node可以使用软连接ls 或这直接写绝对路径引入需要的nmp模块!

v1 是基于时间戳生成uuid

v4是随机生成uuid

结果：

57af5b10-3a76-11e5-922a-75f42afeee38
f3917fb9-9bde-4ec1-a7cf-966251b3d22a

Tags: node , uuid

NodeJs平台 | 评论(0) | 引用(0) | 阅读(2955)

nodejs中exports与module.exports的区别

[

2016/09/04 13:17 | by 刘新修 ]

你肯定非常熟悉nodejs模块中的exports对象，你可以用它创建你的模块。例如：（假设这是rocker.js文件）

JavaScript代码

exports.name = function() {
console.log('My name is Lemmy Kilmister');
};

在另一个文件中你这样引用

JavaScript代码

var rocker = require('./rocker.js');
rocker.name(); // 'My name is Lemmy Kilmister'

那到底Module.exports是什么呢？它是否合法呢？

其实，Module.exports才是真正的接口，exports只不过是它的一个辅助工具。　最终返回给调用的是Module.exports而不是exports。

所有的exports收集到的属性和方法，都赋值给了Module.exports。当然，这有个前提，就是Module.exports本身不具备任何属性和方法。如果，Module.exports已经具备一些属性和方法，那么exports收集来的信息将被忽略。

修改rocker.js如下：

JavaScript代码

module.exports = 'ROCK IT!';
exports.name = function() {
console.log('My name is Lemmy Kilmister');
};

再次引用执行rocker.js

JavaScript代码

var rocker = require('./rocker.js');
rocker.name(); // TypeError: Object ROCK IT! has no method 'name'

发现报错：对象“ROCK IT!”没有name方法

rocker模块忽略了exports收集的name方法，返回了一个字符串“ROCK IT!”。由此可知，你的模块并不一定非得返回“实例化对象”。你的模块可以是任何合法的javascript对象--boolean, number, date, JSON, string, function, array等等。

你的模块可以是任何你设置给它的东西。如果你没有显式的给Module.exports设置任何属性和方法，那么你的模块就是exports设置给Module.exports的属性。

下面例子中，你的模块是一个类：

JavaScript代码

module.exports = function(name, age) {
this.name = name;
this.age = age;
this.about = function() {
console.log(this.name +' is '+ this.age +' years old');
};
};

可以这样应用它：

JavaScript代码

var Rocker = require('./rocker.js');
var r = new Rocker('Ozzy', 62);
r.about(); // Ozzy is 62 years old

下面例子中，你的模块是一个数组：

JavaScript代码

module.exports = ['Lemmy Kilmister', 'Ozzy Osbourne', 'Ronnie James Dio', 'Steven Tyler', 'Mick Jagger'];

可以这样应用它：

JavaScript代码

var rocker = require('./rocker.js');
console.log('Rockin in heaven: ' + rocker[2]); //Rockin in heaven: Ronnie James Dio

现在你明白了，如果你想你的模块是一个特定的类型就用Module.exports。如果你想的模块是一个典型的“实例化对象”就用exports。

给Module.exports添加属性类似于给exports添加属性。例如：

JavaScript代码

module.exports.name = function() {
console.log('My name is Lemmy Kilmister');
};

同样，exports是这样的

JavaScript代码

exports.name = function() {
console.log('My name is Lemmy Kilmister');
};

请注意，这两种结果并不想同。前面已经提到module.exports是真正的接口，exports只不过是它的辅助工具。推荐使用exports导出，除非你打算从原来的“实例化对象”改变成一个类型。

NodeJs平台 | 评论(0) | 引用(0) | 阅读(975)

gcc-4.4.7升级至gcc-5.3.0 后编译安装node-v4.5.0

[

2016/09/02 15:19 | by 刘新修 ]

yum -y install gcc gcc-c++

因centOS6.6/+ 最高版本的gcc也只到4.4.7版本,只好手动升级一下了。

.tar.gz 格式解压为 tar -zxvf xx.tar.gz

.tar.bz2 格式解压为 tar -jxvf xx.tar.bz2

下载gcc-4.8.2源码:

wget ftp://gcc.gnu.org/pub/gcc/releases/gcc-4.8.2/gcc-4.8.2.tar.bz2

wget ftp://gcc.gnu.org/pub/gcc/releases/gcc-4.9.1/gcc-4.9.1.tar.gz

tar jxvf gcc-4.8.2.tar.bz2

执行自动下载依赖(gmp-4.3.2、mpfr-2.4.2、mpc-0.8.1)

/home/installSoft/gcc-4.8.2/contrib/download_prerequisites

或者自己下载也行(根据gcc-4.8自动匹配好的版本收集比较兼容)：

wget ftp://gcc.gnu.org/pub/gcc/infrastructure/gmp-4.3.2.tar.bz2

wget ftp://gcc.gnu.org/pub/gcc/infrastructure/mpfr-2.4.2.tar.bz2

wget ftp://gcc.gnu.org/pub/gcc/infrastructure/mpc-0.8.1.tar.gz

=====================================================================================

第一部分安装gcc的依赖库

=====================================================================================

gcc 编译需要三个额外库gmp、mpfr、mpc，下载并按照下面的顺序安装它们，如下:

wget ftp://ftp.gnu.org/gnu/gmp/gmp-5.1.3.tar.gz

wget ftp://ftp.gnu.org/gnu/mpfr/mpfr-3.1.2.tar.gz

wget http://www.multiprecision.org/mpc/download/mpc-1.0.tar.gz

tar -zxvf gmp-5.1.3.tar.gz

cd gmp-5.1.3

./configure --prefix=/usr/local/gmp-5.1.3

make && make install

cd ..

tar -zxvf mpfr-3.1.2.tar.gz

cd mpfr-3.1.2

./configure --prefix=/usr/local/mpfr-3.1.2 --with-gmp=/usr/local/gmp-5.1.3

make && make install

cd ..

tar -zxvf mpc-1.0.tar.gz

cd mpc-1.0

./configure --prefix=/usr/local/mpc-1.0 --with-gmp=/usr/local/gmp-5.1.3 --with-mpfr=/usr/local/mpfr-3.1.2

make && make install

cd ..

=====================================================================================

第二部分安装gcc

=====================================================================================

wget http://ftp.gnu.org/gnu/gcc/gcc-5.3.0/gcc-5.3.0.tar.gz

cd gcc-build-5.3.0

../configure --prefix=/usr/local/gcc -enable-threads=posix -disable-checking -disable-multilib -enable-languages=c,c++ --with-gmp=/usr/local/gmp-5.1.3 --with-mpfr=/usr/local/mpfr-3.1.2 --with-mpc=/usr/local/mpc-1.0

make

make install

执行以下看看装好没有：

/usr/local/gcc/bin/gcc -v

gcc version 4.8.2 (GCC)

卸载旧版本

yum remove -y gcc gcc-c++

updatedb

链接新版本

cd /usr/bin

ln -s /usr/local/gcc/bin/gcc gcc

ln -s /usr/local/gcc/bin/g++ g++

检查版本

gcc -v

g++ -v

=====================================================================================

第三部分安装nodeJs

=====================================================================================

1、NodeJS下载

https://nodejs.org/en/download/

[root@test1 packages]# wget https://nodejs.org/dist/v4.5.0/node-v4.5.0.tar.gz

2、解压安装

tar -zxvf node-v4.5.0.tar.gz

cd node-v4.5.0

./configure --prefix=/usr/local/nodejs

make

make install

=============================================

如果configure默认安装路径node复制到bin下：

cp /usr/local/bin/node /usr/sbin/

如果configure指定安装路径node复制到bin下：

/usr/local/nodejs/bin/node -v

cp /usr/local/nodejs/bin/node /usr/sbin/

==============================================

安装nodeJS时候报：CC: command not found 是因为gcc升级后，同时也删除了cc标签链接至gcc的命令，cc是unix下的产物，linux下的cc就是gcc

链接cc至gcc[库]一般放在/usr/bin

ln -s /usr/bin/gcc /usr/bin/cc

[系统短命令]一般放在/usr/sbin

cp /usr/local/nodejs/bin/node /usr/sbin/

安装完成，查看node版本号:

[root@Hongkong node-v4.5.0]# node -v

v4.5.0

[root@Hongkong node-v4.5.0]#

=====================================================================================

依次编译安装下载的依赖包(好像已经自动解压了)：

cd /home/installSoft/gcc-4.8.2/contrib/gmp

mkdir build

cd build

../configure

sudo make

sudo make install

cd /home/installSoft/gcc-4.8.2/contrib/mpfr

mkdir build

cd build

../configure --prefix=/usr/local/gcc/mpfr-2.4.2 --with-gmp=/usr/local/gcc/gmp-4.3.2

sudo make

sudo make install

cd /home/installSoft/gcc-4.8.2/contrib/mpc

mkdir build

cd build

../configure --prefix=/usr/local/gcc/mpc-0.8.1 --with-mpfr=/usr/local/gcc/mpfr-2.4.2 --with-gmp=/usr/local/gcc/gmp-4.3.2

sudo make

sudo make install

删除原先的目录：

rm -rf /usr/local/gcc

编译安装gcc4.8.2

cd /home/installSoft/gcc-4.8.2/

mkdir build

../configure --prefix=/usr/local/gcc --enable-threads=posix --disable-checking --enable-languages=c,c++ --disable-multilib --with-gmp=/usr/local/gcc/gmp-4.3.2 --with-mpfr=/usr/local/gcc/mpfr-2.4.2 --with-mpc=/usr/local/gcc/mpc-0.8.1

sudo make

sudo make install

../configure --prefix=/usr/local/gcc --enable-checking=release --enable-languages=c,c++ --disable-multilib

如果make出现configure: error: cannot compute suffix of object files: cannot compile

原来如此，接下来把mpc ,gmp,mpfr 的lib文件夹果断加入到 LD_LIBRARY_PATH 变量

注意此处的三个lib，根据你所安装的路径来设置：

export LD_LIBRARY_PATH=$LD_LIBRARY_PATH:/usr/local/gcc/mpc-0.8.1/lib:/usr/local/gcc/gmp-4.3.2/lib:/usr/local/gcc/mpfr-2.4.2/lib

/home/installSoft/node-v4.5.0/out/Release/mksnapshot: /usr/lib64/libstdc++.so.6: version `GLIBCXX_3.4.15' not found (required by /home/installSoft/node-v4.5.0/out/Release/mksnapshot)

strings /usr/lib64/libstdc++.so.6 | grep GLIBCXX

查看 GLIBCXX 版本：

[root@Hongkong node-v4.5.0]# strings /usr/lib64/libstdc++.so.6 | grep GLIBCXX

GLIBCXX_3.4

GLIBCXX_3.4.1

GLIBCXX_3.4.2

GLIBCXX_3.4.3

GLIBCXX_3.4.4

GLIBCXX_3.4.5

GLIBCXX_3.4.6

GLIBCXX_3.4.7

GLIBCXX_3.4.8

GLIBCXX_3.4.9

GLIBCXX_3.4.10

GLIBCXX_3.4.11

GLIBCXX_3.4.12

GLIBCXX_3.4.13

GLIBCXX_FORCE_NEW

GLIBCXX_DEBUG_MESSAGE_LENGTH

[root@Hongkong node-v4.5.0]#

这里并没有查看到: GLIBCXX_3.4.15

执行以下命令，查找编译 gcc 时生成的最新动态库：

find / -name "libstdc++.so.6"

[root@Hongkong node-v4.5.0]# find / -name "libstdc++.so.6"

/home/installSoft/gcc-4.8.2/build/stage1-x86_64-unknown-linux-gnu/libstdc++-v3/src/.libs/libstdc++.so.6

/home/installSoft/gcc-4.8.2/build/x86_64-unknown-linux-gnu/libstdc++-v3/src/.libs/libstdc++.so.6

/home/installSoft/gcc-4.8.2/build/prev-x86_64-unknown-linux-gnu/libstdc++-v3/src/.libs/libstdc++.so.6

/usr/lib64/libstdc++.so.6

/usr/local/gcc/lib64/libstdc++.so.6

[root@Hongkong node-v4.5.0]#

取第一条：

/home/installSoft/gcc-4.8.2/build/stage1-i686-pc-linux-gnu/libstdc++-v3/src/.libs/libstdc++.so.6 (32位|其他)

/home/installSoft/gcc-4.8.2/build/stage1-x86_64-unknown-linux-gnu/libstdc++-v3/src/.libs/libstdc++.so.6 (64位|本例)

将上面的最新动态库 libstdc++.so.6 复制到 /usr/lib 目录下(32位)：

将上面的最新动态库 libstdc++.so.6 复制到 /usr/lib64 目录下(64位)：

在64位系统下复制文件重新覆盖，出现?请输入y

cp /home/installSoft/gcc-4.8.2/build/stage1-x86_64-unknown-linux-gnu/libstdc++-v3/src/.libs/libstdc++.so.6 /usr/lib64

cp /ftp/gcc-5.3.0/gcc-build-5.3.0/stage1-x86_64-unknown-linux-gnu/libstdc++-v3/src/.libs/libstdc++.so.6 /usr/lib64

复制后，修改系统默认动态库的指向，即：重建默认库的软连接。

cp /ftp/gcc-5.3.0/gcc-build-5.3.0/stage1-x86_64-unknown-linux-gnu/libstdc++-v3/src/.libs/libstdc++.so.6.0.21 /usr/lib64

切换工作目录至/usr/lib64：

cd /usr/lib64

删除原来软连接:

rm -rf libstdc++.so.6

将默认库的软连接指向最新动态库：

ln -s libstdc++.so.6.0.21 libstdc++.so.6

完成后再次执行：

[root@Hongkong node-v4.5.0]# strings /usr/lib64/libstdc++.so.6 | grep GLIBCXX

GLIBCXX_3.4

GLIBCXX_3.4.1

GLIBCXX_3.4.2

GLIBCXX_3.4.3

GLIBCXX_3.4.4

GLIBCXX_3.4.5

GLIBCXX_3.4.6

GLIBCXX_3.4.7

GLIBCXX_3.4.8

GLIBCXX_3.4.9

GLIBCXX_3.4.10

GLIBCXX_3.4.11

GLIBCXX_3.4.12

GLIBCXX_3.4.13

GLIBCXX_3.4.14

GLIBCXX_3.4.15

GLIBCXX_3.4.16

GLIBCXX_3.4.17

GLIBCXX_3.4.18

GLIBCXX_3.4.19

GLIBCXX_FORCE_NEW

GLIBCXX_DEBUG_MESSAGE_LENGTH

[root@Hongkong node-v4.5.0]#

这里已经查看到: GLIBCXX_3.4.15

添加共享库路径，su到root编辑ld.so.conf文件，添加如下内容到文件中：

vi /etc/ld.so.conf

/usr/local/gcc/mpc-0.8.1/lib

/usr/local/gcc/gmp-4.3.2/lib

/usr/local/gcc/mpfr-2.4.2/lib

/usr/local/gmp-5.1.3/lib

/usr/local/mpfr-3.1.2/lib

/usr/local/mpc-1.0/lib

保存退出，执行ldconfig命令

执行以下看看装好没有：

/usr/local/gcc/bin/gcc -v

gcc version 4.8.2 (GCC)

卸载旧版本

yum remove -y gcc gcc-c++

updatedb

链接新版本

cd /usr/bin

ln -s /usr/local/gcc/bin/gcc gcc

ln -s /usr/local/gcc/bin/g++ g++

检查版本

gcc -v

Tags: gcc , node

NodeJs平台 | 评论(0) | 引用(0) | 阅读(1512)

ArtTemplate_List 实例

[

2016/08/02 16:56 | by 刘新修 ]

ArtTemplate_List 实例1

XML/HTML代码

<!DOCTYPE HTML>
<html>
<head>
<meta charset="UTF-8">
<title>basic-demo</title>
<script src="../dist/template.js"></script>
</head>
<body>
<div id="content"></div>
<script id="test" type="text/html">
{{if isAdmin}}
<h1>{{title}}</h1>
<ul>
{{each list as value i}}
<li>索引 {{i + 1}} ：{{value}}</li>
{{/each}}
</ul>
{{/if}}
</script>
<script>
var data = {
title: '基本例子',
isAdmin: true,
list: ['文艺', '博客', '摄影', '电影', '民谣', '旅行', '吉他']
};
var html = template('test', data);
document.getElementById('content').innerHTML = html;
</script>
</body>
</html

ArtTemplate_List 实例2

XML/HTML代码

<!DOCTYPE HTML>
<html>
<head>
<meta charset="UTF-8">
<title>compile-demo</title>
<script src="../dist/template.js"></script>
</head>
<body>
<h1>在javascript中存放模板</h1>
<div id="content"></div>
<script>
var source = '<ul>'
+ '{{each list as value i}}'
+ '<li>索引 {{i + 1}} ：{{value}}</li>'
+ '{{/each}}'
+ '</ul>';
var render = template.compile(source);
var html = render({
list: ['摄影', '电影', '民谣', '旅行', '吉他']
});
document.getElementById('content').innerHTML = html;
</script>
</body>
</html>

XML/HTML代码

<!DOCTYPE HTML>
<html>
<head>
<meta charset="UTF-8">
<title>basic-demo</title>
<script src="../dist/template.js"></script>
</head>
<body>
<h1>在javascript中存放模板</h1>
<div id="content"></div>
<script>
/***** 小模版 *****/
var source=''
+'<ul>'
+ '{{each list as value i}}'
+ '<li>索引 {{i+1}} ：{{value}}</li>'
+ '{{/each}}'
+'</ul>';
/***** 定义变关联逻辑代码片段（小模版） *****/
var connectJs=template.compile(source);
/***** 最终的数据源等于==逻辑代码关联数据 *****/
var htmlData=connectJs({
list: ['摄影', '电影', '民谣', '旅行', '吉他']
});
/***** 把最终处理后的数据源插入到页面 *****/
document.getElementById('content').innerHTML=htmlData;
</script>
</body>
</html>

实例访问地址：http://code.liuxinxiu.com/jstpl/artTemplate/demo/best.html

include嵌入子模板:

XML/HTML代码

<!DOCTYPE HTML>
<html>
<head>
<meta charset="UTF-8">
<title>include-demo</title>
<script src="../dist/template.js"></script>
</head>
<body>
<div id="content"></div>
<script id="test" type="text/html">
<h1>{{title}}</h1>
{{include 'list'}}
</script>
<script id="list" type="text/html">
<ul>
{{each list as value i}}
<li>索引 {{i + 1}} ：{{value}}</li>
{{/each}}
</ul>
</script>
<script>
var data = {
title: '嵌入子模板',
list: ['文艺', '博客', '摄影', '电影', '民谣', '旅行', '吉他']
};
var html = template('test', data);
document.getElementById('content').innerHTML = html;
</script>
</body>
</html>

理解部分（使用普通for循环加声明语法，进行数组遍历）1：

XML/HTML代码

<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>AtrTemplate</title>
</head>
<body>
<div id="content"></div>
<script src="js/template-native.js"></script>
<script id="test" type="text/html">
<%for( i = 0; i < content.length; i++) {%>
<h1><%=content[i].title%></h1>
<p>条目内容 : <%=content[i].list%></p>
<%}%>
// 等同于普通的for循环，在普通的for循环上给每一行语法声明加上<% xx %>
// 等同于普通的for循环，在普通的for循环上取值部分加上类似jsp的变量声明 <%= xx %>
//for(i=0;i<content.length;i++){
// <h1><%=content[i].title%></h1>
// <p>条目内容 : <%=content[i].list%></p>
//}
</script>
<script>
/***** 自造数据，content为数组List便于测试循环 *****/
var data={
content:[
{
title: "artTemplate",
list: "新一代 javascript 模板引擎",
},
{
title: "特性",
list: "性能卓越，执行速度快"
}
]
};
/***** 用template映射数据到逻辑代码区域|也可以理解称给逻辑代码片段绑定数据源 *****/
var html=template('test',data);
/***** 选择页面Dom元素，插入处理后的数据 *****/
document.getElementById("content").innerHTML=html;
</script>
</body>
</html>

理解部分（使用普通for循环加声明语法，进行双层嵌套数组遍历）2：

XML/HTML代码

<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>AtrTemplate -- 简介</title>
</head>
<body>
<div id="content"></div>
<script src="js/template-native.js"></script>
<script id="listtemp">
</script>
<script id="test" type="text/html">
//循环嵌套，循环数组里的数组
<%for(i=0;i<content.length;i++){%>
<h1><%=content[i].title%></h1>
<ul>
<%for(j=0;j<content[i].list.length;j++){%>
<li><%=content[i].list[j]%></li>
<%}%>
</ul>
<%}%>
</script>
<script>
var data={
content:[
{
title: "artTemplate",
list:["新一代 javascript 模板引擎"]
},
{
title: "特性",
list: [
"性能卓越，执行速度通常是 Mustache 与 tmpl 的 20 多倍",
"支持运行时调试，可精确定位异常模板所在语句",
" 对 NodeJS Express 友好支持",
"安全，默认对输出进行转义、在沙箱中运行编译后的代码（Node版本可以安全执行用户上传的模板）",
" 支持include语句",
"可在浏览器端实现按路径加载模板",
"支持预编译，可将模板转换成为非常精简的 js 文件",
"模板语句简洁，无需前缀引用数据，有简洁版本与原生语法版本可选",
"支持所有流行的浏览器"
]
}
]
};
/***** 用template映射数据到逻辑代码区域|也可以理解称给逻辑代码片段绑定数据源 *****/
var html=template('test',data);
/***** 选择页面Dom元素，插入处理后的数据 *****/
document.getElementById("content").innerHTML=html;
</script>
</body>
</html>

Tags: template

H5/JS/CSS | 评论(0) | 引用(0) | 阅读(1200)

JS 格式化日期

[

2016/07/15 21:03 | by 刘新修 ]

JavaScript代码

/***** 格式化日期 *****/
function formatDate(_strTime,_format){
var date=new Date(_strTime);
var paddNum=function(num){
num+="";
return num.replace(/^(\d)$/,"0$1");
}
//指定格式字符
var cfg={
yyyy:date.getFullYear() //年:4位
,yy :date.getFullYear().toString().substring(2) //年:2位
,M :date.getMonth() + 1 //月:如果1位的时候不补0
,MM :paddNum(date.getMonth()+1) //月:如果1位的时候补0
,d :date.getDate() //日:如果1位的时候不补0
,dd :paddNum(date.getDate()) //日:如果1位的时候补0
,hh :date.getHours() //时
,mm :date.getMinutes() //分
,ss :date.getSeconds() //秒
}
_format||(_format="yyyy-MM-dd hh:mm:ss");
return _format.replace(/([a-z])(\1)*/ig,function(m){return cfg[m];});
}
formatDate("Tue Jul 16 01:07:00 CST 2013","yyyy-MM-dd ");

H5/JS/CSS | 评论(0) | 引用(0) | 阅读(1110)

前端开发工程化—— webpack 的搭建与配置

[

2016/06/12 17:48 | by 刘新修 ]

webpack 是一个npm包，所以我们通过 npm 命令来全局安装：

D:\wmnp3\nodeJs>npm install webpack -g

安装完成后，命令行下就有 webpack 命令可用，执行 webpack --help 可以查看 webpack 提供的各种命令。

当然如果常规项目还是把依赖写入 package.json 包去更人性化，初始化创建一个package.json文件：

cd D:\wmnp3\wwwroot\nodeJs\MVC\helloWorld

npm init

npm install webpack --save-dev 在当前目录下安装局域的webpack

安装 sass-loader 相关的加载器：

安装 CSS 相关的加载器：

安装配置图片加载器url-loader

它会将样式中引用到的图片转为模块来处理，使用该加载器需要先进行安装：

安装 babel-loader 相关的加载器：

使用Babel转译器，帮助我们将ES6代码转译为主流浏览器支持的ES5代码。

babel-loader加载器能将ES6的代码转换成ES5代码，这使我们现在可以使用ES6了；我们在使用之前，我们需要安装babel-loader

npm install babel-loader --save-dev --registry=https://registry.npm.taobao.org

npm install babel-preset-es2015 --save-dev

安装babel-preset-es2015

安装babel-runtime

ExpressJS启动服务：http://127.0.0.1:3000

webpack相关命令如下：

webpack 最基本的启动webpack命令

webpack -w 提供watch方法，实时进行打包更新

webpack -p 对打包后的文件进行压缩

webpack -d 提供SourceMaps，方便调试

webpack --colors 输出结果带彩色，比如：会用红色显示耗时较长的步骤

webpack --profile 输出性能数据，可以看到每一步的耗时

webpack --display-modules 默认情况下 node_modules 下的模块会被隐藏，加上这个参数可以显示这些被隐藏的模块

webpack --help 帮助说明

webpack打包会根据依赖自动并合代码模块，使用webpack -p 压缩代码成一行.从而加快页面请求速度，使用前后对比：

压缩代码前：

压缩入口代码后：

最后附上webpack.config.js 的配置文件：

JavaScript代码

var path=require("path");
var webpack=require('webpack');
var ExtractTextPlugin=require("extract-text-webpack-plugin");
/**** webpack.config.js ****/
module.exports={
context:__dirname+'/assets', //requre('a.js')的时候从哪个路径查找
entry:{
main:__dirname+"/assets/js/public/main.js",
index:__dirname+"/assets/js/public/index.js"
},
/**** 新添加的module属性 ****/
output:{
path:__dirname+'/build/js/',
filename:'[name].bundle.js', //模版基于entry的key
publicPath:"/xfile/" //引用你的文件时考虑使用的地址(可设成http地址, 如:http://cdn.my.com)
},
/**** 新添加的module属性 ****/
module:{
loaders:[
{
test:/\.(jpg|png|svg)$/i,
loaders:[
'image?...',
'url?limit=10000&name=img/[name].[hash:8].[ext]',
]
},
{
test:/\.js$/,
exclude:/(node_modules|bower_components)/,
loader:'babel',
query:{
presets:['es2015'],
plugins:['transform-runtime']
}
},
{test: /\.css$/,loader: ExtractTextPlugin.extract("style-loader","css-loader")},
{test: /\.(jpg|png|svg)$/,loader:"url?limit=8192"},
{test: /\.scss$/, loader:"style!css!sass"}
]
},
plugins:[
//new webpack.optimize.CommonsChunkPlugin('common.js'),
new ExtractTextPlugin("[name].css"),
new webpack.ProvidePlugin({
"jQuery":path.resolve(
__dirname,
"js/lib/jquery/jquery-1.8.3.js"
),
"$":path.resolve(
__dirname,
"js/lib/jquery/jquery-1.8.3.js"
)
}),
]
}

Tags: node , webpack

NodeJs平台 | 评论(0) | 引用(0) | 阅读(1870)

requireJS在Node平台安装、创建build实例、JS模块化加载、打包

[

2016/05/28 22:41 | by 刘新修 ]

requireJS在Node平台安装、创建build实例、JS模块化加载、打包

requireJS在Node平台上安装（推荐使用NodeJs绿色版环境套件）：

C++代码

npm install -g requirejs
D:\wmnp3\wwwroot\nodeJs\MVC\helloWorld>npm install -g requirejs
npm http GET https://registry.npmjs.org/requirejs
npm http 200 https://registry.npmjs.org/requirejs
npm http GET https://registry.npmjs.org/requirejs/-/requirejs-2.2.0.tgz
npm http 200 https://registry.npmjs.org/requirejs/-/requirejs-2.2.0.tgz
D:\wmnp3\nodeJs\r.js -> D:\wmnp3\nodeJs\node_modules\requirejs\bin\r.js
D:\wmnp3\nodeJs\r_js -> D:\wmnp3\nodeJs\node_modules\requirejs\bin\r.js
requirejs@2.2.0 D:\wmnp3\nodeJs\node_modules\requirejs
D:\wmnp3\wwwroot\nodeJs\MVC\helloWorld>

创建build.js （对应wmnp环境套件：D:\wmnp3\nodeJs\build\test.build.js）

JavaScript代码

({
appDir:'../../wwwroot/nodeJs/MVC/helloWorld/public/js',
baseUrl:'test',
dir:'../../wwwroot/nodeJs/MVC/helloWorld/public/js/test-built',
paths:{
jquery:'empty:'
},
modules:[
{
name:'b'
},
{
name:'c'
},
]
})
/**********************************************
"appDir": "./", /**** 应用根路径 ****
"dir": "dist", /**** 打包的文件生成到哪个目录
"optimize": "none", /**** 是否压缩 ****
***********************************************/

实例1（对应wmnp环境套件：http://127.0.0.1:3000/test_page）::

JavaScript代码

/***************************************************************
require.config(); 等同于 requirejs.config();
***************************************************************/
requirejs.config({
baseUrl:'/js/test',
paths:{
jquery:'../lib/jquery.min',
hello:'hello',
afile:'a',
bfile:'b',
cfile:'c',
},
shim:{
only:{exports:'only'},
/***** shim中hello源对应paths模块hello.JS *****/
hello:{
/***** 用exports导入当函数，必须换成 init 函数导入多个函数的文件 *****/
init:function(){
return{
uinfos:"liuxinxiu",
hello1:hello1,
hello2:hello2
}
}
}
}
});
/******************************************************************************************************
require和define 都可以加载依赖元素(都是用于加载依赖）
1. require 要用于加载类相关JS文件，build后不参与代码合并，所用到的资源只进行压缩，http自动请求其他文件.
2. define 真正意义上的模块化处理，load本文件及外文件内的代码片段，build后参与代码合并，http自动请求其他文件.
******************************************************************************************************/
/***********************************************************
require(['afile','bfile','cfile'],function(a,b,c){
var x1=require("afile");
var x2=require("bfile");
var x3=require("cfile");
});
***************************************************************/
/**************************************************************
define(['bfile'],function(b){
console.log('run c.js :'+b.color+','+b.width);
});
***************************************************************/
requirejs(["http://code.liuxinxiu.com/php/Interface/getUserInfo.php?Jsoncallback=define"],
function(data){
//The data object will be the API response for the
//JSONP data call.
console.log(data);
}
);
require(['jquery'],function(){
/***** 调用后写入你的jq代码 *****/
$("body").attr("yy","111");
});
/******************************************************************************
require.config();
1. shim中exports定义好的函数可以用（requirejs+define）引入并使用
2. shim中init定义好的函数则必须以用（define）引入并使用
*************************************************************************/
requirejs(['only'],function(only){
only();
});
define(['hello'],function(data){
/***** 定义值直接取，函数直接调用 *****/
console.log(data.uinfos);
data.hello2();
});

实例2（对应wmnp环境套件：http://127.0.0.1:3000/test_load）:：

JavaScript代码

requirejs.config({
baseUrl:'/js/test',
paths:{
"afile":'a?y=1',
"bfile":'b',
"cfile":'c',
"core1":'cores/core1',
"core2":'cores/core2',
"util1":'utils/util1',
"util2":'utils/util2',
"service1":'services/service1',
"service2":'services/service2',
}
});
/***************************************
****************************************/
require(['c'],function(){
//a();
})

执行（压缩/打包）：D:\wmnp3\nodeJs>node node_modules\requirejs\bin\r.js -o build\test.build.js

Tags: requirejs

NodeJs平台 | 评论(0) | 引用(0) | 阅读(1341)

Express.js 构建工程实例 ---- [ 环境安装、控制器/路由设置、Post+Jsonp接口、ejs模版、全局变量 ]

[

2016/05/28 21:40 | by 刘新修 ]

Express.js 构建工程实例 ---- [ 环境安装、控制器/路由设置、Post+Jsonp接口、ejs模版、全局变量 ]

ExpressJS在Node环境上安装( 绿色版Node运行环境套件下载 )：

app.js 代码如下：

JavaScript代码

/******************************************************
*************** global modules ******************
******************************************************/
var express=require('express');
var path=require('path');
var favicon=require('serve-favicon');
var logger=require('morgan');
var cookieParser=require('cookie-parser');
var bodyParser=require('body-parser');
var routes=require('./routes/index');
//var redis=require('./routes/redis');
var app=express();
/******************************************************
*************** view engine setup ******************
******************************************************/
/****************** jade模版 *********************/
/*******************************************************
app.set('views',path.join(__dirname,'views/jade/'));
app.set('view engine','jade'); //jade or ejs
********************************************************/
/****************** ejs模版 *********************/
app.set('views',path.join(__dirname,'views/ejs/'));
app.set('view engine','ejs'); //jade or ejs
/****************** ejs模版 *********************/
/******************************************************
****************** routes setup ********************
******************************************************/
// uncomment after placing your favicon in /public
//app.use(favicon(path.join(__dirname, 'public', 'favicon.ico')));
app.use(logger('dev'));
app.use(bodyParser.json());
app.use(bodyParser.urlencoded({extended:false}));
app.use(cookieParser());
app.use(express.static(path.join(__dirname,'public')));
app.use('/',routes);
/****************** routes setup *********************/
/*******************************************************
app.use('/redis',redis);
app.use('/jsonp',routes);
app.use('/login',routes);
*************************************************/
/******************************************************
****************** 服务错误处理 ********************
******************************************************/
/***** catch 404 and forward to error handler *****/
app.use(function(req,res,next){
var err=new Error('404 Not Found');
err.status=404;
next(err);
});
// error handlers
// development error handler
/***** 通用错误处理程序 *****/
if(app.get('env')==='development'){
app.use(function(err,req,res,next){
res.status(err.status||500);
res.render('sys/error',{
message:err.message,
error:err,
version:process.version
});
});
}
// production error handler
// no stacktraces leaked to user
app.use(function(err,req,res,next){
res.status(err.status||500);
res.render('sys/error',{
message:err.message,
error:{}
});
});
/***** 通用错误处理程序 *****/
module.exports=app;

routes/index.js 代码如下：

JavaScript代码

/******************************************************
*************** router *************************
******************************************************/
var express=require('express');
var router=express.Router();
var url=require("url"); //解析GET请求
var query=require("querystring"); //解析POST请求
/************* GET home page demo *************/
router.get('/',function(req,res,next){
res.render('sys/index',{title:'Express'});
});
router.get('/jsonp',function(req,res,next){
res.render('main/jsonp',{
title:'jsonp'
});
});
router.get('/login',function(req,res,next){
res.render('main/login',{
title:'The Entrar-shadow Website',
fonts:'Member Login',
username:'Liuxinxiu',
});
});
router.get('/test_load',function(req,res,next){
var build=req.query.build;
res.render('test/test_load',{
title:'build',
build:build
});
});
router.get('/test_page',function(req,res,next){
var build=req.query.build;
res.render('test/test_page',{
title:'test_page',
build:build
});
});
/*
app.get('/jsonp',function(req,res,next){
res.jsonp({status:'jsonp'});
});
*/
/************* 自造Json数据 *************/
var userData='PHN0eWxlPip7bWFyZ2luOjA7cGFkZGluZzowO31oMXtmb250LXNpemU6MTZweDt0ZXh0LWFsaWduOmNlbnRlcjsgbGluZS1oZWlnaHQ6NDVweDt9Ym9keXtjb2xvcjojMzMzO2ZvbnQtc2l6ZToxNHB4O2ZvbnQtZmFtaWx5OiJNaWNyb3NvZnRZYWhlaSI7YmFja2dyb3VuZDojQjdDQUNDO31kaXZ7Ym9yZGVyOjFweCBzb2xpZCAjNDA1RTdCOyBib3JkZXItYm90dG9tOjA7IHdpZHRoOjk1JTsgbWFyZ2luOjAgYXV0bztiYWNrZ3JvdW5kOiNmZmY7Y29udGVudDoiIjtkaXNwbGF5OnRhYmxlO2NsZWFyOmJvdGh9bGl7bGluZS1oZWlnaHQ6MzVweDtsaXN0LXN0eWxlOm5vbmU7d2lkdGg6MjUlO3RleHQtYWxpZ246Y2VudGVyO2JvcmRlci1ib3R0b206MXB4IHNvbGlkICM0MDVFN0I7ZmxvYXQ6bGVmdDt9PC9zdHlsZT48aDE+5pyA6L+R6aOO5LqR5Lq65ZGY5ZCN5Y2VPC9oMT48ZGl2Pg0KCTx1bD4NCgkJPGxpPumjjua4heaJrDwvbGk+DQoJCTxsaT4xMTAxPC9saT4NCgkJPGxpPjIzPC9saT4NCgkJPGxpPjUyODE5OTExPC9saT4NCgk8L3VsPg0KCQ0KCTx1bD4NCgkJPGxpPuiuuOW/l+mjnjwvbGk+DQoJCTxsaT4xMTAxPC9saT4NCgkJPGxpPjIzPC9saT4NCgkJPGxpPjUyODE5OTExPC9saT4NCgk8L3VsPg0KCQ0KCTx1bD4NCgkJPGxpPuS7pOeLkOWGsjwvbGk+DQoJCTxsaT4xMTAyPC9saT4NCgkJPGxpPjIxPC9saT4NCgkJPGxpPjUyODE5OTAxPC9saT4NCgk8L3VsPg0KCQ0KCTx1bD4NCgkJPGxpPuS7u+aIkeihjDwvbGk+DQoJCTxsaT4xMTAzPC9saT4NCgkJPGxpPjIyPC9saT4NCgkJPGxpPjUyODE5OTkxPC9saT4NCgk8L3VsPg0KCQ0KCTx1bD4NCgkJPGxpPuS7u+ebiOebiDwvbGk+DQoJCTxsaT4xMTA0PC9saT4NCgkJPGxpPjI0PC9saT4NCgkJPGxpPjUyODE5OTgxPC9saT4NCgk8L3VsPg0KCQ0KCTx1bD4NCgkJPGxpPuS4nOaWueS4jei0pTwvbGk+DQoJCTxsaT4xMTA1PC9saT4NCgkJPGxpPjI2PC9saT4NCgkJPGxpPjUyODE5OTgxPC9saT4NCgk8L3VsPg0KCTwvZGl2Pg==';
var dataJson={status:1,message:"这是一个JSONP接口,success!",dataList:userData,JsonArray:[0,1,2,3,4,5]};
/************* 处理GET请求(jsonp需判断参数单独处理) *************/
router.get('/API/sendGet/jsonpInfo.do',function(req,res){
//res.contentType('json');//返回的数据类型
//res.writeHead(200,{"Content-Type":"text/json"});
res.setHeader('Content-Type','text/json;charset=UTF-8');
var params=url.parse(req.url,true).query; //解释url参数部分name=zzl&email=zzl@sina.com
/**** 获取请求过来的跨域回调函数名称 ****/
var reqQuery=req.query,Jsoncallback=req.query.Jsoncallback;
/**** 如果有Jsoncallback的情况 ****/
if(reqQuery&&Jsoncallback){
//console.log(params.query.Jsoncallback);
//res.jsonp({status:200,message:"这是一个JSONP接口",data:[]});
//res.send(JSON.stringify({status:200,message:"success!这是一个JSONP接口",data:[]}));
/**** 拼成一个JS字符串 ****/
var str=Jsoncallback+'('+JSON.stringify(dataJson)+')';
//res.json(str);
//res.write(str);
res.end(str);
}
/**** 没有Jsoncallback的情况 ****/
else{
res.json({status:200,message:"这是一个JSON接口",data:[]});
}
});
/************* 处理POST请求(Body/x-www-form-urlencoded) **************/
router.post('/API/sendPost/loginSubmit.do',function(req,res){
var username=req.body.username;
var password=req.body.password;
//console.log(username!='');
if((username&&password!='')){
console.log("Username="+username+",password="+password);
/**********************************************************************************
/************** JSON.stringify(v) 和 res.json 都是格式数据 ********************/
/*********************************************************************************
res.json({status:1,info:"数据提交成功！",username:JSON.stringify(username)});
/*********************************************************************************/
res.json({status:1,info:"数据提交成功！",username:username});
}else{
res.end("0");
}
});
module.exports=router;

ejs 模版：

XML/HTML代码

<!DOCTYPE html>
<html>
<head>
<title>test</title>
<meta charset="utf-8">
<link type='text/css' href="/css/login/home.css" rel='stylesheet' />
<meta name="viewport" content="width=device-width, initial-scale=1">
</head>
<body>
<h1>test/build=</h1>
<%if(1+1===2){%>
<h1><%= build %></h1>
<%}%>
</body>
<%if(build==null){%>
<script src="http://localhost:3000/js/lib/require.js" data-main="http://127.0.0.1:3000/js/test/app_page.js"></script>
<%}%>
<%if(build!=null&&build==1){%>
<script src="http://localhost:3000/js/lib/require.js" data-main="http://127.0.0.1:3000/js/test-built/test/app_page.js"></script>
<%}%>
</html>

Tags: express , jsonp , node

NodeJs平台 | 评论(0) | 引用(0) | 阅读(1211)

node.js post json格式数据到服务器的几种方法

nodeJs构建一个HttpServer

nodejs 提供了一个 node-uuid 模块用于生成 uuid:

nodejs中exports与module.exports的区别

gcc-4.4.7升级至gcc-5.3.0 后编译安装node-v4.5.0

ArtTemplate_List 实例

JS 格式化日期

前端开发工程化—— webpack 的搭建与配置

requireJS在Node平台安装、创建build实例、JS模块化加载、打包

Express.js 构建工程实例 ---- [ 环境安装、控制器/路由设置、Post+Jsonp接口、ejs模版、全局变量 ]

分类

个人简介

Follow me

搜索

最新日志

新浪微博

最新评论

链接

归档

日历

统计

其他

< 2020 > < 1 >
日	一	二	三	四	五	六
			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	28	29	30	31