专栏名称: GitHub猿
GitHub猿,专注于分享Java、大数据、Python、人工智能、前端、Golang、算法、Linux等多个领域,开源项目、工具资源等。欢迎关注让我们一起学习一起进步。
51好读  ›  专栏  ›  GitHub猿

现在的学生太强了,徒手撸了一个小米商城项目(附源码)!

GitHub猿  · 公众号  ·  · 2024-06-17 14:35

正文

请到「今天看啥」查看全文


推荐关注

责编:猿哥 | 来源: GitHub

往期文章: 一个人竟然撸了一个停车场系统

正文

大家好。我是GitHub猿。
今天,推荐一个高仿电商项目小米商城。

上次是谁要 小米商城 系统的项目啊,猿哥帮你找到了。


这是我目前见过的最好的开源 小米商城 系统产品。功能完整,代码结构清晰。值得推荐。



作者还是学生,利用寒假做的,学生就这么牛逼哄哄,佩服佩服。


# 项目简介


本项目前后端分离,前端基于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的表单校验方式,自定义了校验规则进行校验。


首页


首页主要是对商品的展示,有轮播图展示推荐的商品,分类别对热门商品进行展示。


全部商品


全部商品页面集成了全部商品展示、商品分类查询,以及根据关键字搜索商品结果展示。


商品详情页


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


搜索公众号GitHub猿回复“打飞机”,送你一份惊喜礼包。


我的购物车


购物车采用vuex实现,页面效果参考了小米商城的购物车。


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


订单结算


用户在购物车选择了准备购买的商品后,点击“去结算”按钮,会来到该页面。


用户在这里选择收货地址,确认订单的相关信息,然后确认购买。


我的收藏


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


我的订单


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


# 效果预览



源码获取

扫码下方二维码,后台回复【 小米 】即可获取


版权申明:内容来源网络,版权归原创者所有。除非无法确认,我们都会标明作者及出处,如有侵权烦请告知,我们会立即删除并表示歉意。谢谢!


欢迎有需要的同学试试,如果本文对您有帮助,也请帮忙点个 赞 + 在看 啦!❤️

在 GitHub猿 还有更多优质项目系统学习资源,欢迎分享给其他同学吧!

你还有什么想要补充的吗?

上周,又劝退十几个了。。。

ChatGPT 4.0 国内直接用 !!!

最后给大家推荐一个ChatGPT 4.0国内网站,是我们团队一直在使用的,我们对接是OpenAI官网的账号,给大家打造了一个一模一样ChatGPT,很多粉丝朋友现在也都通过我拿这种号,价格不贵,关键还有售后。

一句话说明:用官方一半价格的钱,一句话说明:用跟官方 ChatGPT4.0 一模一样功能,无需魔法,无视封号,不必担心次数不够。

最大优势:可实现会话隔离!突破限制:官方限制每个账号三小时可使用40次4.0本网站可实现次数上限之后,手动切换下一个未使用的账号【相当于一个4.0帐号,同享受一百个账号轮换使用权限】


为了跟上AI时代我干了一件事儿,我创建了一个知识星球社群:ChartGPT与副业。想带着大家一起探索ChatGPT和新的AI时代

有很多小伙伴搞不定ChatGPT账号,于是我们决定,凡是这三天之内加入ChatPGT的小伙伴,我们直接送一个正常可用的永久ChatGPT独立账户。

不光是增长速度最快,我们的星球品质也绝对经得起考验,短短一个月时间,我们的课程团队发布了8个专栏、18个副业项目

简单说下这个星球能给大家提供什么:

1、不断分享如何使用ChatGPT来完成各种任务,让你更高效地使用ChatGPT,以及副业思考、变现思路、创业案例、落地案例分享。

2、分享ChatGPT的使用方法、最新资讯、商业价值。

3、探讨未来关于ChatGPT的机遇,共同成长。

4、帮助大家解决ChatGPT遇到的问题。

5、提供一整年的售后服务,一起搞副业

星球福利:

1、加入星球4天后,就送ChatGPT独立账号。

2、邀请你加入ChatGPT会员交流群。

3、赠送一份完整的ChatGPT手册和66个ChatGPT副业赚钱手册。

其它福利还在筹划中... 不过,我给你大家保证,加入星球后,收获的价值会远远大于今天加入的门票费用 !

本星球第一期原价399,目前属于试运营,早鸟价169,每超过50人涨价10元,星球马上要来一波大的涨价,如果你还在犹豫,可能最后就要以更高价格加入了。。

早就是优势。建议大家尽早以便宜的价格加入!

--END--


猿哥个人微信


添加猿哥个人微信即送一份惊喜大礼包


→ 技术资料共享

→ 技术交流社群



版权申明:内容来源网络,版权归原创者所有。除非无法确认,我们都会标明作者及出处,如有侵权烦请告知,我们会立即删除并表示歉意。谢谢!

往日文章:
牛逼啊!接私活必备的 N 个开源项目!赶快收藏吧(附源码合集第十期)!
推荐一套开源通用后台管理系统(附源码)
这个搜索工具牛逼,但是别乱搜!
看看人家那电影系统,那叫一个优雅(附源码)

最近,GitHub猿建了一个「 GitHub猿交流群 」,欢迎大家一起交流优秀开源项目,也可以宣传自己的开源项目,在 「 GitHub猿 」公众号后台回复【 加群 】邀请你入群。

你点的每个赞,我都认真当成了喜欢







请到「今天看啥」查看全文