vue-cli + nodejs + mongodb 基础

环境准备

vue
nodejs
mongodb

下载安装 mongodb mongodb下载
根据系统选择下载即可，下载 .msi 文件，按照提示安装即可，可以点击 Custom(自定义) 修改安装目录等。注: 安装过层中由于没有去掉 install mongoDB compass 的勾选，则会很慢，因为在下载安装这个 GUI.

启动：cd E:\mongodb\bin>, 输入 mongo.exe,发现启动失败，输入 mongod.exe, 发现报错原因是缺少对应文件目录。原因是 MongoDB 将数据目录存储在 db 目录下。但是这个数据目录不会主动创建，我们在安装完成后需要创建它。请注意，数据目录应该放在根目录下（(如： C:\ 或者 D:\ 等 )。。这里则创建 E:\data\db 目录。

后续：命令行 cd E:\mongodb\bin>, 输入 mongod.exe, 即发现启动正常，此时使用 MongoDB Compass Community————GUI, 可以正常连接。

集成 mongodb, npm install mongoose --save, 连接示例如下：

//配置mongoose
var mongoose = require("mongoose");

function connectMongoose(dbName) {

  //连接数据库，createConnection支持多个数据库的连接
  var db = mongoose.createConnection('mongodb://localhost:27017/' + dbName);

  // connect 只能连接一个数据库，这里需要连接多个，不合适。
  // mongoose.connect("mongodb://localhost:27017/" + dbName);
  // const db = mongoose.connection;

  //如果连接失败会执行error回调
  db.once("error", function (error) {
    console.log("数据库 " + dbName + " 连接失败：" + error);
  });
  //如果连接成功会执行open回调
  db.once("open", function () {
    console.log("数据库 " + dbName + " 连接成功");
  });

  //return mongoose;
  return db;
}

集成 nodejs (express), npm install express --save, 示例如下：

var express = require('express');
var path = require('path');
var bodyParser = require('body-parser'); //req.body本来为undefined, 引入此 body-parsing middleware
var cookieParser = require('cookie-parser'); //cookie格式化

var app = express();
app.use(bodyParser.json()); //for parsing application/json
app.use(bodyParser.urlencoded({ extended: true })); // for parsing application/x-www-form-urlencoded
app.use(cookieParser());

//设置静态资源目录
app.use(express.static(path.join(__dirname, '../dist')));

//所有访问，都指定返回 index.html
app.get('/*', function (req, res) {
  res.sendFile(path.join(__dirname, '../dist', 'index.html'));
});

//设置服务器
var server = app.listen(3000, function () {
  var host = server.address().address;
  var port = server.address().port;
  // eslint-disable-next-line no-console
  console.log('server listening at http://%s:%s', host, port);
});

后续使用

首先为 node 服务收到请求，通过不同路由（也可以说是接口），连接不同的数据库，进行增删改查等等操作。

//node服务对应文件中添加路由
app.use('/api/login', require('./routes/login'));


//路由文件，后端具体路由（接口）请求数据库，调用不同的方法
var express = require('express');
var router = express.Router();
var admin = require('../mongodb/schemas/admin')

router.post('/', function(req, res, next) {
  admin.selectAdmin(req.body, function(docs) {
    res.send(docs);
  })
});
module.exports = router;

//具体对应数据库的操作，dao层
var connectMongoose = require("../mongoose").connectMongoose
//var mongoose = connectMongoose("admin");
//createConnection 创建的不能直接操作 schema, 仍需引入mongoose
var mongoose = require("mongoose");
var db = connectMongoose("admin");

//定义一个 schema,描述此集合里有哪些字段，字段是什么类型
//只有schema中有的属性才能被保存到数据库中
var adminSchema = new mongoose.Schema({
  account : { type: String },
  password : { type: String },
  time : { type: Date, default: Date.now },
});

var adminModel = db.model("person", adminSchema);

function selectAdmin(data, callback) {
  adminModel.find({
      'account':  {"$gte": data.account, "$lte": data.account},
      'password':  {"$gte": data.password, "$lte": data.password}
    },
    {account: 1, password: 1},
    function(err,docs) {
      callback(docs);
  })
}

module.exports = {
  "selectAdmin" : selectAdmin
}

上述 node->mongodb 已走通, 下述从 vue->node 的流程。

//vue.config.js , 需要配置代理到node
module.exports = {
  devServer: {
    proxy: {
      "^/api": {
        target: "http://localhost:3000",
        ws: true,
        changeOrigin: true
      }
    },
  }
}

//vue 文件
import {login} from '@/request/api';
async login(data) {
  let res = await login(data);
}
this.login(data);

//api.js
import {post} from './request';
export function login(data) {
  return post('/api/login', data);
}

//request.js
//此处不做粘贴，是对 `axios` 的一个封装

至此，vue 通过 axios 发送请求，然后被代理到 node 服务，通过 express 的路由转发，去请求数据库做一些列操作，完成。

上述代码见项目

my-manage-system

vue-cli + nodejs + mongodb 基础

环境准备

后续使用

上述代码见项目

参考