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

先看图片吧，

由于文章里不能直接贴视频，因此就转了gif图片，能够先大概的看一下它是个什么形式的东西。其实就是一个简版的网上商城，一些交互流程上是模仿了京东商城。

主要结构有二条线；

一、首页（商品列表页）-->商品详情页-->购物车结算页；
二、未登陆&已登陆-->用户中心；
复制代码

主要的模块，

首页

搜索（假的），未连数据库，时间有限。
复制代码

轮播图，读接口，得到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，es六、mongoDB，基本上也就这些吧，都是些平常使用的东西。

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

下面是个人微信二维码，能够加我，