【汇智网】小电商项目实战

功能介绍

1. 用户可以完成注册、登录然后登录后对商品的浏览。

2. 登录之后,用户可以对相关商品进行选购并添加到购物车。

3. 用户可以对购物车里面的商品进行增加、减少、删除操作。

4. 用户可对购物车商品进行结算操作。

技术选型

本项目涉及使用到NodeJS、Express框架、MongoDB数据库、Mongoose对象模型库,详细介绍如下:

NodeJS:Node.js采用Google Chrome浏览器的V8引擎,一个后端的Javascript运行环境,提供很多系统级的API,如文件操作、网络编程等。

MongoDB:MongoDB是一个基于分布式文件存储的一个高性能,开源,无模式的文档型数据库,数据以BSON文档的格式存储在磁盘上。

Express:一个简洁、灵活的基于Node.js的Web应用开发框架, 支持Ejs、jade等多种模板,并且提供一系列强大的功能,比如:模板解析、静态文件服务、中间件、路由控制等等。

Mongoose:一个针对MongoDB操作的对象模型库,封装了MongoDB对文档的的一些增删改查等常用方法。

结构划分

项目主要分为以下几大模块:注册模块,登录模块,商品模块、购物车模块、结算模块。

1. 用户注册模块:填写用户名、密码、确认密码后,实现成功注册,然后进行登录。

2. 用户登录模块:填写已注册的用户名称,填写正确的密码,进入商品展示页面。

3. 商品模块:用户选择相关产品加入购物车。

4. 购物车模块:对相关商品进行增加、减少、删除操作。

5. 结算模块:对购物车内已选择商品进行结算。

模块结构如下图所示:

流程设计

此流程图显示用户可以进行登录和注册操作,如果用户已经注册,则可以直接登录,若未注册则必须先注册成功后才能进行登录,登录成功后可以进入商品页浏览商品,也可以选择相关商品并可加入购物车,在购物车页面内可以对购物车商品进行相关操作,最后结选择相关商品进行结算。

其流程如下图所示:

数据库介绍

数据库的使用呢,我们这里选择了MongoDB。

MongoDB的简单介绍如下:

MongoDB是一个开源的NoSQL数据库,相比MySQL那样的关系型数据库,它更显得轻巧、灵活,
非常适合在数据规模很大、事务性不强的场合下使用。同时它也是一个对象数据库,没有表、行等概念,也没有固定的模式和结构,所有的数据以文档的形式存储,数据格式就是JSON。

MongoDB —— 是一个对象数据库,没有表、行等概念,也没有固定的模式和结构,所有的数据以Document(以下简称文档)的形式存储(Document,就是一个关联数组式的对象,它的内部由属性组成,一个属性对应的值可能是一个数、字符串、日期、数组,甚至是一个嵌套的文档。)

我们一共要创建三个集合,分别是user(用户)集合、commodity(商品)集合、cart(购物车)集合,后面我们会一一介绍。

user集合属性值展示

关于user集合,我们设计的属性有name(用户名)、password(密码),
如下所示:

commodity集合属性值展示

关于commodity集合,我们设计的属性有name(商品名称)、price(商品价格)、imgSrc(商品展示图片路径),
如下所示:

?

carts集合属性值展示

关于cart集合,我们设计的属性有uId(用户ID)、cId(商品ID)、cName(商品名称)、cPrice(商品价格)、cImgSrc(商品展示图片路径)、cQuantity(商品数量)、cStatus(商品结算状态,未结算为false,已结算为true),
如下所示:

注册模块功能设计介绍

功能:本模块主要用于新用户注册,用户通过表单提供用户名和密码信息,系统根据用户提供的注册信息对用户进行具体操作。

输入操作:用户名、密码、确认密码。

对应处理:

1. 输入注册信息:在页面提供的表单处输入用户的用户名和密码信息,点击"注册"按钮提交表单数据信息。已注册用户,可点击"登录"按钮,进入登录页面。

(2) 用户注册身份验证:连接数据库,以输入的"用户名"数据为查询条件来查看输入用户名是否已存在,如果用户名未注册,则提示注册成功并转到登录页进行登录,如果用户已注册,则给出用户已存在提示并重新注册。

注册界面

用户注册界面草图如下:

登录模块设计与实现

功能:本模块主要用于对用户身份进行鉴别。用户通过表单提供用户名和密码信息,系统根据用户提供的登录信息对用户进行查询鉴别。
如果身份合法,则用户可进入商品页面。

输入操作:用户名、密码。

对应处理:

1. 输入用户的登录信息:在页面提供的表单处输入用户的用户名和密码信息,点击"登录"按钮提交表单数据信息。
也可点击"注册"按钮,注册新用户。

2. 用户身份进行验证:连接数据库,打开user集合,检验用户登录信息。以输入的"用户名"数据为查询条件来查看用户是否存在,如果存在,继续检验其输入密码是否正确,密码和用户名都正确,则进入商品展示页面;如果用户名不存在或密码不正确,则给出相应的提示。

继续学习?

登录界面草图

用户登录界面草图如下:

商品页面介绍

商品页呢,我们主要要来展示商品,用户登录成功之后将会跳入商品页,可对所有商品进行查看,
每个商品信息的内容包括:商品名称、商品图片、商品价格,用户可浏览也可将其加入购物车。

页面草图如下所示:

商品页面介绍

关于购物车页面,主要展示用户已购买的商品,包括商品的信息、价格、数量,当然用户可以对其中商品进行增加、减少、删除操作,最后,用户可选择对其中商品进行结算,选择结算后,会提示相应的付款金额。

页面草图如下所示:

继续学习?

介绍

本章课程是在NodeJS、Express、Mongoose、MongoDB的基础之上所建立的,所以,学习者请先了解以上基础,方可更好的完成多本章节的学习和掌握。

此次学习将带领大家来做一个用户注册、登录、商品的购物车加入和结算的简单实战项目,通过逐步的学习来更好的了解和掌握对前面课程的学习和巩固。

通过本章课程循序渐进的学习,将对前面的所学知识进行温习和巩固,达到温故而知新的效果。

时间: 2024-11-07 15:39:56

【汇智网】小电商项目实战的相关文章

Java从零到企业级电商项目实战

Java从零到企业级电商项目实战网盘地址:https://pan.baidu.com/s/1Ms8tin2fhe9TH_6VOmP-7g 密码:xhaz备用地址(腾讯微云):https://share.weiyun.com/5bpQSby 密码:38pnwv 六大课程亮点 让你拥有自己的在线电商项目学习成本低前后端彻底分离,按需学习前端和后端,让你更专注自己需要的技术 上手速度快手把手,由浅入深,步步为营,新手上手速度快 经验技巧多各种踩坑分享,各种贴心插件,各种开发技巧,倍增开发效率与准确性

React Native电商项目实战混合APP开发 React Native实战 混合APP实战开发

React Native  和 angular+ionic 是目前网络上最火的混合APP开发语言,其功能强大能够开发出安卓和IOS程序! ------------------课程目录------------------ <React Native电商项目实战>├<01React Native初体验>│  ├01-React Native简介.mp4│  ├02-React Native环境搭建.mp4│  ├03-React Native初体验及其它环境搭建.mp4│  └04-R

Java企业级电商项目实战 Tomcat集群与Redis分布式

本套课程包含:java电商项目实战课程 Tomcat集群视频教程 Redis项目实战课程课程目录1-1 课程导学1-2 大型Java项目架构演进解析1-3 一期课程与问答服务回顾1-4 一期项目结构和代码回顾1-5 课程使用系统及技术版本介绍(一期+二期)1-6 二期项目初始化第2章 Lombok框架集成及原理解析本章会对Lombok框架进行介绍,同时会讲解Lombok的原理.并手把手领着小伙伴们实战,引入Lombok以及IDE安装Lombok插件.然后会带着大家实战Coding,讲解@Data

SpringBoot电商项目实战 — 前后端分离后的优雅部署及Nginx部署实现

在如今的SpringBoot微服务项目中,前后端分离已成为业界标准使用方式,通过使用nginx等代理方式有效的进行解耦,并且前后端分离会为以后的大型分布式架构.弹性计算架构.微服务架构.多端化服务(多个客户展现端,例如:web端,安卓app,IOSapp,微信小程序等)打下坚实的基础.这个步骤是系统架构从猿进化成人的必经之路. image 上图是简单的分布式微服务开发及前后端分离的示意图.展现层也就是所谓的前端(客户可直观看到的),比如电商项目前端包含:app(安卓和IOS).微信小程序.PC商

web前端Vue+Django&#160;rest&#160;framework&#160;框架&#160;生鲜电商项目实战视频教程 学习

web前端Vue+Django rest framework 框架 生鲜电商项目实战视频教程 学习 1.drf前期准备 1.django-rest-framework官方文档 https://www.django-rest-framework.org/ #直接百度找到的djangorestframework的官网是打不开的 2.安装依赖包 如图所示,django restframework的依赖模块,除了coreapi和django-guardian,已经在前面安装过了. 打开终端,执行安装命令

java架构师课程、性能调优、高并发、tomcat负载均衡、大型电商项目实战、高可用、高可扩展、数据库架构设计、Solr集群与应用、分布式实战、主从复制、高可用集群、大数据

15套Java架构师详情 * { font-family: "Microsoft YaHei" !important } h1 { background-color: #006; color: #FF0 } 15套java架构师.集群.高可用.高可扩展.高性能.高并发.性能优化.Spring boot.Redis.ActiveMQ.Nginx.Mycat.Netty.Jvm大型分布式项目实战视频教程 视频课程包含: 高级Java架构师包含:Spring boot.Spring  clo

16套java架构师,高并发,高可用,高性能,集群,大型分布式电商项目实战视频教程

16套Java架构师,集群,高可用,高可扩展,高性能,高并发,性能优化,设计模式,数据结构,虚拟机,微服务架构,日志分析,工作流,Jvm,Dubbo ,Spring boot,Spring cloud, Redis,ActiveMQ,Nginx,Mycat,Netty,Jvm,Mecached,Nosql,Spring,大型分布式项目实战视频教程 视频课程包含: 高级Java架构师包含:架构师,高并发,分布式,集群,高可用,高可扩展,高性能,设计模式,数据结构算法,虚拟机,微服务架构,日志分析,

SpringBoot电商项目实战 — Zookeeper的分布式锁实现

上一篇演示了基于Redis的Redisson分布式锁实现,那今天我要再来说说基于Zookeeper的分布式现实. Zookeeper分布式锁实现 要用Zookeeper实现分布式锁,我就不得不说说zookeeper的数据存储.首先zookeeper的核心保存结构是一个DataTree数据结构,其实内部是一个Map<String, DataNode> nodes的数据结构,其中key是path,DataNode才是真正保存数据的核心数据结构,DataNode核心字段包括byte data[]用于

SpringBoot电商项目实战 — Redis实现分布式锁

最近有小伙伴发消息说,在Springboot系列文第二篇,zookeeper是不是漏掉了?关于这个问题,其实我在写第二篇的时候已经考虑过,但基于本次系列文章是实战练习,在项目里你能看到Zookeeper相关内容的也只有dubbo注册地址了.因为Zookeeper在项目中,我们不需要做任何配置和代码,只需要在服务器上安装一个Zookeeper应用即可. 包括对Zookeeper的依赖,我们在SpringBoot项目中只需要依赖Dubbo就ok了.在本次系列实战中,我是本着少说多动手的原则,如果有些