Vue+Node+MongoDB從開發到正式部署

時間 2019-11-10

標籤 vue+node+mongodb vue node mongodb 開發正式部署欄目 MongoDB 简体版

原文原文鏈接

聲明：文章來源於【Vue+Node+MongoDB從開發到正式部署】僅做爲我的收藏html

想搭建一個Vue+Node+MongoDB的項目，能跑通整個開發到部署的流程，折騰一個多星期終於能夠了~看過很多教學文章，發現教你怎樣搭建一個Vue開發環境的不少，搭建Express的不少，但還真沒發現一個完整從開發到正式部署的教程，因此只好本身來填這個坑。Node是現學現賣，文中有誤請大力指正。其中各類我參考過有用的資源會穿插在文中。前端

一、整理從開發到部署的思路

首先咱們要整理好整個工做流程：vue

先後端分離，各自開發。這裏先後端分離是這樣的：前端用Vue開發靜態頁面，路由經過Vue-Router進行，後端用Node僅用於編寫API給前端調用獲取數據。
前端開發時經過Vue-Cli中提供的proxyTable進行代理，由此可跨域調用Node編寫的API。
先後端各自開發完成，測試無誤後，前端經過webpack打包壓縮，後端拉取前端打包壓縮好的文件即部署完成。

二、以登陸功能爲例跑一遍這個過程

這裏會以一個不完善的登陸功能來演示這個過程。
node

功能很簡單，填寫完帳號密碼點擊登陸按鈕，就把帳號密碼插入數據庫，而且查出如今已經有哪些數據。webpack

用到的工具：git

Vue-Cli
Vue-Resource
Node + Express
MongoDB

下面正式開始：github

安裝Vue-Cli
npm i -g vue-cli
去到你想要放置項目的目錄，進行初始化
vue init webpack XXX（你想要項目的名字）
按提示一直下一步，完成後按提示
cd XXX
npm install （這裏建議使用淘寶鏡像cnpm，否則牆外的東西……）
npm run dev
如無心外你就會看到下圖，證實成功了

這時咱們就能夠去開發咱們的登陸頁面了。開發過程就不說了，樣式怎樣也可有可無，這裏只須要兩個input框用於填寫帳號跟密碼，還有一個登陸按鈕負責請求後端接口而已。記得安裝一下Vue-Resource。核心代碼：web

<template>
<input class="form-control" id="inputEmail3" placeholder="請輸入帳號" v-model="account">
<input type="password" class="form-control" id="inputPassword3" placeholder="請輸入密碼" v-model="password">
<button type="submit" class="btn btn-default" @click="login">登陸</button>
</template>

<script>
    export default {
    data() {
        return {
            account : '',
            password : ''
        }
    },
    methods:{
      login() {
        // 獲取已有帳號密碼
        this.$http.get('/api/login/getAccount')
          .then((response) => {
            // 響應成功回調
            console.log(response)
            let params = { 
              account : this.account,
              password : this.password
            };
            // 建立一個帳號密碼
            return this.$http.post('/api/login/createAccount',params);
          })
          .then((response) => {
            console.log(response)
          })
          .catch((reject) => {
            console.log(reject)
          });
        }
      }
    }
</script>

這時回到瀏覽器，如無心外應該會出現兩個輸入框和一個登陸按鈕，固然如今去點擊登陸按鈕請求接口，是不行的。因此咱們如今須要去搭建Node。 mongodb

在項目的根目錄新建一個叫server的目錄，用於放置Node的東西。進入server目錄，再新建三個js文件：vue-cli

index.js （入口文件）
db.js （設置數據庫相關）
api.js （編寫接口）

如今總體目錄結構是這樣的：

好，如今咱們來搞Node。這裏使用的Node框架是Express。安裝Express：
npm install express –save

index.js：

// 引入編寫好的api
const api = require('./api'); 
// 引入文件模塊
const fs = require('fs');
// 引入處理路徑的模塊
const path = require('path');
// 引入處理post數據的模塊
const bodyParser = require('body-parser')
// 引入Express
const express = require('express');
const app = express();

app.use(bodyParser.json());
app.use(bodyParser.urlencoded({extended: false}));
app.use(api);
// 訪問靜態資源文件 這裏是訪問全部dist目錄下的靜態資源文件
app.use(express.static(path.resolve(__dirname, '../dist')))
// 由於是單頁應用 全部請求都走/dist/index.html
app.get('*', function(req, res) {
    const html = fs.readFileSync(path.resolve(__dirname, '../dist/index.html'), 'utf-8')
    res.send(html)
})
// 監聽8088端口
app.listen(8088);
console.log('success listen…………');

db.js：
這個js文件主要用於配置mongoDB相關東西，mongoDB的相關概念你們自行搜索學習。咱們這裏使用mongoose 中間件來鏈接mongoDB。mongoDB的安裝你們百度便可。有一點須要注意的是，mongoDB安裝完以後，咱們須要本身手動去新建一個文件夾用於放置mongoDB的數據。個人mongoDB安裝在E盤，因此也在E盤根目錄建立一個叫mongo-data的文件夾（名字隨便取），進入該文件夾，再新建一個名叫db的文件夾。當咱們去啓動mongoDB服務時，咱們須要指定該路徑。如何開啓mongoDB服務？進入mongoDB所在目錄，再進入它的bin目錄，敲這條命令：
mongod.exe –dbpath e:mongo-datadb

如無心外mongoDB就會順利啓動。而關於怎樣使用mongoose 中間件去操做mongoDB，建議你們移步到mongoose 的官網，照着quick start敲一遍就能夠了。

// Schema、Model、Entity或者Documents的關係請牢記，Schema生成Model，Model創造Entity，Model和Entity均可對數據庫操做形成影響，但Model比Entity更具操做性。
const mongoose = require('mongoose');
// 鏈接數據庫 若是不本身建立 默認test數據庫會自動生成
mongoose.connect('mongodb://localhost/test');

// 爲此次鏈接綁定事件
const db = mongoose.connection;
db.once('error',() => console.log('Mongo connection error'));
db.once('open',() => console.log('Mongo connection successed'));
/************** 定義模式loginSchema **************/
const loginSchema = mongoose.Schema({
    account : String,
    password : String
});

/************** 定義模型Model **************/
const Models = {
    Login : mongoose.model('Login',loginSchema)
}

module.exports = Models;

api.js：

"use strict";
const models = require('./db');
const express = require('express');
const router = express.Router();

/************** 建立(create) 讀取(get) 更新(update) 刪除(delete) **************/

// 建立帳號接口
router.post('/api/login/createAccount',(req,res) => {
    // 這裏的req.body可以使用就在index.js中引入了const bodyParser = require('body-parser')
    let newAccount = new models.Login({
        account : req.body.account,
        password : req.body.password
    });
    // 保存數據newAccount數據進mongoDB
    newAccount.save((err,data) => {
        if (err) {
            res.send(err);
        } else {
            res.send('createAccount successed');
        }
    });
});
// 獲取已有帳號接口
router.get('/api/login/getAccount',(req,res) => {
    // 經過模型去查找數據庫
    models.Login.find((err,data) => {
        if (err) {
            res.send(err);
        } else {
            res.send(data);
        }
    });
});

module.exports = router;

至此咱們的後端代碼就編寫好了，進入server目錄，敲上 node index命令，node就會跑起來，這時在瀏覽器輸入http://localhost:8088/api/login/getAccount就能訪問到這個接口了

回到前端，嘗試請求接口 :

如今咱們點擊登陸按鈕去請求接口，固然仍是不行的，由於使用npm run dev 進行開發時，其實webpack會啓動一個8080的web服務用於咱們進行開發，而咱們後端是在8088端口的，因此咱們確定請求不到後端的接口。怎麼辦？跨域問題相信前端都很熟悉，難道咱們又要去搞一遍解決這些問題？咱們只是想開發的時候能調到後端的接口而已……

貼心的腳手架其實已經爲咱們解決了這個問題。進入

咱們會發現有有一個proxyTable，這就是用來開啓一個代理服務從而解決咱們這個問題的：【Vue-Cli官方描述】。

因而，咱們寫成這樣：

proxyTable: {
        '/api': {
        target: 'http://localhost:8088/api/',
        changeOrigin: true,
        pathRewrite: {
          '^/api': ''
        }
      }
    }

這時，咱們在前端接口地址前加上/api，就會指向http://localhost:8088/api/，因而咱們就能訪問到後端的接口了！讓咱們來點擊一下登陸按鈕，會發現接口請求成功了！再去數據庫看看！也插入了一條新數據！成功！

先後端開發完成，最後一步，前端打包，後端部署。

前端打包就很簡單了，一個命令：
npm run build 這就生成了一個dist目錄，裏面就是打包出來的東西。
如今回過頭來看server裏面的入口文件index.js

// 訪問靜態資源文件 這裏是訪問全部dist目錄下的靜態資源文件
app.use(express.static(path.resolve(__dirname, '../dist')))
// 由於是單頁應用 全部請求都走/dist/index.html
app.get('*', function(req, res) {
    const html = fs.readFileSync(path.resolve(__dirname, '../dist/index.html'), 'utf-8')
    res.send(html)
})
// 監聽8088端口
app.listen(8088);

這裏的關鍵是express.static，【利用 Express 託管靜態文件】。因而咱們才能訪問到前端打包出來的靜態頁面index.html。

最後，咱們在瀏覽器輸入http://localhost:8088/，就會跳到index.html。

到此爲止，咱們就完成了整個先後端各自開發到正式部署的流程。