摘要：本文源碼簡介之前剛?cè)腴T并做好了一個(gè)簡而全的純?nèi)彝暗捻?xiàng)目，數(shù)據(jù)都是本地模擬請(qǐng)求的詳情請(qǐng)移步這里為了真正做到數(shù)據(jù)庫的真實(shí)存取，于是又開始入門了并以此來為之前的頁面寫后臺(tái)數(shù)據(jù)接口。

本文源碼：Github

簡介：

之前剛?cè)腴Tvue并做好了一個(gè)簡而全的純vue2全家桶的項(xiàng)目，數(shù)據(jù)都是本地 json 模擬請(qǐng)求的；詳情請(qǐng)移步這里：vue-proj-demo
為了真正做到數(shù)據(jù)庫的真實(shí)存取，于是又開始入門了 node+express+mongoose 、并以此來為之前的vue頁面寫后臺(tái)數(shù)據(jù)接口。

前端：client 目錄；主要技術(shù)：vue-cli + vue2 + vue-router2 + vuex2 + axios + es6 + sass + eslint

后臺(tái)：server 目錄；主要技術(shù)：node(express)+mongodb(mongoose)

（前后端分離，路由跳轉(zhuǎn)在前端通過 vue-router 控制，后臺(tái)只負(fù)責(zé)數(shù)據(jù)接口）

|--vue-node-proj
    |--client                   //前端vue頁面：http://gjincai.github.io/tags/vue/
    |--s1_serverNodeBegin       //《Node入門》學(xué)習(xí)練習(xí)代碼，地址：https://www.nodebeginner.org/index-zh-cn.html
    |--s2_serverExpress         //express入門學(xué)習(xí)練習(xí)
    |--s3_Mongodb               //mongodb入門學(xué)習(xí)練習(xí)：http://gjincai.github.io/tags/mongodb/
    |--s4_mongoose              //mongoose入門學(xué)習(xí)練習(xí)：http://gjincai.github.io/tags/mongodb/
    |--s5_server                //express與mongoose整合，實(shí)現(xiàn)注冊(cè)登錄的數(shù)據(jù)在mongodb的存取
    |--server               //前端client頁面的正式后臺(tái)：
        |--api.js               //所有接口
        |--db.js                //數(shù)據(jù)庫初始化、Schema數(shù)據(jù)模型
        |--index.js             //后臺(tái)服務(wù)啟動(dòng)入口
        |--initCarts.json       //首次連接數(shù)據(jù)庫，購物車數(shù)據(jù)的初始化
        |--initGoods.json       //首次連接數(shù)據(jù)庫，所有商品數(shù)據(jù)的初始化
        |--package.json         //安裝依賴：express，mongoose

node.js 與 express 入門：

學(xué)習(xí)練習(xí)代碼：參考本項(xiàng)目中的文件夾 vue-node-proj/s1_serverNodeBegin 和 vue-node-proj/s2_serverExpress；

mongodb的安裝與配置、mongoose的基本使用：

blog學(xué)習(xí)筆記：http://gjincai.github.io/categories/mongodb/；

學(xué)習(xí)練習(xí)代碼：參考本項(xiàng)目中的文件夾 vue-node-proj/s3_Mongodb 和 vue-node-proj/s3_Mongodb；

新建命令行窗口1，開啟本地mongodb服務(wù)：

mongod

新建命令行窗口2，開啟本地后臺(tái)node服務(wù)器：

cd vue-node-proj/server
cnpm install --save
node index.js

新建命令行窗口3，開啟本地前端vue的dev模式：

cd vue-node-proj/client
cnpm install --save
npm run dev --color

然后在瀏覽器打開：

localhost:8080

express+mongoose 實(shí)現(xiàn)簡易后臺(tái)數(shù)據(jù)接口