本文改自非鱼的《【翻译】前端开发人员入门指南,从零开始搭建node.js, Express, Jade, mongoDB服务器》,之所以把Jade换成Ejs,是因为我觉得ejs更符合WEB编程人员的习惯,更
本文改自非鱼的《【翻译】前端开发人员入门指南,从零开始搭建node.js, Express, Jade, mongoDB服务器》,之所以把Jade换成Ejs,是因为我觉得ejs更符合WEB编程人员的习惯,更确切说应该是更符合PHP、ASP程序员的使用习惯。好了,废话不多说,直接开始教程。
第1部分 ? 15分钟安装
如果你真的是从零开始学,那就花点时间先把环境搭建起来吧。这不难,我用的是Win8,所以这看上去跟那些用Mac和ubuntu或者其它*nix系统的教程有点区别,不过大致是一样的。
第1步 ? 安装Node.JS
这很容易,进入node.js官方网站,点击绿色的大Install按钮,它会自动检测你的系统并给你一个正确的安装文件的下载。(如果没有,点击Download按钮选择你需要的下载)。运行安装程序,这样就好了。你已经装上了Node.js,和NPM(Node包管理器)可以让你很容易的安装各种有用的包到Node里。
第2步 ? 安装Express
现在我们已经让Node跑起来了,我们还需要一些东西让我们能够实际创建一个可用的站点。下面我们需要安装Express,这是一个把Node从一个原始的应用变成一个更像我们平时使用的Web服务器的框架。我们需要从Express开始,因为我们需要它提供的scaffolding功能。我们输入这么个命令:
c:node>npm install -g express
第3步 ? 创建一个Express项目
我们准备使用Express和Ejs,但是不是用来做CSS预处理的。我们会手写一些CSS。我们要用Ejs或者其它的模板引擎来处理Node和Express的数据。如果你会html的话,Ejs并不难。只要记住你需要集中精神,否则事情可能很容易出错。
现在在同一个命令行窗口中输入:
c:node>express ?sessions nodetest1
C:node>express --sessions nodetest1
create : nodetest1
create : nodetest1/package.JSON
create : nodetest1/app.js
create : nodetest1/routes
create : nodetest1/routes/index.js
create : nodetest1/routes/user.js
create : nodetest1/views
create : nodetest1/views/index.ejs
create : nodetest1/public/images
create : nodetest1/public/javascripts
create : nodetest1/public
create : nodetest1/public/stylesheets
create : nodetest1/public/stylesheets/style.css
install dependencies:
$ cd nodetest1 && npm install
run the app:
$ node app
第4步 ? 编辑依赖项
好了,我们现在有一些基本项目结构,但是还没完。你会注意到express的安装过程在你的nodetest1目录里创建了一个叫package.json的文件,用文本编辑器打开这个文件,它应该是长这样的。
{
"name": "application-name",
"version": "0.0.1",
"private": true,
"scripts": {
"start": "node app.js"
},
"dependencies": {
"express": "3.4.8",
"ejs": "*"
}
}
"dependencies": {
"express": "3.4.8",
"ejs": "*",
"mongodb": "*",
"monk": "*"
}
第5步 ? 安装依赖
现在我们定义好了项目的依赖项。*号会告诉NPM“安装最新版本”。回到命令行窗口,进入nodetest1目录,输入:
C:nodenodetest1>npm install
现在我们有了一个完整功能的App,并且可以运行了。我们试试看吧!确保你的当前目录是nodetest1目录,输入:
C:nodenodetest1>node app.js
Express server listening on port 3000
现在你已经运行起了你自己的Node JS WebServer,带有Express引擎和Ejs HTML模板引擎。不是很难啊,对吧?
第2部分 ? 好了,我们来写“Hello, World!”吧
打开你常用的文本编辑器或者其它IDE,我个人喜欢用Sublime Text。打开你的nodetest1目录下的app.js,这个文件就是你的App的核心了。你应该会看到这样的内容:
var express = require('express');
var routes = require('./routes');
var user = require('./routes/user');
var http = require('http');
var path = require('path');
在上面的这个文件的最后写上:
var app = express();
// all environments
app.set('port', process.env.PORT || 3000);
app.set('views', path.join(__dirname, 'views'));
app.set('view engine', 'ejs');
app.use(express.favicon());
app.use(express.logger('dev'));
app.use(express.bodyParser());
app.use(express.methodOverride());
app.use(app.router);
app.use(express.static(path.join(__dirname, 'public')));
注意:你需要把这一行
app.use(express.bodyParser());
app.use(express.urlencoded());
然后增加:
// development only
if ('development' == app.get('env')) {
app.use(express.errorHandler());
}
继续增加:
app.get('/', routes.index);
app.get('/users', user.list);
继续增加:
http.createServer(app).listen(app.get('port'), function(){
console.log('Express server listening on port ' + app.get('port'));
});
(以上内容在新的express生成的模板里是完整的,不需要自己写进去)
现在,我们写点有用的。我们不会直接在我们的index页面里写“Hello World!”,我们借这个机会学习一下如何使用route路由,同时学习一下Ejs引擎是如何工作的。在上面的app.js文件的app.get()这一段的后面添加一行:
app.get('/helloworld', routes.helloworld);
如果这时候你在命令行窗口按ctrl+C结束app.js进程再重启,然后用浏览器访问http://localhost:3000/helloworld,你会得到一个很激动人心的node错误和命令行窗口中的一堆崩溃提示。这是因为我们还没有修改路由去处理这个路径。来做这个吧。在你的编辑器里,进入routes目录,找到index.js,打开它。它看上去应该是这样的:
exports.index = function(req, res){
res.render('index', { title: 'Express' });
};
exports.helloworld = function(req, res){
res.render('helloworld', { title: 'Hello, World!' });
};
<!DOCTYPE html>
<html>
<head>
<title><%= title %></title>
<link rel='stylesheet' href='/stylesheets/style.css' />
</head>
<body>
<h1><%= title %></h1>
<p>Welcome to <%= title %></p>
</body>
</html>
服务器启动后,注服务器打开http://localhost:3000/helloworld,应该能看到这个漂亮的界面了:
好了!现在我们有了路由可以处理我们的模板,看到了我们想要的效果。接下来我们来做一些Model(数据层)。
第3部分 ? 创建数据库并读取数据
第1步 ? 安装Mongodb
我们先关掉文本编辑器,回到命令行窗口。先用浏览器,打开http://mongodb.org/,下载Mongo。点击主菜单里的下载链接,找到适合你的系统的版本。对于64位win8,下载64-bit *2008R2+版本。下载后是个zip文件,解压到c:mongo或者c:program filesmongo或者随便什么地方,这不重要。我们把数据保存在我们的nodetest1目录里。
第2步 ? 运行Mongod和mongo
在我们的nodetest1目录里创建一个子目录data,然后在命令行窗口中进入你的mongodb目录的bin目录里,输入:
mongod ?dbpath c:nodenodetest1data
mongo
c:mongo>mongo
MongoDB shell version: 2.4.5
connecting to: test
第3步 ? 创建一个数据库
不用担心上面的连接到test的提示。那只是当你没有指定数据库时mongo默认的一个数据库,它甚至不会创建这个名叫test的数据库,除非你增加一条记录进去。我们创建一个自己的数据库吧。在mongo的命令行窗口中,输入:
use nodetest1
第4步 ? 添加一些数据
我最喜欢的MongoDB的特性就是它使用JSON作为数据结构,这就意味着我对此非常的熟悉。如果你不熟悉JSON,先去读点相关资料吧,这超出了本教程的范围。
我们添加一些数据到collection中。在这个教程里,我们只有一个简单的数据库,留侯 username和email两个字段。我们的数据看起来是这个样子的:
{
"_id" : 1234,
"username" : "cwbuecheler",
"email" : "cwbuecheler@nospam.com"
}
db.usercollection.insert({ “username” : “testuser1″, “email” : “testuser1@testdomain.com” })
db.usercollection.find().pretty()
{
"_id" : ObjectId("5202b481d2184d390cbf6eca"),
"username" : "testuser1",
"email" : "testuser1@testdomain.com"
}
提示:作为正式服务,你应该不希望所有的数据都存在最顶层。关于mongodb数据结构的设计,多看看Google吧。
现在我们有了一条数据,我们多添加点吧。在mongo窗口中输入:
newstuff = [{ "username" : "testuser2", "email" : "testuser2@testdomain.com" }, { "username" : "testuser3", "email" : "testuser3@testdomain.com" }]
db.usercollection.insert(newstuff);
现在我们来整合前面搭建的web服务器和数据库。
第5步 ? 把mongo连接到node
现在我们来建立一个页面,把数据库里的记录显示成一个漂亮的表格。这是我们准备生成的HTML内容:
<ul>
<li><a href="mailto:testuser1@testdomain.com">testuser1</a></li>
<li><a href="mailto:testuser2@testdomain.com">testuser2</a></li>
<li><a href="mailto:testuser3@testdomain.com">testuser3</a></li>
</ul>
var express = require('express');
var routes = require('./routes');
var user = require('./routes/user');
var http = require('http');
var path = require('path');
// New Code
var mongo = require('mongodb');
var monk = require('monk');
var db = monk('localhost:27017/nodetest1');
app.get('/', routes.index);
app.get('/users', user.list);
app.get('/helloworld', routes.helloworld);
app.get('/userlist', routes.userlist(db));
第6步 ? 读取mongo中的数据并显示
用你的编辑器打开c:nodenodetest1routesidnex.js,里面有index和hello world两个route,现在我们来添加第三个:
exports.userlist = function(db) {
return function(req, res) {
var collection = db.get('usercollection');
collection.find({},{},function(e,docs){
res.render('userlist', {
"userlist" : docs
});
});
};
};
接下来建立我们的Ejs模板。在views目录下打开index.ejs,另存为userlist.ejs,然后把它的HTML修改成这样:
<!DOCTYPE html>
<html>
<head>
<title>USERLIST</title>
<link rel='stylesheet' href='/stylesheets/style.css' />
</head>
<body>
<h1>Userlist</h1>
<ul>
<%
for(var i in userlist){
%>
<li><a href=”mailto:<%=userlist[i].email%>”><%=userlist[i].username%></a></li>
<% } %>
</ul>
</body>
</html>
点提交按钮,你会看到一个“can't post to /adduser”的错误。我们来修正它。
第2步 ? 创建你的数据库处理函数
跟以前一样,我们修改app.js,然后是route文件,然后是ejs模板。不过,这里不需要ejs模板,因为我们post以后会跳转。在app.js的app.get()这一段的后面添加一行:
app.post('/adduser', routes.adduser(db));
exports.adduser = function(db) {
return function(req, res) {
// Get our fORM values. These rely on the "name" attributes
var userName = req.body.username;
var userEmail = req.body.useremail;
// Set our collection
var collection = db.get('usercollection');
// Submit to the DB
collection.insert({
"username" : userName,
"email" : userEmail
}, function (err, doc) {
if (err) {
// If it failed, return error
res.send("There was a problem adding the information to the database.");
}
else {
// If it worked, set the header so the address bar doesn't still say /adduser
res.location("userlist");
// And forward to success page
res.redirect("userlist");
}
});
}
}
这是最好的方式吗?
第3步 ? 连接数据库,写入数据
确保你的mongod在运行!然后重启你的node服务器。用浏览器打开http://localhost:3000/newuser。现在我们填入一些内容,点击提交按钮。如果顺利,我们应该回到了userlist页面,并且看到了刚刚添加的新数据。
现在我们正式的完成了使用Node.js,Exress,Ejs读取和写入Mongodb数据库,我们已经是牛X的程序员了。
恭喜你,真的。如果你认真的看完了这篇教程,并且很认真的学习而不只是复制代码,你应该对routes, views,读数据,写入数据有了完整的概念。这是你用来开发任何其它完整的Web网站所需要的一切知识点!不管你怎么想,我觉得这真挺酷的。
第5部分 ? 下一步
现在开始,你拥有无限的可能。你可以看看Mongoose, 另一个处理MongoDB数据库的Node包。它比Monk更大一些,功能也更丰富。你还可以看看Stylus,一个Express的CSS引擎。你可以Google一下Node Express Mongo Tutorial,看看接下来的内容。好好学习,天天向上。
我希望这篇教程能够有所帮助,我写这个是因为当我开始学习的时候我真的很需要这样的东西,但是又真的找不到。如果你已经看到了这里,非常感谢!
--结束END--
本文标题: 零基础搭建Node.js、Express、Ejs、Mongodb服务器及应用开发入门
本文链接: https://www.lsjlt.com/news/12055.html(转载时请注明来源链接)
有问题或投稿请发送至: 邮箱/279061341@qq.com QQ/279061341
下载Word文档到电脑,方便收藏和打印~
2024-05-11
2024-05-11
2024-05-10
2024-05-07
2024-04-30
2024-04-30
2024-04-30
2024-04-29
2024-04-29
2024-04-29
回答
回答
回答
回答
回答
回答
回答
回答
回答
回答
0