用一个登录demo贯穿vue+node+mongoDB前后端分离的开发方式

这篇文章记录一下如何使用vue+node+mongoDB开发出一个登录的小demo。从而打通前端到后端一整条技能树。
文章会先从介绍后端创建API接口连接mongoDB数据库，到前端用vue-cli创建页面调用接口，最后用一个login的demo穿起来。

这篇文章首先介绍一下后端部分，连接mongoDB，创建数据接口等...

1、安装MongoDB数据库

第一步从mongoDB的官网下载安装包，完成之后安装也比较容易，一路next，注意一下安装路径，应该不会有太大问题。
然后是创建数据库文件存放的位置与log存放的位置，在你安装的mongoDB文件夹下创建data文件夹，然后在data下再创建db和log两个文件夹，比如我的mongoDB直接安装在了D盘，创建完之后就是多了下面两个文件夹：
D:MongoDBdatadb
D:MongoDBdatalog
接下里试着启动一下mongoDB服务，打开cmd命令行,进入mongoDB的bin目录，输入以下命令启动服务mongod --dbpath D:MongoDBdatadb
在浏览器输入http://localhost:27017 （27017是mongodb的端口号）查看，如不出意外，会看到如下的内容，表示已经成功启动了mongoDB服务了。

一般如果不成功，可以试着看看端口号是否被占用等问题。
我们还是希望在本地windows“服务”中，有配置上mongodb 服务。需要在Mongodb新建配置文件mongo.config文件，在编辑器中打开该文件，
dbpath=D:MongoDBdatadb
logpath=D:MongoDBdatalogmongo.log
保存。
管理员方式运行cmd，跳转到 D:MongoDBbin目录下。

输入：mongod --config "D:Mongodbmongo.config" --install --serviceName "MongoDB"
完成后，查看本地的服务。会多出个mongoDB的服务，这样我们就能设置开机自启动等功能啦。

有了数据库，自然而然就会想要一个像navcat那样的可视化的数据库工具，我这边使用的是Robo 3T,安装一下这个软件，

2、创建express应用

我们使用express框架来搭建我们的后台，首先要安装node,安装完成之后我们使用express的应用生成器快速创建一个应用的骨架

全局安装express-generator

$ npm install express-generator -g
2、在当前目录下创建一个名为myapp的应用，
$ express myapp
完成之后正常打开，安装依赖
$ cd myapp 
$ npm install

用npm start启动应用，在浏览器中输入 http://localhost:3000/ ，正常情况下出现

表示express应用正确创建，然后我们依此来进行mongoDB的连接以及操作数据库接口的创建。

3、mongoose操作数据库

我们使用mongoose来进行数据库的连接，首先安装mongoose
npm install mongoose –-save-dev

我们需要搞清楚mongoose的几个概念：
Schema： 一种以文件形式存储的数据库模型骨架，不具备数据库的操作能力
Model： 由Schema发布生成的模型，具有抽象属性和行为的数据库操作对
Entity： 由Model创建的实体，他的操作也会影响数据库

我们创建接口的方式是通过express的Router,而接口里面操作数据库就要用到mongoose进行数据库的连接，创建Schema，通过Schema创建model,再通过model进行数据库的增删改查。

4、数据接口的创建

我们现在已经有了mongoDB数据库，也会创建express应用，大概知道怎么使用mongoose连接操作数据库了，那我们就来建一个简单的demo,来把这些东西组合起来，创建一个接口吧。

首先我们不妨先看一下之前我们创建的express应用,访问一下http://localhost:3000/users。发现居然是有这一个页面的，就说明应用为我们处理了users这个路由，跳转到了指定的页面。
我们看一下项目的目录结构。

里面有一个routes文件夹有users,打开如下所示，

var express = require('express');
var router = express.Router();
router.get('/', function(req, res, next) {
  res.send('respond with a resource');
});
module.exports = router;

我们看到我们看到的页面是在这个地方生成了。那么又是在什么地方调用的呢？

var usersRouter = require('./routes/users');
app.use('/users', usersRouter);

在app.js里有这么两句，查了下文档会知道这其实是路由级中间件，效果就是能够让发到users的get请求在路由中处理。知道这些之后我们就仿照这种方式，在routes目录下创建一个新的路由test.js,内容也就写个简单的get请求，并在app.js中使用一下。

test.js:

var express = require('express');
var router = express.Router();
router.get('/', function(req, res, next) {
  res.send('test');
});
module.exports = router;

app.js增加：

var testRouter = require('./routes/test');
app.use('/test', testRouter);

我们访问一下http://localhost:3000/test，ok,页面里面出现了test。

接下来就是操作数据库了，首先在Robo 3T 里新建一个叫做login_db的数据库，里面有一个叫Collections的文件夹，实际上这个里面将会存放类似于表的数据。

安装mongoose肯定是必须的，我们知道mongoose操作数据库使用的是Schema和model,那我们就在应用里新建三个文件夹：config(用于连接数据库)、schemas(创建schema)、models(创建model)。新的目录结构如下

首先在app.js里引入mongoose:

//引入mongoose，进行数据库的连接
var mongoose = require('./config/mongoose');
var db = mongoose();

在新创建的config里面创建config.js和mongoose.js分别提供数据库的地址和对数据库进行连接。如下：
config.js:

// 数据库地址： 'mongodb://用户名:密码@ip地址:端口号/数据库';
module.exports = {
    mongodb : 'mongodb://root:root@localhost:27017/login_db'
}

mongoose.js:

const mongoose = require('mongoose');
const config = require('./config');
module.exports = ()=>{
    mongoose.connect(config.mongodb);//连接mongodb数据库
    var db = mongoose.connection;// 实例化连接对象
    db.on('error', console.error.bind(console, '连接错误：'));
    db.once('open', (callback) => {
        console.log('MongoDB连接成功！！');
    });
    return db;
}

然后再去schemas下创建userSchema.js:

var mongoose = require('mongoose');
var Schema = mongoose.Schema;
//创建Schema
var userSchema = new Schema({
    username:String,
    password:String
});
module.exports = userSchema;

在models下创建User.js:

var mongoose = require('mongoose');
var UserSchema = require('../schemas/UserSchema');
//创建model，这个地方的login_user对应mongodb数据库中login_users的conllection
var User = mongoose.model('login_user',UserSchema);
module.exports = User;

最后，我们回到路由的test.js中，使用 var User = require('../models/User')引入模型。
在get方法中通过模型去操作数库。我们从方法中取参数，然后插入到数据库中，这里可以参考下mongoose官网。代码如下：

router.get('/', function(req, res, next) {
    let user = new User({
        username: req.query.username,
    });
    user.save(function (err) {
        if (err){
            res.send({
                status: 0
            })
            return console.error(err);
        }else{
            res.send({
                status: 1
            })
            return;
        }
    });
});

ok，到此，应该就能正常通过get请求对数据进行插入了，我们重启一下服务器。
哇，连接失败了。。。

我们看一下，貌似是权限的问题，回顾一下，我们在config.js里用的是root/root去连接的，而数据库可能没这个用户，好的，我们去创建。
在数据库上运行下面这句。
db.createUser({user:"root",pwd:"root",roles:["readWrite"]})

在启动一下...ok,数据库连接成功！
在浏览器里直接发个get请求：http://localhost:3000/test?username=admin
ok,返回了{"status":1}。再去数据库里看下，果然有了一条数据。

以上，就是创建一个简单接口的方式。