![[Web front-end] Node.js quick start](https://img.php.cn/upload/course/000/000/067/662b5d34ba7c0227.png)
天蓬老师Correction status：qualified
Teacher's comments：看到了, 完成的相当不错, 看上去已经是一个可以上线的小项目了.... 完成这个小作业, 是不是对于动态网站的原理, 又有了新的认知
Collection
Collection
看到这次作业时，感觉老师安排的作业量很大，本来想凑合一下的，可是自己想了一下，还是选择慢一点，至少做到自己满意才好。毕竟，学来的东西都是自己的，同时我也想好好写一下，看看自己到底掌握的怎么样，所以这次作业交的有点慢啦！
首先，在这次作业中，感觉自己对一些讲过的内置函数以及一些数组的记忆，还是不过深刻，有时间还是要抓紧时间再练习一下。
其次，因为页面中涉及的数据量比较大，所以主要对导航、作品库、首页的《我有一座巨龙城》进行了数据动态，还有一些实现效果需要js,所以只能先放着了。
整体感觉动态网站，还是很意思，也是很必要的（因为数据量大了，维护那真的是个很费劲的事情嘞）。其次，也发现对于动态网站来说，HTML这个显示骨架结构的合理性和逻辑性也显得尤为重要。
由于代码量比较大，所以只展示项目结构和动态数据部分，博文最后有完整的代码包，有需要的小伙伴！可以自己下载哦！
要是时间允许，伴随课程推进，我会不断完善这个案例，这次就算是Ver.1.00吧！
首先，我分析了一下站点的布局和显示模块，感觉公用的东西还是蛮多的；
然后，在将网站的数据根据需要，进行分表建库，这里就先用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.phpinclude '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.phpinclude __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
天蓬老师