Vue+Node+vant+mongoDB移动商城实战【1】

先看一下简单的介绍吧，

vueJs+nodeJs移动商城-介绍视频

其实就是一个简版的网上商城，一些交互流程上是模仿了京东商城。

主要结构有二条线；

1、首页（商品列表页）-->商品详情页-->购物车结算页；
2、未登录&已登录-->用户中心；

主要的模块，

首页

搜索（假的），未连数据库，时间有限。
轮播图，读接口，获得json，v-for循环
首页产品栏目名、栏目下产品。mongoDB多集合查询
vant组件，footer

分类页

添加栏目入口，一次添加多个商品。各种判断...
这个功能是因为开始时没有数据，就想加一个添加数据的表单，结果做出来发现这其实就是后台的栏目管理

vant组件横向tabs、组件纵向tabs，
二个tabs可以联动

分页功能，
就是定一下每页显示几条，现在是第几页，然后在db里skip多少条，
再limit几条返回json，然后v-for。
UI是vant的分页组件

购物车

vant的业务组件，各种配置，搞半天
vant的产品信息组件，

用户中心

登录、注册、个人信息，存在localstorage里，created判断

footer底栏

来回切换，状态保持，存在localstorage里，created判断，
this.$router.push时，回调设置

nodeJs中间件，

-查询条件
node_a : BASEURL + '/node_a',
-查询结果
node_b : BASEURL + '/node_b',
-提交注册信息
register_post : BASEURL + '/register_post',
-登录信息
userLogin_post : BASEURL + '/userLogin_post',
-批量录入商品
insertGoods : BASEURL + '/insertGoods',
-获得商品列表-大类
getGoodsCategory : BASEURL + '/getGoodsCategory',
//根据id，获得对应商品信息
getGoodsInfo : BASEURL + '/getGoodsInfo',
-查询栏目所属的商品列表
getCategoryGoodsList : BASEURL + '/getCategoryGoodsList',
-分页时触发，
getPageChange : BASEURL + '/getPageChange',
-轮播图
getImgUrls : BASEURL + '/getImgUrls'

mongoDB，

注册用户集合：userInfo
goodsList_a，手机
goodsList_b，电器
goodsList_c，汽车
goodsList_d，女装
goodsCategory，产品分类名集合

因为数据库操作不是主要方向，数据库这块就是写死四个集合。
也就是说，上面那个添加栏目的入口，其实只能添加栏目名，但没有数据。

技术栈：

vue-cli、nodejs、express、vant、axios、router、vuex，es6、mongoDB，基本上也就这些吧，都是些日常使用的东西。

然后想把整个开发过程，在这里连载一下，一为宣传，二为总结。

下面是我的微信二维码，可以加我，