[入门案例] Express+MongoDB

写在前面

请确保已安装 node.js node.js安装教程

请确保已安装 MongoDB MongoDB 安装教程

Step 1. 项目初始化

  • 创建项目目录

    mkdir express_mongodb_demo
    cd express_mongodb_demo
    npm init -y
    npm install --save express
    npm insatll --save express-handlebars

    这里使用 handlebars 作为模板引擎。

    安装好的 package.json 文件:

    {
    "name": "express_mongodb_demo",
    "version": "1.0.0",
    "description": "This is a demo with express and mongoDB.",
    "main": "app.js",  // 注意,这里 index.js 改为了 app.js
    "scripts": {
      "test": "echo \"Error: no test specified\" && exit 1"
    },
    "keywords": ["Express", "mongoDB"],
    "author": "leo",
    "license": "ISC",
    "dependencies": {
      "body-parser": "^1.18.2",
      "bootstrap": "^3.3.7",
      "express": "^4.16.2",
      "express-handlebars": "^3.0.0",
      "jquery": "^3.2.1",
      "mongoose": "^4.13.5"
    }
    }
  • express_mongodb_demo \ app.js

    // import dependencies
    var express = require('express');
    var bodyParser = require('body-parser');
    var mongoose = require('mongoose');
    
    // project initilization
    var app = express();
    app.set('port', process.env.PORT || 3000);
    
    // import `handlebars` and set it as default engine
    var handlebars = require('express-handlebars')
      .create({
          defaultLayout: 'main',
          helpers: {
              section: function(name, options) {
                  if (!this._sections) {
                      this._sections = {};
                  }
                  this._sections[name] = options.fn(this);
                  return null;
              }
          }
      });
    app.engine('handlebars', handlebars.engine);
    app.set('view engine', 'handlebars');
    
    // use middleware
    app.use(express.static(__dirname + '/public'));
    
    // configuration routing
    app.get('/', function(req, res) {
     res.render('home');
    });
    
    // customized 404 page
    app.use(function(req, res) {
      res.status(404);
      res.render('404');
    });
    
    // customized 500 page
    app.use(function(req, res) {
      res.status(500);
      res.status('500');
    });
    
    // listener
    app.listen(app.get('port'), function() {
      console.log('Express started on http://localhost:' + app.get('port') +
          '; press Ctrl-C to terninate.');
    });

    这里进行了主文件的初始化,包括依赖引入、初始化、设置模板引擎、静态资源中间件、配置路由等。上面代码中均有注释。

  • express_mongodb_demo \ views \ layouts \ main.handlebars

    
    <html lang="en">
    <head>
      <meta charset="UTF-8">
      <meta name="viewport" content="width=device-width, initial-scale=1.0">
      <meta http-equiv="X-UA-Compatible" content="ie=edge">
      <title>Meadowlark Traveltitle>
      <link rel="stylesheet" href="/css/bootstrap.min.css">
      <link rel="stylesheet" href="/css/main.css">
      {{! 这里的路径都是相对于 /public 目录,在 app.js 中有对静态资源路径的设置}}
      {{! 另外,bootstrapjquery 都是从 node_modules 目录下复制到 /public/css /public/js 下的,这个方法是从网上搜来的,如果有更好的方法,欢迎分享}}
    head>
    <body>
      <div class="container">
          <header>
              <img src="/img/logo.png" alt="logo" />
          header>
          {{{body}}}
          <footer>© {{copyrightYear}} w3funfooter>
      div>
      <script src="/js/jquery.min.js">script>
      <script src="/js/bootstrap.min.js">script>
    body>
    html>
  • express_mongodb_demo \ views \ home.handlebars

    <h1>Hello Expressh1>
  • express_mongodb_demo \ views \ 404.handlebars

    <h1>404 - Not Foundh1>
  • express_mongodb_demo \ views \ 500.handlebars

    <h1>500 - Server Errorh1>

    home.handlebars, 404.handlebars, 500.handlebars 都是将 main.handlebars 作为母版布局的视图。在 app.js 中也有设置 defaultLayout: 'main'

    当你检查 home 页面时,会发现母版布局的信息。

  • express_mongodb_demo \ public \

    这个文件下放置 css, js, img, fonts 等静态资源。

项目初始化完成后,先检查一下目录结构:

/express_mongodb_demo
|- node_modules/
|- public/
   |- css/
      |- bootstrap.min.css
   |- fonts/ 这里直接把 Bootstrap 中的字体目录复制过来
   |- img/
      |- logo.png
   |- js/
      |- bootstrap.min.js
      |- jquery.min.js

到此,在根目录下命令行执行 node app.js 就可以在 http://localhost:3000 下访问了。

如果成功,那么项目初始化这一步就完成了。

Step 2. 启动 MongoDB

安装好 MongoDB 后,这里我安装在 D:\MongoDB。

然后在 D 盘下新建一个 data 目录,然后在 data 目录下新建一个 db 目录。

接着执行:

D:\MongoDB\bin>mongod --dbpath d:\data\db

新建一个终端窗口,执行:

D:\MongoDB\bin>mongo

新建一个 users 的数据库:

use users

向 users 插入一条数据:

db.users.insert({"name":"leo","email":"[email protected]","age":"26"});

可以查询一下,看看插入是否成功:

db.users.find();

Step 3. 连接数据库

检查是否安装 mongoose,没有的话,在项目根目录下:

npm install --save mongoose

然后,在 app.js 中连接数据库:

// mongodb connection
mongoose.Promise = global.Promise;
var conn = mongoose.connect('mongodb://127.0.0.1:27017/users');
var User = new mongoose.Schema({
    name: String,
    email: String,
    age: String
});
var myModel = conn.model('user', User);

// configuration routing
// 这里需要将已经设置好的路由重新设置
app.get('/', function(req, res, next) {
    myModel.findOne({ name: 'leo' }, function(err, user) {
        console.log(user);
        res.render('home', { user: user });
    });
});

再更改一下 home.handlebars 视图,以便在页面显示数据库中的数据:

<h1>Hello Expressh1>
<ul class="list-group">
    <li class="list-group-item">姓名: {{{user.name}}}li>
    <li class="list-group-item">邮箱: {{{user.email}}}li>
    <li class="list-group-item">年龄: {{{user.age}}}li>
ul>

保存,运行 node app.js ,就可以在 http://localhost:3000 下访问了。

这里截个图:

到此为止,这个简单的项目就完成了。

我也是新手,如果有什么错误,欢迎指出。

补充:接下来将项目放到 GitHub 上。

Step 4. 使用 Git

先要将项目初始化:

git init

然后添加 .gitignore 文件,可以把我们不需要上传的文件放在这里面,比如:

node_modules/

.vscode/

因为我这里用的 vscode ,所以把它的配置文件也放在 .gitignore 里面。

接下来,执行以下命令:

git add -A  // 将所有文件加入暂存区
git commit -m 'project init'  // 保存仓库的历史记录,-m 后面接提交信息

添加远程仓库,默认你已经有了 GitHub 账号,并且已经创建好了一个名叫 express_mongodb_demo 的 repo:

git remote add origin https://github.com/swpuLeo/express_mongodb_demo.git

最后,将本地 git 库推送至远程库:

git push -u origin master

写在最后

本项目地址:express_mongodb_demo

你可能感兴趣的:(express,mongodb)