软件工程学习日志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网站演示