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,基本上也就这些吧,都是些日常使用的东西。

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

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

猜你喜欢

转载自blog.csdn.net/qq_40943219/article/details/86777655