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