网站开发（十二）前台栏目模块分配
来源：互联网 发布：网约车平台软件开发 编辑：程序博客网 时间：2024/06/05 16:26
后台差不多完成了，接下去将是对前台栏目各模块进行分配和操作
首先是观察前台各个模块
前台header
前台侧边栏
前台底部
以上三个模块是而每个页面都有，所以需要分离公共页面
一、分离公共页面
1. 修改index
在Home/View/Index下的index.html中将header，right，footer分离出来并且include进去
在Home/View下新建Common，存放三个分离出来的html文件
index.html代码
<!doctype html><html lang="zh-CN" prefix="og: http://ogp.me/ns#"><head><title>XulinJie</title><style type="text/css"> .b-page { background: #fff; box-shadow: 0px 1px 2px 0px #E2E2E2; } .page { width: 95%; padding: 30px 15px; background: #FFF; text-align: right; overflow: hidden; } .page .first, .page .prev, .page .current, .page .num, .page .current, .page .next, .page .end { padding: 8px 16px; margin: 0px 5px; display: inline-block; color: #008CBA; border: 1px solid #F2F2F2; border-radius: 5px; } .page .first:hover, .page .prev:hover, .page .current:hover, .page .num:hover, .page .current:hover, .page .next:hover, .page .end:hover { text-decoration: none; background: #F8F5F5; } .page .current { background-color: #008CBA; color: #FFF; border-radius: 5px; border: 1px solid #008CBA; } .page .current:hover { text-decoration: none; background: #008CBA; } .page .not-allowed { cursor: not-allowed; } </style><include file="Common:header"/><div class="body"><div class="wrapper cls"> <div class="main"> <volist name="list" id="vo"> <div class="list"> <ul> <li> <h1 class="title"><a href="__CONTROLLER__/article/id/{$vo.f_id}" >{$vo.f_title}</a></h1> <div class="info"><span>{$vo.time|date="Y-m-d",###}</span></div> <div class="thumb"> <a href="#" > <if condition="$vo['f_pic'] neq null"> <img width="1200" height="630" src="__ROOT__{$vo.f_pic}" class="attachment-post-thumbnail size-post-thumbnail wp-post-image" alt="" /> <else/> <img width="1200" height="630" src="__ROOT__/Uploads/暂无图片.png" class="attachment-post-thumbnail size-post-thumbnail wp-post-image" alt="" /> </if> </a></div> </li> </ul> </div> </volist> <div class="list page b-page"> {$page} </div> </div> <include file="Common:right"/> <include file="Common:footer"/>2.添加公共部分代码
在Home/View/Common下建三个html文件，分别是header.html,right.html,footer.html代码
header.html代码
<meta http-equiv="X-UA-Compatible" content="IE=edge" /> <meta http-equiv="content-type" content="text/html; charset=UTF-8" /> <meta charset="UTF-8" /> <meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.0, user-scalable=0"> <link href='__PUBLIC__/Home/style/style.css' rel='stylesheet' type='text/css'> <link rel="stylesheet" type="text/css" href="__PUBLIC__/Home/style/font.css"> <script type="text/javascript" src="__PUBLIC__/Home/style/jquery-1.11.3.min.js"></script> <style type="text/css"> img.wp-smiley, img.emoji { display: inline !important; border: none !important; box-shadow: none !important; height: 1em !important; width: 1em !important; margin: 0 .07em !important; vertical-align: -0.1em !important; background: none !important; padding: 0 !important; } </style></head><body class="p-blog zh"><!-- Desktop Header --><!-- 导航啦开始 --> <header> <div class="header"> <div class="logo"> <div class="title"> <a href="#"> <!-- <img src="https://blog.360totalsecurity.com/wp-content/themes/360TotalSecurity/img/blog_logo.png" alt="360 Total Security Blog Logo" title="360 Total Security Blog Logo" width="126" height="45" /> --> <h1>XuLinJie</h1> </a> </div> </div> <nav class="navbar" role="navigation"> <ul class="nav"> <!-- <li><a class="active" href="#">最新文章</a></li> --> <volist name="navers" id="vo"> <li><a href="__MODULE__/<if condition="$vo['cate_id'] eq 1">index<elseif condition="$vo['cate_id'] eq 2"/>article</if>/index" <if condition="$cateids['cate_id'] eq $vo['cate_id']">class="active"</if> >{$vo.cate_name}</a></li> </volist> <!-- <li><a href="#">公司新闻</a></li> --> </ul> </nav> </div> </header> <div class="anchor-bar"> <ul> <li class="active"><a href="#">最新文章</a></li> <li><a href="#">相关</a></li> <li><a href="#">##</a></li> <li> <a class="download" data-ga="download|anchor-bar|ts|" href="#">登录</a> </li> </ul> </div><!-- 导航栏结束 -->导航栏的a标签也在了即超链接
right.html代码
<div class="sticky-content-spacer"> <div id="sidebar" class="side"> <!-- Desktop Sidebar --><div class="widget-download"> <div class="free-download"> <a class="title" data-ga="download|sidebar|ts|360 Total Security 博客" target="_blank" title="免费下载 360 Total Security" href="#">XuLinJie</a> <span class="os">推荐专栏</span> </div></div><!-- 热门文章 --><div class="pop"> <div class="title">热门文章</div> <ul> <volist name="arem" id="vo"> <li> <div class="thumb"><a href="__MODULE__/article/index/id/{$vo.a_id}"> <img width="1350" height="675" src="__ROOT__/{$vo.a_pic}" class="attachment-post-thumbnail size-post-thumbnail wp-post-image"/></a> </div> <h2 class="topic"><a href="__MODULE__/article/index/id/{$vo.a_id}">{$vo.a_title}</a></h2> <div class="clear"></div> </li> </volist> </ul></div><!-- 热门文章end --><div class="fb-page" data-href="https://www.facebook.com/360safe" data-width="293" data-height="320" data-small-header="false" data-adapt-container-width="true" data-hide-cover="false" data-show-facepile="true" data-show-posts="true"><div class="fb-xfbml-parse-ignore"><blockquote cite="https://www.facebook.com/360safe"><a href="https://www.facebook.com/360safe">推荐专栏</a></blockquote></div></div> </div> </div> <div class="clear"></div></div></div>footer.html代码
<footer> <div class = "footer"> <div class="row"> <span class="copyright">© XuLinJie_</span> </div> </div></footer> <script> $(function($){ $('[data-ga]').click(function() { var e = $(this).attr('data-ga').split('|'); ga('send', 'event', e[0], e[1], e[2]); }); }); $(function() { 'use strict'; var $window = $(window); $window.scroll(checkAnchorBar); checkAnchorBar(); function checkAnchorBar() { var $anchorBar = $('.anchor-bar'); var scrollTop = $window.scrollTop(); var $anchorStartElem = $('header'); var attachedClass = 'attached'; var threshold = $anchorStartElem.offset().top + $anchorStartElem.height(); if (!$anchorBar.hasClass(attachedClass) && scrollTop >= threshold) { $anchorBar.addClass(attachedClass); } else if ($anchorBar.hasClass(attachedClass) && scrollTop < threshold) { $anchorBar.removeClass(attachedClass); } } }); </script> <div id="fb-root"></div> </body></html>创建Article文件夹
在Home/View下建立Article文件夹（原本有Index文件夹），代表两个首页导航模块
Article下建立index.html代码
代码如下
<!doctype html><html lang="zh-CN" prefix="og: http://ogp.me/ns#"><head><title>XuLinjie</title><include file="Common:header"/><div class="body"><div class="wrapper cls"> <div class="main"> <div class="list"> <ul> <li> <h1 class="title"><a href="#" >########</a></h1> <div class="info"><span>2017/3/16</span><span>360TS</span></div> <div class="thumb"><a href="#" > <img width="1200" height="630" src="https://blog.360totalsecurity.com/wp-content/uploads/2017/03/170310_fb_blog_tookit_2.png" class="attachment-post-thumbnail size-post-thumbnail wp-post-image" alt="" /></a></div> <div class="intro"> <a href="#" ><p>##################…</p> </a> </div> </li> </ul> </div> </div> <include file="Common:right"/> <include file="Common:footer"/>这样文章模块和首页模块的前端代码解决
接下去就是要写它们的控制器了
二、写前台首页栏目的控制器
有两个栏目（首页和文章），分别命名IndexController.class.php,ArticleController.class.php.栏目还有公共的，所以分离公共的也需要控制器CommonController.class.php
IndexController.class.php代码
<?phpnamespace Home\Controller;use Think\Controller;class IndexController extends CommonController { public function index(){ $cate=D('cate'); $cateid=1; $cateids=$cate->find($cateid); $this->assign('cateids',$cateids);}
ArticleController.class.php代码
<?phpnamespace Home\Controller;use Think\Controller;class ArticleController extends CommonController { public function index(){ $cate=D('cate'); $cateid=2; $cateids=$cate->find($cateid); $this->assign('cateids',$cateids); $this->display(); }}CommonController.class.php代码（只要控制器中有公共的部分，代码就按下面的写）
<?phpnamespace Home\Controller;use Think\Controller;class CommonController extends Controller { public function __construct(){ parent::__construct(); $this->nav(); } public function nav(){ $cate=D('cate'); $navers=$cate->select(); $this->assign('navers',$navers); // $this->display(); }}
前台栏目模块分配完成了
阅读全文
1 0
- 网站开发（十二）前台栏目模块分配
- 网站开发（九）后台栏目的删除操作
- 网站开发（十）后台栏目的修改操作
- 网站开发前台工具介绍
- Python （十二）模块
- Nginx模块开发（十二）（续）：upstream负载均衡
- 网站栏目
- 使用angularjs1.x构建前台开发框架（十二）——脏检查
- 网站开发流程以及HTML5简介（十二）
- 网站开发（六）后台《栏目管理》静态页面的添加
- 网站开发（八）后台新增栏目的添加和显示
- Nginx模块开发（十二）（续二）：upstream负载均衡模块的例子
- 第四十二天：Tiny4412模块驱动开发
- 实例讲解网站前台界面开发流程
- 网站开发（三）网站前台的导入及控制器对应
- 网站前台设计（dreamweaver）
- iOS入门（十二）动态内存分配
- （十二）C语言动态内存分配
- Fiddler 查看请求的服务器类型和IP
- IO流总结2017.8.17
- HTML笔记（三）bootstrap之表格
- Activity使用主题不兼容报错-You need to use a Theme.AppCompat theme (or descendant) with this activity
- uva 10603 Fill code2
- 网站开发（十二）前台栏目模块分配
- pxe装系统简易原理及配置
- Faster\Slower 快慢指针的应用
- android中带索引的列表-----索引的高级使用
- NYOJ 49 开心的小明（01背包）
- .net reflector 反编译失败 索引超出了数组界限问题处理方法
- JAVA中常用的Map和Collection数据结构图解
- SQUASHFS error 解决
- 博弈论--从 必胜点与必败点 到 SG 函数
