代码改变世界

针对express新version，通过Node.js, Express, Ejs, Mongodb搭建一个简单的web应用。可实现用户的查看和增加。

2017-04-24 22:11  Ap不解释  阅读(315)  评论(0)  编辑  收藏  举报

本文来自于看了 工具猫的  “从零开始搭建Node.js, Express, Ejs, Mongodb服务器”这篇文章之后，针对工具的版本的不同，对代码进行了一些自己的改动。

这是我的第一篇博客，写的有不好之处，烦请见谅。

1.安装工具，搭建环境

这里我就不赘述了。直接引用别人的安装搭建环境的步骤就好，如果遇到java版本，环境变量等的问题，请自己百度谷歌之。

1.1安装node

这很容易，进入Node.js官方网站，点击绿色的大Install按钮，它会自动检测你的系统并给你一个正确的安装文件的下载。（如果没有，点击Download按钮选择你需要的下载）。运行安装程序，这样就好了。你已经装上了Node.js，和NPM（Node包管理器）可以让你很容易的安装各种有用的包到Node里。

  • 打开一个终端窗口
  • cd进入一个你想存放你的测试App的目录，比如C:\>cd NodeJS_Project

1.2安装express

此时在有了node之后，我们需要安装express，

这是一个把Node从一个原始的应用变成一个更像我们平时使用的Web服务器的框架。我们需要从Express开始，因为我们需要它提供的scaffolding功能。我们现在输入这个命令：

npm install -g express。这样Express就被正确的安装到我们的Node里了，并且已经设为全局可用的。你会在命令行窗口看到一堆输出，大部分是http 304和GET请求，这是正常的。Express应该已经装好并可用了。

1.3用express创建项目

我们使用express和Ejs来实现出来express和node的数据。现在在命令行输入：（-e就是加入了Ejs的support）。

这个时候，我们已经利用了express工具新建了一个项目。

1.4编辑依赖项

进入到新建的项目nodeTest01中，我们可以看到有一个package.json的文件。打开它可以看到有如下依赖项：

我们要加入对mongodb 和monk的依赖。改完之后，文件所示：

1.5安装依赖项

定义好了依赖之后，在项目的目录下，运行命令：npm install。那么项目就会根据我们的package.json文件安装项目所需要的依赖的module。

运行完这个命令之后，您的项目的文件夹下面应该会新建node_modules这个文件夹，里面放的就是刚要安装的依赖的工具。

 对于express4.X版本，在当前目录输入npm start命令，启动项目。

回车之后如下：，然后在浏览器输入：http://localhost:3000/，显示如下：

2.实现一个简单的应用。

原文中有实现一个helloworld。我这里就直接跳过了，想要看helloworld实现的朋友可以去原文“从零开始搭建Node.js, Express, Ejs, Mongodb服务器”中学习。

 2.1安装mongodb，实现本地的数据库的运行。

我们先关掉文本编辑器，回到命令行窗口。先用浏览器，打开http://mongodb.org/，下载Mongo。点击主菜单里的下载链接，找到适合你的系统的版本。对于64位win8，下载64-bit *2008R2+版本。下载后是个zip文件，解压到c:\mongo或者c:\program files\mongo或者随便什么地方，这不重要。我们把数据保存在我们的nodeTest01目录里。

在nodeTest01里面新建一个文件夹，文件夹命名为：data。

后在命令行窗口中进入你的mongodb安装目录的bin目录里，输入：

  • mongod –dbpath C:\NodeJS_Projects\nodeTest01\data          

（C:\NodeJS_Projects\nodeTest01\data）是我的工程目录path

看到如下图命令，说明你的数据库已经在我们nodeTest01项目下面启动了，开始工作，嗯，服务器开始运行。：

现在你需要另外打开一个命令行窗口，进入mongo目录的bin目录中，输入

  • mongo

 提示如下：

2.2创建一个数据库

在mongodb的命令行中，输入：use nodeTest01， 这个时候我们就创建了一个叫nodeTest01的数据库，并转到这个数据库中，以便进行对数据库的下一步操作。

现在我们给这个数据库插入添加一些初始的数据：

这里插一句，mongodb是以json作为数据格式的。

在mongo的窗口中，输入：

  • db.usercollection.insert({ "username":"testuser1", "email":"testuser1@testdomain.com" })

db就是刚创建的数据库nodeTest01，usercollection就是我们的表。

然后我们可以用命令：

  • db.usercollection.find().pretty()来输出刚插入的数据

在mongo窗口中输入:

newstuff = [{ "username" : "testuser2", "email" : "testuser2@testdomain.com" }, { "username" : "testuser3", "email" : "testuser3@testdomain.com" }]
db.usercollection.insert(newstuff);

 

用来多插入几行数据。

2.3将数据库和我们的web项目连接起来

在index.js里面添加如下几行代码：

这几行会告诉app我们需要连接MongoDB，我们用Monk来负责这个连接，我们数据库位置是localhost:27017/nodeTest01。

然后再在inde.js里面加入如下代码：

router.get('/userlist', function(req, res, next) {
    
    var collection = db.get('usercollection');
    collection.find({}, {}, function(e, docs) {
        res.render('userlist', {
            "userlist": docs
        });
    });
});

 

这段代码的意思是，当浏览器访问/userlist路径的时候，我们会读取db里面的数据。我们读取usercollection，做一个查找，返回的数据保存在docs变量中。一旦我们读取到了内容，就调用render来渲染userlist模板页面，把获取到的docs变量作为模板引擎中的userlist变量传递进去。这时我们就需要调用views目录下面的userlist.ejs
我们在views目录下新建userlist.ejs，然后在这个文件里面写入以下内容：

<!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>

保存文件，重启node服务器。希望你还记得怎么重启。打开浏览器，访问http://localhost:3000/userlist，你应该能看到这样的界面：

2.4实现从网页端往数据库里面写入数据

注意此时的添加时post的service，所以我们在routes的index.js里面输入如下代码：

router.get('/newuser', function(req, res, next) {
res.render('newuser', { title: 'Add New User' });
});

router.post('/adduser', function(req, res, next) {
     // 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");
            }
        });
});

 

 然后在views的目录下面新建一个文件newuser.ejs.

输入如下代码：

<!DOCTYPE html>
<html>
<head>
<title>Add User</title>
<link rel=’stylesheet’ href=’/stylesheets/style.css’ />
</head>
<body>
<h1><%= title %></h1>
<form name="adduser" method="post" action="/adduser">
<input type="text" placeholder="username" name="username" />
<input type="text" placeholder="useremail" name="useremail" />
<input type="submit" value="submit" />
</form>
</body>
</html>

 

 

3– 下一步

现在开始，你拥有无限的可能。你可以看看Mongoose, 另一个处理MongoDB数据库的Node包。它比Monk更大一些，功能也更丰富。你还可以看看Stylus，一个Express的CSS引擎。你可以Google一下Node Express Mongo Tutorial，看看接下来的内容。好好学习，天天向上。

我希望这篇教程能够有所帮助，我写这个是因为当我开始学习的时候我真的很需要这样的东西，但是又真的找不到。如果你已经看到了这里，非常感谢！

在学习的过程中，非常感谢下面这些大牛们提供的教程，幻灯片，视频，和tweets。

关于作者

Christopher Buecheler is an autodidact polymath, which is an incredibly pretentious way of saying that he’s a jack of all trades who didn’t like college. By day he’s a front-end developer for a small San Francisco startup. By night he’s a popular novelist, with four books released. He also is an award-winning amateur mixologist who writes cocktail articles for Primer Magazine and runs a cocktail blog, and he brews beer on occasion. He follows the NBA avidly and the NFL casually (and sometimes glances at MLB). He lives in Providence, Rhode Island, with his awesome French wife and their two cats. He is trying to learn French but wishes he could just download it from the Matrix.

改自：http://www.unfish.net/archives/772-20131207.html