当前位置：首页 > VUE

vue实现sql操作

2026-03-26 20:47:23VUE

Vue 实现 SQL 操作的方法

Vue.js 本身是一个前端框架，不直接支持 SQL 数据库操作。但可以通过以下方式间接实现 SQL 操作：

使用后端 API 连接数据库

Vue 前端通过 HTTP 请求与后端 API 交互，后端处理 SQL 操作并返回结果。

// Vue 组件中调用 API
methods: {
  fetchData() {
    axios.get('/api/data')
      .then(response => {
        this.data = response.data;
      })
      .catch(error => {
        console.error(error);
      });
  }
}

使用浏览器本地数据库

对于不需要后端的小型应用，可以使用浏览器内置的 Web SQL 或 IndexedDB。

// 使用 Web SQL (已废弃但不妨碍使用)
created() {
  const db = openDatabase('mydb', '1.0', 'Test DB', 2 * 1024 * 1024);
  db.transaction(function (tx) {
    tx.executeSql('CREATE TABLE IF NOT EXISTS LOGS (id unique, log)');
    tx.executeSql('INSERT INTO LOGS (id, log) VALUES (1, "test")');
  });
}

使用 SQL.js 库

SQL.js 是在浏览器中运行的 SQLite 实现，完全在客户端执行。

// 安装 sql.js 后使用
import initSqlJs from 'sql.js';

async function initDatabase() {
  const SQL = await initSqlJs();
  const db = new SQL.Database();
  db.run("CREATE TABLE test (col1, col2);");
  db.run("INSERT INTO test VALUES (1, 2);");
  const res = db.exec("SELECT * FROM test");
  console.log(res);
}

使用 ORM 库

对于复杂应用，可以考虑使用 TypeORM 等支持浏览器环境的 ORM 库。

vue实现sql操作

import { createConnection } from 'typeorm/browser';

createConnection({
  type: 'websql',
  database: 'test',
  entities: [/* 实体类 */],
  synchronize: true
}).then(connection => {
  // 操作数据库
});