Node.js+Express+MongoDB 建站实例

2023年7月15日 214次阅读来源: 前端gogogo

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

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

本文源码请看 https://github.com/jiaoyanlin/myNodeProject/tree/c5237306394c4896aee804a3d378dd2a92be24e0

一、源码运行


npm install

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

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

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

初始化项目

安装Express
npm install -g express
安装Express命令行工具
npm install -g express-generator
使用express初始化项目：这里使用ejs模板，默认为jade模板
express -e myproject
提示：此时将在当前目录下创建myproject子目录，并自动搭建其他相关目录及文件。
cd myproject 进入项目目录
npm install 安装相关依赖
运行项目
SET DEBUG=myproject:* & npm start
此时在浏览器上输入http:localhost:3000将能看到相关页面
若不想每次修改代码后都要重启服务器，可以安装并使用supervisor工具实现代码修改和自启动
npm install -g supervisor
supervisor bin/www
提示：express 4.x把原来用于项目启动代码也被移到./bin/www的文件，所以直接运行 supervisor bin/www就可以了（更早版本使用 supervisor app.js）

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

安装mongodb模块（须先在电脑上安装过mongodb并且启动服务）
npm install mongodb --save
ps: “crypto”: “^1.0.1”,未确定是否需要安装？？？？？

修改/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;

新增文件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').MongoClient
const 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
}

到此，接口创建完毕

前端使用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上面给个星鼓励下哦。

下一篇介绍登录模块的做法:
http://www.jianshu.com/p/f203f4bd55a8

参考文档

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

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

    原文作者：前端gogogo
    原文地址: https://www.jianshu.com/p/cf2177d46647
    本文转自网络文章，转载此文章仅为分享知识，如有侵权，请联系博主进行删除。