Node.js+Express+MongoDB 建站实例

说明：

[项目地址：]https://github.com/jiaoyanlin/myNodeProject

作为一个前端小菜鸟，因为想学node，所以结合网上其他项目自己动手搭建做一个前后端完全分离的项目，模拟实际工作中前后端的工作配合。如有不足，请多指教。

本项目为系列博客，目前有以下系列

• Node.js+Express+MongoDB 建站实例（1）– 网站初始化
• Node.js+Express+MongoDB 建站实例（2）– 登录模块
• Node.js+Express+MongoDB 建站实例（3）– 上传图片及其他模块
• Node.js+Express+MongoDB 建站实例（4）– react构建前端页面对接接口：项目源码

一、源码运行

可到GitHub上下载源项目，然后执行以下步骤搭建我已经写好的项目进行体验。从本文第二步开始为大家讲解整个项目的详细实现步骤。

npm installnpm start 或 supervisor bin/www（必须提前安装supervisor）

备注：本项目建立在本地已经搭建好了nodejs和mongodb的基础上（搭建方法请自行百度）。

二、以下用来记录项目从头开始搭建的流程

初始化项目

1. 安装Express

   npm install -g express

2. 安装Express命令行工具

   npm install -g express-generator

3. 使用express初始化项目：这里使用ejs模板，默认为jade模板

   express -e myproject

   提示：此时将在当前目录下创建myproject子目录，并自动搭建其他相关目录及文件。

   cd myproject 进入项目目录

   npm install 安装相关依赖

4. 运行项目

   SET DEBUG=myproject:* & npm start

   此时在浏览器上输入http:localhost:3000将能看到相关页面

5. 若不想每次修改代码后都要重启服务器，可以安装并使用supervisor工具实现代码修改和自启动

   npm install -g supervisor

   supervisor bin/www

   提示：express 4.x把原来用于项目启动代码也被移到./bin/www的文件，所以直接运行 supervisor bin/www就可以了（更早版本使用 supervisor app.js）

实战热身（实现基础的get和post的ajax请求）

1. 安装mongodb模块（须先在电脑上安装过mongodb并且启动服务）

   npm install mongodb --save

   ps: “crypto”: “^1.0.1”,未确定是否需要安装？？？？？

2. 修改/routes/index.js，新增两个接口

   var express = require('express');var router = express.Router();// 我新增的api，用于连接到数据库var api = require('./api.js')/* GET home page. */router.get('/', function(req, res, next) {  res.render('index', { title: 'Express' });});// 我新增的测试接口router.get('/api/test', api.test)router.post('/api/addtest', api.addtest)module.exports = router;

3. 新增文件1 /routes/api.js

   const db = require('./db.js')exports.test = function(req, res, next) {  db.find('mytest', { "query": {} }, function(err, result) {    if (err) {      return res.json({        "code": 404,        "message": "数据查询失败",        "result": []      })    }    return res.json({        "code": 200,        "message": "数据获取成功",        "result": result,        "total": result.length    })  })}exports.addtest = function(req, res, next) {  let newData = {    "title": req.body.title,    "content": req.body.content  };  // 插入到数据库  db.insertOne('mytest', newData, function(err, result) {    if (err) {      return res.json({        "code": 401,        "message": "test新增失败"      })    }    return res.json({      "code": 200,      "message": "test新增成功"    })  })}

   新增文件2 /routes/db.js（封装了对数据库的增删查改的函数）

   const MongoClient = require('mongodb').MongoClientconst settings = require('./settings')// 链接数据库 如果没有自动创建function _connectDB(callback) {  let url = settings.dbUrl  MongoClient.connect(url, function(err, db) {    if (err) {      callback(err, null)      return    }    // 数据库链接成功执行回掉    callback(err, db)  })}// 插入数据exports.insertOne = function(collectionName, json, callback) {  _connectDB(function(err, db) {    db.collection(collectionName).insertOne(json, function(err, result) {      if (err) {        callback(err, null)        db.close()        return      }      callback(err, result)      db.close()    })  })}// 查找数据exports.find = function(collectionName, queryJson, callback) {  _connectDB(function(err, db) {    let json = queryJson.query || {},      limit = Number(queryJson.limit) || 0,      count = Number(queryJson.page) - 1,      sort = queryJson.sort || {}    // 页数为0或者1都显示前limit条数据    if (count <= 0) {      count = 0    } else {      count = count * limit    }    let cursor = db.collection(collectionName).find(json).limit(limit).skip(count).sort(sort)    cursor.toArray(function(err, results) {      if (err) {        callback(err, null)        db.close()        return      }      callback(err, results)      db.close()    })  })}// 删除数据exports.deleteMany = function(collectionName, json, callback) {  _connectDB(function(err, db) {    db.collection(collectionName).deleteMany(json, function(err, results) {      if (err) {        callback(err, null)        db.close()        return      }      callback(err, results)      db.close()    })  })}// 修改数据exports.updateMany = function(collectionName, jsonOld, jsonNew, callback) {  _connectDB(function(err, db) {    db.collection(collectionName).updateMany(      jsonOld, {        $set: jsonNew,        $currentDate: { "lastModified": false }      },      function(err, results) {        if (err) {          callback(err, null)          db.close()          return        }        callback(err, results)        db.close()      })  })}

   新增文件3 /routes/settings.js（mongodb数据库相关设置）

   let nickname = 'myproject1'module.exports = {    dbUrl:'mongodb://localhost:27017/myproject1',    nickname:nickname}

   到此，接口创建完毕

4. 前端使用ajax来获取数据

   /views/index.ejs

   <!DOCTYPE html><html>  <head>    <title><%= title %></title>    <link rel='stylesheet' href='/stylesheets/style.css' />    <script src='/js/jquery.min.js'></script>  </head>  <body>    <h1><%= title %></h1>    <p>Welcome to <%= title %></p>    <div class="post">      <input type="text" class="title" placeholder="请输入标题">      <input type="text" class="content" placeholder="请输入标题">      <button class="ok">提交</button>    </div>    <div class="test"></div>  </body>  <script>    function getList() {      $.get('/api/test', {}, function (data) {        console.log('----data', data)        if (data.code == 200) {          var html = '', list = data.result;          for (var i = 0; i < list.length; i++) {            html += '<div>这是第' + i + '条数据：标题为' + list[i].title + '，内容为' + list[i].content + '</div>'          }          $('.test').empty().append(html);        }      })    }    getList();    $('.ok').click(function() {      if (!$('.title').val()) {        alert('请填写标题');        return false;      }      if (!$('.content').val()) {        alert('请填写内容');        return false;      }      $.post('/api/addtest', {        title: $('.title').val(),        content: $('.content').val()      }, function (data) {        console.log('----addtest', data)        if (data.code == 200) {          alert('提交成功');          getList();        } else {          alert('提交失败');        }      })    })  </script></html>

   打开浏览器控制台，可以看到打印出查到的数据。

补充说明

文章只是分享我的一些学习历程，如果有错误，求轻拍，我一定虚心受教。我从事前端行业不久，很多东西理解还有偏差，不足之处，请多见谅，很多东西没写详细，后期有时间会再补上。此外这个项目后面我想继续完善下去，当前只是写个小demo试一下而已，请继续关注，如果可以的话可以到我GitHub上面给个星鼓励下哦。

参考文档

1、http://y.dobit.top/Detail/150.html

2、https://github.com/wmui/vueblog