引入vue的HTML页面如何访问数据库?
时间: 2023-06-27 16:07:30 浏览: 57
在Vue中,前端是通过Ajax请求与后端进行数据交互的。一般情况下,Vue前端通过发送Ajax请求给后端服务器,后端服务器再去访问数据库,并将查询结果返回给前端。以下是一个简单的示例:
1. 安装axios库
```
npm install axios --save
```
2. 在Vue组件中使用axios发送Ajax请求
```
<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() {
axios.get('/api/items')
.then(response => {
this.items = response.data;
})
.catch(error => {
console.log(error);
});
}
}
</script>
```
3. 在后端服务器中实现数据访问逻辑
比如,在Node.js中,可以使用Express框架编写后端API接口,连接数据库,并返回查询结果。
```
const express = require('express');
const mysql = require('mysql');
const app = express();
const connection = mysql.createConnection({
host: 'localhost',
user: 'root',
password: 'password',
database: 'mydb'
});
app.get('/api/items', (req, res) => {
const sql = 'SELECT * FROM items';
connection.query(sql, (err, results, fields) => {
if (err) {
console.log(err);
res.status(500).send('Internal Server Error');
} else {
res.json(results);
}
});
});
app.listen(3000, () => {
console.log('Server is running on port 3000');
});
```
以上示例仅供参考,具体实现需要根据具体情况进行调整。