【NodeJS 学习笔记03】先运行起来再说

星空闪亮最善良的男孩儿 發表於 2014-1-30 13:47:00

【NodeJS 学习笔记03】先运行起来再说

<h1>前言</h1>
最近同事推荐了一个不错的网址：https://github.com/nswbmw/N-blog/wiki/_pages
里面的教程很是详细，我们现在跟着他的节奏学习下NodeJS，一个简单的博客
我们这次来个过年七天乐......看看能不能nodeJS来个入门
<h1>让nodeJS跑起来</h1>
第一步当然是安装nodeJS环境了，现在windows安装nodeJS比较快了，直接下载即可：
http://www.nodejs.org/download/
这里根据需要下载，下载完成后直接下一步下一步即可，完了我们就具有nodeJS环境了
第二步，为了方便我们后面操作，我们直接在D盘见了一个文件夹blog
然后打开windows命令行工具，进入d盘，输入：
<div class="cnblogs_code">
<pre>express -e blog</pre>
</div>
然后里面可能有依赖包，我们需要进入blog目录安装（安装的配置由package.json提供）：
<div class="cnblogs_code">
<pre>npm install</pre>
</div>
这个样子，我们依赖包就下载下来了，其中依赖包与java的包文件，.net的bll文件应该是一个概念
这个时候，我们的程序已经可以运行了：
<div class="cnblogs_code">
<pre>node app</pre>
</div>
<div class="cnblogs_code">
<pre>D:\blog>node app
Express server listening on port 3000</pre>
</div>
这个时候打开浏览器就有反应了：
<img src="//images0.cnblogs.com/blog/294743/201401/291331283599809.png" alt="">
这里我们使用的是express（一个流行的nodeJSweb开发框架），并且使用了ejs模板引擎
<h1>文件结构</h1>
初始化文件目录结构如下：
<img src="//images0.cnblogs.com/blog/294743/201401/291335011099679.png" alt="">
app.js 为入口文件
package.json 为模块依赖文件，我们使用npm install时候他会以其配置在网上下载相关包
node_modules 为下载下来的模块文件（package.json）
public 存放静态资源文件
routes 存放路由文件
views 存放相关视图模板文件
这个样子，我们基本目录结构就出来了，我们这里先简单说下node_modules这个目录
<h2>node_modules/ejs</h2>
我们刚刚说了，这里面存放着下载下来的模块，说白了就是js文件集合
<img src="//images0.cnblogs.com/blog/294743/201401/291340488757536.png" alt="">
<div class="cnblogs_code"><img id="code_img_closed_583048b0-06af-400c-82fe-c3d6f21f8004" class="code_img_closed" src="https://images.cnblogs.com/OutliningIndicators/ContractedBlock.gif" alt=""><img id="code_img_opened_583048b0-06af-400c-82fe-c3d6f21f8004" class="code_img_opened" style="display: none" src="https://images.cnblogs.com/OutliningIndicators/ExpandedBlockStart.gif" alt="">
<div id="cnblogs_code_open_583048b0-06af-400c-82fe-c3d6f21f8004" class="cnblogs_code_hide">
<pre> 1 var parse = exports.parse = function(str, options){
 2 var options = options || {}
 3 , open = options.open || exports.open || '<%'
 4 , close = options.close || exports.close || '%>'
 5 , filename = options.filename
 6 , compileDebug = options.compileDebug !== false
 7 , buf = "";
 8
 9 buf += 'var buf = [];';
10 if (false !== options._with) buf += '\nwith (locals || {}) { (function(){ ';
11 buf += '\n buf.push(\'';
12
13 var lineno = 1;
14
15 var consumeEOL = false;
16 for (var i = 0, len = str.length; i < len; ++i) {
17 var stri = str;
18 if (str.slice(i, open.length + i) == open) {
19 i += open.length
20
21 var prefix, postfix, line = (compileDebug ? '__stack.lineno=' : '') + lineno;
22 switch (str) {
23 case '=':
24 prefix = "', escape((" + line + ', ';
25 postfix = ")), '";
26 ++i;
27 break;
28 case '-':
29 prefix = "', (" + line + ', ';
30 postfix = "), '";
31 ++i;
32 break;
33 default:
34 prefix = "');" + line + ';';
35 postfix = "; buf.push('";
36 }
37
38 var end = str.indexOf(close, i)
39 , js = str.substring(i, end)
40 , start = i
41 , include = null
42 , n = 0;
43
44 if ('-' == js){
45 js = js.substring(0, js.length - 2);
46 consumeEOL = true;
47 }
48
49 if (0 == js.trim().indexOf('include')) {
50 var name = js.trim().slice(7).trim();
51 if (!filename) throw new Error('filename option is required for includes');
52 var path = resolveInclude(name, filename);
53 include = read(path, 'utf8');
54 include = exports.parse(include, { filename: path, _with: false, open: open, close: close, compileDebug: compileDebug });
55 buf += "' + (function(){" + include + "})() + '";
56 js = '';
57 }
58
59 while (~(n = js.indexOf("\n", n))) n++, lineno++;
60 if (js.substr(0, 1) == ':') js = filtered(js);
61 if (js) {
62 if (js.lastIndexOf('//') > js.lastIndexOf('\n')) js += '\n';
63 buf += prefix;
64 buf += js;
65 buf += postfix;
66 }
67 i += end - start + close.length - 1;
68
69 } else if (stri == "\\") {
70 buf += "\\\\";
71 } else if (stri == "'") {
72 buf += "\\'";
73 } else if (stri == "\r") {
74 // ignore
75 } else if (stri == "\n") {
76 if (consumeEOL) {
77 consumeEOL = false;
78 } else {
79 buf += "\\n";
80 lineno++;
81 }
82 } else {
83 buf += stri;
84 }
85 }
86
87 if (false !== options._with) buf += "'); })();\n} \nreturn buf.join('');";
88 else buf += "');\nreturn buf.join('');";
89 return buf;
90 };</pre>
</div>
View Code </div>
就如，我们这里使用到的ejs模板以及express模块，然后我们好奇的走进了ejs的程序看看究竟有何不同
打开，ejs.js后，我们抽一点代码出来看：这段代码我们比较熟悉，他与underscore的模板引擎代码思想一致，都是将模板解析为字符串
然后通过eval或者new Function的方法将之转换为函数，并且传入自己的数据对象好解析
至于具体工作流程，现在我们还不知道，只能放到后面点研究了，好了我们现在进入其他模块
<h2>app.js</h2>
作为入口文件，app.js扮演着举足轻重的角色：
<div class="cnblogs_code">
<pre> 1 /**
 2 * Module dependencies.
 3*/
 4
 5 var express = require('express');
 6 var routes = require('./routes');
 7 var user = require('./routes/user');
 8 var http = require('http');
 9 var path = require('path');
10
11 var app = express();
12
13 // all environments
14 app.set('port', process.env.PORT || 3000);
15 app.set('views', path.join(__dirname, 'views'));
16 app.set('view engine', 'ejs');
17 app.use(express.favicon());
18 app.use(express.logger('dev'));
19 app.use(express.json());
20 app.use(express.urlencoded());
21 app.use(express.methodOverride());
22 app.use(app.router);
23 app.use(express.static(path.join(__dirname, 'public')));
24
25 // development only
26 if ('development' == app.get('env')) {
27 app.use(express.errorHandler());
28 }
29
30 app.get('/', routes.index);
31 app.get('/users', user.list);
32
33 http.createServer(app).listen(app.get('port'), function(){
34 console.log('Express server listening on port ' + app.get('port'));
35 });</pre>
</div>
我们通过require()命令加载express、http模块，并且会加载routes目录下index user等模板文件
app.set('port', process.env.PORT || 3000)为设置启动时候的端口
app.set('views', __dirname + '/views')为设置存放模板文件的路径，其中__dirname为全局变量，存放当前脚本所在目录，我们这样可以查看：
<div class="cnblogs_code">
<pre>console.log(__dirname);//index.js加入以下代码
/**
D:\blog>node app
Express server li
D:\blog\routes
*/</pre>
</div>
至于这个__dirname是如何获得的，我们暂时也不需要关注
app.set('view engine', 'ejs') 为设置模板引擎为ejs
app.use(express.favicon()) 是设置图标想修改的话就自己去搞public下面的images文件
app.use(express.logger('dev')); express依赖于connect这里就内建中间件会输出一些日志
app.use(express.json()); 用以解析请求体，这里就会把字符串动态转换为json对象
app.use(express.methodOverride()); connect内建中间件，用以处理post请求，并可以伪装put等http方法
app.use(app.router); 调用路由器解析规则
app.use(express.static(path.join(__dirname, 'public'))); connect内建中间件，设置根目录下的public存放静态文件
<div class="cnblogs_code">
<pre>if ('development' == app.get('env')) {
app.use(express.errorHandler());
}</pre>
</div>
这句话意思是开发状况下要输出错误信息
<div class="cnblogs_code">
<pre>app.get('/', routes.index);
app.get('/users', user.list);</pre>
</div>
这两句都是访问时刻具体的处理文件了，比如这里直接访问时默认访问的是routes.index
然后其内部才真正解析模板数据：
<div class="cnblogs_code">
<pre>exports.index = function (req, res) {
console.log(__dirname);
res.render('index', { title: 'Express' });
};</pre>
</div>
<div class="cnblogs_code">
<pre>http.createServer(app).listen(app.get('port'), function () {
console.log('Express server listening on port ' + app.get('port'));
});</pre>
</div>
最后会调用上述代码创建http服务器并监听3000端口，成功后便可在网页上访问了
<h1>路由</h1>
前面我们使用这个方法构建路由
<div class="cnblogs_code">
<pre>app.get('/', routes.index);</pre>
</div>
上面代码可以使用这个代码取代（写在app里面）
<div class="cnblogs_code">
<pre>app.get('/', function (req, res) {
res.render('index', { title: 'Express' });
});</pre>
</div>
这段代码的意思是访问主页时，调用ejs模板引擎，来渲染index.ejs模板文件
现在再做一点修改，以上代码实现了路由功能，但是我们不能将路由相关代码放到app中，路由多了后app就会变得臃肿，所以我们将相关配置放入index中
所以删除app中相关路由功能，在app结尾加入代码：
<div class="cnblogs_code">
<pre>routes(app);</pre>
</div>
然后修改index.js
<div class="cnblogs_code">
<pre>module.exports = function(app) {
app.get('/', function (req, res) {
res.render('index', { title: 'Express' });
});
};</pre>
</div>
这个代码是怎么组织的现在还不清楚，也不去关注了，我们后面慢慢看
<h2>路由规则</h2>
express封装了多种http请求，我们一般使用get/post两种
<div class="cnblogs_code">
<pre>app.get();
app.post();</pre>
</div>
第一个参数为请求路径，第二个参数为回调函数，还是两个参数为request与response
然后，对于req（request）又有以下规则
req.query 处理get请求，获取get请求参数
req.params 处理/:xxx形式的get或者post请求
req.body 处理post请求，获取post请求体
req.params 处理get和post请求，但查找优先级为req.params->req.body->req.query
路径规则还支持正则，具体我们以后再说......
<h2>添加路由规则</h2>
当我们访问不存在的链接时：
<img src="//images0.cnblogs.com/blog/294743/201401/291505021729992.png" alt="">
因为不存在/y的路由规则，他也不说public下的文件，所以就404了
现在我们在index.js中添加相关路由： 
<div class="cnblogs_code">
<pre>module.exports = function (app) {
app.get('/', function (req, res) {
res.render('index', { title: 'Express' });
});

app.get('/y', function (req, res) {
res.send('叶小钗');
});
};</pre>
</div>
这里我页面乱码了：
<img src="//images0.cnblogs.com/blog/294743/201401/291512336255270.png" alt="">
原因是下载下来后，我的文件是gbk的编码，我们要将他改成utf-8就可以了，模板引擎这块我们就不管他了，我们进入下一节
<h1>注册功能</h1>
这里我们跟着原博主一起做一个注册的简单功能，这里使用mongo db作为数据库，后面我们再依次完善功能
新建一个register路由，并且为其新建register模板，于是我们开始吧
① 在index中新建路由
<div class="cnblogs_code">
<pre>app.get('/register', function (req, res) {
res.render('index', { title: '注册页面' });
});</pre>
</div>
<div class="cnblogs_code">
<pre>module.exports = function (app) {
app.get('/', function (req, res) {
res.render('index', { title: 'Express' });
});

app.get('/y', function (req, res) {
res.send('叶小钗');
});

app.get('/register', function (req, res) {
res.render('register', { title: '注册页面' });

});</pre>
</div>
<div class="cnblogs_code">
<pre><!DOCTYPE html>
<html>
<head>
<title><%= title %></title>
<link rel='stylesheet' href='/stylesheets/style.css' />
</head>
<body>
<h1><%= title %></h1>
<form method="post">
 <div>用户名：<input type="text" name="name"/></div>
 <div>密码：<input type="password" name="password"/></div>
 <div><input type="submit" value="登陆"/></div>
</form>
</body>
</html></pre>
</div>
这个样子，我们页面就形成了：
<img src="//images0.cnblogs.com/blog/294743/201401/291611578284120.png" alt="">
基本程序有了，我们现在需要数据库支持，于是我们要安装mongoDB环境
<h2>MongoDB</h2>
MongoDB是一个基于分布式文件存储的NoSQL的一种，由C++编写，MongoDB支持的数据结构松散，类似json，我们知道json可以支持任何类型，所以可以搞出很复杂的结构
<div class="cnblogs_code">
<pre>{
id: 1,
name: '叶小钗',
frinds: [
{ id: 2, name: '素还真' },
{ id: 3, name: '一页书' }
]
}</pre>
</div>
<h2>安装MongoDB</h2>
首先去http://www.mongodb.org/downloads下载安装文件，然后将文件拷贝到D盘改名mongodb，然后在里面新建blog文件夹 
然后打开命令行工具将目录切换至bin，输入： 
<div class="cnblogs_code">
<pre>mongod -dbpath d:\mongodb\blog</pre>
</div>
设置blog文件夹为工程目录并启动数据库，为了方便以后我们写一个命令以后直接点击就启动数据库了：
<div class="cnblogs_code">
<pre>d:\mongodb\bin\mongod.exe -dbpath d:\mongodb\blog</pre>
</div>
<h2>链接MongoDB</h2>
数据库安装成功后，我们的程序还需要相关的“驱动”程序才能链接数据库，这个时候当然要下载包......
打开package.json在dependencies新加一行
<div class="cnblogs_code">
<pre>{
"name": "application-name",
"version": "0.0.1",
"private": true,
"scripts": {
"start": "node app.js"
},
"dependencies": {
"express": "3.4.8",
"ejs": "*",
"mongodb": "*"
}
}</pre>
</div>
然后运行npm install下载新的依赖包，这个样子与mongoDB相关的驱动就有了，要链接mysql等数据库还需要其他依赖包
这时在根目录下创建setting.js文件，保存数据库连接信息
<div class="cnblogs_code">
<pre>module.exports = {
cookieSecret: 'myblog',
db: 'blog',
host: 'localhost'
}; </pre>
</div>
db是数据库名称，host是数据库地址，cookieSecret用于cookie加密与数据库无关
接下来根目录下新建models文件夹，并在models文件夹下新建db.js
<div class="cnblogs_code">
<pre>var settings = require('../settings'),
Db = require('mongodb').Db,
Connection = require('mongodb').Connection,
Server = require('mongodb').Server;
module.exports = new Db(settings.db, new Server(settings.host, Connection.DEFAULT_PORT), {safe: true});</pre>
</div>
<div class="cnblogs_code">
<pre>new Db(settings.db, new Server(settings.host, Connection.DEFAULT_PORT), { safe: true });</pre>
</div>
设置数据库名，数据库地址和数据库端口创建一个数据库实例，并通过module.exports导出实例，这样就可以通过require对数据库进行读写
需要成功写入数据库，服务器端程序就需要处理post信息，于是我们在models文件夹下新建user.js
<div class="cnblogs_code">
<pre>var mongodb = require('./db');

function User(user) {
this.name = user.name;
this.password = user.password;
};

module.exports = User;

//存储用户信息
User.prototype.save = function (callback) {
//要存入数据库的用户文档
var user = {
name: this.name,
password: this.password
};
//打开数据库
mongodb.open(function (err, db) {
if (err) {
 return callback(err); //错误，返回 err 信息
 }
//读取 users 集合
db.collection('users', function (err, collection) {
 if (err) {
 mongodb.close();
 return callback(err); //错误，返回 err 信息
 }
 //将用户数据插入 users 集合
 collection.insert(user, {
 safe: true
 }, function (err, user) {
 mongodb.close();
 if (err) {
 return callback(err); //错误，返回 err 信息
 }
 callback(null, user[0]); //成功！err 为 null，并返回存储后的用户文档
 });
});
});
};</pre>
</div>
<div class="cnblogs_code">
<pre>//读取用户信息
User.get = function(name, callback) {
//打开数据库
mongodb.open(function (err, db) {
if (err) {
 return callback(err);//错误，返回 err 信息
 }
//读取 users 集合
db.collection('users', function (err, collection) {
 if (err) {
 mongodb.close();
 return callback(err);//错误，返回 err 信息
 }
 //查找用户名（name键）值为 name 一个文档
 collection.findOne({
 name: name
 }, function (err, user) {
 mongodb.close();
 if (err) {
 return callback(err);//失败！返回 err 信息
 }
 callback(null, user);//成功！返回查询的用户信息
 });
});
});
};</pre>
</div>
这里一个写数据，一个读数据，处理程序有了，现在需要在index.js前面加上如下程序
<div class="cnblogs_code">
<pre>var User = require('../models/user.js');</pre>
</div>
再修改其中的app.post('/register')
<div class="cnblogs_code">
<pre>app.post('/register', function (req, res) {
var name = req.body.name;
var pwd = req.body.password;
var newUser = new User({
name: name,
password: pwd
});
newUser.save(function (err, user) {
//相关操作，写入session
 res.send(user);
});
});</pre>
</div>
然后点击注册后便会有反应了
<img src="//images0.cnblogs.com/blog/294743/201401/301339567505074.png" alt=""><img src="//images0.cnblogs.com/blog/294743/201401/301340021255398.png" alt="">
 
如果此时不能确定是否写入数据库，便可进入数据库查询一番，首先切换至数据库目录
<div class="cnblogs_code">
<pre>D:\mongodb\bin></pre>
</div>
输入：
<div class="cnblogs_code">
<pre>mongo</pre>
</div>
然后切换其数据库连接至blog
<div class="cnblogs_code">
<pre>use blog</pre>
</div>
最后输入
<div class="cnblogs_code">
<pre>db.users.find()</pre>
</div>
<img src="//images0.cnblogs.com/blog/294743/201401/301344491879498.png" alt="">
我们大家就开心的看到数据写入了，于是今天的学习暂时告一段落
<h1>结语</h1>
今天我们跟着一篇博客完成了从安装到写入数据库的操作，明天让我们来将其它方面加入，逐步深化nodeJS的学习
 

</div>
<div id="MySignature" role="contentinfo">
<img id="view_img" src="https://img2022.cnblogs.com/blog/294743/202202/294743-20220216140902628-1163053035.png" width="80%" alt="" border="0"> 
来源：https://www.cnblogs.com/yexiaochai/p/3527418.html

頁: [1]

琼殿技术论坛's Archiver

【NodeJS 学习笔记03】先运行起来再说