怎样做一个简易的网页:前后端别离网上购物源码(含小程序)分享
本文摘要: 先转发,然后加重视,私信“购物”即可获取源码下载链接项目简介本项现在后端别离,前端基于Vue+Vue-router+Vuex+Element-ui+Axios,参考小米商城完成。后端基于Node.js(Koa框架)+Mysql完成。前端包括了11个页面:官网、登录、注
先转发,然后加重视,私信“购物”即可获取源码下载链接

项目简介


本项现在后端别离,前端基于Vue+Vue-router+Vuex+Element-ui+Axios,参考小米商城完成。后端基于Node.js(Koa框架)+Mysql完成。

前端包括了11个页面:官网、登录、注册、悉数商品、商品概况页、关于我们、我的保藏、购物车、订单结算页面、我的订单以及过错处理页面。

完成了商品的展示、商品分类查询、要害字查找商品、商品详细信息展示、登录、注册、用户购物车、订单结算、用户订单、用户保藏列表以及过错处理功用。

后端采纳了MVC模式,依据前端需要的数据分模块设计了相应的接口、控制层、数据耐久层。后端传送地点store-server 。

技能栈

  • 前端:Vue+Vue-router+Vuex+Element-ui+Axios
  • 后端:Node.js、Koa框架
  • 数据库:Mysql

功用模块

登录


页面使用了element-ui的Dialog完成弹出蒙版对话框的效果,登录按钮设置在App.vue根组件,通过vuex中的showLogin状态控制登录框是否显示。

这样设计是为了既可以通过点击页面中的按钮登录,也能够是用户拜访需要登录验证的页面或后端返回需要验证登录的提示后主动弹出登录框,减少了页面的跳转,简化用户操作。

用户输入的数据往往是不可靠的,所以本项现在后端都对登录信息进行了校验,前端基于element-ui的表单校验方式,自界说了校验规则进行校验。

注册


页面相同使用了element-ui的Dialog完成弹出蒙版对话框的效果,注册按钮设置在App.vue根组件,通过父子组件传值控制注册框是否显示。

用户输入的数据往往是不可靠的,所以本项现在后端相同都对注册信息进行了校验,前端基于element-ui的表单校验方式,自界说了校验规则进行校验。

官网


官网主要是对商品的展示,有轮播图展示引荐的商品,分类别对热门商品进行展示。

悉数商品


悉数商品页面集成了悉数商品展示、商品分类查询,以及依据要害字查找商品成果展示。

商品概况页


商品概况页主要是对某个商品的详细信息进行展示,用户可以在这里把喜欢的商品加入购物车或保藏列表。

我的购物车


购物车选用vuex完成,页面效果参考了小米商城的购物车。

详细完成过程请看:基于Vuex完成小米商城购物车

订单结算


用户在购物车选择了准备购买的商品后,点击“去结算”按钮,会来到该页面。 用户在这里选择收货地点,确认订单的相关信息,然后确认购买。

我的保藏


用户在商品的概况页,可以通过点击加入 喜欢 按钮,把喜欢的商品加入到保藏列表。

我的订单


对用户的所有订单进行展示。

运转项目


留意:
  • 后端接口地点现已修正为线上的地点,本地运转会直接分为我布置在效劳器的后端。
  • 为了便利测试,数据库数据没有加密,注册时切记不要使用自己的常用密码
  • 假如需要自己运转后端,请移步到store-server clone后端项目,并修正前端的接口地点为您的效劳器地点。
1. Clone projectgit clone https://github.com/hai-27/vue-store.git2. Project setupcd vue-storenpm install3. Compiles and hot-reloads for developmentnpm run serve4. Compiles and minifies for productionnpm run build

页面截图


官网


悉数商品


购物车


我的保藏


我的订单


登录


注册



先转发,然后加重视,私信“购物”即可获取源码下载链接,物联网,车联网定制开发请私聊!


【免责声明】本文仅代表作者或发布者个人观念,不代表(www.lmnkf.cn)及其所属公司官方发声,对文章观念有疑义请先联络作者或发布者自己修正,若内容触及侵权或违法信息,请先联络发布者或作者删除,若需我们协助请联络平台管理员,Emailcxb5918(本平台不支撑其他投诉反馈渠道,谢谢合作)。若需要学习以上相关常识请到巨推学院观看视频教程,网站地址www.tsllg.cn。

相关内容