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

摘要：一般如果不成功，可以试着看看端口号是否被占用等问题。如下数据库地址用户名密码地址端口号数据库连接数据库实例化连接对象连接错误连接成功然后再去下创建创建在下创建创建，这个地方的对应数据库中的最后，我们回到路由的中，使用引入模型。

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

这篇文章首先介绍一下后端部分，连接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框架来搭建我们的后台，首先要安装node,安装完成之后我们使用express的应用生成器快速创建一个应用的骨架

全局安装express-generator

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

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

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

我们使用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}。再去数据库里看下，果然有了一条数据。

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