用一個登陸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}。再去數據庫裏看下，果真有了一條數據。

以上，就是建立一個簡單接口的方式。