软件工程学习日志2025.11.25

今日完成了BS实验报告
【实验编号】
10003809548j 　　Web界面设计
【实验学时】
8学时
【实验环境】
 所需硬件环境为微机；
 所需软件环境为dreamweaver
【实验内容】
聚焦 B/S 架构的前端侧实现：浏览器负责渲染、交互与状态管理，服务器以静态资源与未来 API 接入为目标。
基于 Vue 3 构建 SPA 风格页面：分类筛选、搜索结果页切换、分页、夜间模式等交互均在浏览器端完成。
【关键步骤】
资源加载与初始化
通过 CDN 加载 Vue 和 Bootstrap ，页面就绪后在浏览器端挂载应用。
视图与状态管理
分类视图与首页视图切换：使用 searchActive 控制首页板块显隐，返回首页方法 goHome。
搜索与结果页：绑定输入与提交，执行关键词匹配并展示独立“搜索结果”。
分页：猜你喜欢按页展示，计算安全页码与切。
布局与样式
三列等高：统一用 heroh 控制高度，轮播与左右列对齐。
夜间模式：按钮触发切换 databstheme 与 body.dark ，背景与组件样式切换（按钮 bs.html:101 , 方法 bs.html:720728 , 初始化 bs.html:812821 , 深色选择。
交互与体验
平滑滚动至结果或分类区锚点。
本地存储持久化主题偏

【程序运行截图】
首页视图：顶部导航与搜索框、三列等高布。

分类筛选视图：点击侧栏分类后显示“分类商品”内容区。

猜你喜欢分页：页码指示与上一页/下一页操作。

搜索结果页：输入关键词点击“搜索”后只展示“搜索结果”及数量统计。

夜间模式：点击右上角月亮按钮切换到深色背景，再次点击恢复。

【实验体会】
B/S 的浏览器侧实现能快速交付原型，前后端天然解耦，便于后续把本地数据替换为服务端接口响应。
通过状态驱动视图切换可在无路由的前提下实现“页面感”的单页体验，降低复杂度。
客户端分页/筛选对小数据量交互顺畅；接入后端后应将分页与搜索下沉到服务器以减少带宽与浏览器负载。
主题切换与持久化体现良好的用户体验；注意在深色模式下的对比度与可读性、阴影强度等细节优化。
<!doctype html>

BS网站演示

首页
分类
手机数码
生鲜好物
服饰鞋包
母婴玩具
汽车用品

      <li class="nav-item"><a class="nav-link" href="#faq">帮助</a></li>
    </ul>
    <form class="d-none d-lg-flex me-3 flex-grow-1" role="search" @submit.prevent="doSearch">
      <div class="input-group">
        <span class="input-group-text"><i class="bi bi-search"></i></span>
        <input class="form-control" type="search" placeholder="搜索商品" aria-label="Search" v-model="searchQuery">
      </div>
    </form>
    <button class="btn btn-outline-primary position-relative" type="button" data-bs-toggle="offcanvas" data-bs-target="#cartOffcanvas" aria-controls="cartOffcanvas">
      <i class="bi bi-cart"></i>
      <span class="position-absolute top-0 start-100 translate-middle badge rounded-pill bg-danger">{{ cart.length }}</span>
    </button>
    <button id="themeToggle" class="btn btn-outline-secondary ms-2" type="button" data-bs-toggle="tooltip" data-bs-title="切换主题" @click.prevent="toggleTheme">
      <i class="bi bi-moon-stars"></i>
    </button>
  </div>
</div>

<div class="search-wrap mb-3">
  <div class="input-group input-group-lg">
    <select class="form-select" style="max-width:140px" v-model="searchType">
      <option>宝贝</option>
      <option>店铺</option>
    </select>
    <input class="form-control" type="search" placeholder="搜索商品" aria-label="Search" v-model="searchQuery">
    <button class="btn btn-primary px-4" @click="doSearch">搜索</button>
  </div>
  
</div>

<div class="my-4" id="search-results" v-if="searchActive">
  <div class="d-flex align-items-center mb-2">
    <div class="section-title mb-0">搜索结果</div>
    <span class="ms-2 badge text-bg-light">{{ searchQuery }}</span>
    <span class="ms-2 text-secondary small">共 {{ searchedProducts.length }} 件</span>
    <button class="btn btn-sm btn-outline-secondary ms-auto" @click="clearSearch">清除</button>
  </div>
  <div class="products-grid" v-if="searchedProducts.length">
    <div v-for="p in searchedProducts" :key="p.title">
      <div class="card product-card h-100 position-relative">
        <div class="position-absolute top-0 end-0 p-2">
          <button class="btn btn-sm fav-btn shadow-sm" data-bs-toggle="tooltip" data-bs-title="收藏">
            <i class="bi bi-heart"></i>
          </button>
        </div>
        <img :src="p.img" class="card-img-top" :alt="p.title">
        <div class="card-body d-flex flex-column">
          <h6 class="card-title">{{ p.title }}</h6>
          <p class="text-danger fw-bold mb-3">{{ formatCurrency(p.price) }}</p>
          <div class="mt-auto d-flex gap-2">
            <button class="btn btn-primary btn-sm" @click="addToCart(p.title,p.price)"><i class="bi bi-cart-plus"></i> 加入购物车</button>
            <button class="btn btn-outline-secondary btn-sm" data-bs-toggle="modal" data-bs-target="#quickViewModal" :data-title="p.title" :data-img="p.img">快速查看</button>
          </div>
        </div>
      </div>
    </div>
  </div>
  <div v-else class="text-muted">未找到相关商品</div>
</div>
<div class="bg-white border rounded px-3 py-2 mb-3 cat-band" v-if="!searchActive">
  <ul class="nav flex-wrap">
    <li class="nav-item"><a class="nav-link" href="#"><i class="bi bi-percent"></i> 全场9折起 <span class="text-secondary">抢省钱补贴</span></a></li>
    <li class="nav-item"><a class="nav-link" href="#"><i class="bi bi-laptop"></i> 电脑 配件 办公 文具</a></li>
    <li class="nav-item"><a class="nav-link" href="#"><i class="bi bi-device-hdd"></i> 家电 手机 通信 数码</a></li>
    <li class="nav-item"><a class="nav-link" href="#"><i class="bi bi-building"></i> 工业品 商业 农业 定制</a></li>
    <li class="nav-item"><a class="nav-link" href="#"><i class="bi bi-house-door"></i> 家具 家装 家居 厨具</a></li>
    <li class="nav-item"><a class="nav-link" href="#"><i class="bi bi-person-bounding-box"></i> 女装 男装 内衣 配饰</a></li>
    <li class="nav-item"><a class="nav-link" href="#"><i class="bi bi-universal-access"></i> 女鞋 男鞋 运动 户外</a></li>
    <li class="nav-item"><a class="nav-link" href="#"><i class="bi bi-car-front"></i> 汽车 珠宝 文玩 箱包</a></li>
    <li class="nav-item"><a class="nav-link" href="#"><i class="bi bi-basket"></i> 食品 生鲜 酒类 健康</a></li>
    <li class="nav-item"><a class="nav-link" href="#"><i class="bi bi-emoji-smile"></i> 母婴 童装 玩具 宠物</a></li>
    <li class="nav-item"><a class="nav-link" href="#"><i class="bi bi-brush"></i> 美妆 个护 娱乐 图书</a></li>
  </ul>
</div>

<div class="row align-items-stretch mb-4 equal-row" v-if="!searchActive">
  <div class="col-lg-2 d-none d-lg-block">
    <div class="card h-100 sidebar">
      <div class="card-body p-2">
        <div class="list-group category-list">
          <a href="#" class="list-group-item list-group-item-action" @click.prevent="setCategory('家用电器')">家用电器</a>
          <a href="#" class="list-group-item list-group-item-action" @click.prevent="setCategory('手机数码')">手机数码</a>
          <a href="#" class="list-group-item list-group-item-action" @click.prevent="setCategory('电脑办公')">电脑办公</a>
          <a href="#" class="list-group-item list-group-item-action" @click.prevent="setCategory('服饰')">服饰鞋包</a>
          <a href="#" class="list-group-item list-group-item-action" @click.prevent="setCategory('美妆个护')">美妆个护</a>
          <a href="#" class="list-group-item list-group-item-action" @click.prevent="setCategory('家居家装')">家居家装</a>
          <a href="#" class="list-group-item list-group-item-action" @click.prevent="setCategory('母婴玩具')">母婴玩具</a>
          <a href="#" class="list-group-item list-group-item-action" @click.prevent="setCategory('食品饮料')">食品饮料</a>
          <a href="#" class="list-group-item list-group-item-action" @click.prevent="setCategory('运动户外')">运动户外</a>
          <a href="#" class="list-group-item list-group-item-action" @click.prevent="setCategory('汽车用品')">汽车用品</a>
          <a href="#" class="list-group-item list-group-item-action" @click.prevent="setCategory('宠物生活')">宠物生活</a>
          <a href="#" class="list-group-item list-group-item-action" @click.prevent="setCategory('生鲜好物')">生鲜好物</a>
        </div>
      </div>
    </div>
  </div>
  <div class="col-lg-8 mb-3 mb-lg-0">
    <div id="heroCarousel" class="carousel slide h-100" data-bs-ride="carousel">
      <div class="carousel-indicators">
        <button type="button" data-bs-target="#heroCarousel" data-bs-slide-to="0" class="active" aria-current="true" aria-label="Slide 1"></button>
        <button type="button" data-bs-target="#heroCarousel" data-bs-slide-to="1" aria-label="Slide 2"></button>
        <button type="button" data-bs-target="#heroCarousel" data-bs-slide-to="2" aria-label="Slide 3"></button>
      </div>
      <div class="carousel-inner rounded-4 overflow-hidden shadow">
        <div class="carousel-item active">
          <img src="https://picsum.photos/seed/hero1/1200/360" class="d-block w-100" alt="">
          <div class="carousel-caption text-start hero-caption">
            <h5>初冬上新</h5>
            <a href="#products" class="btn btn-gradient">立即抢购</a>
          </div>
        </div>
        <div class="carousel-item">
          <img src="https://picsum.photos/seed/hero2/1200/360" class="d-block w-100" alt="">
          <div class="carousel-caption hero-caption">
            <h5>精选好物</h5>
            <button class="btn btn-light" data-bs-toggle="modal" data-bs-target="#loginModal">立即注册</button>
          </div>
        </div>
        <div class="carousel-item">
          <img src="https://picsum.photos/seed/hero3/1200/360" class="d-block w-100" alt="">
          <div class="carousel-caption text-end hero-caption">
            <h5>品质生活</h5>
            <a href="#faq" class="btn btn-success">了解我们</a>
          </div>
        </div>
      </div>
      <button class="carousel-control-prev" type="button" data-bs-target="#heroCarousel" data-bs-slide="prev">
        <span class="carousel-control-prev-icon" aria-hidden="true"></span>
        <span class="visually-hidden">上一张</span>
      </button>
      <button class="carousel-control-next" type="button" data-bs-target="#heroCarousel" data-bs-slide="next">
        <span class="carousel-control-next-icon" aria-hidden="true"></span>
        <span class="visually-hidden">下一张</span>
      </button>
    </div>
  </div>
  <div class="col-lg-2 d-none d-lg-flex flex-column gap-3 promo-col">
    <div class="card promo-card orange text-white">
      <div class="card-body d-flex align-items-center gap-3">
        <div class="rounded-circle bg-white text-orange d-flex align-items-center justify-content-center" style="width:44px;height:44px"><i class="bi bi-gem"></i></div>
        <div>
          <div class="fw-bold">品质家居 超值优惠</div>
          <div class="small opacity-75">精选好物一站购</div>
        </div>
      </div>
    </div>
    <div class="card promo-card pink text-white">
      <div class="card-body d-flex align-items-center gap-3">
        <div class="rounded-circle bg-white text-orange d-flex align-items-center justify-content-center" style="width:44px;height:44px"><i class="bi bi-bag-heart"></i></div>
        <div>
          <div class="fw-bold">精致美妆 品质之选</div>
          <div class="small opacity-75">焕新你的妆容</div>
        </div>
      </div>
    </div>
    <div class="card promo-card blue text-white">
      <div class="card-body d-flex align-items-center gap-3">
        <div class="rounded-circle bg-white text-orange d-flex align-items-center justify-content-center" style="width:44px;height:44px"><i class="bi bi-capsule"></i></div>
        <div>
          <div class="fw-bold">超值自营 省钱放心</div>
          <div class="small opacity-75">爆品低价购</div>
        </div>
      </div>
    </div>
  </div>
</div>



<div class="my-4">
  <div class="section-title">上新好物</div>
  <div class="scroll-controls">
    <button class="btn btn-outline-secondary btn-sm" data-scroll-dir="prev" data-target="#newBooks"><i class="bi bi-chevron-left"></i></button>
    <button class="btn btn-outline-secondary btn-sm" data-scroll-dir="next" data-target="#newBooks"><i class="bi bi-chevron-right"></i></button>
  </div>
  <div id="newBooks" class="h-scroll">
    <div class="h-item card mini-card" v-for="p in newArrivals" :key="p.title">
      <img :src="p.img" class="card-img-top" :alt="p.title">
      <div class="card-body p-2">
        <div class="small text-truncate">{{ p.title }}</div>
        <div class="text-danger fw-bold">{{ formatCurrency(p.price) }}</div>
      </div>
    </div>
  </div>
</div>

<div class="my-4">
  <div class="section-title">精选推荐</div>
  <div class="row g-3">
    <div class="col-lg-6">
      <div class="border rounded p-3">
        <div class="scroll-controls">
          <span class="small text-secondary">热销榜单</span>
          <div class="ms-auto d-flex gap-2">
            <button class="btn btn-outline-secondary btn-sm" data-scroll-dir="prev" data-target="#bestSellers"><i class="bi bi-chevron-left"></i></button>
            <button class="btn btn-outline-secondary btn-sm" data-scroll-dir="next" data-target="#bestSellers"><i class="bi bi-chevron-right"></i></button>
          </div>
        </div>
        <div id="bestSellers" class="h-scroll">
          <div class="h-item card mini-card" v-for="p in bestSellers" :key="p.title">
            <img :src="p.img" class="card-img-top" :alt="p.title">
            <div class="card-body p-2"><div class="small text-truncate">{{ p.title }}</div><div class="text-danger fw-bold">{{ formatCurrency(p.price) }}</div></div>
          </div>
        </div>
      </div>
    </div>
    <div class="col-lg-6">
      <div class="border rounded p-3">
        <div class="scroll-controls">
          <span class="small text-secondary">人气推荐</span>
          <div class="ms-auto d-flex gap-2">
            <button class="btn btn-outline-secondary btn-sm" data-scroll-dir="prev" data-target="#editorPicks"><i class="bi bi-chevron-left"></i></button>
            <button class="btn btn-outline-secondary btn-sm" data-scroll-dir="next" data-target="#editorPicks"><i class="bi bi-chevron-right"></i></button>
          </div>
        </div>
        <div id="editorPicks" class="h-scroll">
          <div class="h-item card mini-card" v-for="p in editorPicks" :key="p.title">
            <img :src="p.img" class="card-img-top" :alt="p.title">
            <div class="card-body p-2"><div class="small text-truncate">{{ p.title }}</div><div class="text-danger fw-bold">{{ formatCurrency(p.price) }}</div></div>
          </div>
        </div>
      </div>
    </div>
  </div>
</div>

<div class="my-4" id="guess" v-if="!searchActive">
  <div class="section-title">猜你喜欢</div>
  <div class="products-grid">
    <div v-for="p in pagedRecommendations" :key="p.title">
      <div class="card product-card h-100 position-relative">
        <div class="position-absolute top-0 end-0 p-2">
          <button class="btn btn-sm fav-btn shadow-sm" data-bs-toggle="tooltip" data-bs-title="收藏">
            <i class="bi bi-heart"></i>
          </button>
        </div>
        <img :src="p.img" class="card-img-top" alt="">
        <div class="card-body d-flex flex-column">
          <h6 class="card-title">{{ p.title }}</h6>
          <p class="text-danger fw-bold mb-3">{{ formatCurrency(p.price) }}</p>
          <div class="mt-auto d-flex gap-2">
            <button class="btn btn-gradient" @click="addToCart(p.title,p.price)"><i class="bi bi-cart-plus"></i></button>
            <button class="btn btn-outline-secondary" data-bs-toggle="modal" data-bs-target="#quickViewModal" :data-title="p.title" :data-img="p.img"><i class="bi bi-eye"></i></button>
          </div>
        </div>
      </div>
    </div>
  </div>
  <div class="d-flex justify-content-center mt-3">
    <ul class="pagination pagination-sm mb-0">
      <li class="page-item" :class="{disabled: guessPageSafe<=1}">
        <a class="page-link" href="#" @click.prevent="prevGuess"><i class="bi bi-chevron-left"></i></a>
      </li>
      <li class="page-item disabled"><span class="page-link">第 {{ guessPageSafe }} / {{ guessTotalPages }} 页</span></li>
      <li class="page-item" :class="{disabled: guessPageSafe>=guessTotalPages}">
        <a class="page-link" href="#" @click.prevent="nextGuess"><i class="bi bi-chevron-right"></i></a>
      </li>
    </ul>
  </div>
</div>

<div class="my-4" id="category-products" v-if="!searchActive && activeCategory!=='全部'">
  <div class="d-flex align-items-center mb-2">
    <div class="section-title mb-0">分类商品</div>
    <span class="ms-2 badge text-bg-light">{{ activeCategory }}</span>
  </div>
  <div class="products-grid">
    <div v-for="p in filteredProducts" :key="p.title">
      <div class="card product-card h-100 position-relative">
        <div class="position-absolute top-0 end-0 p-2">
          <button class="btn btn-sm fav-btn shadow-sm" data-bs-toggle="tooltip" data-bs-title="收藏">
            <i class="bi bi-heart"></i>
          </button>
        </div>
        <img :src="p.img" class="card-img-top" :alt="p.title">
        <div class="card-body d-flex flex-column">
          <h6 class="card-title">{{ p.title }}</h6>
          <p class="text-danger fw-bold mb-3">{{ formatCurrency(p.price) }}</p>
          <div class="mt-auto d-flex gap-2">
            <button class="btn btn-gradient" @click="addToCart(p.title,p.price)"><i class="bi bi-cart-plus"></i></button>
            <button class="btn btn-outline-secondary" data-bs-toggle="modal" data-bs-target="#quickViewModal" :data-title="p.title" :data-img="p.img"><i class="bi bi-eye"></i></button>
          </div>
        </div>
      </div>
    </div>
  </div>
</div>



<div id="faq" class="my-4" v-if="!searchActive">
  <div class="d-flex gap-2">
    <span class="badge text-bg-light"><i class="bi bi-question-circle me-1"></i>帮助</span>
    <span class="badge text-bg-light"><i class="bi bi-shield-check me-1"></i>保障</span>
  </div>
</div>

{{ item.title }} {{ formatCurrency(item.price) }}

合计 {{ formatCurrency(cartSum) }}

posted @ 2025-11-25 19:23 仙人兵马俑阅读(6) 评论(0) 收藏举报

刷新页面返回顶部

dynastyeast

软件工程学习日志2025.11.25

购物车

公告