vivo电商平台项目

vivo商城

项目简介

本项目是参照vivo商城的PC端，实现了其中的部分功能
项目共分为5个页面，登录、注册、首页、商品详情、购物车
用户可以选择游客模式对商品进行浏览，或者登录平台将商品加入购物车，生成订单等操作
保存用户的订单信息

技术实现

使用了jQuery
使用了md5加密
使用了图片懒加载
使用到了cookie缓存技术
使用Ajax技术进行前后端的交互
数据库采用了mysql
后台采用了php技术进行对数据库的逻辑操作

效果展示

注册界面

登录界面

首页

商品详情页

购物车界面

核心代码

$(function() {$('.login-btn').on('click', function() {var username = $('.phone-box>input').val() + ''; //获取手机号框的值var password = $('.pwd>input').val() + ''; //获取密码框的值var res = /^1[356789]\d{9}$/; //验证手机号的正则表达式if (res.test($('.phone-box>input').val())) { //验证手机号的格式$('.input-area>.dis').removeClass('show').addClass('hide');$.ajax({type: "GET",url: "../lib/login.php",data: { 'username': $.md5(username), 'password': $.md5(password) }, //发送加密手机号和密码dataType: "json",success: function(response) {if (Boolean(response.u_id) === true) { //存在该用户$('.input-area>.erro').removeClass('show').addClass('hide');location.href = "../html/index.html"; //登录成功跳转到首页if ($('.login-auto>input')[0].checked) { //勾选时，登录时状态保存14天cookie.set('isLogin', 'true', 14); //保存登录状态cookie.set('u_id', response.u_id, 14); //保存用户idcookie.set('shop', response.u_shop, 14); //保存用户购物信息} else {cookie.set('isLogin', 'true', 1);cookie.set('u_id', response.u_id, 1);cookie.set('shop', response.u_shop, 14);}} else {$('.input-area>.erro').removeClass('hide').addClass('show'); //显示登录失败的提示信息cookie.set('isLogin', 'false');}}});} else {$('.input-area>.dis').removeClass('hide').addClass('show'); //显示格式不正确的提示信息}});
});

res.js

$(function() {$('.res-btn').on('click', function() {var username = $('.phone-box>input').val() + ''; //获取手机号框的值var password = $('.pwd>input').val() + ''; //获取密码框的值var res = /^1[356789]\d{9}$/; //验证手机号的正则表达式if ($('.protocol>input')[0].checked) {// console.log(1);$('.inner-box>.check').removeClass('show').addClass('hide');if (res.test($('.phone-box>input').val())) {$('.inner-box>.dis').removeClass('show').addClass('hide');$.ajax({type: "GET",url: "../lib/res.php",data: { 'username': $.md5(username), 'password': $.md5(password) }, //发送加密手机号和密码success: function(response) {var res = JSON.parse(response);if (res.isRes === 'true') { //判断注册是否成功$('.inner-box>.erro').removeClass('hide').addClass('show'); //显示注册失败的提示信息} else {// console.log(1);$('.inner-box>.erro').removeClass('show').addClass('hide'); //注册成功跳转到登录界面location.href = "../html/login.html";}}});} else {$('.inner-box>.dis').removeClass('hide').addClass('show'); //显示格式不正确的提示信息}} else {$('.inner-box>.check').removeClass('hide').addClass('show');}});
});

index-get.js
通过ajax请求动态加载数据数据到首页

$(function() {//获得主页商品列表发送ajax请求$.ajax({type: "GET",url: "../lib/getinfo.php",dataType: "json",success: function(data) {let temp = '';data.forEach((elm, i) => {let pic = JSON.parse(elm.pic);let title = JSON.parse(elm.title);/* 点击商品时同时发送商品id */temp += ` <li class="item"><a href="info.html?id=${elm.id}"><div class="p-pic"><img data-original="..${pic[0].src}" alt="" class="lazy"></div><div class="p-title">${title[0].title}</div><div class="p-scd-title">${title[1].title}</div><div class="p-price"><span class="yuan">￥</span>${elm.price}</div></a></li>`});$('.sec-list').append(temp); //加载项目列表$('.lazy').lazyload({ effect: "fadeIn" }); //图片懒加载}});$.ajax({type: "get",url: "../lib/gethot.php",dataType: "json",success: function(data) {let temp = '';data.forEach((elm, i) => {let pic = JSON.parse(elm.pic);let title = JSON.parse(elm.title);/* 点击商品时同时发送商品id */temp += ` <li class="item"><a href="info.html?id=${elm.id}"> <div class="p-pic"><img data-original="..${pic[0].src}" alt="" class="lazy"></div><div class="p-title">${title[0].title}</div><div class="p-scd-title">${title[1].title}</div><div class="p-price"><span class="yuan">￥</span>${elm.price}</div></a></li>`});$('.hot-list').append(temp);$('.lazy').lazyload({ effect: "fadeIn" });}});});

index.js
首页登录状态的判断与退出登录

$(function() {var login = cookie.get('isLogin'); //获取cookie中存的isLogin对象用来判断是否登录的状态if (login === 'true') { //登录成功时$('.head-top-user>.person').removeClass('hide').addClass('show');$('.head-top-user>.user').removeClass('show').addClass('hide');} else { //登录失败时$('.head-top-user>.person').removeClass('show').addClass('hide');$('.head-top-user>.user').removeClass('hide').addClass('show');}$('.person>p').on('click', function() { //点击退出按钮alert('确定退出！');//确定后删除后cookie中的isLogin的登录状态var shop = cookie.get('shop');var id = cookie.get('u_id');// console.log(shop);// console.log(id);cookie.remove('isLogin');$.ajax({type: "GET",url: "../lib/shop.php",data: { 'shop': shop, 'id': id },dataType: "json",success: function(response) {}});cookie.remove('shop');cookie.remove('u_id');location.reload();})})

info.js
对不同商品对应的商品详情进行动态加载

$(function() {var login = cookie.get('isLogin'); //获取cookie中存的isLogin对象用来判断是否登录的状态if (login === 'true') { //登录成功时$('.head-top-user>.person').removeClass('hide').addClass('show');$('.head-top-user>.user').removeClass('show').addClass('hide');} else { //登录失败时$('.head-top-user>.person').removeClass('show').addClass('hide');$('.head-top-user>.user').removeClass('hide').addClass('show');}$('.person>p').on('click', function() { //点击退出按钮alert('确定退出！');//确定后删除后cookie中的isLogin的登录状态var shop = cookie.get('shop');var id = cookie.get('u_id');console.log(shop);console.log(id);cookie.remove('isLogin');$.ajax({type: "GET",url: "../lib/shop.php",data: { 'shop': shop, 'id': id },dataType: "json",success: function(response) {}});cookie.remove('shop');cookie.remove('u_id');location.reload(); //重新加载页面});let id = location.search.split('=')[1]; // 获得id$('.shop-car').on('click', function() { //点击购物车按钮location.href = '../html/shop-car.html'; //跳转到购物车界面});$.ajax({type: "get",url: "../lib/getitem.php",data: {id: id //发送获得的id},dataType: "json",success: function(data) {str = '';arr = [];var json = JSON.parse(data.pic); //获得图片地址的JSON数组var details = JSON.parse(data.details); //获得详情的JSON数组var modstr = details[2]['mod']; //获得所有的版本字符串var modarr = modstr.split(','); //通过','截取字符串,转成数组console.log(modstr);var modString = '';json.forEach((elm, i) => {str += `<li><img src="..${elm.src}" alt=""></li>`;arr.push(`..${elm.src}`); //把图片地址放在一个数组中});modarr.forEach((elm, i) => {modString += `<li>${elm}</li>`; //加载版本})$('.moudle-list').append(modString);$('.wapper>p>span').html(data.series);$('.img-list').append(str);$('.name').html(details[0].title); //加载其他详情信息$('.info>i').html(details[0]['third-title']);$('.limit').html(details[0]['sec-title']);$('.summary-pic>i').html(parseInt(data.price));$('.int>i').html(details[1]['activity']);$('.send>i').html(details[1]['sec-activity']);$('.img-box>img')[0].src = arr[0];$('.add').on('click', function() { //点击加号$(this).siblings()[1].value = parseInt($(this).siblings().eq(1).val()) + 1; //input值加1});$('.reduce').on('click', function() { //点击减号$(this).siblings()[0].value = parseInt($(this).siblings().eq(0).val()) - 1; //input值加1if ($(this).siblings()[0].value < 1) {$(this).siblings()[0].value = 1; //当数量小于1时，数量为1}});$('.img-list').on('mouseover', 'li', function(ev) { //move.call(this); //立即调用move函数，改变this指向});$('.shop-car').on('click', function() { //点击加入购物车addItem(data.id, $('.number').val(), $('.summary-pic>i').html(), data.discount); //执行addItem函数});function move() {var index = $('.img-list>li').index(this); //获得点击的li的index$('.img-box>img')[0].src = arr[index]; //触发事件时大图的地址为数组中对应的地址}}});function addItem(id, num, price, discount) {var shop = cookie.get('shop');//获取cookievar product = {'id': id,'num': num,'price': price,'discount': discount};if (shop == 'null' || shop == '[]' || shop == undefined) {shop = [];shop.push(product);} else {//判断cookie是否存在shop = JSON.parse(shop);if (shop.some(elm => elm.id == id)) { //遍历cookie中的对象，如果对象的id属性存在shop.forEach(elm => {elm.id == id ? elm.num = num : null; //修改相同id值的数量});} else {shop.push(product); //不存在则把该对象加入cookie中的shop}}cookie.set('shop', JSON.stringify(shop), 1); //重新存入cookie}});

shop-car.js
用户对于购物车界面的各种增删改查等操作

$(function() {var login = cookie.get('isLogin'); //判断登录状态if (login === 'true') {$('.head-top-user>.person').removeClass('hide').addClass('show');$('.head-top-user>.user').removeClass('show').addClass('hide');} else {$('.head-top-user>.person').removeClass('show').addClass('hide');$('.head-top-user>.user').removeClass('hide').addClass('show');}$('.person>p').on('click', function() { //退出登录状态alert('确定退出！');var shop = cookie.get('shop');var id = cookie.get('u_id');cookie.remove('isLogin');$.ajax({type: "GET",url: "../lib/shop.php",data: { 'shop': shop, 'id': id },dataType: "json",success: function(response) {console.log(response);}});cookie.remove('shop');cookie.remove('u_id');location.reload();})//取出shop的cookievar shop = cookie.get('shop');// console.log(shop);if (shop == '[]' || shop == undefined || shop == 'null') {$('.tab-head').removeClass('show').addClass('hide');$('.car-list').removeClass('show').addClass('hide');$('.buy').removeClass('show').addClass('hide');$('.no-result').removeClass('.hide').addClass('show');} else {$('.tab-head').removeClass('hide').addClass('show');$('.car-list').removeClass('hide').addClass('show');$('.buy').removeClass('hide').addClass('show');$('.no-result').removeClass('show').addClass('hide');shop = JSON.parse(shop);var idList = shop.map(elm => elm.id).join();var numList = shop.map(elm => elm.num).join();$.ajax({type: "GET",url: "../lib/shop-car.php",data: {'id': idList //发送所有的id值},dataType: "json",success: function(data) {var temp = '';var price = 0;var number = 0;data.forEach((elm, i) => {var arr = shop.filter((val, i) => { //保证顺序正确return val.id == elm.id;});var pic = JSON.parse(elm.pic);var title = JSON.parse(elm.title);temp += `<li class="car-li" id="${elm.id}"><div><i class="checkbox"></i><img src="..${pic[0].src}" alt=""></div><div><a href="javascript:;">${title[0].title}</a><br><p>${elm.color}</p></div><div class="pic">${(parseInt(elm.price) + parseInt(elm.discount)).toFixed(2)}</div><div class="count"><span class="reduce">-</span><input type="text" value="${arr[0].num}" max="5" class="number" readonly="readonly"><span class="add">+</span></div><div>-<span>${(parseInt(elm.discount)*parseInt(arr[0].num)).toFixed(2)}</span></div><div class="integral">${parseInt(elm.price)*parseInt(arr[0].num)}</div><div class="complete">${((parseInt(elm.price)*parseInt(arr[0].num)).toFixed(2))}</div><div class="del">删除</div></li>`;});$('.car-list').append(temp);$('.tab-head>div>i').eq(0).on('click', function() {$(this).toggleClass('checked');$('.car-li>div>.checkbox').attr('class', $(this).attr('class'))complete();})$('.car-li>div>.checkbox').on('click', function() {$(this).toggleClass('checked');var reg = Array.from($('.car-li>div>.checkbox')).every(function(val) {return $(val).attr('class') === 'checkbox checked'; //判断所有复选框状态});if (reg === true) { //所有都选中时$('.tab-head>div>i').eq(0).addClass('checked')} else {$('.tab-head>div>i').eq(0).removeClass('checked')}console.log($('.car-li>div>.checkbox').attr('class'))complete();})$('.add').on('click', function() {$(this).siblings()[1].value = parseInt($(this).siblings().eq(1).val()) + 1;shop.forEach((elm, i) => {if (elm.id === $(this).parent().parent().attr('id')) {//计算原价格总和$(this).parent().siblings().eq(3).children().html((parseInt(elm.discount) * parseInt($(this).siblings().eq(1).val())).toFixed(2));//计算积分总和$(this).parent().siblings().eq(4).html(parseInt($(this).siblings().eq(1).val()) * parseInt(elm.price));//计算优惠后的价格总和$(this).parent().siblings().eq(5).html(parseInt($(this).parent().siblings().eq(4).html()).toFixed(2));addItem($(this).parent().parent().attr('id'), parseInt($(this).siblings().eq(1).val()), elm.price, elm.discount);}// console.log(shop);});complete();});$('.reduce').on('click', function() {$(this).siblings()[0].value = parseInt($(this).siblings().eq(0).val()) - 1;if ($(this).siblings()[0].value < 1) { //数量小于1时数量为1$(this).siblings()[0].value = 1;}shop.forEach((elm, i) => {if (elm.id === $(this).parent().parent().attr('id')) {//计算价格总和$(this).parent().siblings().eq(3).children().html((parseInt(elm.discount) * parseInt($(this).siblings().eq(0).val())).toFixed(2));//计算积分总和$(this).parent().siblings().eq(4).html(parseInt($(this).siblings().eq(0).val()) * parseInt(elm.price));//计算优惠后的价格总和$(this).parent().siblings().eq(5).html(parseInt($(this).parent().siblings().eq(4).html()).toFixed(2));//设置cookieaddItem($(this).parent().parent().attr('id'), $(this).siblings().eq(0).val(), elm.price, elm.discount);// console.log($(this).siblings().eq(0).val())}// console.log(shop);})complete();// addItem($(this).parent().parent().attr('id'),);});$('.del').on('click', function() { //删除该行   for (var i = shop.length - 1; i >= 0; i--) {if (shop[i].id === $(this).parent().attr('id')) {shop.splice(i, 1);}}//重新存入cookiecookie.set('shop', JSON.stringify(shop), 1);$(this).parent().remove();shop = JSON.parse(cookie.get('shop'));console.log(shop)// cookie.set('shop', shop, 1);if (shop == '[]' || shop == '' || shop == undefined) {$('.tab-head').removeClass('show').addClass('hide');$('.car-list').removeClass('show').addClass('hide');$('.buy').removeClass('show').addClass('hide');$('.no-result').removeClass('hide').addClass('show');} else {$('.tab-head').removeClass('hide').addClass('show');$('.car-list').removeClass('hide').addClass('show');$('.buy').removeClass('hide').addClass('show');$('.no-result').removeClass('show').addClass('hide');}complete();});complete();function complete() { //计算t总数和总价格price = 0;number = 0;//计算选中的总价Array.from($(".car-li>div>.checked").parent().parent()).forEach((elm, i) => {price += parseInt($(elm).children().eq(6).html());});//计算选中的数量Array.from($(".car-li>div>.checked").parent().parent()).forEach((elm, i) => {number += parseInt($(elm).children().eq(3).children().eq(1).val());});$('.buy>p>i').html(price.toFixed(2));$('.buy>p>span').html(number);}function addItem(id, num, price, discount) {var shop = cookie.get('shop'); //获取cookievar product = {'id': id,'num': num,'price': price,'discount': discount};if (shop) { //判断cookie是否存在shop = JSON.parse(shop);if (shop.some(elm => elm.id == id)) { //遍历cookie中的对象，如果对象的id属性存在shop.forEach(elm => {elm.id == id ? elm.num = num : null; //修改相同id值的数量});} else {shop.push(product); //不存在则把该对象加入cookie中的shop}} else { //cookie不存在shop = [];shop.push(product);}cookie.set('shop', JSON.stringify(shop), 1); //重新存入cookie}}});}
});

源码下载：码云地址https://gitee.com/chenchuyinsecret/vivo.com.git

vivo电商平台项目相关推荐

Golang实战项目-B2C电商平台项目(8)
Golang实战项目-B2C电商平台项目(8) 商品描述新增商品描述表(tb_item_desc)和商品表(tb_item)具有主外键关系,商品的主键也是商品描述的主键,使用工具函数生成的主键也当作 ...
css网页设计实例代码_大型电商平台设计实例：电商平台项目工程、数据库选型、代码库...
电商平台微服务体系架构经过一系列的微服务设计, 下面使用一张维导图完整表示这个电商平台的微服务架构设计模型,如图 3-6 示. 这是一个为简单的电商平台微服务架构设计模型,并且使用了粗粒度的微服务划 ...
大型电商平台设计实例：电商平台项目工程、数据库选型、代码库
电商平台微服务体系架构经过一系列的微服务设计, 下面使用一张维导图完整表示这个电商平台的微服务架构设计模型,如图 3-6 示. 这是一个为简单的电商平台微服务架构设计模型,并且使用了粗粒度的微服务划 ...
【SSM项目】电商平台项目第5天——商品录入【1】
课程目标目标1:完成商品分类功能目标2:了解电商概念SPU 和SKU 目标3:掌握富文本编辑器的使用目标4:掌握上传服务器FastDFS 目标5:掌握angularJS图片上传 1.商品分类 1 ...
Vue电商平台项目（1）
前端:vue脚手架后端:nodejs 分析:懒加载,swiper,搜索,搜索记录,注册登录,短信验证码, 1.短信验证码登录|注册; 2.Vuex:地址 ...
电商平台项目----项目搭建
目录项目介绍其他配置 eslint 校验功能关闭 src文件简写方法,配置别名项目路由分析(vue-router) 路由路由组件完成非路由组件 Header Footer 组件步骤配置l ...
小型电商平台的项目估算
小型电商平台的项目估算四.项目估算 4.1 简介 4.2 规模估算 4.2.1 代码行估算方法 4.2.2 功能点分析方法 4.3 工作量估算 4.3.1 COCOMO方法 4.3.2 基于用例的工 ...
A3Mall 电商平台——测试计划评审
测试方案计划评审表项目编号 plan number 1 项目名称 A3Mall电商平台项目阶段验收项目经理王平项目测试负责人常绍坤评审方式会审评审时间 2021年7月14日评审 ...
[附源码]计算机毕业设计JAVA社区生鲜电商平台
[附源码]计算机毕业设计JAVA社区生鲜电商平台项目运行环境配置: Jdk1.8 + Tomcat7.0 + Mysql + HBuilderX(Webstorm也行)+ Eclispe(Inte ...