溫馨提示×
您好，登錄后才能下訂單哦！
點擊 登錄注冊 即表示同意《億速云用戶服務條款》
您好，登錄后才能下訂單哦！
大致看了一陣子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> <h2><%= title %></h2> </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
免責聲明：本站發布的內容（圖片、視頻和文字）以原創、轉載和分享為主，文章觀點不代表本網站立場，如果涉及侵權請聯系站長郵箱：is@yisu.com進行舉報，并提供相關證據，一經查實，將立刻刪除涉嫌侵權內容。
