《Node.js实战》博客实例 express4.x

2025-02-07 技术教程

大致看了一阵子nodejs的书，对语法有初步的了解。但是还是写不出个实例来。最近学长给我的这本书感觉挺入门的《Node.js实战》电子工业出版社。毕竟图书馆借的，出版时间已经是两年前了。很多代码都更新了。特别是express 4.x相对与express 3.x有很多的修改。比如把中间件独立出来。好处是有。这样express的更新就不用受这些中间件的影响坏处也许主要是对我这种新手吧。大部分教材都是express 3.x甚至是 2.x 的。这样学习起来就有困难。也许不会有人看到这个。即使解决不了别人的问题也想记录一下，说不定哪天我就忘了。

中间件问题可参考http://www.tuicool.com/articles/YBVRvuJ

我使用express版本：

C:\Users\Meow>express -V

4.13.1

express 4中可能会发现一个报错就是express不是内部或外部命令

因为express 4精简了很多文件我们需要另外安装命令工具

$npm install -g express-generator

在自己预设的路径下输入：

$ express -e blog

$cd blog & npm install

就用express新建了一个项目并指定使用ejs模版引擎

express4.x 不是使用$node app来启用而是：$npm start

之后就可访问http://localhost:3000/

修改routes\index.js //与书中代码不同

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
32
33
34
35
36

varexpress=require('express');
varrouter=express.Router();

router.get('/',function(req,res){
res.render('index',{title:'主页'})
});

router.get('/reg',function(req,res){
res.render('reg',{title:'注册'})
});

router.post('/reg',function(req,res){

});

router.get('/login',function(req,res){
res.render('login',{title:'登录'})
});

router.post('/login',function(req,res){

});

router.get('/post',function(req,res){
res.render('post',{title:'发表'})
});

router.post('/post',function(req,res){

});

router.get('/logout',function(req,res){

});

module.exports=router;

2.安装mongodb

教程：http://www.runoob.com/mongodb/mongodb-window-install.html

3.修改package.js

"dependencies":

内添加：

注意上方的,分割

执行 $npm install

4.根目录创建 settings.js//与书中代码一致我按上方网址教程创建的mongodb数据库名叫db 为防止错误与书中代码略不同实际是否影响可自己尝试

module.exports={cookieSecret:'myblog',db:'db',host:'localhost'};

5.在目录下创建文件夹 models 并在其中创建 db.js 添加如下代码：

varsettings=require('../settings'),Db=require('mongodb').Db,Connection=require('mongodb').Connection,Server=require('mongodb').Server;module.exports=newDb(settings.db,newServer(settings.host,Connection.DEFAULT_PORT,{}),{safe:true});

6.打开app.js在相应位置添加：//与书中有多处不同认真检查

varMongoStore=require('connect-mongo')(session);varsettings=require('./settings');

app.use(session({secret:settings.cookieSecret,key:settings.db,cookie:{maxAge:1000*60*60*24*30},store:newMongoStore({//db:settings.dburl:'mongodb://localhost/db'})}));

7.修改views\index.ejs

<%-includeheader%>这是主页<%-includefooter%>

8.views下新建header.ejs

<!DOCTYPEhtml><html><head><metacharset="UTF-8"/><title>Blog</title><linkrel='stylesheet'href='/stylesheets/style.css'/></head><body><header><h2><%=title%></h2></header><nav><span><atitle="主页"href="/">home</a></span><span><atitle="登录"href="/login">login</a></span><span><atitle="注册"href="/reg">register</a></span></nav><article>

9.再新建footer.ejs

</article></body></html>

10.修改 public\stylesheets\style.css

*{padding:0;margin:0;}body{width:600px;margin:2emauto;padding:02em;font-size:14px;font-family:"MicrosoftYaHei";}p{line-height:24px;margin:1em0;}header{padding:.5em0;border-bottom:1pxsolid#cccccc;}nav{position:fixed;left:12em;font-family:"MicrosoftYaHei";font-size:1.1em;text-transform:uppercase;width:9em;text-align:right;}nava{display:block;text-decoration:none;padding:.7em1em;color:#000000;}nava:hover{background-color:#ff0000;color:#f9f9f9;-webkit-transition:color.2slinear;}article{font-size:16px;padding-top:.5em;}articlea{color:#dd0000;text-decoration:none;}articlea:hover{color:#333333;text-decoration:underline;}.info{font-size:14px;}

之后就可以执行 $npm start 并访问查看了！

初步写成的：

https://github.com/justmeow/blog_beta.git