【Vue Shop】首页及分类页开发

Fork Me On Github
zodream 编程技术 TypeScript 2019年09月

首页及分类页开发

首页

本次只做一个简单的首页，共分为6部分：

  1. 头部搜索框：不是真正的可输入的搜索框，作用是点击跳转到搜索功能页面
  2. 轮播图：这里使用的是 mint-ui 中的轮播组件
  3. 一级分类菜单栏
  4. 新品
  5. 热门
  6. 精品

涉及到的 API 接口：

  1. 商品统计接口：显示在搜索框中，显示商城有多少个商品正在出售
  2. 轮播广告图接口
  3. 分类接口
  4. 商品首页推荐接口：包含新品、热门、精品的商品

技术相关

  1. 商品统计在其他页面也需要，可以使用 store 进行缓存
  2. 三个推荐商品部分样式一致，可以提取成为组件，传递标题、商品数据即可
  3. 头部有一个登录状态的判断，未登录显示登录入口，登录显示消息入口

公共底部导航栏组件

分类页

本页面分三部分：

  1. 头部搜索栏，同样是起点击跳转作用，样式与首页有区别，不需要做成组件
  2. 左侧一级分类
  3. 右侧为左侧选择的分类详情

右侧分为

  1. 当前分类的banner
  2. 当前分类的名称
  3. 当前分类的商品推荐
  4. 当前分类的所有子孙分类

涉及到的接口：

  1. 分类接口
  2. 商品统计接口
  3. 分类详情接口：因为本接口允许通过拓展参数设置获取推荐商品及子分类，不需要单独接口获取推荐商品和子分类了

技术相关

  1. 左边分类切换，可以考虑缓存当前选中
  2. 可以缓存分类详情，

公共底部导航栏组件

转载请保留原文链接： https://zodream.cn/blog/id/67.html

点击查看全文
0 199 0
Cookie设置
我们的网站会使用一些 Cookie 并记录您的 IP 地址，用于访问、安全和管理您对网络的访问。您可以通过更改浏览器设置来禁用数据收集和 Cookie，但这可能会影响本网站的功能。 了解更多
必要的
默认激活

基本 Cookie 对于网站的正常运行绝对必要。这些 Cookie 是匿名的，用于确保网站的基本功能和安全特性。

Cookie 有效期 说明
cookie_policy 11个月 Cookie 插件设置 Cookie 的目的是存储用户对使用 Cookie 的同意；它不会存储任何个人数据。
PHPSESSID 11个月 用于绑定用户登录凭证的 Cookie 标识
XSRF-TOKEN 11个月 用于防止跨站脚本攻击的 Cookie 标识
功能要求

功能性 Cookie 有助于执行某些功能，例如在社交媒体平台上共享网站内容、收集反馈和其他第三方功能。

性能要求

性能 Cookie 用于了解和分析网站的主要性能指标，这有助于为访问者提供更好的用户体验。

分析要求

分析 Cookie 用于了解访问者如何与网站互动。这些 Cookie 有助于提供有关访问者数量、跳出率、流量来源等指标的信息。

广告要求

广告 Cookie 用于为访问者提供相关的广告和营销活动。这些 Cookie 跨网站跟踪访问者并收集信息以提供定制广告。

其他要求

其他未分类的 Cookie 是那些正在分析但尚未分类的 Cookie。

41.8 ms
系统信息
Execution time41.8 ms
CPU usage user + system65 % + 5 %
Peak of allocated memory7.13 MB
Included files226
Classes + interfaces + traits140 + 29 + 26
Your IP18.191.166.195
Server IP172.21.0.9
HTTP method / response codeGET / 200
PHP8.4.2
Zodream5.1.0
Servernginx/1.27.3
运行信息
start0.0 ms
match route14.9 ms
controller response3.6 ms
db engine init6.4 ms
db engine end0.7 ms
db init end0.0 ms
view render5.6 ms
end42.1 ms
Queries(10)
[0.34ms] SELECT * FROM `blog` WHERE id = ? LIMIT 1
[0.26ms] SELECT * FROM `blog_term`
[0.63ms] SELECT term_id,COUNT(*) as count FROM `blog` WHERE parent_id = ? GROUP BY term_id
[0.48ms] SELECT id,language FROM `blog` WHERE parent_id = ?
[0.18ms] SELECT `tag_id` FROM `blog_tag_relationship` WHERE blog_id = ?
[0.2ms] SELECT `content`,`name` FROM `blog_meta` WHERE blog_id = ?
[0.19ms] SELECT id,name,avatar FROM `user` WHERE id in (?)
[0.27ms] SELECT id,title,thumb,parent_id,language,description,created_at FROM `blog` WHERE id < ? and language = ? and publish_status = ? ORDER BY id DESC LIMIT 1
[0.22ms] SELECT id,title,thumb,parent_id,language,description,created_at FROM `blog` WHERE id > ? and language = ? and publish_status = ? ORDER BY id ASC LIMIT 1
[0.21ms] SELECT * FROM `ad_position` WHERE code = ? and status = ? LIMIT 1
Views(5)
[Rendered] Module/Blog/UserInterface/layouts/header.php : 0.5ms
[Rendered] Module/Blog/UserInterface/Home/content.php : 3.15ms
[Rendered] Module/Blog/UserInterface/layouts/footer.php : 0.07ms
[Rendered] Module/Blog/UserInterface/Home/detail.php : 8.62ms
[Rendered] UserInterface/Home/layouts/main.php : 1.02ms