vivo电商平台项目

vivo商城

项目简介

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

技术实现

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

效果展示

注册界面

登录界面

首页



商品详情页

购物车界面

核心代码

login.js

$(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); //保存用户id
                            cookie.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