展示
项目链接：https://download.csdn.net/download/weixin_45525272/14920287
音乐列表案例（上）
1. 数据存放
数据放在json中：相关json与php的基础介绍
https://yangyongli.blog.csdn.net/article/details/112911294
1.1. json数据样例
2. 功能实现
在服务端开发领域中所谓的渲染指的是经过程序执行得到最终的 HTML 字符串这个过程。
2.1. 列表数据展示（首页面展示类）
- 文件读取
$json = file_get_contents('data.json');
- JSON 反序列化
( json_decode 需要注意第二个参数 )
如果希望以关联数组的方式而非对象的方式操作数据，可以将 json_decode 的第二个参数设置为 true
// 这样转化出来是以关联数组方式存储 $data = json_decode($json, true);
- 数组遍历 foreach
<?php foreach ($data as $item): ?> <tr> <td class="align-middle"><?php echo $item['title']; ?></td> <td class="align-middle"><?php echo $item['artist']; ?></td> <td class="align-middle"> <?php foreach ($item['images'] as $src): ?> <img src="<?php echo $src; ?>" alt=""> <?php endforeach ?> </td> <td class="align-middle"><audio src="<?php echo $item['source']; ?>" controls></audio></td> <td class="align-middle"><a class="btn btn-danger btn-sm" href="delete.php?id=<?php echo $item['id']; ?>">删除</a></td> </tr> <?php endforeach ?>
3. 整体代码（list.php）
<?php // PHP 的价值： // 通过执行某些PHP代码获取到指定的数据，填充到HTML的指定位置 $json = file_get_contents('data.json'); $data = json_decode($json, true); if (!$data) { // JSON 格式不正确 exit('数据文件异常'); } ?> <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>音乐列表</title> <link rel="stylesheet" href="bootstrap.css"> </head> <body> <div class="container py-5"> <h1 class="display-4">音乐列表</h1> <hr> <div class="mb-3"> <a href="add.php" class="btn btn-secondary btn-sm">添加</a> </div> <table class="table table-bordered table-striped table-hover"> <thead class="thead-dark"> <tr> <th class="text-center">标题</th> <th class="text-center">歌手</th> <th class="text-center">海报</th> <th class="text-center">音乐</th> <th class="text-center">操作</th> </tr> </thead> <tbody class="text-center"> <?php foreach ($data as $item): ?> <tr> <td class="align-middle"><?php echo $item['title']; ?></td> <td class="align-middle"><?php echo $item['artist']; ?></td> <td class="align-middle"> <?php foreach ($item['images'] as $src): ?> <img src="<?php echo $src; ?>" alt=""> <?php endforeach ?> </td> <td class="align-middle"><audio src="<?php echo $item['source']; ?>" controls></audio></td> <td class="align-middle"><a class="btn btn-danger btn-sm" href="delete.php?id=<?php echo $item['id']; ?>">删除</a></td> </tr> <?php endforeach ?> </tbody> </table> </div> </body> </html>
