15-Beego优选商品分类展示

大家好,我是小鲜,今天会有一些新鲜的内容,我们会将后台的对象在首页展示,会将页面结构与数据结构做一个简单的映射,然后将映射好的数据结构在后台做简单的存储然后在前台展示,话不多说,让我们边做边探索吧

效果图.gif

0.操作

如果我们分析某个页面时,想删掉页面中我们不需要的元素更好的分析,可以右键单击需要删除的元素,选择检查,然后在源代码中删除不想要的元素

image.png

1.知识点

1.OrderBy按照传递元素的大小将传递的多条数据排序
2.分析页面结构找到数据结构
3.如果传到页面的是字典类型的数据,可以通过名称.键值的方式引用

image.png

2.逻辑注意点

1.如果先将数据按照指定的顺序排列,可以在表中添加Index字段,按照Index由小到大的顺序排列字段
2.如果要在一个遍历里引用另一个遍历得到的数据要用嵌套遍历

一.分析页面与数据对应关系

image.png

我们要由外到内,由左到右,由上到下分析每一块区域的存储结构,常用的有切片和字典

3.bugs

1. image.png

本地服务器地址是127,写成126,导致获取图片不成功

2. image.png
明明是嵌套遍历,写成并列遍历,我们是在一个切片中,继续遍历切片中的字典

二.商品分类展示Get逻辑代码

获取首页分类需要展示的类型及商品
1.创建一个切片
2.创建一个map
3.将当前区域的类型保存到map中
4.将当前区域所有商品保持难道map中
5.将当前的map添加到切片中
6.返回数据

三.商品分类展示页面

1.找到展示列表
2.定义切片循环范围
3.读取商品类型名称和图片路径
4.嵌套商品循环范围
5.读取商品名称/价格/图片

image.png
image.png
image.png
image.png