商城项目日结4

最新推荐文章于 2024-07-06 16:47:02 发布
最新推荐文章于 2024-07-06 16:47:02 发布
阅读量74 收藏
点赞数
文章标签： js javascript jquery html5
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/weixin_43861707/article/details/104683939
版权

今天主要对商品列表页的商品进行数据渲染 并调整样式，另外对商品详情页面进行数据渲染。
html代码：

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <link rel="stylesheet" href="">
    <link rel="stylesheet" href="../lib/bootstrap/dist/css/bootstrap.css">
    <link rel="stylesheet" href="../css/reset.css">
    <link rel="stylesheet" href="../css/common.min.css">
    <link rel="stylesheet" href="../css/index.css">
    <link rel="stylesheet" href="../css/footer.css">
    <link rel="stylesheet" href="../lib/jquery-zoom/css/hizoom.min.css">
    <link rel="stylesheet" href="../css/detail.css">
    <style>
                  
    </style>
</head>
<body>
    <!-- 头部 -->
    <div class="layout-header-nav">
        <div class="container"> 
            <p class="header-benefit">
                商城优惠大酬宾，全场满59元包邮
            </p>
            <div class="header-cart">
                <a href="./cart.html" class="header-cart-link">
                    <div class="header-cart-button">
                        <div class="header-cart-button-img"></div>
                        <span class="header-cart-button-word">
                          购物车
                        </span>
                    </div>
                </a>
            </div>
            <div class="header-nav">
                <a href="./login.html" class="header-nav-item login">登录</a>
                <span class="header-nav-item">|</span>
                <a href="./register.html" class="header-nav-item">注册</a>
                <span class="header-nav-item">|</span>
                <a href="./cart.html" class="header-nav-item">我的订单</a>
                <span class="header-nav-item">|</span>
                <a href="#" class="header-nav-item">帮助中心</a>
                <span class="header-nav-item">|</span>
                <a href="#" class="header-nav-item">TP-LINK官网</a>
            </div>> 
        </div>
    </div>
   
    <div class="layout-header-search">
      <div class="container">
          <a href="#">
            <img src="" alt="" class="header-logo">
          </a>
          
            <div class="layout-banner-nav">
              <div class="banner-nav-list">
                  <div class="container2">
                      
                  </div>
              </div>
            </div>
          <form action="" class="header-search">
                <input type="text" class="header-search-input" autocomplete="off">
                <input type="button" class="header-search-submit" value="">
                
          </form>
      </div>
  
    </div>
  
    <div class="nav_box"> 
        <ul class="container">
  
        </ul>
    </div>

 <!-- 商品详情 -->
    <div class="container">
        <div class="goodsInfo">
            <div class="left">
                <div class="hizoom zoom">
                    <img src="../images/img01.jpg" >
                </div>
            </div>
            <div class="right">
                <p class="goodsName">商品详细介绍</p>
                <p class="price">100.00</p>
                <div class="btn">
                <button class="addCart">添加购物车</button>
                <button class="buy">直接购买</button>
                </div>
            </div>
        </div>
    </div>
    <!-- footer -->
    <div class="footer-promise">
        <div class="container">
            <img src="http://www.tp-linkshop.com.cn/Content/themes/base/images/Shared/promise.jpg" alt="" class="footer-promise-img">
        </div>
      </div>
      
      <div class="layout-footer-service">
        <div class="container">
            <ul class="footer-service">
                
            </ul>
        </div>
      </div>
    <script src="../lib/jquery/dist/jquery.min.js"></script>
    <script src="../lib/jquery-cookie/jquery.cookie.js"></script>
    <script src="../lib/jquery-zoom/js/hizoom.min.js"></script>
    <script src="../js/detail.js"></script>
    <script src="../js/footer.js"></script>
    <script>
        $(function(){
            $('.zoom').hiZoom({
                    width: 400,
                    position: 'right'
            });
        })
    </script>
</body>
</html>

js

// 1. 获取 localStorage 里面的数据
    const info = JSON.parse(localStorage.getItem('goodsInfo'))

    // 2. 判断数据是否存在
    if (!info) {
    // 能执行表示 !info 是一个 true
    // 表示 info 是一个 false
    // 表示数据不存在
    alert('页面不存在')
    // 跳转回列表页面
    window.location.href = './list.html'
    }

    // 3. 渲染页面
    bindHtml()
    function bindHtml() {
    $('.goodsInfo img').attr('src', info.list_url)
    $('.goodsInfo .goodsName').text(info.list_name)
    $('.goodsInfo .price').text('￥' + info.list_price)
    }

    // console.log(info)

    // 4. 点击添加购物车
    // 4-1. 添加点击事件
    $('.addCart').click(() => {
    // console.log('我要添加购物车了')

    // 4-2. 判断是否登录
    if ($.cookie('name')) {
        console.log('用户登录')
          
      
    // 4-3. 加入到购物车数组里面
    //    先拿到 localStorage 里面的那个数组信息
    //    如果原先没有数据, 那么我就用一个空数组来代替
    //    如果有数据, 就用我们的数据
    const cartList = JSON.parse(localStorage.getItem('cartList')) || []

    // 象数组里面把本条数据添加进去
    // 4-4. 判断有没有这个数据
    //      每一个数据都有一个自己的 id
    //      只要看数组里面有没有 id 一样的数据, 就知道有没有这个数据了
    //      数组常用方法有一个叫做 some 的方法
    //      返回值:
    //        true: 表示数组里面有这个信息
    //        false: 表示数组里面没有这个信息
    let exits = cartList.some(item => {
        // 数组里面每一个的 id === 本页面的这条数据的 id
        return item.list_id === info.list_id
    })

    // console.log(exits)
    if (exits) {
        // 表示有这个信息了, 我们要让 number ++
        // console.log('已经存在 number ++')
        // 找到这个信息给他 number ++
        let data = null
        for (let i = 0; i < cartList.length; i++) {
        if (cartList[i].list_id === info.list_id) {
            data = cartList[i]
            break
        }
        }
        // data 就是我找到的这个信息
        data.number++

        // 4-5. 数量添加的时候, 小计价格要改变
        data.subtotal = data.number * data.list_price // 数量 * 单价
    } else {
        // 表示没有这个信息, 直接 push 就可以了
        // push 之前, 象里面添加一个 number 信息为 1
        info.number = 1

        // 4-5. 多添加一些信息
        info.subtotal = info.list_price // 因为默认是第一个, 小计就是单价
        info.isSelect = false // 默认不选中
        cartList.push(info)
    }

    // 在存储到 localStorage 里面
    localStorage.setItem('cartList', JSON.stringify(cartList))

    }else{
     	//未登录直接跳转到登录页面
        console.log('用户未登录')
        window.location.href='./login.html'
      }
    })

css

.goodsInfo{
    width: 1200px;
    height: 600px;
    margin: 20px auto;
    display: flex;
    align-items: center;
}
.goodsInfo >.left{
    width: 400px;
    display: flex;
    justify-content: center;
    align-items: center;
}
.goodsInfo >.right{
    flex: 1;
    display: flex;
    justify-content: space-between;
    flex-direction: column;
    height: 460px;
    font-size: 40px;
}
.goodsInfo >.right .addCart{
    width: 200px;
    height: 50px;
    font-size: 24px;
    cursor: pointer;
    border: none;
    background: #FF3232;
    color: #fff;
}
.goodsInfo >.right .buy{
    width: 200px;
    height: 50px;
    font-size: 24px;
    cursor: pointer;
    border: 1px solid #FF3232;
    background: #fff;
    color: #FF3232;
}
.goodsInfo >.right .goodsName{
    font-size: 30px;
    color: #333;
    letter-spacing: 0;
    line-height: 40px;
    font-weight: 400;
    margin: 0;
    padding-left: 50px;
}
.goodsInfo >.right .price{
    width: 100%;
    height: 40px;
    margin: 16px 0;
    padding-left: 50px;
    font-size: 24px;
    color: #FF3232;
    line-height: 40px;
}
@碧水流沙
关注
  • 0
    点赞
  • 踩
  • 0
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
JavaScript 网页购物车项目
m0_65725031的博客
03-12 4430
JavaScript网页购物车
js+html+css实现简易商城项目
12-25
这是一个商城小项目，内含电子时钟、轮播图、表单验证、验证码等功能，包含注册、登录、设计说明、问卷调查、网上投票等页面！
Vue nodejs商城项目-项目概述
wyw223的博客
06-28 1560
Vue nodejs商城项目-项目概述 项目概况     用vue2.0 +node.js +MongonDB 做了一个商城系统 技术选型     Vue2.0+node.js+express+MongoDB+axios+vuex 构建工具     Webpack 代码编辑器    VScode 业务模块 .　　1.商品列表模块 　　　　商品列表页分页和排序功能 ...
商城项目总结（一）
a474151949的博客
07-28 5567
就从简单的说起吧，仔细想想似乎也没什么难的东西，只是觉得收货了一些干货而已，可见多么的弱。 1.输入框占位符的兼容问题，placeholder是个很好的属性，但是ie9及一下版本不支持，这时候就需要一个占位符兼容的插件了，我用的是jquery.placeholder.js，很好用，引入之后只需要调用一下就OK。类似这样： $('input').placeholder(); 不过
JavaWEB商城项目(包括数据库)
09-20
功能描述:包括用户的登录注册,以及个人资料的修改.商品的分类展示,详情,加入购物车,生成订单,到银行支付等!另外还有收货地址的和我的收藏等常用操作.环境(JDK 1.7 ,mysql 5.5,Eclipse mars2 ).
基于SSM的电子商城项目
03-31
基于SSM的电子商城项目 基于MVC设计模式 前端页面只进行了数据填充，并没有进行页面优化 安装 导入database/mysql.sql新建数据库mystore 使用eclipse或者idea导入项目 运行，访问...
软件商城项目简介.ppt
11-12
"软件商城项目简介" 软件商城项目简介是基于Intel云计算技术的软件产品与服务平台，提供了一个完整的软件商城解决方案，涵盖了软件产品、服务运行平台、市场目标及商业模式等多个方面。 一、公司简介 软件世界...
Java网上商城项目源码
07-12
Java网上商城项目源码 开发工具：MyEclipse 6.5 数据库： MySQL 服务器：TOMCAT 先导入数据库，然后部署到服务器，启动 在浏览器地址栏输入：http://localhost:8080/myshop/index.do即可进入 在主页上有一个...
【vueUse库Component模块各函数简介及使用方法--上篇】
xiejunlan的博客
07-02 1400
vueUseComponent函数理解 `computedInject` 的概念模拟 `computedInject`使用场景总结构想`createReusableTemplate`的用途可能的实现方式方法一：使用高阶组件（HOC）方法二：使用插槽（Slots）和默认插槽内容结论构想`createTemplatePromise`的用途可能的实现方式使用Vue 3的异步组件构想中的`createTemplatePromise`结论使用Vue的`ref`属性在模板中引用元素或组件示例：引用模板中的DOM元素。
Vue前端打包
weixin_63680330的博客
07-04 294
介绍:Nginx是一款轻量级的Web服务器/反向代理服务器及电子邮件(IMAP/POP3)代理服务器。其特点是占有内存少，并发能力强，在各大型互联网公司都有非常广泛的使用。启动：双击nginx.exe 文件启动，服务器默认占用80端口。官网:https://nginx.org/打包好的dist目录赋值到html下。html静态资源文件目录。conf 配置文件目录。logs日志文件目录。temp临时文件目录。
Node.js适合什么场景下使用
weixin_44337480的博客
07-04 535
Node.js是一个基于Chrome V8 JavaScript引擎构建的开源运行时环境，它允许开发者使用JavaScript在服务器端运行代码。Node.js具有高性能、轻量级、事件驱动和非阻塞I/O等特性，这些特性使得它在多种场景下具有广泛的应用。
Vue 3集成krpano 全景图展示
最新发布
Mr丶GUO
07-06 297
Vue 3集成krpano 全景图展示，需要借助官方工具进行制作注意事项：vue@cli3没有static，需要放在public目录下。
JS混淆基本类型和原理
朴拙科技的博客
07-06 537
混淆技术为JS代码提供了一定程度的保护，但同时也给代码的维护和逆向工程带来了挑战。了解和掌握这些混淆技术的原理和解析方法，可以帮助开发者更好地保护或理解JS代码。然而，需要注意的是，混淆并不是万无一失的安全措施，它更多的是增加了攻击者理解代码的难度。在进行逆向工程时，应始终遵守法律法规，尊重知识产权，不要用于非法目的。
创建react的脚手架
Mmj_mmj的博客
07-05 334
网址：creat-react-app.bootcss.com主流的脚手架：creat-react-app。
Vue 数据大屏适配
FitnessSnail的博客
07-02 286
不会因为在某一维度上缩放过大而导致元素在另一维度上超出视口。.dataScreen-content 盒子内容根据设计稿给的。（默认为 1920x1080）计算缩放比例，并。的缩放比例，那么元素可能会在某一维度上。，这在很多情况下是不希望发生的。的缩放比例的目的是为了保证。单位进行正常的布局就行。在水平和垂直方向上都。
vue3+ts项目中.env配置环境变量与情景配置
我愿化作繁星
07-03 897
就是在编码过程中应用这些自定义环境变量的时候，给出的智能提示。src目录下创建一个或者env.d.ts文件src同级别types目录下创建文件env.d.ts// 更多环境变量...在文件中专门用于处理项目src文件中的TypeScript配置文件，include配置项加入文件：(会提示自定义设置的环境变量)// ...// 第一种方式对应配置"vite-env.d.ts", // 或者 "env.d.ts"// 第二种方式对应配置。
eclipse商城项目
09-22
Eclipse商城项目是一个基于Eclipse开发环境的在线商城平台。该项目旨在为用户提供一个方便购物的平台，用户可以在线浏览和购买各种商品。 Eclipse商城项目的主要特点和功能包括： 1. 商品分类和搜索: 在Eclipse商城中，商品按照不同的分类进行组织，用户可以根据自己的需要选择不同的分类，或者通过关键词搜索来查找特定的商品。 2. 商品展示和详情: 在商城首页中，用户可以浏览到最热销和最新上架的商品，每个商品都有独立的详情页面，提供商品的图片、描述、价格等详细信息。 3. 购物车和结算: 用户可以将自己感兴趣的商品加入购物车，并在结算时选择合适的支付方式进行支付。 4. 用户注册和登录: 用户可以通过注册账号来享受更多的功能和服务，并可以通过登录来管理自己的购物车和订单信息。 5. 订单管理和物流跟踪: 用户可以在个人中心中查看自己的订单信息，并可以进行订单的取消、退款等操作，还可以通过物流跟踪系统实时了解自己的订单配送状态。 6. 评价和评论: 用户可以对购买的商品进行评价和评论，为其他用户提供参考。 7. 特色推荐和活动促销: 商城会通过特色推荐和活动促销来吸引用户，为用户提供更多的优惠和福利。 总之，Eclipse商城项目通过提供全面的商品信息、方便的购物流程和良好的用户体验，旨在为用户提供一个便捷、安全、快速的在线购物平台。

“相关推荐”对你有帮助么？

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值