nodejs+handlebars+mongoDB建立一個聊天室

時間 2019-11-21

標籤 nodejs+handlebars+mongodb nodejs handlebars mongodb 建立一個聊天室欄目 MongoDB 简体版

原文原文鏈接

源碼地址：https://github.com/capaten/chatroomcss

話很少說，直接開始！html

項目環境須要安裝nodejs、mongoDB和nodejs裏的一些框架(如express,hbs等)，具體安裝步驟請上網查閱，有不少教程，我安裝的比較早已經忘了。node

假設安裝都沒有問題，能夠繼續往下走：git

首先，打開命令行，輸入 express --hbs 項目名建立一個項目，注意chatroom是個人項目名，能夠修改github

打開項目文件目錄，能夠看到已經在E:\test目錄下自動建立了chatroom文件夾，而且包含一些子文件：數據庫

可能每一個人建立後的文件及內容不同，但只要建立成功就能夠啓動的。express

啓動方式有兩種：編程

1，使用命令行啓動，輸入 node app.js ，回車bootstrap

端口可能不同，也可能沒有下面的一行中文（這是我本身加的）瀏覽器

2，使用編程軟件啓動（我使用的是vscode）

vscode打開chatroom文件夾後，配置啓動項：

此時個人app.js內容以下(基本都是自動生成的)：

var express = require('express');
var path = require('path');

var index = require('./routes/index');
var users = require('./routes/users');

var app = express();

// view engine setup
app.set('views', path.join(__dirname, 'views'));
app.set('view engine', 'hbs');

app.use(express.static(path.join(__dirname, 'public')));

app.use('/', index);
app.use('/users', users);

// catch 404 and forward to error handler
app.use(function(req, res, next) {
  var err = new Error('Not Found');
  err.status = 404;
  next(err);
});

// error handler
app.use(function(err, req, res, next) {
  // set locals, only providing error in development
  res.locals.message = err.message;
  res.locals.error = req.app.get('env') === 'development' ? err : {};

  // render the error page
  res.status(err.status || 500);
  res.render('error');
});
app.listen(3000,function(){
    console.log('服務已啓動,正在監聽3000端口');
});

module.exports = app;

View Code

而後打開瀏覽器，輸入 127.0.0.1:3000 ，回車，噹噹噹當~

接下來再看一下個人目錄結構（基本都是建立項目時自動生成的，有些沒用的刪掉了）:

我這裏使用了handlebars模板引擎（.hbs結尾的文件），固然你也可使用ejs,jade等，也能夠不使用模板引擎，直接就用html，均可以，這個項目因爲頁面簡單，體現不出使用模板引擎的優點，不過學了就使用一下~

handlebars不瞭解的能夠上網查閱，我的感受挺不錯

layout.hbs默認最基本的模板，全部的其它的hbs文件都會套用它，因此只須要在這裏寫完整html的語法便可，其它.hbs文件只寫標籤就能夠。引用的一些js/css文件也放在這裏

打開index.hbs，將裏面的內容替換爲

<div id="loginbox">
    <h1>登陸</h1>
    <hr>
    <div class="login">
        <div class="form-inline">
            <div class="form-group">
                <label>用戶名</label>
                <input type="text" class="form-control" id="name" placeholder="請輸入用戶名">
            </div>
            <br><br>
            <button type="button" class="btn btn-info btn-lg" id="loginbutton">登陸</button>
        </div>
    </div>
</div>

View Code

一個炒雞簡陋的登陸頁出來了~下面加點樣式，打開style.css文件，將裏面的內容替換爲

.sender {
  clear: both
}

.sender div:nth-of-type(1) {
  float: left
}

.sender div:nth-of-type(2) {
  background-color: #7fffd4;
  float: left;
  margin: 0 20px 10px 15px;
  padding: 10px 10px 10px 0;
  border-radius: 7px
}

.receiver div:first-child img,
.sender div:first-child img {
  width: 50px;
  height: 50px
}

.receiver {
  clear: both
}

.receiver div:nth-child(1) {
  float: right
}

.receiver div:nth-of-type(2) {
  float: right;
  background-color: gold;
  margin: 0 10px 10px 20px;
  padding: 10px 0 10px 10px;
  border-radius: 7px
}

.left_triangle {
  height: 0;
  width: 0;
  border-width: 8px;
  border-style: solid;
  border-color: transparent #7fffd4 transparent transparent;
  position: relative;
  left: -16px;
  top: 3px
}

.right_triangle {
  height: 0;
  width: 0;
  border-width: 8px;
  border-style: solid;
  border-color: transparent transparent transparent gold;
  position: relative;
  right: -16px;
  top: 3px
}
.icon {
  width: 1em; height: 1em;
  vertical-align: -0.15em;
  fill: currentColor;
  overflow: hidden;
}
html,body {
  background: #ccc;
  padding: 20px 0 20px 0;
  height: 100%;
}
h1 {
  text-align: center;
}
.login {
  text-align: center;
}
#chatbox {
  height: 100%;
}
#inputgrop {
  display: block;
  width: 100%;
  position: absolute;
  min-height: 40px;
  bottom: 0;
}
#content {
  height: auto;
}
.alert {
  z-index: 100;
  position: absolute;
  top: 0;
  width: 100%;
}
.chatwindow {
  height: 100%;
}

View Code

在layout.hbs裏引用bootstrap.css和style.css文件，注意style.css要放在bootstrap.css的下面，否則會有樣式的衝突，致使某些樣式不顯示

<!DOCTYPE html>
<html>
  <head>
    <title>聊天室</title>
    <link rel="stylesheet" href="stylesheets/bootstrap.css">
    <link rel='stylesheet' href='/stylesheets/style.css' />
  </head>
  <body>
    {{{body}}}
  </body>
</html>

View Code

啓動服務，瀏覽器打開127.0.0.1:3000 ,就會看到

首頁完成，看起來還不錯，挺簡潔的~~

而後須要添加各類事件，鏈接數據庫，服務端管理等，複雜而繁瑣就不在這裏說了，請參照源碼：

https://github.com/capaten/chatroom