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

2018-06-24 01:18:02来源:未知 阅读 ()

新老客户大回馈,云服务器低至5折

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改造登录和购物车数量功能

 

未完待续......

 

标签:

版权申明:本站文章部分自网络,如有侵权,请联系:west999com@outlook.com
特别注意:本站所有转载文章言论不代表本站观点,本站所提供的摄影照片,插画,设计作品,如需使用,请与原作者联系,版权归原作者所有

上一篇:JavaScript学习笔记系列2:Dom操作(一)

下一篇:JavaScript学习笔记系列1:JavaScript的是什么?