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

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

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

一、安装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,安装一下这个软件，

二、建立express应用

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

全局安装express-generator

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

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

表示express应用正确建立，而后咱们依此来进行mongoDB的链接以及操做数据库接口的建立。

三、mongoose操做数据库

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

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

咱们建立接口的方式是经过express的Router,而接口里面操做数据库就要用到mongoose进行数据库的链接，建立Schema，经过Schema建立model,再经过model进行数据库的增删改查。

四、数据接口的建立

咱们如今已经有了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}。再去数据库里看下，果真有了一条数据。

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