数据库有两个表,product表有商品id的pid、商品名称的pname,category有商品类别id的cid、商品类别名称的cname。把数据库中数据展示在前端页面
时间: 2024-03-13 08:47:45 浏览: 39
要将数据库中的数据展示在前端页面,需要通过后端将数据查询出来,然后传递给前端页面。以下是一种实现方式:
1. 后端代码
首先,需要编写后端代码来查询数据库中的数据。可以使用 SQL 语句连接两个表,查询出商品名称和对应的类别名称。例如:
```sql
SELECT p.pname, c.cname FROM product p JOIN category c ON p.cid = c.cid;
```
然后,可以使用后端框架(如 Flask、Django 等)将查询结果转换为 JSON 格式,并返回给前端页面。以下是 Flask 框架的示例代码:
```python
from flask import Flask, jsonify
import pymysql
app = Flask(__name__)
@app.route('/products')
def get_products():
# 连接数据库
conn = pymysql.connect(host='localhost', user='root', password='password', db='mydb')
# 执行 SQL 查询
cursor = conn.cursor()
sql = "SELECT p.pname, c.cname FROM product p JOIN category c ON p.cid = c.cid;"
cursor.execute(sql)
# 获取查询结果
result = cursor.fetchall()
# 转换为 JSON 格式
products = []
for row in result:
product = {'name': row[0], 'category': row[1]}
products.append(product)
# 返回 JSON 数据
return jsonify(products)
if __name__ == '__main__':
app.run()
```
2. 前端代码
在前端页面中,可以使用 AJAX 技术向后端发送请求,获取数据并展示在页面上。以下是一个简单的 HTML 页面,使用 jQuery 发送 AJAX 请求并展示查询结果:
```html
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>Product List</title>
<script src="https://cdn.bootcdn.net/ajax/libs/jquery/3.5.1/jquery.min.js"></script>
</head>
<body>
<h1>Product List</h1>
<table id="product-table">
<thead>
<tr>
<th>Product Name</th>
<th>Category</th>
</tr>
</thead>
<tbody>
</tbody>
</table>
<script>
$.ajax({
url: '/products',
method: 'GET',
success: function(result) {
for (var i = 0; i < result.length; i++) {
var product = result[i];
var row = $('<tr>');
row.append($('<td>').text(product.name));
row.append($('<td>').text(product.category));
$('#product-table tbody').append(row);
}
}
});
</script>
</body>
</html>
```
以上代码可以将所有商品名称和对应的类别名称展示在一个表格中。你也可以根据需求修改代码,实现不同的展示方式。
相关推荐
![pdf](https://img-home.csdnimg.cn/images/20210720083512.png)
![rar](https://img-home.csdnimg.cn/images/20210720083606.png)
![pdf](https://img-home.csdnimg.cn/images/20210720083512.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)