在线商城项目-six淘

项目介绍:这是一个推荐购物的第三方网站,主要的商品信息从主流电商网站爬取。客户可以注册为会员,进行查询,下单等操作。主要目的是帮助自己贯穿前后端知识点。由于没有搭建过该类型网站,主体脉络参考慕课上的视频 Get全栈技能点 Vue2.0/Node.js/MongoDB 打造商城系统,有兴趣的同学可以购买以后进行学习,该视频项目的在线地址如下:http://imooc.51purse.com/。虽然脉络相近,但是在代码实现上还是有很大区别的,功能也会不一样,每一章都融入了自己的经验和思考。最后做出来效果以后,大家可以对比一下。

技术选型:这是一个spa网站,前端使用webpack + vue全家桶,后端使用node + express + mongodb + mongoose,服务器使用阿里云。由于是学习项目,目的很明确,就是熟悉开发流程。所以seo,ssr等技术我们在此不会讨论。

好吧,开始学习吧。

第一部分

项目搭建,主体流程基本跑通,商品列表页和登录页逻辑基本完成。

  1. 在线商城项目01-项目初始化
  2. 在线商城项目02-展示商品列表页面并抽取公共组件
  3. 在线商城项目03-启用mock服务
  4. 在线商城项目04-接口约定和数据请求
  5. 在线商城项目05-利用mock数据进行渲染和图片懒加载
  6. 在线商城项目06-商品列表页前端逻辑实现
  7. 在线商城项目07-mac下mongodb的下载与配置
  8. 在线商城项目08-数据库创建和商品集合的创建
  9. 在线商城项目09-基于express框架的server端搭建
  10. 在线商城项目10-基于mongoose实现商品列表查询
  11. 在线商城项目11-商品列表页的排序实现
  12. 在线商城项目12-商品列表页价格筛选实现
  13. 在线商城项目13-商品列表分页功能实现
  14. 在线商城项目14-阶段性自测与bug修复
  15. 在线商城项目15-登录界面实现
  16. 在线商城项目16-头部前端逻辑修改
  17. 在线商城项目17-登录态保持

第二部分

预计会写注册逻辑,购物车逻辑,订单逻辑,二次封装请求方法,前端拦截器。这一部分偏业务性质更多。另外,最近更新可能会很慢。

本文参与腾讯云自媒体分享计划,欢迎正在阅读的你也加入,一起分享。

发表于

我来说两句

0 条评论
登录 后参与评论

相关文章

来自专栏企鹅号快讯

四大微信小程序开发工具测评结果出炉!

微信小程序开放公测后,很多人已经迫不及待地开始注册账号了。但是在技术开发的问题上,却不知道该如何下手。经过一些程序员不辞辛苦连夜测试,终于从十余款工具呕心沥血筛...

1.7K7
来自专栏大内老A

MVC、MVP以及Model2[上篇]

对于大部分面向最终用户的应用来说,它们都需要具有一个可视化的UI与用户进行交互,我们将这个UI称为视图(View)。在早期,我们倾向于将所有与视图相关的逻辑糅合...

18810
来自专栏小白课代表

软件分享 | C4D R14 安装教程

1692
来自专栏编程微刊

小程序新方法 open-type获取头像昵称

小程序自上线以来,官方一直在调整API,因此也出现了一批被废弃的接口,作为程序员的我们,此时此刻千万不能为这不断的变化而感到头疼,应当与时俱进,不断的更新自己的...

3852
来自专栏V站

数据库性能优化冗余字段的作用 数据库冗余

在设计数据库时,某一字段属于一个表,但它又同时出现在另一个或多个表,且完全等同于它在其本来所属表的意义表示,那么这个字段就是一个冗余字段。

1683
来自专栏IT大咖说

前端老牌框架衰退,IMVC(同构 MVC)成未来趋势?

1802
来自专栏何俊林

今日力推: Android 厨客APP / Android 趣刻App

一、Android——CookMan 厨客APP 简介 CookMan,厨客,是一款查询、搜索、分类、收藏菜谱功能的APP。 数据来源 Mob API APP ...

2585
来自专栏ytkah

微信小程序开发教程第九章:微信小程序拍照收纳开发以及删除名片等

第九章:微信小程序拍照收纳开发以及删除名片等 还是先来看看我们今天的主题——拍照收纳。 拍照收纳分为:上传图片/识别名片、手动填写名片信息两个路径,这里只说下拍...

3638
来自专栏更流畅、简洁的软件开发方式

【自然框架】—— 全貌

补充:忘记了一件很重要的事情,我建立了一个小组 http://space.cnblogs.com/group/nature/ 欢迎大家加入。我们可以组织一些话...

2417
来自专栏ytkah

wamp支持win10吗?怎么设置?

  上周ytkah总算把系统升级到win10了,可怎么设置wamp支持win10呢?启动wampwerver是处于黄色状态,打开本地页面是空白,应该是端口问题。...

3659

扫码关注云+社区

领取腾讯云代金券