京东官网（京东注册，京东登录，京东首页，京东购物车，京东详情页，京东列表页）
# 网站介绍
官网：京东官网
gitee网址：https://gitee.com/xujiangmin98/jd.git
# 依赖包及插件
**sass**：登录和注册页面的css样式使用sass编写
**jquery**
**layui和layer**：用于轮播图，弹出层和分页器
**node.js**
+ gulp
+ gulp-cssmin、gulp-autoprefixer、gulp-sass等gulp依赖包
**git**
# 功能介绍
###各网页公用功能
##### 注册
用户必须同意协议，才能进入注册页面，如果点击了右上角的X关闭按钮，则直接跳转回首页
用户需要填写手机号、昵称、密码，如果是合法数据且未重复，则成功注册。主要使用了正则判断和后端请求
##### 登录#####
通过tab切换，有扫码登录和账户登录，点击注册按钮，进入到注册页面，点击左边的图片，跳转到首页
用户通过昵称/手机号 + 密码进行登录，登录失败显示对应文本，登录成功在导航栏显示用户昵称（无论是手机号还是昵称登录都显示昵称）。主要使用了cookie和后端请求
##### 加载页
所有页面都使用了 显示加载页，在页面渲染完后1毫秒自动关闭，延时1毫秒避免有时候关闭加载页比开启加载页先执行，主要是使用了layer弹出层
### 首页
##### 轮播图#####
首页：四个轮播图，上下左右均有轮播图
详情页：一个左右轮播图
鼠标移入图片时停止轮播，鼠标移出后恢复轮播。按照以前轮播图的思路，用jquery实现了功能
点击二级菜单跳转至列表页面，通过请求后端获取需要的数据，并渲染商品信息，点击商品跳转至响应的商品详情页并进行渲染
### 商品详情页
列表页所有商品点击时，和首页所有商品点击时，自动跳转到对应的详情页，并渲染所有的商品数据。
包含放大镜数据，tab切换栏数据，商品介绍，商品价格，商品分类，和商品详情。
利用jq写了放大镜
点击进入购物车跳转至购物车，和加减按钮加入购物车，
##### 放大镜
鼠标移入图片时，右侧显示大图，鼠标移出时隐藏。用jquery实现的放大镜
##### 商品渲染和分页
显示和当前商品对应的所有店铺在售商品，点击分页器可以跳转页面。主要通过后端请求获取需要的数据，再通过layui渲染成多页
##### 加减数量和，加入购物车和右侧购物车按钮
登录后点击进入购物车，进入到相应用户的购物车中
点击+ - 按钮，可以增加减少商品的数量，点击加入购物车，提示弹窗并加入购物车
### 购物车页
##### 页面渲染
如果未登录状态下进入购物车，会提示用户登录
如果购物车中没有商品，显示对应文本
如果购物车中有商品，则根据后端数据渲染页面，同一家商家的商品会添加在同一个盒子中
##### 多选功能
全选按钮可以全选/全不选购物车中的商品
商家处的全选按钮可以全选/全不选购物车中该店铺的商品
同一家赏家的每一个商品选择按钮都被选中时，全选按钮自动选中，有商品被取消选中时，全选按钮自动取消选中
购物车里的每一个商品选择按钮都被选中时，全选按钮自动选中，有商品被取消选中时，全选按钮自动取消选中
选择后页面下方显示已选商品总价
##### 不同账号购物车信息不同
> 最初写的版本是通过数据库来获取购物车信息的，一个商品对应一个账号的信息，不能实现功能，考虑到改成老师写的方法需要改的代码太多，最后做了一个不太正规的方案
登录时读取localStorage 中属于该用户的购物车信息并且写入数据库中，购物车可以按照旧方案通过数据库的数据进行渲染，退出登录时将当前的购物车信息及账号信息写入localStorage， 数据库中所有商品的数量归零，等待下次写入。数据库中只保存一个账号的购物车数据，本地存储中保存多个账号的购物车数据
##### 改变商品数量
加减号及输入框都可以改变商品数量（数据库中的商品数量同步改动），商品总价处实时显示商品数量改变后的总价，最小值为1，商品数量为1时，减号不能使用，输入框中输入的数字不合法时自动重置为1
##### 删除商品
原理和改变数量相同，点击删除后弹出提示，用户确认删除后删除页面html结构，数据库中的数量改为0，导航栏的购物车显示的商品数量减一，右侧。主要使用了layer和后端数据
##### 结算按钮
没选中商品时弹出提示，不跳转至下一个页面
######## 需使用小P和数据库，server文件里有spl文件，连接小p和数据库，即可及时渲染网页。
京东官网（京东注册，京东登录，京东首页，京东购物车，京东详情页，京东列表页）相关推荐
- 企业信使运营管理平台官网_注册_开自助充值
企业信使运营管理平台-企业信使帮助您扩大产品知名度,提高企业经营业绩,提升管理水平,实现与客户指定号码进行短信批量发送和自定义发送的电信.移动.联通公司三网集中的网页操作发送平台,让广大的公司.网店主 ...
- 初学者之《复刻英雄联盟官网之人脸识别登录》②
初学者之<复刻英雄联盟官网之人脸识别登录>② 第3章 Web项目系统设计 第4章 Web项目系统实现 三.Web项目系统设计 在完成一个Web项目的开发过程和设计过程时,首先经历的就是整个 ...
- 初学者之《复刻英雄联盟官网之人脸识别登录》①
初学者之<复刻英雄联盟官网之人脸识别登录>① 第1章 绪 论 第2章 Web项目需求分析 前言 英雄联盟是在这个电竞时代被推至至高点的一款MOBA游戏,然而其官网的登录方式在个人认为或许有 ...
- HTML期末网页作业-仿QQ官网QQ注册网页
HTML期末作业-仿QQ官网QQ注册网页(HTML+CSS+JavaScript) 学生作业仿QQ官网部分代码截图 <!DOCTYPE html> <html lang=" ...
- 【每日前端】CSS考拉海购和京东官网部分广告模块的实现
考拉海购部分广告模块: 代码实现: 京东部分广告模块: 代码实现:
- 【前端小实战】京东官网放大镜功能
文章目录 一.页面效果展示 二.代码实现解析 三.完整代码 一.页面效果展示 二.代码实现解析 1.html基本框架,展示的小方块为 #small_div,移动的方块为 #move_div 放在小方块 ...
- 【问题解决】关于Oracle官网下载JDK需要登录Oracle账户问题
问题描述 当我们在Oracle官网上下载JDK时,(JDK下载地址)系统会提示需要登录Oracle账户.对于没有Oracle账户的人来说,注册账户太繁琐. 问题解决 此处推荐一个神奇的网站,里面提供部 ...
- 冒险岛2官网模拟之三单击登录弹出登陆框的具体实现(连载)
登录框的设计的样式以及结构思路 在样式中需要设置登录的unlogin盒子,以及登录框login-web盒子,最后写一个全局的cover-bg来做遮罩层.但是设置样式的时候将cover-bg设置为定位这 ...
- [解疑][TI]德州仪器Texas Instruments官网账号注册不了解决办法
不知什么时候,TI官网上,用国内邮箱,填写相应的信息后便无法注册了,具体原因不愿深究. 解决办法很简单,注册一个outlook邮箱,用这个邮箱注册,填写信息时先填写成米国某个大学的,在网上可以搜到相关 ...
- 163邮箱官网如何注册？VIP邮箱163邮箱是网易邮箱吗？
商务人士注册163邮箱一般是职场办公用,TOMVIP邮箱有3个后缀选择,新上线的域名用户名还有更多选择,纯数字.字母.3-5位都可注册的到. 一.VIP邮箱靓号 TOM邮箱支持3大vip域名,邮箱账号 ...
最新文章
- 第十九课.Pytorch-geometric扩展
- 优秀程序员写代码一定会用的 11 条经验
- LeetCode 889. 已知前序后序 求二叉树（不唯一）
- delphi 异步 调用 带参数_如何在 Spring 异步调用中传递上下文
- linux vi 编辑器用法
- Java学习系列及数据结构博客全目录
- 百练 2965 玛雅历 解题报告
- [随笔所想] 沉痛悼念开发技术专家毛星云老师
- 通过Web安全工具Burp suite找出网站中的XSS漏洞实战(二)
- 媒体直播——直播现场 一个信号源多平台同步
- 2021WSB-day3-1 - Arun Ross 老师讲解Privacy Preserving Biometrics
- 【人月神话】第二章：人月神话
- vs code 插件change-case, 修改变量名 驼峰和常量等
- Java String 真的是不可变的吗
- 【墨者学院writeup】浏览器信息伪造之User-Agent及NetType微信网络检测破解
- 北京科技大学通用学术英语作文Mooc 大一上（20级版）
- Win10下应用程序默认管理员权限运行
- 关于Unity使用gradle编译时出现ABI with prefix: mips64el-linux-android的解决方案
- 电脑店u盘安装linux,电脑店U盘启动盘pe系统启动教程V7.5
- windows下python+django+pycharm+mysql从配置到实战