（3）MVC - V（視圖） · 基于ThinkPHP5.1的各項后臺小功能代碼實現

>[info] #### 視圖主要是用來呈現頁面效果的 ## 將頁面整合到框架里 >[info] 1、復制 assets文件夾，到 ```public/static``` 目錄下面，如圖： ![](https://box.kancloud.cn/6e65c7cc62be65ab7de8f3ab076be671_235x318.png) >[info] 2、這個小功能一共有6個頁面。如圖： ![](https://box.kancloud.cn/847f611fa28db89be533e921acbb3894_461x532.png) > （1）網站首頁，位于：```application\index\view\index\index.html```； ##### 代碼如下： ``` <!DOCTYPE html>    <html lang="en">   <head> <meta charset="utf-8" /> <title>首頁</title> <meta http-equiv="X-UA-Compatible" content="IE=edge"> <meta content="width=device-width, initial-scale=1" name="viewport" /> <meta content="描述" name="description" /> <meta name="keyword" content="基于ThinkPHP5.1的各項小功能代碼實現" /> <meta name="author" content="ye21st" />  <link href="__STATIC__/assets/global/plugins/googleapis/googleapis.css" rel="stylesheet" type="text/css" /> <link href="__STATIC__/assets/global/plugins/font-awesome/css/font-awesome.min.css" rel="stylesheet" type="text/css" /> <link href="__STATIC__/assets/global/plugins/simple-line-icons/simple-line-icons.min.css" rel="stylesheet" type="text/css" /> <link href="__STATIC__/assets/global/plugins/bootstrap/css/bootstrap.min.css" rel="stylesheet" type="text/css" /> <link href="__STATIC__/assets/global/plugins/bootstrap-switch/css/bootstrap-switch.min.css" rel="stylesheet" type="text/css" />   <link href="__STATIC__/assets/global/css/components.min.css" rel="stylesheet" id="style_components" type="text/css" /> <link href="__STATIC__/assets/global/css/plugins.min.css" rel="stylesheet" type="text/css" />   <link href="__STATIC__/assets/layouts/layout/css/layout.min.css" rel="stylesheet" type="text/css" /> <link href="__STATIC__/assets/layouts/layout/css/themes/blue.min.css" rel="stylesheet" type="text/css" id="style_color" /> <link href="__STATIC__/assets/layouts/layout/css/custom.min.css" rel="stylesheet" type="text/css" />  <link rel="shortcut icon" href="favicon.ico" /> </head>  <body class="page-header-fixed page-sidebar-closed-hide-logo page-content-white"> <div class="page-wrapper"> {include file="common/header"}  <div class="clearfix"> </div>   <div class="page-container">  <div class="page-sidebar-wrapper">    <div class="page-sidebar navbar-collapse collapse">        <ul class="page-sidebar-menu page-header-fixed " data-keep-expanded="false" data-auto-scroll="true" data-slide-speed="200" style="padding-top: 20px">   <li class="sidebar-toggler-wrapper hide"> <div class="sidebar-toggler"> <span></span> </div> </li> <li class="heading"> <h3 class="uppercase">首頁</h3> </li>  <li class="nav-item start active open"> <a href="" class="nav-link nav-toggle"> <i class="icon-home"></i> <span class="title">首頁</span> <span class="selected"></span> </a> </li>   <li class="nav-item "> <a href="javascript:;" class="nav-link nav-toggle"> <i class="icon-diamond"></i> <span class="title">欄目管理</span> <span class="arrow"></span> </a> <ul class="sub-menu"> <li class="nav-item "> <a href="{:url('index/cate/add')}" class="nav-link "> <span class="title">添加欄目</span> </a> </li> <li class="nav-item "> <a href="{:url('index/cate/lst')}" class="nav-link "> <span class="title">查看欄目</span> </a> </li> </ul> </li> </ul>   </div>  </div>   <div class="page-content-wrapper">  <div class="page-content">   <div class="page-bar"> <ul class="page-breadcrumb"> <li> <a href="{:url('index/index/index')}">首頁</a> <i class="fa fa-circle"></i> </li> </ul> </div>   <h1 class="page-title"> 歡迎來到首頁 </h1>   <div class="note note-info"> <p> 這一章節，主要是講無限極分類的應用。 </p> </div> </div>  </div>  </div>  {include file="common/footer"} </div>   <script src="__STATIC__/assets/global/plugins/jquery.min.js" type="text/javascript"></script> <script src="__STATIC__/assets/global/plugins/bootstrap/js/bootstrap.min.js" type="text/javascript"></script> <script src="__STATIC__/assets/global/plugins/js.cookie.min.js" type="text/javascript"></script> <script src="__STATIC__/assets/global/plugins/jquery-slimscroll/jquery.slimscroll.min.js" type="text/javascript"></script> <script src="__STATIC__/assets/global/plugins/jquery.blockui.min.js" type="text/javascript"></script> <script src="__STATIC__/assets/global/plugins/bootstrap-switch/js/bootstrap-switch.min.js" type="text/javascript"></script>   <script src="__STATIC__/assets/global/scripts/app.min.js" type="text/javascript"></script>   <script src="__STATIC__/assets/layouts/layout/scripts/layout.min.js" type="text/javascript"></script> <script src="__STATIC__/assets/layouts/layout/scripts/demo.min.js" type="text/javascript"></script> <script src="__STATIC__/assets/layouts/global/scripts/quick-sidebar.min.js" type="text/javascript"></script> <script src="__STATIC__/assets/layouts/global/scripts/quick-nav.min.js" type="text/javascript"></script>  </body> </html> ``` 如圖所示： ![](https://box.kancloud.cn/202ba42616847b74a5cb99396a5e6b84_1339x644.png) （2）欄目列表頁，位于：```application\index\view\cate\lst.html```；代碼如下： ``` <!DOCTYPE html>    <html lang="en">   <head> <meta charset="utf-8" /> <title>欄目列表 - 查看欄目</title> <meta http-equiv="X-UA-Compatible" content="IE=edge"> <meta content="width=device-width, initial-scale=1" name="viewport" /> <meta content="描述" name="description" /> <meta name="keyword" content="關鍵詞" /> <meta name="author" content="作者" />  <link href="__STATIC__/assets/global/plugins/googleapis/googleapis.css" rel="stylesheet" type="text/css" /> <link href="__STATIC__/assets/global/plugins/font-awesome/css/font-awesome.min.css" rel="stylesheet" type="text/css" /> <link href="__STATIC__/assets/global/plugins/simple-line-icons/simple-line-icons.min.css" rel="stylesheet" type="text/css" /> <link href="__STATIC__/assets/global/plugins/bootstrap/css/bootstrap.min.css" rel="stylesheet" type="text/css" /> <link href="__STATIC__/assets/global/plugins/bootstrap-switch/css/bootstrap-switch.min.css" rel="stylesheet" type="text/css" />   <link href="__STATIC__/assets/global/css/components.min.css" rel="stylesheet" id="style_components" type="text/css" /> <link href="__STATIC__/assets/global/css/plugins.min.css" rel="stylesheet" type="text/css" />   <link href="__STATIC__/assets/layouts/layout/css/layout.min.css" rel="stylesheet" type="text/css" /> <link href="__STATIC__/assets/layouts/layout/css/themes/blue.min.css" rel="stylesheet" type="text/css" id="style_color" /> <link href="__STATIC__/assets/layouts/layout/css/custom.min.css" rel="stylesheet" type="text/css" />  <link rel="shortcut icon" href="favicon.ico" /> </head>  <body class="page-header-fixed page-sidebar-closed-hide-logo page-content-white"> <div class="page-wrapper"> {include file="common/header"}  <div class="clearfix"> </div>   <div class="page-container">  <div class="page-sidebar-wrapper">    <div class="page-sidebar navbar-collapse collapse">        <ul class="page-sidebar-menu page-header-fixed " data-keep-expanded="false" data-auto-scroll="true" data-slide-speed="200" style="padding-top: 20px">   <li class="sidebar-toggler-wrapper hide"> <div class="sidebar-toggler"> <span></span> </div> </li> <li class="heading"> <h3 class="uppercase">首頁</h3> </li>  <li class="nav-item start"> <a href="" class="nav-link nav-toggle"> <i class="icon-home"></i> <span class="title">首頁</span> <span class="selected"></span> </a> </li>   <li class="nav-item active open"> <a href="javascript:;" class="nav-link nav-toggle"> <i class="icon-diamond"></i> <span class="title">欄目管理</span> <span class="arrow open"></span> <span class="selected"></span> </a> <ul class="sub-menu"> <li class="nav-item "> <a href="{:url('index/cate/add')}" class="nav-link "> <span class="title">添加欄目</span> </a> </li> <li class="nav-item open"> <a href="{:url('index/cate/lst')}" class="nav-link "> <span class="title">查看欄目</span> </a> </li> </ul> </li> </ul>   </div>  </div>   <div class="page-content-wrapper">  <div class="page-content">   <div class="page-bar"> <ul class="page-breadcrumb"> <li> <a href="{:url('index/index/index')}">首頁</a> <i class="fa fa-circle"></i> </li> <li> <a href="{:url('index/cate/index')}">欄目管理</a> <i class="fa fa-circle"></i> </li> </ul> </div>   <h1 class="page-title"> 欄目列表</h1>  <a href="{:url('index/cate/add')}" style="margin-bottom: 10px" class="btn green">添加</a> <div class="row"> <div class="col-md-12"> <div class="portlet box green"> <div class="portlet-title"> <div class="caption"> <i class="fa fa-cogs"></i>欄目列表</div> </div> <div class="portlet-body flip-scroll"> <form action="" method="post"> <table class="table table-bordered table-striped table-condensed flip-content"> <thead class="flip-content"> <tr> <th width="20%"> ID </th> <th> 排序 </th> <th class="numeric"> 欄目名稱 </th> <th class="numeric"> 操作 </th> </tr> </thead> <tbody> {volist name="cateres" id="cate"} <tr> <td> {$cate.id} </td> <td width="20%"> <input name="{$cate.id}" type="text" class="form-control input-sm" placeholder="排序" value="{$cate.sort}"> </td> <td class="numeric"> {if condition="$cate['level'] neq 0"}|{/if}<?php echo str_repeat('-', $cate['level']*8)?>{$cate.catename} </td> <td class="numeric"> <a href="{:url('index/cate/edit',array('id'=>$cate['id']))}" class="btn btn-sm blue"> 編輯 <i class="fa fa-edit"></i> </a> <a href="{:url('index/cate/del',array('id'=>$cate['id']))}" onClick="return del();" class="btn btn-sm red"> 刪除 <i class="fa fa-trash-o"></i> </a> </td> </tr> {/volist} <tr> <td></td> <td> <input class="btn btn-primary btn-sm shiny" style="margin-left:224px; margin-top:10px;text-align: center" type="submit" value="排序" > </td> <td></td> <td></td> </tr> </tbody> </table> </form> </div> </div> </div> </div> </div>  </div>  </div>  {include file="common/footer"} </div>   <script src="__STATIC__/assets/global/plugins/jquery.min.js" type="text/javascript"></script> <script src="__STATIC__/assets/global/plugins/bootstrap/js/bootstrap.min.js" type="text/javascript"></script> <script src="__STATIC__/assets/global/plugins/js.cookie.min.js" type="text/javascript"></script> <script src="__STATIC__/assets/global/plugins/jquery-slimscroll/jquery.slimscroll.min.js" type="text/javascript"></script> <script src="__STATIC__/assets/global/plugins/jquery.blockui.min.js" type="text/javascript"></script> <script src="__STATIC__/assets/global/plugins/bootstrap-switch/js/bootstrap-switch.min.js" type="text/javascript"></script>   <script src="__STATIC__/assets/global/scripts/app.min.js" type="text/javascript"></script>   <script src="__STATIC__/assets/layouts/layout/scripts/layout.min.js" type="text/javascript"></script> <script src="__STATIC__/assets/layouts/layout/scripts/demo.min.js" type="text/javascript"></script> <script src="__STATIC__/assets/layouts/global/scripts/quick-sidebar.min.js" type="text/javascript"></script> <script src="__STATIC__/assets/layouts/global/scripts/quick-nav.min.js" type="text/javascript"></script>  <script> $(document).ready(function() { function del() { if(confirm("確定要刪除嗎？")) { return true; } else { return false; } } }) </script> </body> </html> ``` 如圖所示： ![](https://box.kancloud.cn/19526472ae04a2584206279b98e250b4_1340x650.png) （3）欄目添加頁，位于：```application\index\view\cate\add.html```；代碼如下： ``` <!DOCTYPE html>    <html lang="en">   <head> <meta charset="utf-8" /> <title>添加欄目 - 欄目管理</title> <meta http-equiv="X-UA-Compatible" content="IE=edge"> <meta content="width=device-width, initial-scale=1" name="viewport" /> <meta content="描述" name="description" /> <meta name="keyword" content="關鍵詞" /> <meta name="author" content="作者" />  <link href="__STATIC__/assets/global/plugins/googleapis/googleapis.css" rel="stylesheet" type="text/css" /> <link href="__STATIC__/assets/global/plugins/font-awesome/css/font-awesome.min.css" rel="stylesheet" type="text/css" /> <link href="__STATIC__/assets/global/plugins/simple-line-icons/simple-line-icons.min.css" rel="stylesheet" type="text/css" /> <link href="__STATIC__/assets/global/plugins/bootstrap/css/bootstrap.min.css" rel="stylesheet" type="text/css" /> <link href="__STATIC__/assets/global/plugins/bootstrap-switch/css/bootstrap-switch.min.css" rel="stylesheet" type="text/css" />   <link href="__STATIC__/assets/global/css/components.min.css" rel="stylesheet" id="style_components" type="text/css" /> <link href="__STATIC__/assets/global/css/plugins.min.css" rel="stylesheet" type="text/css" />   <link href="__STATIC__/assets/layouts/layout/css/layout.min.css" rel="stylesheet" type="text/css" /> <link href="__STATIC__/assets/layouts/layout/css/themes/blue.min.css" rel="stylesheet" type="text/css" id="style_color" /> <link href="__STATIC__/assets/layouts/layout/css/custom.min.css" rel="stylesheet" type="text/css" />  <link rel="shortcut icon" href="favicon.ico" /> </head>  <body class="page-header-fixed page-sidebar-closed-hide-logo page-content-white"> <div class="page-wrapper"> {include file="common/header"}  <div class="clearfix"> </div>   <div class="page-container">  <div class="page-sidebar-wrapper">    <div class="page-sidebar navbar-collapse collapse">        <ul class="page-sidebar-menu page-header-fixed " data-keep-expanded="false" data-auto-scroll="true" data-slide-speed="200" style="padding-top: 20px">   <li class="sidebar-toggler-wrapper hide"> <div class="sidebar-toggler"> <span></span> </div> </li> <li class="heading"> <h3 class="uppercase">首頁</h3> </li>  <li class="nav-item start"> <a href="" class="nav-link nav-toggle"> <i class="icon-home"></i> <span class="title">首頁</span> <span class="selected"></span> </a> </li>   <li class="nav-item active open"> <a href="javascript:;" class="nav-link nav-toggle"> <i class="icon-diamond"></i> <span class="title">欄目管理</span> <span class="arrow open"></span> <span class="selected"></span> </a> <ul class="sub-menu"> <li class="nav-item open"> <a href="{:url('index/cate/add')}" class="nav-link "> <span class="title">添加欄目</span> </a> </li> <li class="nav-item"> <a href="{:url('index/cate/lst')}" class="nav-link "> <span class="title">查看欄目</span> </a> </li> </ul> </li> </ul>   </div>  </div>   <div class="page-content-wrapper">  <div class="page-content">   <div class="page-bar"> <ul class="page-breadcrumb"> <li> <a href="{:url('index/index/index')}">首頁</a> <i class="fa fa-circle"></i> </li> <li> <a href="{:url('index/cate/lst')}">欄目管理</a> <i class="fa fa-circle"></i> </li> <li> <a>添加欄目</a> </li> </ul> </div>   <h1 class="page-title"> 添加欄目</h1>  <div class="row"> <div class="col-md-12"> <div class="portlet light bordered"> <div class="portlet-title"> <div class="caption font-green-haze"> <i class="icon-settings font-green-haze"></i> <span class="caption-subject bold uppercase"> 添加欄目</span> </div> </div> <div class="portlet-body form"> <form action="" method="post" role="form" class="form-horizontal"> <div class="form-body"> <div class="form-group form-md-line-input"> <label class="col-md-2 control-label" for="pid">上級欄目</label> <div class="col-md-10"> <select name="pid" class="form-control" id="pid"> <option value="0">頂級欄目</option> {volist name="cateres" id="cate"} <option value="{$cate.id}">{if condition="$cate['level'] neq 0"}|{/if}<?php echo str_repeat('-', $cate['level']*4)?>{$cate.catename}</option> {/volist} </select> <div class="form-control-focus"> </div> </div> </div> <div class="form-group form-md-line-input"> <label class="col-md-2 control-label" for="catename">欄目名稱</label> <div class="col-md-10"> <input name="catename" type="text" class="form-control" id="catename" placeholder="輸入你的欄目名稱"> <div class="form-control-focus"> </div> </div> </div> </div> <div class="form-actions"> <div class="row"> <div class="col-md-offset-2 col-md-10"> <button type="submit" class="btn blue">保存信息</button> </div> </div> </div> </form> </div> </div> </div> </div> </div>  </div>  </div>  {include file="common/footer"} </div>   <script src="__STATIC__/assets/global/plugins/jquery.min.js" type="text/javascript"></script> <script src="__STATIC__/assets/global/plugins/bootstrap/js/bootstrap.min.js" type="text/javascript"></script> <script src="__STATIC__/assets/global/plugins/js.cookie.min.js" type="text/javascript"></script> <script src="__STATIC__/assets/global/plugins/jquery-slimscroll/jquery.slimscroll.min.js" type="text/javascript"></script> <script src="__STATIC__/assets/global/plugins/jquery.blockui.min.js" type="text/javascript"></script> <script src="__STATIC__/assets/global/plugins/bootstrap-switch/js/bootstrap-switch.min.js" type="text/javascript"></script>   <script src="__STATIC__/assets/global/scripts/app.min.js" type="text/javascript"></script>   <script src="__STATIC__/assets/layouts/layout/scripts/layout.min.js" type="text/javascript"></script> <script src="__STATIC__/assets/layouts/layout/scripts/demo.min.js" type="text/javascript"></script> <script src="__STATIC__/assets/layouts/global/scripts/quick-sidebar.min.js" type="text/javascript"></script> <script src="__STATIC__/assets/layouts/global/scripts/quick-nav.min.js" type="text/javascript"></script>  </body> </html> ``` 如圖所示： ![](https://box.kancloud.cn/aa4e7cd88bdc0e1692ac213b9a7e1ea1_1338x650.png) （4）欄目修改頁，位于：```application\index\view\cate\edit.html```；代碼如下： ``` <!DOCTYPE html>    <html lang="en">   <head> <meta charset="utf-8" /> <title>修改欄目 - 欄目管理</title> <meta http-equiv="X-UA-Compatible" content="IE=edge"> <meta content="width=device-width, initial-scale=1" name="viewport" /> <meta content="描述" name="description" /> <meta name="keyword" content="關鍵詞" /> <meta name="author" content="作者" />  <link href="__STATIC__/assets/global/plugins/googleapis/googleapis.css" rel="stylesheet" type="text/css" /> <link href="__STATIC__/assets/global/plugins/font-awesome/css/font-awesome.min.css" rel="stylesheet" type="text/css" /> <link href="__STATIC__/assets/global/plugins/simple-line-icons/simple-line-icons.min.css" rel="stylesheet" type="text/css" /> <link href="__STATIC__/assets/global/plugins/bootstrap/css/bootstrap.min.css" rel="stylesheet" type="text/css" /> <link href="__STATIC__/assets/global/plugins/bootstrap-switch/css/bootstrap-switch.min.css" rel="stylesheet" type="text/css" />   <link href="__STATIC__/assets/global/css/components.min.css" rel="stylesheet" id="style_components" type="text/css" /> <link href="__STATIC__/assets/global/css/plugins.min.css" rel="stylesheet" type="text/css" />   <link href="__STATIC__/assets/layouts/layout/css/layout.min.css" rel="stylesheet" type="text/css" /> <link href="__STATIC__/assets/layouts/layout/css/themes/blue.min.css" rel="stylesheet" type="text/css" id="style_color" /> <link href="__STATIC__/assets/layouts/layout/css/custom.min.css" rel="stylesheet" type="text/css" />  <link rel="shortcut icon" href="favicon.ico" /> </head>  <body class="page-header-fixed page-sidebar-closed-hide-logo page-content-white"> <div class="page-wrapper"> {include file="common/header"}  <div class="clearfix"> </div>   <div class="page-container">  <div class="page-sidebar-wrapper">    <div class="page-sidebar navbar-collapse collapse">        <ul class="page-sidebar-menu page-header-fixed " data-keep-expanded="false" data-auto-scroll="true" data-slide-speed="200" style="padding-top: 20px">   <li class="sidebar-toggler-wrapper hide"> <div class="sidebar-toggler"> <span></span> </div> </li> <li class="heading"> <h3 class="uppercase">首頁</h3> </li>  <li class="nav-item start"> <a href="" class="nav-link nav-toggle"> <i class="icon-home"></i> <span class="title">首頁</span> <span class="selected"></span> </a> </li>   <li class="nav-item active open"> <a href="javascript:;" class="nav-link nav-toggle"> <i class="icon-diamond"></i> <span class="title">欄目管理</span> <span class="arrow open"></span> <span class="selected"></span> </a> <ul class="sub-menu"> <li class="nav-item open"> <a href="{:url('index/cate/add')}" class="nav-link "> <span class="title">添加欄目</span> </a> </li> <li class="nav-item"> <a href="{:url('index/cate/index')}" class="nav-link "> <span class="title">查看欄目</span> </a> </li> </ul> </li> </ul>   </div>  </div>   <div class="page-content-wrapper">  <div class="page-content">   <div class="page-bar"> <ul class="page-breadcrumb"> <li> <a href="{:url('index/index/index')}">首頁</a> <i class="fa fa-circle"></i> </li> <li> <a href="{:url('index/cate/lst')}">欄目管理</a> <i class="fa fa-circle"></i> </li> <li> <a>修改欄目</a> </li> </ul> </div>   <h1 class="page-title"> 修改欄目</h1>  <div class="row"> <div class="col-md-12"> <div class="portlet light bordered"> <div class="portlet-title"> <div class="caption font-green-haze"> <i class="icon-settings font-green-haze"></i> <span class="caption-subject bold uppercase"> 修改欄目</span> </div> </div> <div class="portlet-body form"> <form action="" method="post" role="form" class="form-horizontal"> <input type="hidden" name="id" value="{$cates.id}" /> <div class="form-body"> <div class="form-group form-md-line-input"> <label class="col-md-2 control-label" for="pid">上級欄目</label> <div class="col-md-10"> <select name="pid" class="form-control" id="pid"> <option value="0">頂級欄目</option> {volist name="cateres" id="cate"} <option {if condition="$cates['pid'] eq $cate['id']"}selected="selected"{/if} value="{$cate.id}">{if condition="$cate['level'] neq 0"}|{/if}<?php echo str_repeat('-', $cate['level']*4)?>{$cate.catename}</option> {/volist} </select> <div class="form-control-focus"> </div> </div> </div> <div class="form-group form-md-line-input"> <label class="col-md-2 control-label" for="catename">欄目名稱</label> <div class="col-md-10"> <input name="catename" type="text" class="form-control" id="catename" placeholder="輸入你的欄目名稱" value="{$cates.catename}"> <div class="form-control-focus"> </div> </div> </div> </div> <div class="form-actions"> <div class="row"> <div class="col-md-offset-2 col-md-10"> <button type="submit" class="btn blue">保存信息</button> </div> </div> </div> </form> </div> </div> </div> </div> </div>  </div>  </div>  {include file="common/footer"} </div>   <script src="__STATIC__/assets/global/plugins/jquery.min.js" type="text/javascript"></script> <script src="__STATIC__/assets/global/plugins/bootstrap/js/bootstrap.min.js" type="text/javascript"></script> <script src="__STATIC__/assets/global/plugins/js.cookie.min.js" type="text/javascript"></script> <script src="__STATIC__/assets/global/plugins/jquery-slimscroll/jquery.slimscroll.min.js" type="text/javascript"></script> <script src="__STATIC__/assets/global/plugins/jquery.blockui.min.js" type="text/javascript"></script> <script src="__STATIC__/assets/global/plugins/bootstrap-switch/js/bootstrap-switch.min.js" type="text/javascript"></script>   <script src="__STATIC__/assets/global/scripts/app.min.js" type="text/javascript"></script>   <script src="__STATIC__/assets/layouts/layout/scripts/layout.min.js" type="text/javascript"></script> <script src="__STATIC__/assets/layouts/layout/scripts/demo.min.js" type="text/javascript"></script> <script src="__STATIC__/assets/layouts/global/scripts/quick-sidebar.min.js" type="text/javascript"></script> <script src="__STATIC__/assets/layouts/global/scripts/quick-nav.min.js" type="text/javascript"></script>  </body> </html> ``` 如圖所示： ![](https://box.kancloud.cn/7c1570cbdaf3cb8c3ff72f2b9ac437c5_1338x646.png) （5）公共頭部，位于：```application\index\view\common\header.html```；代碼如下： ```  <div class="page-header navbar navbar-fixed-top">  <div class="page-header-inner ">  <div class="page-logo"> <a href="{:url('index/index/index')}"> <span style="line-height: 50px;color: #FFF">無限極分類</span> </a> <div class="menu-toggler sidebar-toggler"> <span></span> </div> </div>   <a href="javascript:;" class="menu-toggler responsive-toggler" data-toggle="collapse" data-target=".navbar-collapse"> <span></span> </a>   <div class="top-menu"> <ul class="nav navbar-nav pull-right">   <li class="dropdown dropdown-user"> <a href="javascript:;" class="dropdown-toggle" data-toggle="dropdown" data-hover="dropdown" data-close-others="true"> <img alt="" class="img-circle" src="__STATIC__/assets/layouts/layout/img/avatar3_small.jpg" /> <span class="username username-hide-on-mobile"> admin </span> <i class="fa fa-sign-out"></i> </a> </li>  </ul> </div>  </div>  </div>  ``` 如圖所示： ![](https://box.kancloud.cn/d2f76f5f3eef39ea8a0892f8b1a4468d_1342x36.png) （6）公共底部，位于：```application\index\view\common\footer.html```；代碼如下： ```  <div class="page-footer"> <div class="page-footer-inner"> <a target="_blank" style="color: #FFF" href="http://www.hmoore.net/ifeng/tp5_1_code">基于ThinkPHP5.1的各項小功能代碼實現</a> </div> <div class="scroll-to-top"> <i class="icon-arrow-up"></i> </div> </div>  ``` 如圖所示： ![](https://box.kancloud.cn/549b937fc757885497af03de7fa41281_1343x19.png) >[danger] 注意：頁面如果要正常顯示，那么需要同時完成下面的模型以及控制器，這樣，可以進行完整的顯示以及操作。 >[info] 至此，首頁、欄目相關的頁面、公共頁面也就制作好了，正常訪問請下載源碼查看演示效果，以上是主要代碼。