![[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
一、公共模板部分
css 样式
a{text-decoration: none; color: #0C0C0C;}
li{list-style: none;}
.header{background-color: #1E9FFF; height: 35px;}
.nav li{width: 100px; line-height: 35px; float: left;}
.nav li a{color: #fff;}
.footer{background-color: #8D8D8D; height: 50px; line-height: 50px; text-align: center; color: #fff;}1、公共头部 header.php
<?php // 网站系统设置 $system = [ 'sys_id' =>1, 'title' =>'XXXX***', 'desc' =>'XXXX***是一家集医疗、预防、***、康复于一体的专科***，开设有产科、妇科、不孕不育、整形美容、中医康复五个专业，是市医疗保险、生育保险定点***，', 'key' =>'省市医保定点***，乔福元，李家福', 'copy' =>'MOLANG' ]; // 栏目导航 $cates = [ ['cate_id'=>1,'name'=>'xw','alias'=>'***新闻'], ['cate_id'=>2,'name'=>'zj','alias'=>'专家大咖'], ['cate_id'=>3,'name'=>'ks','alias'=>'诊疗科室'], ['cate_id'=>4,'name'=>'lx','alias'=>'联系我们'], ]; // 栏目详情 $detailsList = [ [ 'list_id' =>1, 'title'=>'7月27日李家福坐诊一对一解答', 'img'=>'727.jpg', 'detail'=>'今天，“中南产科一把刀”李家福教授，为孕妈妈们带来《促进母乳喂养》主题课程，为孕妈妈们详细讲解母乳喂养的细节和注意事项，帮孕妈妈们了解母乳喂养知识。', 'cate_id'=>1 ], [ 'list_id'=>2, 'title'=>'省内权威乳腺专家何庭玉周三坐诊', 'img'=>'724.jpg', 'detail'=>'然而许多人认为只要不疼不痒不影响生活就没事，从而使得病情迁延不愈，进而发展恶化，增加了***变的风险。有资料证明，患乳腺类疾病的女性致***的可能性要比正常人高出20倍。为了减轻乳腺疾病给女性患者带来的伤害，武汉民馨妇科***现特聘请省内知名乳腺权威专家——何庭玉主任每周四上午来院坐诊。', 'cate_id'=>1 ], [ 'list_id'=>3, 'title'=>'揭秘这家***三伏贴为什么这么火', 'img'=>'712.jpg', 'detail'=>'距离三伏天已过去三天，民馨***的三伏贴敷贴现场依旧火爆。虽天公不作美，前两天还飘着小雨，但每天早上七点不到，***就已经聚集了不少前来进行三伏贴敷贴的市民！', 'cate_id'=>1 ], [ 'list_id' =>4, 'title'=>'李家福', 'img'=>'ljf.png', 'detail'=>'副教授、中南***产科主任、 电影《生门》主演。 中囯妇幼***协会理事、中国优生优育协会理事、湖北省妇幼***分会副主委、湖北省围产医学会副主委、湖北省产前诊断专委会副主委、武汉市妇产科学会副主委、湖北省..', 'cate_id'=>2 ], [ 'list_id'=>5, 'title'=>'何庭玉', 'img'=>'hty.png', 'detail'=>'毕业于湖北医科大学临床医疗，从事乳腺疾病的诊断、手术40余年，曾任湖北省中南***肿瘤科、头颈乳腺科主任、积累了丰富的临床经验，总结了一套乳腺常见病、多发病及乳腺***的治疗方法，在武汉三镇乳腺病患者心目中..', 'cate_id'=>2 ], [ 'list_id'=>6, 'title'=>'乔福元', 'img'=>'qfy.png', 'detail'=>'武汉同济***围产医学科主任、学科带头人， 中华医学会武汉市分会妇产科学会主任委员、 中国优生优育协会理事、 湖北省优生优育协会副会长、 湖北省预防医学会副主任委员。 1975年毕业于同济医科大学医疗系..', 'cate_id'=>2 ], [ 'list_id'=>7, 'title'=>'产科', 'img'=>'ck.jpg', 'detail'=>'产科除开展常规的围产医学范畴内的医疗及***工作外，还开展了产前筛查技术、出生缺陷监测、优生遗传咨询、导乐、镇痛***、各种高危***的筛选、诊断、治疗及预防等，可为孕产妇提供优质的就医环境和医疗服务。', 'cate_id'=>3 ], [ 'list_id'=>8, 'title'=>'儿科', 'img'=>'ek.jpg', 'detail'=>'民馨的儿科团队由 原任职华润武钢总***新生儿科陈医生及专科护士组成，为新生儿及婴幼儿提供免疫接种、健康***、健康体检、常见病及多发病的诊断、治疗、预防等服务。为母婴创造一个整洁、温暖、舒适的诊疗环境。', 'cate_id'=>3 ], [ 'list_id'=>9, 'title'=>'内科', 'img'=>'nk.jpg', 'detail'=>'内科有心血管、消化、神经、内分泌等疾病诊断，健康咨询，健康体检，内部会诊等。项目齐全、设备完善。为病人提供更多、更快捷、更准确的诊断数据。', 'cate_id'=>3 ], [ 'list_id'=>10, 'title'=>'客服***', 'img'=>'lx.png', 'detail'=>'为你解答任何购票、报名，或发布、举办、推广活动的问题。', 'cate_id'=>4 ], ]; ?> <!doctype html> <html lang="en"> <head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, user-scalable=no, initial-scale=1.0, maximum-scale=1.0, minimum-scale=1.0"> <meta http-equiv="X-UA-Compatible" content="ie=edge"> <title><?php echo $system['title'] ?></title> <meta name="keywords" content="<?php echo $system['key'] ?>"> <meta name="description" content="<?php echo $system['desc'] ?>"> <link rel="stylesheet" href="./static/css/style.css"> </head> <body> <div class="header"> <ul class="nav"> <li><a href="index.php">首页</a></li> <li><a href="">***介绍</a></li> <?php foreach ($cates as $cate): ?> <li><a href="list.php?cate_id=<?php echo $cate['cate_id'] ?>"><?php echo $cate['alias'] ?></a></li> <?php endforeach; ?> </ul> </div>
2、公共底部 footer.php
<p class="footer"><?php echo $system['copy'] ?> @ 版权所有</p> </body> </html>
二、首页 index.php
<?php
// 加载公共头部
include __DIR__. "/inc/header.php";
?>
<h2>***介绍</h2>
<p>本院坚持“专家技术型”发展战略，组建了一支由医学博士、硕士等精英组成的，具有专业水准的医疗技术团队，其中医务人员
一百余名，高级职称三十余名，中级职称五十余名。全院各科室学科带头人由临床经验丰富的权威医学专家担任，
他们来自于同济、协和、省人民、省妇幼、中南、陆总、武警等***。</p>
<?php
// 使用双重循环来遍历两个数组
// 外层遍历栏目数组$cates，内层根据栏目id来查询对应的栏目详情 $detailsList 信息
foreach ($cates as $cate){
echo "<h2>{$cate['alias']}</h2>";
echo '<ol>';
// 遍历栏目详情数组
foreach ($detailsList as $list){
// 判断当前栏目详情所属栏目是否与当前栏目id相同
if($list['cate_id'] === $cate['cate_id']){
echo "<li><a href='detail.php?list_id=". $list['list_id'] ."'>{$list['title']}</a></li>";
}
}
echo '</ol>';
}
?>
<?php
// 加载公共底部
include __DIR__ . '/inc/footer.php';
?>首页效果图
三、列表页 list.php
<?php
include __DIR__ . '/inc/header.php';
// 将当前栏目id，使用GET方式通过URL地址传递到列表模板list.php
$cate_id = $_GET['cate_id'];
// 注意：rul中的内容都是字符串，整数字符串先做类型转换才可以
$cate_id = intval($cate_id); // 函数转换
// 只显示一个栏目，不需要做循环，只需要做一个判断即可
foreach ($cates as $cate){
// 在index.php基础上加一层判断，确定是否是当前栏目即可
// 如果上面的GET参数没有做类型转换，那么就不能用===恒等
// ==：只比较值是否相等，===：值与类型都必须完全相同
if($cate['cate_id'] === $cate_id){
echo "<h2>{$cate['alias']}</h2>";
echo "<ol>";
foreach ($detailsList as $list){
if($cate['cate_id'] == $list['cate_id']){
echo "<li><a href='detail.php?list_id=".$list['list_id']."'>{$list['title']}</li></li>";
}
}
echo '</ol>';
break; // 结束循环
}
}
include __DIR__ . '/inc/footer.php';列表页效果图
四、详情页 detail.php
<?php
include __DIR__ . '/inc/header.php';
$list_id = intval($_GET['list_id']);
foreach ($detailsList as $list){
if($list_id === $list['list_id']){
echo "<h3>{$list['title']}</h3>";
echo "<img src='./static/images/".$list['img']."' alt='' width=400px' >";
echo "<p style='text-indent: 2em;'>{$list['detail']}</p>";
}
}
include __DIR__ . '/INC/footer.php';详情页效果图
