摘要：連接數(shù)據(jù)庫(kù)如果不自己創(chuàng)建默認(rèn)數(shù)據(jù)庫(kù)會(huì)自動(dòng)生成地址跟第一步的地址對(duì)應(yīng)。現(xiàn)在回過(guò)頭來(lái)看里面的入口文件最后，我們?cè)跒g覽器輸入，就會(huì)跳到。到此為止，我們就完成了整個(gè)前后端各自開(kāi)發(fā)到正式部署的流程。

一個(gè)完整的網(wǎng)站服務(wù)架構(gòu)包括：
1、web frame ---這里應(yīng)用express框架
2、web server ---這里應(yīng)用nodejs
3、Database ---這里應(yīng)用monggoDB
4、前端展示 ---這里應(yīng)用vue

首先我們要安裝mongoDB（本例應(yīng)用的mongoDB 3.4.7版本） 和 nodejs（本例應(yīng)用的是nodejs v6.10.3） 具體安裝步驟大家可以百度一下，網(wǎng)上安裝示例很多，這里不過(guò)多講解，以下我們重點(diǎn)講解網(wǎng)站框架搭建操作。

對(duì)應(yīng)以上要點(diǎn)一一作出解釋及具體操作步驟：
第一步：創(chuàng)建mongoDB數(shù)據(jù)庫(kù)
1、直接打開(kāi)mongoDB安裝目錄下binmongod.exe文件，可見(jiàn)如下圖，即為數(shù)據(jù)庫(kù)服務(wù)啟動(dòng)成功

2、瀏覽器輸入localhost:27017顯示如下，證明數(shù)據(jù)庫(kù)可用

第二步：生成vue框架
1、全局生成vue框架，輸入指令
npm i -g vue-cli

2、創(chuàng)建自己的文件夾

3、項(xiàng)目初始化
執(zhí)行以下命令，自動(dòng)創(chuàng)建目錄 E:/workspace/test

一路yes如下

生成目錄結(jié)構(gòu)如下：

執(zhí)行命令，進(jìn)行項(xiàng)目初始化：
cd test
npm install

4、在項(xiàng)目根目錄src/main.js添加代碼
import vueResource from "vue-resource"
Vue.use(vueResource)
如圖所示

5、由于上一步添加代碼vue-resource,這里要引入vue-resource
執(zhí)行命令如圖所示

執(zhí)行后顯示如下，則為正常執(zhí)行

第三步：生成expressm框架
1、執(zhí)行命令npm install express,生成如下

第四步：搭建node服務(wù)器環(huán)境
1、在項(xiàng)目的根目錄新建一個(gè)叫server的目錄，用于放置Node的東西。進(jìn)入server目錄，再新建三個(gè)js文件：
index.js （入口文件）
db.js （設(shè)置數(shù)據(jù)庫(kù)相關(guān)）
api.js （編寫接口）

index.js文件代碼：

// 引入編寫好的api
const api = require("./api"); 
// 引入文件模塊
const fs = require("fs");
// 引入處理路徑的模塊
const path = require("path");
// 引入處理post數(shù)據(jù)的模塊
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);
// 訪問(wèn)靜態(tài)資源文件 這里是訪問(wèn)所有dist目錄下的靜態(tài)資源文件
app.use(express.static(path.resolve(__dirname, "../dist")))
// 因?yàn)槭菃雾?yè)應(yīng)用 所有請(qǐng)求都走/dist/index.html
app.get("*", function(req, res) {
    const html = fs.readFileSync(path.resolve(__dirname, "../dist/index.html"), "utf-8")
    res.send(html)
})
// 監(jiān)聽(tīng)8088端口
app.listen(8088);
console.log("success listen…………");

db.js文件代碼：

// Schema、Model、Entity或者Documents的關(guān)系請(qǐng)牢記，Schema生成Model，Model創(chuàng)造Entity，Model和Entity都可對(duì)數(shù)據(jù)庫(kù)操作造成影響，但Model比Entity更具操作性。
const mongoose = require("mongoose");
// 連接數(shù)據(jù)庫(kù) 如果不自己創(chuàng)建 默認(rèn)test數(shù)據(jù)庫(kù)會(huì)自動(dòng)生成
mongoose.connect("mongodb://127.0.0.1:27017"); // 地址跟第一步的地址對(duì)應(yīng)。

// 為這次連接綁定事件
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文件代碼：

// 可能是我的node版本問(wèn)題，不用嚴(yán)格模式使用ES6語(yǔ)法會(huì)報(bào)錯(cuò)
"use strict";
const models = require("./db");
const express = require("express");
const router = express.Router();

/************** 創(chuàng)建(create) 讀取(get) 更新(update) 刪除(delete) **************/

// 創(chuàng)建賬號(hào)接口
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
    });
    // 保存數(shù)據(jù)newAccount數(shù)據(jù)進(jìn)mongoDB
    newAccount.save((err,data) => {
        if (err) {
            res.send(err);
        } else {
            res.send("createAccount successed");
        }
    });
});
// 獲取已有賬號(hào)接口
router.get("/api/login/getAccount",(req,res) => {
    // 通過(guò)模型去查找數(shù)據(jù)庫(kù)
    models.Login.find((err,data) => {
        if (err) {
            res.send(err);
        } else {
            res.send(data);
        }
    });
});

module.exports = router;

2、對(duì)比node_modules目錄缺少body-parser模塊和mongoose模塊，因此要添加這兩個(gè)模塊
執(zhí)行命令：

3、至此我們的后端代碼就編寫好了，進(jìn)入server目錄，敲上 node index命令，node就會(huì)跑起來(lái)，這時(shí)在瀏覽器輸入http://localhost:8088/api/log...就能訪問(wèn)到這個(gè)接口了，執(zhí)行命令如下：

4、現(xiàn)在我們的本地開(kāi)發(fā)環(huán)境的 web server的接口是 index.js 里的8088，但是本地的webpack生成的網(wǎng)頁(yè)端口是8080，這兩個(gè)不一致。需要進(jìn)行代理（proxy）在config/index.js 中修改

5、這時(shí)，重新啟動(dòng)項(xiàng)目

我們?cè)谇岸私涌诘刂非凹由?api，就會(huì)指向http://localhost:8088/api/，于是我們就能訪問(wèn)到后端的接口了！

第五步：前后端開(kāi)發(fā)完成，最后一步，前端打包，后端部署。
1、前端打包就很簡(jiǎn)單了，一個(gè)命令：
npm run build 這就生成了一個(gè)dist目錄，里面就是打包出來(lái)的東西。
現(xiàn)在回過(guò)頭來(lái)看server里面的入口文件index.js

最后，我們?cè)跒g覽器輸入http://localhost:8088/，就會(huì)跳到index.html。

到此為止，我們就完成了整個(gè)前后端各自開(kāi)發(fā)到正式部署的流程。