![[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
改写7.23用数据库管理网站内容
文件结构
首页效果
栏目列表
歌曲详情 http://localhost/0725/demo/details.php?mus_id=2
程序在本地一切正常上传服务器后 出现乱码~ 经过排查是数据库读取出来的显示了中文乱码
解决办法 给pdo增加第四个参数 array(PDO::MYSQL_ATTR_INIT_COMMAND => "set names utf8")
database.php
<?php //将配置信息 封装成数组 return[ 'type'=>'mysql', 'host'=>'127.0.0.1', 'dbname'=>'music', 'username'=>'root', 'password'=>'root', ]; ?>
connect.php
<?php
$db=require 'database.php';
$dns="{$db['type']}:host={$db['host']};dbname={$db['dbname']}";
$username=$db['username'];
$password=$db['password'];
$opt = array(PDO::MYSQL_ATTR_INIT_COMMAND => "set names utf8");
try{
$pdo=new PDO($dns,$username,$password,$opt);
// var_dump($pdo); //可以打印pdo对象 有对象就说明成功了
}catch(PDOException $e){
die('连接失败'.$e->getMessage());
}header.php
<?php //连接数据库 require __DIR__.'/connect.php'; //网站配置信息 $sql='SELECT * FROM `webconfig` '; $stmt=$pdo->prepare($sql); $stmt->execute(); //fetch 拿到的是一维数组 并且值拿到一条数据 fetchAll拿到的是二维数组 $webConfig=$stmt->fetch(PDO::FETCH_ASSOC); //导航栏目信息 $sql='SELECT `classify`,`nameEn`,`nameCn` FROM `menu` '; $stmt=$pdo->prepare($sql); $stmt->execute(); $menu=$stmt->fetchAll(PDO::FETCH_ASSOC); //歌曲歌曲列表信息 $sql='SELECT `mus_id`,`name`,`images`,`lyric`,`mus_url`,`classify`,`mus_play` FROM `musics` '; $stmt=$pdo->prepare($sql); $stmt->execute(); $musics=$stmt->fetchAll(PDO::FETCH_ASSOC); ?> <!DOCTYPE html> <html lang="zh"> <head> <meta charset="UTF-8" /> <meta name="viewport" content="width=device-width, initial-scale=1.0" /> <meta http-equiv="X-UA-Compatible" content="ie=edge" /> <meta name="Keywords" content="<?php echo $webConfig['key'] ;?>"/> <meta name="Description" content="<?php echo $webConfig['desc'] ;?>"/> <title><?php echo $webConfig['webname'] ;?>-<?php echo $webConfig['title'] ;?></title> <link rel="stylesheet" type="text/css" href="./static/css/style.css"/> </head> <body> <div class="header"> <ul> <span>大灰狼的音乐馆</span> <li><a href="index.php">首页</a></li> <?php foreach($menu as $key=>$value): ?> <li><a href="list.php?classify=<?=$value['classify'];?>"><?=$value['nameCn'];?></a></li> <?php endforeach ?> </ul> </div> <!--网站通用顶部结束--> <div class="main">
点击 "运行实例" 按钮查看在线实例
index.php
<?php
include __DIR__.'/inc/header.php';
foreach ($menu as $key => $value) {
echo "<h2>{$value['nameCn']}</h2>";
echo "<ol>";
foreach ($musics as $keym => $valuem) {
if ($value['classify']===$valuem['classify']) {
echo "<li><a href='details.php?mus_id={$valuem['mus_id']}'>{$valuem['name']}</a></li>";
}
}
echo "</ol>";
}
include __DIR__.'/inc/footer.php';点击 "运行实例" 按钮查看在线实例
list.php
<?php
include __DIR__ . '/inc/header.php';
//取当前栏目id 并将其转为整数
$classId = intval($_GET['classify']);
foreach ($menu as $key => $value) {
if (intval($value['classify']) === $classId) {
echo "<h2>{$value['nameCn']}</h2>";
echo "<ol>";
foreach ($musics as $keym => $valuem) {
if ($value['classify'] === $valuem['classify']) {
echo "<li><a href='details.php?mus_id={$valuem['mus_id']}'>{$valuem['name']}</a></li>";
}
}
echo "</ol>";
}
}
include __DIR__ . '/inc/footer.php';点击 "运行实例" 按钮查看在线实例
details.php
<?php
include __DIR__ . '/inc/header.php';
//取当前详情id 并将其转为整数
$musicId = intval($_GET['mus_id']);
foreach ($musics as $key => $value) {
if(intval($value['mus_id'])===$musicId){
echo "<h3>{$value['name']}</h3>";
echo '<img src="./static/images/'.$value['images']. '" >';
echo "<div>{$value['mus_play']}</div>";
echo "<p>{$value['lyric']}</p>";
echo "<br/>";
echo "<span>{$value['name']}歌曲下载网址:{$value['mus_url']}{$value['mus_id']}</span>";
};
};
include __DIR__ . '/inc/footer.php';点击 "运行实例" 按钮查看在线实例
也可访问实际线上预览
http://www.xdidc点com/test0725/demo/index.php