對着綠皮書《nodejs開發指南》來用express搭建微博，然而技術更新太快，很多老的api都用不成了，各種踩坑。這裏實戰新版本，以饗後來人。

版本號

建立工程

全局安裝express之後需要額外安裝express-generator才能生成基本結構

npm install -g express-generator
express -e microblog

同時爲了監聽代碼改動和刷新，在package.json中加入一行

"scripts": {
    "start": "node ./bin/www",
+   "watch": "supervisor ./bin/www"    //首先要全局npm i -g supervisor
  },

然後npm run watch 來啓動即可。

模板引擎

partial不可使用，用include代替

新建list.ejs應爲

    <ul>
        <% items.forEach(listitem => { %>
        <% include listitem %>
        <%  })  %>
    </ul>

動態/靜態視圖助手 helpers/dynamicHelpers 用locals/use代替

在 app.js中引入 util 模塊，隨後，在路由和catch404之前添加如下代碼

app.locals.inspect =  obj => {
        return util.inspect(obj, true)}

app.locals.haha = 'lalalalalal'

app.use(function(req, res, next) {
  res.locals.headers = req.headers
  next();
});

app.get('/local', (req, res, next) => {

    res.render('helper', {
        title: 'Helpers'
    })
})

helpers.ejs的內容不變

<%= inspect(headers) %>

即可在http://localhost:3000/local中看到headers。

建立微博網站

所有直接用app.get/post的，都在routes裏面加了route文件，這個改動比較簡單，不放代碼了。

沒有layout.ejs，用include代替

由於新版本的緣故，生成的目錄中不會有layout了，統統用include代替吧。

參見n-blog 模板引擎一節，把index.ejs拆成header.ejs和footer.ejs。

<%- include('header') %>
<div class="navbar navbar=fixed-top">
      .......
</div>
<%- include('footer') %>

引入bootstrap和jquery

《nodejs 入門指南》一書中以下載壓縮代碼手工放到Public目錄的方式引入了bootstrap，竊認爲這種方式太不優雅，不不，應該是太復古了，express都4+了，還是換一種方式吧。

首先 npm install bootstrap 和 jquery 。

然後在app.js中，爲靜態資源目錄指定掛載路徑，在虛擬路徑lib下放資源

  app.use(express.static(path.join(__dirname, 'public')));
+ app.use('/lib', express.static(path.join(__dirname, 'node_modules')))

在header.ejs 和 footer.ejs 中引入bootstrap 和 jquery

//header.ejs
<!DOCTYPE html>
<html>
  <head>
    <title><%= title %>- Microblog</title>
    <link rel='stylesheet' href='lib/bootstrap/dist/css/bootstrap.min.css' />
    <link rel='stylesheet' href='/stylesheets/style.css' />
  </head>
  <body>


//footer.ejs
      <script type="text/javascript" src="lib/jquery/dist/jquery.min.js"></script>
      <script type="text/javascript" src="lib/bootstrap/dist/js/bootstrap.min.js"></script>
  </body>
</html>

刷新一下頁面，可以在network中看到該引入的文件都引入了。
另外吐槽一下綠皮書，就算是demo你也把 css 寫到 Public 下啊，直接嵌入style標籤這樣真的好嗎，看上去亂七八糟的。

bootstrap升級到4.X後的變化

無力吐槽了，對着書敲了一堆class都顯示不出來，bootstrap也升級到4.x了，Npm裝的是新版的，算了，正好也沒碰過bootstrap，就對着BOOTSTRAP 4.1.1 官方文檔重新寫吧。

主要是navbar和hero-unit的變化，hero-unit用Jumbotron代替了。

//index.ejs
<%- include('header') %>
<div class="navbar navbar-dark navbar-expand-lg bg-dark fixed-top">
    <div class="container">
      <a class="navbar-brand" href="/">microblog</a>
      <button class="navbar-toggler" type="button" data-toggle="collapse" data-target="#indexNav" aria-controls="indexNav" aria-expanded="false" aria-label="Toggle navigation">
        <span class="navbar-toggler-icon"></span>
      </button>
      <div class="collapse navbar-collapse" id="indexNav">
        <ul class="navbar-nav">
          <li class="active nav-item"><a class="nav-link" href="/">homepage</a></li>
          <li class="nav-item"><a class="nav-link" href="/login">login</a></li>
          <li class="nav-item"><a class="nav-link" href="/reg">register</a></li>
        </ul>
      </div>
    </div>
</div>

<div class="container">
  <%- include('components/home') %>
  <hr />
  <footer>
    <p><a href="https://blog.csdn.net/github_36487770" target="_blank">十方魔</a> 2018</p>
  </footer>
</div>
<%- include('footer') %>

//views/components/home.ejs 把組件都放到這下面來
<div class="jumbotron homejumbotron">
    <h1 class="display-4">歡迎來到 Microblog</h1>
    <p class="lead">Microblog 是一個基於 Node.js 的微博系統。</p>
    <hr class="my-4">
    <p>
      <a class="btn btn-primary btn-lg" href="/login" role="button">login</a>
      <a class="btn btn-outline-info btn-lg" href="/reg" role="button">register</a>
    </p>
</div>

<div class="row">
  <div class="col">
    <h2>Carbo 說</h2>
     <p>東風破早梅 向暖一枝開 氷雪無人見 春從天上來</p>
  </div>
  <div class="col">
    <h2>BYVoid 說</h2>
     <p>
     Open Chinese Convert（OpenCC）是一個開源的中文簡繁轉換項目，
     致力於製作高質量的基於統計預料的簡繁轉換詞庫。
     還提供函數庫(libopencc)、命令行簡繁轉換工具、人工校對工具、詞典生成程序、
     在線轉換服務及圖形用戶界面。</p>
 </div>
  <div class="col">
    <h2>佛振 說</h2>
    <p>中州韻輸入法引擎 / Rime Input Method Engine 取意歷史上通行的中州韻，
    願寫就一部彙集音韻學智慧的輸入法經典之作。
    項目網站設在 http://code.google.com/p/rimeime/ 
    創造應用價值是一方面，更要堅持對好技術的追求，希望能寫出靈動而易於擴展的代碼，
    使其成為一款個性十足的開源輸入法。</p>
  </div>
</div>

具體的中文字什麼的直接從nodejs開發指南源碼裏down下來的，不知爲什麼是繁體，懶得轉了，反正內容不重要。。。
效果如圖：

用戶註冊和登錄

安裝mongo

與主要內容關係不大，參見mac下 mongodb 的超詳細、傻瓜式安裝與啓動（無需brew ）一文。

連接mongo數據庫

在shell上用mongod把數據庫啓動起來，然後就可以在node上連接了。這裏用的官方mongodb, 其實不太好用，實際項目常用的是mongoose，流程更簡單便捷，中文文檔也比較齊，這只是個demo，所以用了也就用了。

//  settings.js
module.exports = {
  sessionId: 'ggsession',
  cookieSecret: 'ggmicroblog',
  db: 'microblog',
  host: 'localhost',
  mongoport: '27017',
  mongoUrl: 'mongodb://localhost:27017'
}

// db.js
const settings = require('../settings')
const mongo = require('mongodb');
const Db = mongo.Db
const Server = mongo.Server
const MongoClient = mongo.MongoClient

const db = new Db(settings.db, new Server(settings.host, settings.mongoport, {}))


exports.db = db
exports.MongoClient = MongoClient

exports.insertDocuments = function(insertObj, collection, cb){
    collection.insertOne(insertObj, (err, result) =>{
        cb(err,result)
    })
}

exports.createUniqueIndex = function(collection, cb){
    collection.createIndex({
        name:"text"
    },{
        unique: true
    },(err,result) =>{
        cb(err, result)
    })
}

寫model

連接上了數據庫，就可以寫一個一個的model了。以user爲例（這個寫的比較爛，在原來基礎上改的，回調嵌得太多，將就看看吧。）

const MongoClient = require('./db').MongoClient

const insertDocuments = require('./db').insertDocuments

const createUniqueIndex = require('./db').createUniqueIndex

const dbName = require('../settings').db

const dbUrl = require('../settings').mongoUrl


class User{

    constructor(user){
        this.name = user.name
        this.password = user.password
    }

    save(cb){

        let user = {
            name: this.name,
            password: this.password
        }


        MongoClient.connect(dbUrl, (err,client) => {

            if(err){
                return cb(err)
            }

            const db = client.db(dbName)

            const collection = db.collection('users')

            insertDocuments(user, collection, function(){

                createUniqueIndex(collection, () => {

                    client.close()

                    cb(err, user)
                })
            })
        })

    }
}

User.get = function get(username, cb){

    var clientConnect = MongoClient.connect(dbUrl)
               .then(
                    async (client) =>{

                        const db = client.db(dbName)

                        const collection = db.collection('users')

                        const docs = await collection.find({name: username}).limit(1).toArray()

                        if(docs && docs.length){

                            let user = new User(docs[0])

                            cb(null, user)

                        }

                        else{

                            cb(null, null)
                        }

                        client.close()

                    },
                    (err) =>{
                        console.log('db collection error')
                        return cb(err)
                    }
                )
               .catch( err => {

                    console.log('not collect')

                    clientConnect.close()

                    return cb(err)
               })
}


module.exports = User

conclusion

之後就沒啥了，在routes裏寫好邏輯，解析req的參數，用model去數據庫裏查找，再用查找的結果去渲染模板，，，一切，就是這麼簡單。

說來慚愧，博客寫了一半就放下了，草草過了下後端的東西又去看react。轉眼一個月過去，現在讀代碼感覺漏洞百出，實在不好意思放上來。。。而且，也不記得哪裏是重點，就覺得一切自然而然，就應該這麼發生，這麼去做。。。

這裏是組裏小哥給的一個比較好的github demo，寫得很詳細了，也是搭個博客，具體的就看這個好啦：
使用 Express + MongoDB 搭建多人博客

NodeJs已經不是新起之秀，而是實際用在項目中了。不管是express還是koa，egg，都是大前端避不開的一環。總之，不要慫，就是大膽去嘗試寫就對了！

express 4+mongo 3+bootstrap 4 從零搭建微博

版本號

建立工程

全局安裝express之後需要額外安裝express-generator才能生成基本結構

模板引擎

partial不可使用，用include代替

動態/靜態視圖助手 helpers/dynamicHelpers 用locals/use代替

建立微博網站

沒有layout.ejs，用include代替

引入bootstrap和jquery

bootstrap升級到4.X後的變化

用戶註冊和登錄

安裝mongo

連接mongo數據庫

寫model

conclusion

commonjs與es6 中的模塊化機制有什麼區別

一文詳解sass新特性——模塊

webpack中分割代碼的三種方式

解讀vue源碼之nextTick：何謂 event-loop, 瀏覽器的事件機制，task/microtasks

chrome官方解釋在導航欄輸入url敲下回車後發生了什麼？

Mac下配置sublime實現LaTeX

https://yachay.unat.edu.pe/blog/index.php?comment_area=format_blog&comment_component=blog&comment_co

linux以太網驅動總結

express 4+mongo 3+bootstrap 4 從零搭建微博

版本號

建立工程

全局安裝express之後需要額外安裝express-generator才能生成基本結構

模板引擎

partial不可使用，用include代替

動態/靜態 視圖助手 helpers/dynamicHelpers 用locals/use代替

建立微博網站

沒有layout.ejs，用include代替

引入bootstrap和jquery

bootstrap升級到4.X後的變化

用戶註冊和登錄

安裝mongo

連接mongo數據庫

寫model

conclusion

動態/靜態視圖助手 helpers/dynamicHelpers 用locals/use代替