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

最新推荐文章于 2025-10-07 19:44:16 发布

原创最新推荐文章于 2025-10-07 19:44:16 发布 · 1k 阅读

0 ·

CC 4.0 BY-SA版权

文章标签：

#nodejs #express #express4.x #bootstrap #mongodb

后端/node.js 专栏收录该内容

9 篇文章

订阅专栏

这篇博客介绍了如何使用新版本的nodejs、express、bootstrap和mongodb从零开始搭建一个微博网站。内容包括工程结构创建、模板引擎的更新、引入bootstrap和jquery、用户注册与登录的实现，以及数据库模型的编写。文章针对技术的更新，指出了旧教程中的不适用部分，并提供了相应的解决方案。

对着绿皮书《nodejs开发指南》来用express搭建微博，然而技术更新太快，很多老的api都用不成了，各种踩坑。这里实战新版本，以飨后来人。

戳这里clone 整个github 项目源代码

版本号
建立工程
- 全局安装express之后需要额外安装express-generator才能生成基本结构
模板引擎
- partial不可使用，用include代替
- 动态/静态视图助手 helpers/dynamicHelpers 用locals/use代替
建立微博网站
用户注册和登录
conclusion

版本号

node@9.3.0
npm@5.7.0
express@4.16.3
express-generator@4.16.0
bootstrap@4.1.1
jquery@3.3.1

建立工程

全局安装express之后需要额外安装express-generator才能生成基本结构

见官方文档: express 应用生成器

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.youkuaiyun.com/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