码迷,mamicode.com
首页 > Web开发 > 详细

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

时间:2016-05-01 01:16:13      阅读:435      评论:0      收藏:0      [点我收藏+]

标签:express   node   博客实例   

    大致看了一阵子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/


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

var express = require(‘express‘);
var router = 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":

内添加:

"mongodb":"*",
"connect-mongo":"*",
"express-session":"*"


注意上方的,分割

执行 $npm install


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

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


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

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});


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

var MongoStore = require(‘connect-mongo‘)(session);
var settings = require(‘./settings‘);


app.use(session({
  secret: settings.cookieSecret,
  key: settings.db,
  cookie:{maxAge: 1000*60*60*24*30},
  store: new MongoStore({
   // db: settings.db
    url:‘mongodb://localhost/db‘
  })
}));


7.修改views\index.ejs

<%- include header %>
这是主页
<%- include footer %>


8.views下新建header.ejs

<!DOCTYPE html>
<html>
<head>
    <meta charset="UTF-8" />
    <title>Blog</title>
    <link rel=‘stylesheet‘ href=‘/stylesheets/style.css‘ />
</head>
<body>
<header>
    <h1><%= title %></h1>
</header>
<nav>
    <span><a title="主页" href="/">home</a> </span>
    <span><a title="登录" href="/login">login</a> </span>
    <span><a title="注册" 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: 2em auto;
  padding: 0 2em;
  font-size: 14px;
  font-family: "Microsoft YaHei";
}
p{line-height: 24px;margin: 1em 0;}
header{padding: .5em 0;border-bottom: 1px solid #cccccc;}
nav{position: fixed;left: 12em;font-family: "Microsoft YaHei";font-size: 1.1em;text-transform: uppercase;width: 9em;text-align: right;}
nav a{display: block;text-decoration: none;padding: .7em 1em;color: #000000;}
nav a:hover{background-color: #ff0000;color: #f9f9f9;-webkit-transition:color .2s linear;}
article{font-size: 16px;padding-top: .5em;}
article a {color: #dd0000;text-decoration: none;}
article a:hover{color: #333333;text-decoration: underline;}
.info{font-size: 14px;}


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

初步写成的:

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

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

标签:express   node   博客实例   

原文地址:http://justmeow.blog.51cto.com/11372217/1769275

(0)
(0)
   
举报
评论 一句话评论(0
登录后才能评论!
© 2014 mamicode.com 版权所有  联系我们:gaon5@hotmail.com
迷上了代码!