vue2.0+node.js+mongodb全棧打造商城

Github地址：https://github.com/ccyinghua/vue-node-mongodb-project

一、構建項目所用：

vue init webpack vue-node-mongodb-project

cnpm install
npm run dev

cnpm install vue-resource --save
cnpm install axios --save

cnpm install vue-lazyload --save   // 圖片加載

* 構建express的一些安裝 // 參考 02-express.md
* 安裝mongoose // 參考03-GoodsListInterface.md

* cnpm install vue-infinite-scroll --save  // 安裝滾動加載插件  04-pagingAndSort.md

* cnpm install vuex --save  // 安裝vuex  10-vuex.md

 

二、文件夾列表

| - build
| - config
| - mock     -- json靜態數據
| - resource -- 靜態資源文件
| - server   -- express框架后端文件
    | - models  
        | - goods.js  -- 商品數據模型
        | - users.js  -- 用戶數據模型
    | - routes
        | - goods.js  -- 商品相關接口
        | - users.js  -- 用戶相關接口
| - src
    | - assets      -- 樣式文件
    | - components
        | - Modal.vue      -- 模態框組件
        | - NavHeader.vue  -- 頭部組件
        | - NavBread.vue   -- 面包屑組件
        | - NavFooter.vue  -- 底部組件
    | - router -- 路由配置文件
    | - util   -- 公用方法文件
    | - views
        | - GoodsList.vue    -- 商品列表頁組件
        | - Cart.vue         -- 購物車列表組件
        | - Address.vue      -- 地址列表頁組件
        | - OrderConfirm.vue -- 訂單確認頁面
        | - OrderSuccess.vue -- 訂單成功頁面
    | - App.vue
    | - main.js
| - static   -- 項目所用圖片，圖標
| - test     -- vue-resource,axios,vuex,ES6,ES6-promise基礎用法

 

三、項目文件說明

• 01-GoodsList.md - 商品列表模塊實現GoodsList.vue
• 02-express.md - 搭建基於express框架運行環境
• 03-GoodsListInterface.md - 基於Node.js開發商品列表接口
• 04-pagingAndSort.md - 商品列表頁分頁和排序功能
• 05-priceAndCart.md - 商品列表價格過濾和加入購物車功能
• 06-login.md - 登錄模塊(登錄功能/登出功能/登錄攔截功能/校驗登錄/全局模態框組件實現)
• 07-shoppingCart.md - 購物車模塊實現(渲染購物車列表頁面/購物車列表刪除功能/購物車商品修改功能)
• 08-address.md - 地址模塊實現(地址列表渲染/地址切換和展開/設置默認地址/地址刪除功能實現)
• 09-orderConfirm.md - 訂單模塊實現(訂單列表渲染/創建訂單功能/訂單成功頁面)
• 10-vuex.md - 基於Vuex改造登錄和購物車數量功能

 

未完待續......