基於 Vue2+Node+mongoDB 的先後端分離全棧練手小項目

本文源碼：Github

簡介：

以前剛入門vue並作好了一個簡而全的純vue2全家桶的項目，數據都是本地 json 模擬請求的；詳情請移步這裏：vue-proj-demo

爲了真正作到數據庫的真實存取，因而又開始入門了 node+express+mongoose 、並以此來爲以前的vue頁面寫後臺數據接口。

項目說明：

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

後臺：server 目錄；主要技術：node(express)+mongodb(mongoose)

（先後端分離，路由跳轉在前端經過 vue-router 控制，後臺只負責數據接口）

代碼目錄說明：

|--vue-node-proj
    |--client                   //前端vue頁面：http://gjincai.github.io/tags/vue/
    |--s1_serverNodeBegin       //《Node入門》學習練習代碼，地址：https://www.nodebeginner.org/index-zh-cn.html
    |--s2_serverExpress         //express入門學習練習
    |--s3_Mongodb               //mongodb入門學習練習：http://gjincai.github.io/tags/mongodb/
    |--s4_mongoose              //mongoose入門學習練習：http://gjincai.github.io/tags/mongodb/
    |--s5_server                //express與mongoose整合，實現註冊登陸的數據在mongodb的存取
    |--server               //前端client頁面的正式後臺：
        |--api.js               //全部接口
        |--db.js                //數據庫初始化、Schema數據模型
        |--index.js             //後臺服務啓動入口
        |--initCarts.json       //首次鏈接數據庫，購物車數據的初始化
        |--initGoods.json       //首次鏈接數據庫，全部商品數據的初始化
        |--package.json         //安裝依賴：express，mongoose

項目運行：

環境配置：

node.js 與 express 入門：

學習練習代碼：參考本項目中的文件夾 vue-node-proj/s1_serverNodeBegin 和 vue-node-proj/s2_serverExpress；

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

blog學習筆記：http://gjincai.github.io/categories/mongodb/；

學習練習代碼：參考本項目中的文件夾 vue-node-proj/s3_Mongodb 和 vue-node-proj/s3_Mongodb；

運行順序：

新建命令行窗口1，開啓本地mongodb服務：

mongod

新建命令行窗口2，開啓本地後臺node服務器：

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 實現簡易後臺數據接口

效果呈現：