PS:由于是模仿联想电商前台,前端代码借鉴官网代码。
CREATE TABLE `dzushop_types` (
`id` int(10) unsigned NOT NULL AUTO_INCREMENT COMMENT 'ID',
`name` varchar(255) NOT NULL COMMENT '分类名称',
`pid` int(11) NOT NULL COMMENT '父分类ID',
`path` varchar(255) NOT NULL COMMENT '路径',
`sort` int(255) NOT NULL COMMENT '分类排序',
`is_lou` tinyint(1) NOT NULL COMMENT '是否是楼层分类',
`title` varchar(255) NOT NULL COMMENT '分类标题',
`keywords` varchar(255) NOT NULL COMMENT '分类关键字',
`description` varchar(255) NOT NULL COMMENT '分类描述',
PRIMARY KEY (`id`) USING BTREE
) ENGINE=InnoDB AUTO_INCREMENT=20 DEFAULT CHARSET=utf8 ROW_FORMAT=COMPACT;
数据库设计思路,如何划分父子分类,主要是看父分类ID及路径字段,路径一直情况下根据共同前缀字段进行划分。
/**
* 前台首页方法
* @return \Illuminate\Contracts\View\Factory|\Illuminate\View\View
*/
public function index(){
// 查询导航栏导航
$types = DB::table('dzushop_types')->get();
// 处理导航栏
$type = $this->checkTypeData($types);
// 赋值数据
$data = array(
'type' => $type,
);
// 返回试图并赋值
return view("home.index")
->with('data', $data);
}
读取数据库数据交给 checkTypeData
方法处理;
/**
* 处理数组数据(递归)
* @param $data
* @param int $pid
* @return array
*/
public function checkTypeData($data, $pid=0){
$newArr = array();
foreach($data as $key => $value){
if($value->pid == $pid){
$newArr[$value->id] = $value;
$newArr[$value->id]->zi = $this->checkTypeData($data, $value->id);
}
}
return $newArr;
}
前台采用Laravel语法进行 foreach 三重循环遍历数据,显示结果。
@foreach($data['type'] as $one)
<li>
<div class="list_name">
<a href="#" target="_blank" class="list_nm"
style="height:28px;line-height:28px"
>{{ $one->name }}
<span class="list_usepng list_icona"></span></a>
<div class="list_cont">
<div class="list_lt">
@foreach($one->zi as $two)
<div class="list_lta">
<p>
<a href="#" target="_blank">{{ $two->name }}</a></p>
<ul class="clearfix">
@foreach($two->zi as $three)
<li>
<a href="#" target="_blank">
{{ $three->name }}</a>
</li>
@endforeach
</ul>
</div>
@endforeach
</div>
</div>
</div>
</li>
@endforeach
本文链接:https://cloud.tencent.com/developer/article/1558337
本文采用CC BY-NC-SA 3.0 Unported协议进行许可,转载请保留此文章链接