mysql,需要前端布局
时间: 2024-03-20 21:40:01 浏览: 15
好的,那我们先来写后端的代码,使用 PHP 语言获取 MySQL 数据库中的内容:
```php
<?php
//连接数据库
$servername = "localhost";
$username = "username";
$password = "password";
$dbname = "database_name";
$conn = mysqli_connect($servername, $username, $password, $dbname);
if (!$conn) {
die("连接失败: " . mysqli_connect_error());
}
//查询数据库中的内容
$sql = "SELECT * FROM table_name";
$result = mysqli_query($conn, $sql);
//将查询结果存储到一个数组中
$data = array();
if (mysqli_num_rows($result) > 0) {
while($row = mysqli_fetch_assoc($result)) {
$data[] = $row;
}
}
//关闭数据库连接
mysqli_close($conn);
?>
```
接下来,我们可以将查询结果 `$data` 传递给前端页面,使用 HTML + CSS + JavaScript 实现页面布局和内容展示:
```html
<!DOCTYPE html>
<html>
<head>
<title>数据库内容展示</title>
<style>
.card {
padding: 20px;
margin: 20px;
background-color: #f5f5f5;
border-radius: 5px;
box-shadow: 0px 0px 5px #aaaaaa;
display: inline-block;
width: 30%;
vertical-align: top;
text-align: left;
}
.title {
font-size: 20px;
font-weight: bold;
margin-bottom: 10px;
}
.content {
font-size: 16px;
margin-bottom: 10px;
}
</style>
</head>
<body>
<div id="container"></div>
<script>
//将后端传递的数据渲染到页面中
var data = <?php echo json_encode($data); ?>;
var container = document.getElementById("container");
for (var i = 0; i < data.length; i++) {
var card = document.createElement("div");
card.className = "card";
var title = document.createElement("div");
title.className = "title";
title.innerHTML = data[i].title;
var content = document.createElement("div");
content.className = "content";
content.innerHTML = data[i].content;
card.appendChild(title);
card.appendChild(content);
container.appendChild(card);
}
</script>
</body>
</html>
```
以上代码将数据库中的每一条记录展示为一个卡片,包含标题和内容两个部分。您可以根据实际情况修改样式和布局。