怎么将数据库里的照片地址和信息渲染到前端,请帮我用vue和boostrap写一个接口和前端页面的样式和网络请求,请不要使用
时间: 2024-02-13 14:03:05 浏览: 20
好的,我可以帮你用Vue和Bootstrap编写一个前端页面,并且提供一个示例接口。首先,你需要在Vue项目中安装axios和Bootstrap:
```
npm install axios bootstrap
```
接下来,你可以创建一个PhotoList组件,代码如下:
```html
<template>
<div>
<h1>Photo List</h1>
<div class="row">
<div v-for="photo in photos" class="col-md-4 mb-4">
<div class="card">
<img :src="photo.url" class="card-img-top" :alt="photo.description">
<div class="card-body">
<h5 class="card-title">{{ photo.title }}</h5>
<p class="card-text">{{ photo.description }}</p>
</div>
</div>
</div>
</div>
</div>
</template>
<script>
import axios from 'axios';
export default {
data() {
return {
photos: [],
};
},
async created() {
try {
const response = await axios.get('/photos');
this.photos = response.data;
} catch(err) {
console.error(err);
}
},
};
</script>
<style>
.card {
border: none;
box-shadow: 0px 2px 5px #ccc;
}
.card-img-top {
height: 200px;
object-fit: cover;
}
</style>
```
上述代码中,我们使用了Bootstrap的网格系统和卡片组件来展示照片信息。
接下来,你需要编写一个Express接口,从数据库中获取照片地址和信息,返回给前端。代码如下:
```javascript
const express = require('express');
const app = express();
// 假设你的照片信息存储在数据库中,可以使用MongoDB
const mongoose = require('mongoose');
const Photo = require('./models/photo');
mongoose.connect('mongodb://localhost/photo_app', { useNewUrlParser: true, useUnifiedTopology: true });
app.get('/photos', async (req, res) => {
try {
const photos = await Photo.find();
res.json(photos);
} catch(err) {
console.error(err);
res.status(500).json({ message: 'Internal server error' });
}
});
app.listen(3000, () => {
console.log('Server started on port 3000');
});
```
最后,你需要在Vue的main.js文件中添加如下代码:
```javascript
import axios from 'axios';
axios.defaults.baseURL = 'http://localhost:3000';
```
这样就可以在Vue中使用axios发起HTTP请求了。
这些代码应该能够满足你的需求,如果还有什么问题,请随时提问。