首页 > 酒水分类 > 洋酒

小程序商城源代码,小程序商城首页设计

酒易淘 洋酒 2022-08-16 12:38:03

品牌名称:酱香白酒加盟 所属行业:酒水 > 白酒

基本投资:10~50万元 投资热度:

加盟意向:1634 门店数量:534家

索要资料 查看详情

  

  先转发,再关注,私信“购物”即可获得源代码下载链接   

  

  本项目前端与前端分离,前端基于Vue Vue-Router Vuex Element-UIA xios,参考小米商城实现。基于后端Node.js(Koa框架)的Mysql实现。   

  

  前端包含11个页面:主页,登录,注册,所有产品,产品详情页面,关于我们,我的收藏,购物车,订单结算页面,我的订单和错误处理页面。   

  

  实现了商品展示、商品分类查询、关键词搜索商品、商品详细信息展示、登录、注册、用户购物车、订单结算、用户订单、用户收藏列表、错误处理等功能。   

  

  后端采用MVC模式,根据前端所需的数据子模块设计相应的接口、控制层和数据持久层。后端地址存储-服务器。   

  

  前端:Vue Vue-路由器Vuex Element-UIA xios后端:node . js、Koa框架数据库:Mysql功能模块的登录页面利用element-ui的对话框实现弹出mask对话框的效果。登录按钮设置在App.vue的根组件中,是否显示登录框由vuex中的showLogin状态控制。   

  

  这种设计是通过点击页面中的按钮进行登录,或者在用户访问需要登录验证的页面或者后端返回需要登录验证的提示后自动弹出登录框,减少了页面跳转,简化了用户操作。   

  

  用户输入的数据往往不可靠,所以这个项目的前后台都要核对登录信息。前端基于element-ui的表单检查方法,使用自定义的检查规则进行检查。   

  

  注册页面也使用了element-ui的对话框来实现弹出mask对话框的效果。注册按钮设置在App.vue的根组件中,是否显示注册框是通过父子组件传递值来控制的。   

  

  用户输入的数据往往是不可靠的,所以这个项目的前后台也要核对注册信息。前端基于element-ui的表单检查方法,定义检查规则进行检查。   

  

  首页主要是商品的展示,轮播展示推荐商品,分类展示热门商品。   

  

  所有商品所有商品页面集成了所有商品展示、商品分类查询、基于关键字的商品搜索结果展示。   

  

  商品详情页商品详情页主要展示一个商品的详细信息,用户可以在这里将自己喜欢的商品添加到购物车或收藏列表中。   

  

  我的购物车是vuex实现的,页面效果参考小米商城的购物车。   

  

  具体实现过程请参考:基于Vuex实现小米商城购物车。   

  

  结算用户在购物车中选择要购买的商品后,点击“前往结算”按钮,将进入该页面。在这里,用户选择送货地址,确认订单的相关信息,然后确认购买。   

  

  我的收藏用户可以通过单击产品详细信息页面上的添加相似内容按钮,将他们喜爱的产品添加到收藏列表中。   

  

  我的订单显示用户的所有订单。   

  

  运行注意:项目   

  

  后端接口地址改成了在线地址,本地操作会直接分到我部署的服务器后端。为了方便测试,数据库数据没有加密。注册时记住不要使用自己的常用密码。如果您需要自己运行后端,请转到store-server clone后端项目,将前端的接口地址修改为您的服务器地址。1.克隆项目git克隆https://github.com/hai-27/的vue-store.git2 .项目安装CD vue-store NPM安装3 .为开发编译并热重装NPM运行服务器4 .为生产编译并缩小NPM运行构建页面截图首页   

  

     

  

  全部商品   

  

     

  

  购物车   

  

     

  

  我的收藏   

  

     

  

  我的订单   

  

     

  

  登录   

  

     

  

  注册   

  

     

  

  先转发,再关注。私信“购物”即可获得源代码下载链接。物联网、车联网定制开发请私聊!   

免费咨询
免费获取加盟资料