溫馨提示×

溫馨提示×

您好，登錄后才能下訂單哦！

密碼登錄×
登錄注冊×
其他方式登錄
點(diǎn)擊 登錄注冊 即表示同意《億速云用戶服務(wù)條款》

《Node.js實(shí)戰(zhàn)》博客實(shí)例 express4.x

發(fā)布時(shí)間：2020-06-13 05:14:12 來源：網(wǎng)絡(luò) 閱讀：890 作者：喵嗚罷了 欄目：web開發(fā)

    大致看了一陣子nodejs的書，對語法有初步的了解。但是還是寫不出個(gè)實(shí)例來。最近學(xué)長給我的這本書感覺挺入門的《Node.js實(shí)戰(zhàn)》電子工業(yè)出版社。畢竟圖書館借的，出版時(shí)間已經(jīng)是兩年前了。很多代碼都更新了。特別是express 4.x相對與express 3.x有很多的修改。比如把中間件獨(dú)立出來。好處是有。這樣express的更新就不用受這些中間件的影響 壞處也許主要是對我這種新手吧。大部分教材都是express 3.x甚至是 2.x 的。這樣學(xué)習(xí)起來就有困難。也許不會有人看到這個(gè)。即使解決不了別人的問題也想記錄一下，說不定哪天我就忘了。


中間件問題可參考http://www.tuicool.com/articles/YBVRvuJ


我使用express版本：

    C:\Users\Meow>express -V

    4.13.1


express 4中可能會發(fā)現(xiàn)一個(gè)報(bào)錯(cuò)就是 express不是內(nèi)部或外部命令

因?yàn)閑xpress 4精簡了很多文件 我們需要另外安裝命令工具

$ npm install -g express-generator

在自己預(yù)設(shè)的路徑下輸入：

$ express -e blog


$cd blog & npm install

就用express新建了一個(gè)項(xiàng)目 并指定使用ejs模版引擎 

express4.x 不是使用    $node app    來啟用而是：    $npm start

之后就可訪問 http://localhost:3000/


  1. 修改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


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:'發(fā)表'})
});

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":

內(nèi)添加：


注意上方的,分割

執(zhí)行 $npm install


4.根目錄創(chuàng)建 settings.js//與書中代碼一致 我按上方網(wǎng)址教程創(chuàng)建的mongodb數(shù)據(jù)庫名叫db 為防止錯(cuò)誤與書中代碼略不同 實(shí)際是否影響可自己嘗試

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


5.在目錄下創(chuàng)建文件夾 models 并在其中創(chuàng)建 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    在相應(yīng)位置添加：//與書中有多處不同認(rèn)真檢查

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


之后就可以執(zhí)行 $npm start 并訪問查看了！

初步寫成的：

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

向AI問一下細(xì)節(jié)

免責(zé)聲明：本站發(fā)布的內(nèi)容（圖片、視頻和文字）以原創(chuàng)、轉(zhuǎn)載和分享為主，文章觀點(diǎn)不代表本網(wǎng)站立場，如果涉及侵權(quán)請聯(lián)系站長郵箱：is@yisu.com進(jìn)行舉報(bào)，并提供相關(guān)證據(jù)，一經(jīng)查實(shí)，將立刻刪除涉嫌侵權(quán)內(nèi)容。

AI
助
手