正文

掌握Vue3，轻松实现数据库交互实战指南

/0 浏览量
1121

引言

随着前端技术的发展，Vue.js已经成为最受欢迎的前端框架之一。Vue3作为Vue.js的下一代版本，带来了许多新的特性和改进。数据库交互是任何Web应用不可或缺的一部分，本文将详细介绍如何在Vue3中实现数据库交互，包括使用Axios进行HTTP请求、操作SQLite数据库以及与后端API通信等。

Vue3简介

Vue3是Vue.js的第三个主要版本，它带来了以下主要改进：

  • Composition API：提供了一种更灵活、更强大的方式来组织组件逻辑。
  • 性能提升：通过Tree Shaking和静态提升等优化，Vue3在性能上有了显著提升。
  • 新的内置组件和指令：如<script setup>、<Suspense>等。

使用Axios进行HTTP请求

Axios是一个基于Promise的HTTP客户端，可以用于在Vue3中与后端服务器进行通信。

安装Axios

npm install axios

创建Axios实例

import axios from 'axios';

const apiClient = axios.create({
  baseURL: 'https://api.yourdomain.com',
  timeout: 10000
});

发送GET请求

apiClient.get('/users')
  .then(response => {
    console.log(response.data);
  })
  .catch(error => {
    console.error(error);
  });

发送POST请求

apiClient.post('/users', {
  name: 'John Doe',
  email: 'john@example.com'
})
.then(response => {
  console.log(response.data);
})
.catch(error => {
  console.error(error);
});

操作SQLite数据库

Vue3可以通过使用SQLite的JavaScript API来操作本地的SQLite数据库。

安装SQLite

npm install sqlite3

连接SQLite数据库

const sqlite3 = require('sqlite3').verbose();
const db = new sqlite3.Database(':memory:');

db.serialize(() => {
  db.run(`CREATE TABLE users (id INTEGER PRIMARY KEY, name TEXT, email TEXT)`);
});

插入数据

db.run(`INSERT INTO users (name, email) VALUES (?, ?)`, ['John Doe', 'john@example.com'], function(err) {
  if (err) {
    return console.error(err.message);
  }
  console.log(`A row has been inserted with rowid ${this.lastID}`);
});

查询数据

db.all(`SELECT rowid, name, email FROM users`, [], (err, rows) => {
  if (err) {
    throw err;
  }
  rows.forEach((row) => {
    console.log(`${row.rowid}: ${row.name}, ${row.email}`);
  });
});

关闭数据库连接

db.close((err) => {
  if (err) {
    return console.error(err.message);
  }
  console.log('Close the database connection.');
});

与后端API通信

在实际应用中，通常需要与后端API进行通信。以下是一个使用Vue3和Axios与Node.js后端API通信的示例。

后端API示例（Node.js）

const express = require('express');
const app = express();
const port = 3000;

app.use(express.json());

app.get('/users', (req, res) => {
  res.json([{ id: 1, name: 'John Doe', email: 'john@example.com' }]);
});

app.post('/users', (req, res) => {
  const user = req.body;
  res.status(201).json(user);
});

app.listen(port, () => {
  console.log(`Server listening at http://localhost:${port}`);
});

前端Vue3组件

<template>
  <div>
    <h1>User List</h1>
    <ul>
      <li v-for="user in users" :key="user.id">
        {{ user.name }} - {{ user.email }}
      </li>
    </ul>
    <h2>Add User</h2>
    <form @submit.prevent="addUser">
      <input v-model="newUser.name" placeholder="Name" required>
      <input v-model="newUser.email" placeholder="Email" required>
      <button type="submit">Add User</button>
    </form>
  </div>
</template>

<script>
import axios from 'axios';

export default {
  data() {
    return {
      users: [],
      newUser: {}
    };
  },
  created() {
    this.fetchUsers();
  },
  methods: {
    fetchUsers() {
      axios.get('/users')
        .then(response => {
          this.users = response.data;
        })
        .catch(error => {
          console.error(error);
        });
    },
    addUser() {
      axios.post('/users', this.newUser)
        .then(response => {
          this.users.push(response.data);
          this.newUser = {};
        })
        .catch(error => {
          console.error(error);
        });
    }
  }
};
</script>

总结

通过本文的介绍，您应该已经掌握了在Vue3中实现数据库交互的基本方法。无论是使用Axios进行HTTP请求，还是操作SQLite数据库，或者与后端API通信，Vue3都提供了丰富的工具和API来帮助您构建强大的Web应用。希望本文能对您的开发工作有所帮助。

-- 展开阅读全文 --