vue直接调用数据库信息并显示在前端

在Vue中直接调用数据库信息并显示在前端，一般需要通过后端接口来实现。以下是一个基本的示例流程：

1. 在后端，你可以使用Node.js和Express框架来创建一个API接口。在这个接口中，你可以连接数据库，并编写查询语句来获取所需的数据。

2. 在后端接口中，通过使用数据库的适配器（如MySQL，MongoDB等）来连接数据库。编写查询语句，获取需要的数据。

3. 在后端接口中，将获取的数据作为响应返回给前端。可以使用JSON格式返回数据。

4. 在Vue的前端代码中，可以使用Axios等HTTP库来发送请求到后端接口，获取数据。

5. 在Vue组件中，通过调用后端接口并获取数据，将数据赋值给Vue的数据属性。

6. 在Vue模板中，使用数据绑定语法将数据显示在前端页面上。

以下是一个简单的示例代码：

// 后端代码

// 安装依赖
npm install express mysql

// app.js
const express = require('express');
const mysql = require('mysql');
const app = express();

// 创建数据库连接
const connection = mysql.createConnection({
host: 'localhost',
user: 'root',
password: 'password',
database: 'test'
});

// 连接数据库
connection.connect();

// 创建API接口
app.get('/api/data', (req, res) => {
// 查询数据库
connection.query('SELECT * FROM data', (error, results) => {
if (error) throw error;
res.json(results);
});
});

// 监听端口
app.listen(3000, () => {
console.log('Server is running on port 3000');
});

// 前端代码

<template>
<div>
<ul>
<li v-for="item in items" :key="item.id">{{ item.name }}</li>
</ul>
</div>
</template>

<script>
import axios from 'axios';

export default {
data() {
return {
items: []
};
},
mounted() {
this.fetchData();
},
methods: {
fetchData() {
axios.get('/api/data')
.then(response => {
this.items = response.data;
})
.catch(error => {
console.log(error);
});
}
}
};
</script>

在上述示例中，后端接口使用了Express框架和MySQL数据库。前端代码使用了Vue和Axios库。在mounted生命周期钩子函数中，调用fetchData方法来获取数据，然后将数据赋值给Vue的items属性。在模板中使用v-for指令循环渲染数据。请根据你的具体情况进行修改和适配。