站点模块化与数据动态（复刻“塔读文学PC站”）--PHP培训十期线上班

站点模块化与数据动态（复刻“塔读文学PC站”）—补1.10-1.12作业

声明

代码涉及塔读文学原站图片、内容等资源，仅供学习、交流使用，不得用于商业行为，本人对此类相关事件不负任何责任，转载请注明来源，——谢谢！

学习总结

看到这次作业时，感觉老师安排的作业量很大，本来想凑合一下的，可是自己想了一下，还是选择慢一点，至少做到自己满意才好。毕竟，学来的东西都是自己的，同时我也想好好写一下，看看自己到底掌握的怎么样，所以这次作业交的有点慢啦！
首先，在这次作业中，感觉自己对一些讲过的内置函数以及一些数组的记忆，还是不过深刻，有时间还是要抓紧时间再练习一下。
其次，因为页面中涉及的数据量比较大，所以主要对导航、作品库、首页的《我有一座巨龙城》进行了数据动态，还有一些实现效果需要js,所以只能先放着了。
整体感觉动态网站，还是很意思，也是很必要的（因为数据量大了，维护那真的是个很费劲的事情嘞）。其次，也发现对于动态网站来说，HTML这个显示骨架结构的合理性和逻辑性也显得尤为重要。
由于代码量比较大，所以只展示项目结构和动态数据部分，博文最后有完整的代码包，有需要的小伙伴！可以自己下载哦！
要是时间允许，伴随课程推进，我会不断完善这个案例，这次就算是Ver.1.00吧！

项目思路

首先，我分析了一下站点的布局和显示模块，感觉公用的东西还是蛮多的；

页头
banner图
页尾
推荐列表，一共大概有3-4种显示样式
列表翻页
路径导航
作品主页
作品目录

然后，在将网站的数据根据需要，进行分表建库，这里就先用config.php暂时代替一下。

最后，将拆分模块模板，按照需求拼装起来（这里用了include引入文件），就可了。（前面写模块是真的慢！）

项目结构

includes 文件夹，包含是组件模板存在的路径；
inc_css文件夹，包含组件模板样式表；
config.php文件，是配置文件（包含模拟数据）；
resources文件夹，包含images，展示页面引用的css

页面效果

站点首页

作品库页面

作品主页

代码部分

config.php

<?php
/**
 * Created by PhpStorm.
 * File name:config.php
 * Description:网站动态数据--配置文件
 * User: Air15_2019
 * Date: 2020/1/12
 * Time: 12:06
 */
/*
 * 站点基础配置
 * -栏目导航
 * -底部链接
 * -其它固化信息
 * */
//站点基础配置
$siteTitle = '塔读文学';
//定义，资源路径、组件库常量
const RESOURCES_PATH = 'resources/';
/*栏目导航*/
$tc_nav = [
    ['id' => 1, 'name' => '首页', 'URL' => 'index.php'],
    ['id' => 2, 'name' => '作品库', 'URL' => 'book_lists.php'],
    ['id' => 3, 'name' => '原创女生', 'URL' => 'book_women.php'],
    ['id' => 4, 'name' => '轻小说', 'URL' => 'book_min.php'],
    ['id' => 5, 'name' => '衍生版权', 'URL' => 'book_derivatives.php'],
    ['id' => 6, 'name' => '作者福利', 'URL' => 'book_author.php'],
];
//友情链接
$tc_footerLinks = [];
//作品频道-- 频道ID,频道名称
$tc_channelType = [
    ['id' => 1, 'channelName' => '男频'],
    ['id' => 2, 'channelName' => '女频'],
    ['id' => 3, 'channelName' => '出版'],
    ['id' => 4, 'channelName' => '二次元'],
];
//小说分类-- 分类ID,所属频道ID,分类编码,分类名称
$tc_novelType = [
    ['id' => 1, 'channelType_id' => 0, 'novelType' => 'ALL', 'name' => '不限',],
    ['id' => 2, 'channelType_id' => 1, 'novelType' => 'DFXH', 'name' => '东方玄幻',],
    ['id' => 3, 'channelType_id' => 1, 'novelType' => 'XDDS', 'name' => '现代都市',],
    ['id' => 4, 'channelType_id' => 1, 'novelType' => 'NDCX', 'name' => '脑洞创意',],
    ['id' => 5, 'channelType_id' => 1, 'novelType' => 'LSJK', 'name' => '历史架空',],
    ['id' => 6, 'channelType_id' => 1, 'novelType' => 'JSZZ', 'name' => '军事战争',],
    ['id' => 7, 'channelType_id' => 1, 'novelType' => 'YXJJ', 'name' => '游戏竞技',],
    ['id' => 8, 'channelType_id' => 1, 'novelType' => 'WXXX', 'name' => '武侠仙侠',],
    ['id' => 9, 'channelType_id' => 1, 'novelType' => 'KHMS', 'name' => '科幻末世',],
    ['id' => 10, 'channelType_id' => 1, 'novelType' => 'LXXY', 'name' => '灵异悬疑',],
    ['id' => 11, 'channelType_id' => 1, 'novelType' => 'XFQH', 'name' => '西方奇幻',],
    ['id' => 12, 'channelType_id' => 1, 'novelType' => 'DPXS', 'name' => '短片小说',],
    ['id' => 13, 'channelType_id' => 2, 'novelType' => 'GDYQ', 'name' => '古代言情',],
    ['id' => 14, 'channelType_id' => 2, 'novelType' => 'XHYQ', 'name' => '玄幻言情',],
    ['id' => 15, 'channelType_id' => 2, 'novelType' => 'XDYQ', 'name' => '现代言情',],
    ['id' => 16, 'channelType_id' => 2, 'novelType' => 'QCXY', 'name' => '青春校园',],
    ['id' => 17, 'channelType_id' => 2, 'novelType' => 'XYLY', 'name' => '悬疑灵异',],
    ['id' => 18, 'channelType_id' => 2, 'novelType' => 'DPXS', 'name' => '短片小说',],
];
//作品状态字典-- 状态ID,状态名称
$tc_novelStatus = [
    ['id' => 1, 'statusName' => '不限',],
    ['id' => 2, 'statusName' => '连载',],
    ['id' => 3, 'statusName' => '完结',],
];
//作品上架状态(属性)-- 上架状态ID,上架状态名称
$tc_chargeType = [
    ['id' => 1, 'chargeTypeName' => '不限',],
    ['id' => 2, 'chargeTypeName' => '免费',],
    ['id' => 3, 'chargeTypeName' => 'VIP',],
];
//作品字数分类-- ID,字数分类名称
$tc_numberType = [
    ['id' => 1, 'numberTypeName' => '不限',],
    ['id' => 2, 'numberTypeName' => '10万以下',],
    ['id' => 3, 'numberTypeName' => '10万-30万',],
    ['id' => 4, 'numberTypeName' => '30万-50万',],
    ['id' => 5, 'numberTypeName' => '50万-100万',],
    ['id' => 6, 'numberTypeName' => '100万以上',],
    ['id' => 7, 'numberTypeName' => '100万-200万',],
    ['id' => 8, 'numberTypeName' => '200万以上',],
];
//筛选作品列表排序-- ID,排序名称
$tc_SortingType = [
    ['id' => 1, 'sortingName' => '周人气',],
    ['id' => 2, 'sortingName' => '最近更新',],
    ['id' => 3, 'sortingName' => '总推荐',],
    ['id' => 4, 'sortingName' => '总字数',],
    ['id' => 5, 'sortingName' => '收藏',],
];
/*
 * $tf_users 用户信息表-实体表
 * ID、用户名称、用户类型(1-读者会员/2-作者/3-管理员) 、用户等级、用户头像URL、用户主页URL
 * */
$tf_users = [
    [
        'id' => 145,
        'name' => '东边夜雨',
        'userType' => 2,
        'userLevel' => 3,
        'imgURL' => 'images/users/145.jpg',
        'userIndex' => '',
    ],
];
/*
 * $tf_novelInfo 作品信息-实体表
 * 作品ID、频道ID、类型id、名称、封面图片URL、作者、小说简介、作品主页URL、
 * 作品状态、签约状态、上架状态、字数/万、人气值、推荐票合计、收藏数量
 * */
$tf_novelInfo = [
    [
        'id' => 3047,
        'channelType_id' => 1,
        'novelType_id' => 7,
        'name' => '我有一座巨龙城',
        'imgUrl' => 'images/3047.jpg',
        'user_id' => 145,
        'description' => '【2020年1月银票大赛参赛作品】别人出生在新手村，而我直接继承了一座巨龙城。 10级解封山地亚龙。 20级解锁毒液魔龙。 30级解锁烈焰巨龙。 鬼面獠龙，天灾骨龙，黑暗魔龙，…… 当网游降临现实，陆离脚踩永恒超越之龙，带领亿万龙族大军，粉碎入侵，征战诸天万界',
        'status' => '连载中',
        'signing' => '塔读签约',
        'charge' => 'VIP',
        'wordNumber' => '68.4万字',
        'focus' => '865',
        'recommend' => 189,
    ],
];
/*
 * 小说章节列表
 * 小说目录-ID、小说ID、卷code、卷序号、卷名、章节名、内容URL
 * */
$tf_novelDirectory = [];

public_header.inc.php

<?php
/**
 * Created by PhpStorm.
 * File name:public_header.inc.php
 * Description:页面公共组件-头部导航
 * User: Air15_2019
 * Date: 2020/1/12
 * Time: 11:51
 */
// 使用include，引入配置文件config.php
include 'config.php';
?>
<div class="public-header">
    <div class="header-container">
        <div class="header-top">
            <a class="logo" href="index.php"></a>
            <div class="login">
                <!--作者专区 按钮-->
                <a href=""></a>
                <a class="login-right" href="">登录</a>
                <a class="login-right" href="">注册</a>
            </div>
        </div>
        <div class="header-nav">
            <div>
                <?php foreach ($tc_nav as $items): ?>
                    <a href=<?php echo '"'.$items['URL'].'"';?>>
                        <?php echo $items['name'];?>
                    </a>
                <?php endforeach;?>
            </div>
            <div>
                <input type="search" id="header_search" name="header_search" value="关键词、书名、作者">
                <label for="header_search"><a href="">搜索</a></label>
            </div>
        </div>
    </div>
</div>

public_recommend_list.inc.php

<?php
/**
 * Created by PhpStorm.
 * File name:public_recommend_list.inc.php
 * Description:页面公共组件-头部导航
 * User: Air15_2019
 * Date: 2020/1/12
 * Time: 15:36
 */
//导入数据配置文件
include 'config.php';
$id = 3047;
//遍历获取 封推 作品信息
foreach ($tf_novelInfo as $novel) {
    if ($novel['id'] === $id) {
        //将数组的元素，转换为单独的变量；
        extract($novel);
    }
}
//遍历关联 用户信息表，获取作者相关信息
foreach ($tf_users as $user){
    if($user['id']===$user_id){
        $author_name=$user['name'];
    }
}
//便利关联 小说类型表，获取作品类型信息
foreach ($tc_novelType as $value){
    if($value['id']===$novelType_id){
        $typeName=$value['name'];
    }
}
?>
<div class="public-recommend-list">
    <!--推荐列表标题-->
    <div class="recommend-title">
        <span></span>
        <div></div>
    </div>
    <!--推荐列表容器-->
    <div class="list-container">
        <!--左侧主推-->
        <div class="list-left">
            <a class="novel-name" href="">
                <img src="<?php echo RESOURCES_PATH.$imgUrl;?>" alt="">
                <p><?php echo $name;?></p>
            </a>
            <p class="heat"><span></span><i><?php echo $focus;?></i>万人气</p>
            <p>
                <span><?php echo $author_name;?></span>
                <span><?php echo $typeName;?></span>
            </p>
            <p>
                <span><?php echo $wordNumber;?></span>
                <span><?php echo $status; ?></span>
            </p>
            <p><?php echo substr($description, 0, 200); ?></p>
            <a class="button-yd" href="book_index.php">点击阅读</a>
        </div>
        <!--中间推荐-顶部4个-->
        <a class="list-center-top" href="">
            <img src="resources/images/2020-1.jpg" alt="">
            <div>
                <span>神话：我的龙族能...</span>
                <span>不是月耀</span>
                <span>【2020年1月银票大赛参赛作品】一朝穿越，</span>
            </div>
        </a>
        <a class="list-center-top" href="">
            <img src="resources/images/2020-2.jpg" alt="">
            <div>
                <span>神话：我的龙族能...</span>
                <span>不是月耀</span>
                <span>【2020年1月银票大赛参赛作品】一朝穿越，</span>
            </div>
        </a>
        <a class="list-center-top" href="">
            <img src="resources/images/2020-3.jpg" alt="">
            <div>
                <span>神话：我的龙族能...</span>
                <span>不是月耀</span>
                <span>【2020年1月银票大赛参赛作品】一朝穿越，</span>
            </div>
        </a>
        <a class="list-center-top" href="">
            <img src="resources/images/2020-4.jpg" alt="">
            <div>
                <span>神话：我的龙族能...</span>
                <span>不是月耀</span>
                <span>【2020年1月银票大赛参赛作品】一朝穿越，</span>
            </div>
        </a>
        <!--中间推荐-底部4个-->
        <div class="list-center-bottom order1">
            <a href="">
                <span>我在万界猎杀怪兽</span>
                <p>热销火书</p>
                <p>玩吃鸡也能穿梭时空？ 还要猎杀巨龙史矛革，怪兽之王哥斯拉，无敌浩克绿巨人…… 这特么什么玩意啊！</p>
            </a>
        </div>
        <div class="list-center-bottom order2">
            <a href="">
                <span>我在万界猎杀怪兽</span>
                <p>热销火书</p>
                <p>玩吃鸡也能穿梭时空？ 还要猎杀巨龙史矛革，怪兽之王哥斯拉，无敌浩克绿巨人…… 这特么什么玩意啊！</p>
            </a>
        </div>
        <div class="list-center-bottom order3">
            <a href="">
                <span>我在万界猎杀怪兽</span>
                <p>热销火书</p>
                <p>玩吃鸡也能穿梭时空？ 还要猎杀巨龙史矛革，怪兽之王哥斯拉，无敌浩克绿巨人…… 这特么什么玩意啊！</p>
            </a>
        </div>
        <div class="list-center-bottom order4">
            <a href="">
                <span>我在万界猎杀怪兽</span>
                <p>热销火书</p>
                <p>玩吃鸡也能穿梭时空？ 还要猎杀巨龙史矛革，怪兽之王哥斯拉，无敌浩克绿巨人…… 这特么什么玩意啊！</p>
            </a>
        </div>
        <!--右侧主编推荐-->
        <div class="list-right">
            <div class="right-title">
                <i></i>
                <span>主编推荐</span>
            </div>
            <!--首位推荐-->
            <a class="right-first" href="">
                <img src="resources/images/right-list-1.jpg" alt="">
                <div>
                    <p>
                        <span class="type">[脑洞创意]</span>
                        <span class="name">重生成蛇之</span>
                    </p>
                    <span class="author">水城秀才</span>
                </div>
            </a>
            <!--2-8 推荐-->
            <a class="right-item" href="">
                <div>
                    <span class="type">[科幻末日]</span>
                    <span class="name">最强末日狂徒</span>
                </div>
                <span class="author">水木云雨</span>
            </a>
            <a class="right-item" href="">
                <div>
                    <span class="type">[科幻末日]</span>
                    <span class="name">最强末日狂徒</span>
                </div>
                <span class="author">水木云雨</span>
            </a>
            <a class="right-item" href="">
                <div>
                    <span class="type">[科幻末日]</span>
                    <span class="name">最强末日狂徒</span>
                </div>
                <span class="author">水木云雨</span>
            </a>
            <a class="right-item" href="">
                <div>
                    <span class="type">[科幻末日]</span>
                    <span class="name">最强末日狂徒</span>
                </div>
                <span class="author">水木云雨</span>
            </a>
            <a class="right-item" href="">
                <div>
                    <span class="type">[科幻末日]</span>
                    <span class="name">最强末日狂徒</span>
                </div>
                <span class="author">水木云雨</span>
            </a>
            <a class="right-item" href="">
                <div>
                    <span class="type">[科幻末日]</span>
                    <span class="name">最强末日狂徒</span>
                </div>
                <span class="author">水木云雨</span>
            </a>
            <a class="right-item" href="">
                <div>
                    <span class="type">[科幻末日]</span>
                    <span class="name">最强末日狂徒</span>
                </div>
                <span class="author">水木云雨</span>
            </a>
            <a class="right-item" href="">
                <div>
                    <span class="type">[科幻末日]</span>
                    <span class="name">最强末日狂徒</span>
                </div>
                <span class="author">水木云雨</span>
            </a>
            <a class="right-item" href="">
                <div>
                    <span class="type">[科幻末日]</span>
                    <span class="name">最强末日狂徒</span>
                </div>
                <span class="author">水木云雨</span>
            </a>
        </div>
    </div>
</div>

book_list.php-部分

<?php
/**
 * Created by PhpStorm.
 * File name:book_lists.php
 * Description:网站作品库页面--书籍列表
 * User: Air15_2019
 * Date: 2020/1/14
 * Time: 10:21
 */
// 使用include，引入配置文件config.php
include __DIR__.'/includes/config.php';
//频道首个项目
$channelName=$tc_channelType[0]['channelName'];
//说分类
$novelType=$tc_novelType[0]['name'];
//遍历对应频道的分类,储存在 $types[]的数组中
$channel_id=1;
foreach ($tc_novelType as $array_type){
    if($array_type['channelType_id']===$channel_id){
        $types[]=$array_type['name'];
    }
}
//作品状态
$novelStatus=$tc_novelStatus[0]['statusName'];
//作品上架状态
$chargeType=$tc_chargeType[0]['chargeTypeName'];
//作品字数分类
$numberTypeName=$tc_numberType[0]['numberTypeName'];
?>
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>塔读文学--作品库</title>
    <link rel="stylesheet" href="resources/css/book_list.css">
</head>
<body>
<div class="page-booklist">
    <!--页面公共组件-头部导航-->
    <?php include __DIR__.'/includes/public_header.inc.php';?>
    <!--作品库页面主要内容-->
    <div class="booklist-container">
        <!--类型筛选列表-->
        <div class="book-type">
            <!--频道-->
            <div class="item channel">
                <span>频道</span>
                <a class="first-a" href=""><?php echo $channelName;?></a>
                <?php for ($i = 1; $i < count($tc_channelType); $i++): ?>
                <?php $channelName = $tc_channelType[$i]['channelName'];?>
                <a href=""><?php echo $channelName?></a>
                <?php endfor;?>
            </div>
            <!--分类-->
            <div class="item type">
                <span>分类</span>
                <a class="first-a" href=""><?php echo $novelType; ?></a>
                <?php foreach ($types as $type) :?>
                    <a href=""><?php echo $type; ?></a>
                <?php endforeach; ?>
            </div>
            <!--状态-->
            <div class="item status">
                <span>状态</span>
                <a class="first-a" href=""><?php echo $novelStatus;?></a>
                <?php for ($i = 1; $i < count($tc_novelStatus); $i++): ?>
                <?php $novelStatus=$tc_novelStatus[$i]['statusName'];?>
                <a href=""><?php echo $novelStatus;?></a>
                <?php endfor;?>
            </div>
            <!--属性-是否收费-->
            <div class="item charge-type">
                <span>属性</span>
                <a class="first-a" href=""><?php echo $chargeType;?></a>
                <?php for ($i = 1; $i < count($tc_chargeType); $i++): ?>
                    <?php $chargeType=$tc_chargeType[$i]['chargeTypeName'];?>
                    <a href=""><?php echo $chargeType;?></a>
                <?php endfor;?>
            </div>
            <!--字数-->
            <div class="item number-words">
                <span>字数</span>
                <a class="first-a" href=""><?php echo $numberTypeName;?></a>
                <?php for ($i = 1; $i < count($tc_numberType); $i++): ?>
                    <?php $numberTypeName=$tc_numberType[$i]['numberTypeName'];?>
                    <a href=""><?php echo $numberTypeName;?></a>
                <?php endfor;?>
            </div>
        </div>
        <!--列表排序类型 tab行-->
        <div class="sorting-tab">
            <?php foreach ($tc_SortingType as $item):?>
            <?php $sortingName=$item['sortingName'];?>
            <a href=""><?php echo $sortingName;?></a>
            <?php endforeach;?>
        </div>

完整代码包下载

腾讯微云
链接：https://share.weiyun.com/5o2qoLe 密码：vfp6hb