大致看了一阵子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 | var express = require('express'); |
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 添加如下代码:
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