当前位置: 首页 > 后端技术 > Node.js

Vue+Node+vant+mongoDB手机商城实战[1]

时间:2023-04-04 00:21:54 Node.js

先看一下简介,vueJs+nodeJs手机商城-介绍视频其实是网上商城的简化版,部分交互流程模仿京东商城。主体结构有两条线;1、首页(商品列表页)-->商品详情页-->购物车结算页;2.未登录&已登录-->用户中心;主模块,首页搜索(fake),数据库未连接,限时。轮播图片,读取接口,获取json,v-for循环首页商品栏目名称,栏目下的商品。mongoDB多集合查询vant组件,添加列条目到页脚分类页面,一次添加多个产品。各种判断。。。这个函数是因为一开始没有数据,所以想加个表格来添加数据。做出来后发现其实这就是后台栏目管理vant组件水平标签,组件垂直标签,这两个标签可以联动分页功能是设置每页显示多少条,是第几页now,然后skiphowmanyitemsinthedb,然后限制多少item返回json,然后v-for。UI是vant的分页组件,vant的购物车业务组件,各种配置,vant的商品信息组件,用户中心登录,注册,个人信息,存储在localstorage,创建判断footer底栏来回切换,状态保持,存在于localstorage,创建判断,当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',-carouselgetImgUrls:BASEURL+'/getImgUrls'mongoDB,注册用户集合:userInfogoodsList_a,手机商品List_b,电器商品List_c,汽车商品List_d,女装商品Category,商品品类名称集合。因为数据库操作不是主要方向,所以数据库硬编码了四个集合。也就是说,上面的添加列入口只能添加列名,不能添加数据。技术栈:vue-cli、nodejs、express、vant、axios、router、vuex、es6、mongoDB,基本上这些都是日常用的东西。那我想把整个开发过程连载在这里,一个用于宣传,一个用于总结。下面是我的微信二维码,可以加我,