前往小程序,Get更优阅读体验!
立即前往
首页
学习
活动
专区
工具
TVP
发布
社区首页 >专栏 >Laravel 实现前台网站三级目录

Laravel 实现前台网站三级目录

作者头像
Meng小羽
修改2019-12-24 11:25:23
1.5K0
修改2019-12-24 11:25:23
举报
文章被收录于专栏:Debug客栈

效果展示

PS:由于是模仿联想电商前台,前端代码借鉴官网代码。

数据库设计

代码语言:javascript
复制
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及路径字段,路径一直情况下根据共同前缀字段进行划分。

后台数据处理

代码语言:javascript
复制
/**
 * 前台首页方法
 * @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 方法处理;

代码语言:javascript
复制
/**
 * 处理数组数据(递归)
 * @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 三重循环遍历数据,显示结果。

代码语言:javascript
复制
@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协议进行许可,转载请保留此文章链接

本文参与 腾讯云自媒体同步曝光计划,分享自作者个人站点/博客。
如有侵权请联系 cloudcommunity@tencent.com 删除

本文分享自 作者个人站点/博客 前往查看

如有侵权,请联系 cloudcommunity@tencent.com 删除。

本文参与 腾讯云自媒体同步曝光计划  ,欢迎热爱写作的你一起参与!

评论
登录后参与评论
0 条评论
热度
最新
推荐阅读
目录
  • 效果展示
  • 数据库设计
  • 后台数据处理
  • 前台数据遍历
相关产品与服务
数据库
云数据库为企业提供了完善的关系型数据库、非关系型数据库、分析型数据库和数据库生态工具。您可以通过产品选择和组合搭建,轻松实现高可靠、高可用性、高性能等数据库需求。云数据库服务也可大幅减少您的运维工作量,更专注于业务发展,让企业一站式享受数据上云及分布式架构的技术红利!
领券
问题归档专栏文章快讯文章归档关键词归档开发者手册归档开发者手册 Section 归档