摘要：一般如果不成功，可以試著看看端口號(hào)是否被占用等問(wèn)題。如下數(shù)據(jù)庫(kù)地址用戶名密碼地址端口號(hào)數(shù)據(jù)庫(kù)連接數(shù)據(jù)庫(kù)實(shí)例化連接對(duì)象連接錯(cuò)誤連接成功然后再去下創(chuàng)建創(chuàng)建在下創(chuàng)建創(chuàng)建，這個(gè)地方的對(duì)應(yīng)數(shù)據(jù)庫(kù)中的最后，我們回到路由的中，使用引入模型。

這篇文章記錄一下如何使用vue+node+mongoDB開(kāi)發(fā)出一個(gè)登錄的小demo。從而打通前端到后端一整條技能樹(shù)。
文章會(huì)先從介紹后端創(chuàng)建API接口連接mongoDB數(shù)據(jù)庫(kù)，到前端用vue-cli創(chuàng)建頁(yè)面調(diào)用接口，最后用一個(gè)login的demo穿起來(lái)。

這篇文章首先介紹一下后端部分，連接mongoDB，創(chuàng)建數(shù)據(jù)接口等...

第一步從mongoDB的官網(wǎng)下載安裝包，完成之后安裝也比較容易，一路next，注意一下安裝路徑，應(yīng)該不會(huì)有太大問(wèn)題。
然后是創(chuàng)建數(shù)據(jù)庫(kù)文件存放的位置與log存放的位置，在你安裝的mongoDB文件夾下創(chuàng)建data文件夾，然后在data下再創(chuàng)建db和log兩個(gè)文件夾，比如我的mongoDB直接安裝在了D盤(pán)，創(chuàng)建完之后就是多了下面兩個(gè)文件夾：
D:MongoDBdatadb
D:MongoDBdatalog
接下里試著啟動(dòng)一下mongoDB服務(wù)，打開(kāi)cmd命令行,進(jìn)入mongoDB的bin目錄，輸入以下命令啟動(dòng)服務(wù)mongod --dbpath D:MongoDBdatadb
在瀏覽器輸入http://localhost:27017 （27017是mongodb的端口號(hào)）查看，如不出意外，會(huì)看到如下的內(nèi)容，表示已經(jīng)成功啟動(dòng)了mongoDB服務(wù)了。

一般如果不成功，可以試著看看端口號(hào)是否被占用等問(wèn)題。
我們還是希望在本地windows“服務(wù)”中，有配置上mongodb 服務(wù)。需要在Mongodb新建配置文件mongo.config文件，在編輯器中打開(kāi)該文件，
dbpath=D:MongoDBdatadb
logpath=D:MongoDBdatalogmongo.log
保存。
管理員方式運(yùn)行cmd，跳轉(zhuǎn)到 D:MongoDBbin目錄下。

輸入：mongod --config "D:Mongodbmongo.config" --install --serviceName "MongoDB"
完成后，查看本地的服務(wù)。會(huì)多出個(gè)mongoDB的服務(wù)，這樣我們就能設(shè)置開(kāi)機(jī)自啟動(dòng)等功能啦。

有了數(shù)據(jù)庫(kù)，自然而然就會(huì)想要一個(gè)像navcat那樣的可視化的數(shù)據(jù)庫(kù)工具，我這邊使用的是Robo 3T,安裝一下這個(gè)軟件，

我們使用express框架來(lái)搭建我們的后臺(tái)，首先要安裝node,安裝完成之后我們使用express的應(yīng)用生成器快速創(chuàng)建一個(gè)應(yīng)用的骨架

全局安裝express-generator

$ npm install express-generator -g
2、在當(dāng)前目錄下創(chuàng)建一個(gè)名為myapp的應(yīng)用，
$ express myapp
完成之后正常打開(kāi)，安裝依賴
$ cd myapp 
$ npm install

用npm start啟動(dòng)應(yīng)用，在瀏覽器中輸入 http://localhost:3000/ ，正常情況下出現(xiàn)

表示express應(yīng)用正確創(chuàng)建，然后我們依此來(lái)進(jìn)行mongoDB的連接以及操作數(shù)據(jù)庫(kù)接口的創(chuàng)建。

我們使用mongoose來(lái)進(jìn)行數(shù)據(jù)庫(kù)的連接，首先安裝mongoose
npm install mongoose –-save-dev

我們需要搞清楚mongoose的幾個(gè)概念：
Schema： 一種以文件形式存儲(chǔ)的數(shù)據(jù)庫(kù)模型骨架，不具備數(shù)據(jù)庫(kù)的操作能力
Model： 由Schema發(fā)布生成的模型，具有抽象屬性和行為的數(shù)據(jù)庫(kù)操作對(duì)
Entity： 由Model創(chuàng)建的實(shí)體，他的操作也會(huì)影響數(shù)據(jù)庫(kù)

我們創(chuàng)建接口的方式是通過(guò)express的Router,而接口里面操作數(shù)據(jù)庫(kù)就要用到mongoose進(jìn)行數(shù)據(jù)庫(kù)的連接，創(chuàng)建Schema，通過(guò)Schema創(chuàng)建model,再通過(guò)model進(jìn)行數(shù)據(jù)庫(kù)的增刪改查。

我們現(xiàn)在已經(jīng)有了mongoDB數(shù)據(jù)庫(kù)，也會(huì)創(chuàng)建express應(yīng)用，大概知道怎么使用mongoose連接操作數(shù)據(jù)庫(kù)了，那我們就來(lái)建一個(gè)簡(jiǎn)單的demo,來(lái)把這些東西組合起來(lái)，創(chuàng)建一個(gè)接口吧。

首先我們不妨先看一下之前我們創(chuàng)建的express應(yīng)用,訪問(wèn)一下http://localhost:3000/users。發(fā)現(xiàn)居然是有這一個(gè)頁(yè)面的，就說(shuō)明應(yīng)用為我們處理了users這個(gè)路由，跳轉(zhuǎn)到了指定的頁(yè)面。
我們看一下項(xiàng)目的目錄結(jié)構(gòu)。

里面有一個(gè)routes文件夾有users,打開(kāi)如下所示，

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

我們看到我們看到的頁(yè)面是在這個(gè)地方生成了。那么又是在什么地方調(diào)用的呢？

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

在app.js里有這么兩句，查了下文檔會(huì)知道這其實(shí)是路由級(jí)中間件，效果就是能夠讓發(fā)到users的get請(qǐng)求在路由中處理。知道這些之后我們就仿照這種方式，在routes目錄下創(chuàng)建一個(gè)新的路由test.js,內(nèi)容也就寫(xiě)個(gè)簡(jiǎn)單的get請(qǐng)求，并在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);

我們?cè)L問(wèn)一下http://localhost:3000/test，ok,頁(yè)面里面出現(xiàn)了test。

接下來(lái)就是操作數(shù)據(jù)庫(kù)了，首先在Robo 3T 里新建一個(gè)叫做login_db的數(shù)據(jù)庫(kù)，里面有一個(gè)叫Collections的文件夾，實(shí)際上這個(gè)里面將會(huì)存放類似于表的數(shù)據(jù)。

安裝mongoose肯定是必須的，我們知道m(xù)ongoose操作數(shù)據(jù)庫(kù)使用的是Schema和model,那我們就在應(yīng)用里新建三個(gè)文件夾：config(用于連接數(shù)據(jù)庫(kù))、schemas(創(chuàng)建schema)、models(創(chuàng)建model)。新的目錄結(jié)構(gòu)如下

首先在app.js里引入mongoose:

//引入mongoose，進(jìn)行數(shù)據(jù)庫(kù)的連接
var mongoose = require("./config/mongoose");
var db = mongoose();

在新創(chuàng)建的config里面創(chuàng)建config.js和mongoose.js分別提供數(shù)據(jù)庫(kù)的地址和對(duì)數(shù)據(jù)庫(kù)進(jìn)行連接。如下：
config.js:

// 數(shù)據(jù)庫(kù)地址： "mongodb://用戶名:密碼@ip地址:端口號(hào)/數(shù)據(jù)庫(kù)";
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數(shù)據(jù)庫(kù)
    var db = mongoose.connection;// 實(shí)例化連接對(duì)象
    db.on("error", console.error.bind(console, "連接錯(cuò)誤："));
    db.once("open", (callback) => {
        console.log("MongoDB連接成功??！");
    });
    return db;
}

然后再去schemas下創(chuàng)建userSchema.js:

var mongoose = require("mongoose");
var Schema = mongoose.Schema;
//創(chuàng)建Schema
var userSchema = new Schema({
    username:String,
    password:String
});
module.exports = userSchema;

在models下創(chuàng)建User.js:

var mongoose = require("mongoose");
var UserSchema = require("../schemas/UserSchema");
//創(chuàng)建model，這個(gè)地方的login_user對(duì)應(yīng)mongodb數(shù)據(jù)庫(kù)中l(wèi)ogin_users的conllection
var User = mongoose.model("login_user",UserSchema);
module.exports = User;

最后，我們回到路由的test.js中，使用 var User = require("../models/User")引入模型。
在get方法中通過(guò)模型去操作數(shù)庫(kù)。我們從方法中取參數(shù)，然后插入到數(shù)據(jù)庫(kù)中，這里可以參考下mongoose官網(wǎng)。代碼如下：

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，到此，應(yīng)該就能正常通過(guò)get請(qǐng)求對(duì)數(shù)據(jù)進(jìn)行插入了，我們重啟一下服務(wù)器。
哇，連接失敗了。。。

我們看一下，貌似是權(quán)限的問(wèn)題，回顧一下，我們?cè)赾onfig.js里用的是root/root去連接的，而數(shù)據(jù)庫(kù)可能沒(méi)這個(gè)用戶，好的，我們?nèi)?chuàng)建。
在數(shù)據(jù)庫(kù)上運(yùn)行下面這句。
db.createUser({user:"root",pwd:"root",roles:["readWrite"]})

在啟動(dòng)一下...ok,數(shù)據(jù)庫(kù)連接成功！
在瀏覽器里直接發(fā)個(gè)get請(qǐng)求：http://localhost:3000/test?username=admin
ok,返回了{(lán)"status":1}。再去數(shù)據(jù)庫(kù)里看下，果然有了一條數(shù)據(jù)。

以上，就是創(chuàng)建一個(gè)簡(jiǎn)單接口的方式。