Create table - Akmot9/tauri_crud GitHub Wiki

Creating a Table with Tauri, Vue.js, and Rusqlite

Step 1: Project Structure

In your project structure, you should have the following files and directories:

src/App.vue

<template>
  <!-- ... -->
</template>

<script setup>
// ... Import statements
</script>

<style scoped>
</style>

src/components/CreateTable.vue

<template>
  <!-- ... -->
</template>

<script>
// ... Vue component script
</script>

src-tauri/src/main.rs

// ... Rust code

Step 2: Create the Create Table Component

In src/App.vue, import and use the CreateTable component:

<template>
  <div class="container">
    <header>
      <h1>Tauri CRUD Example</h1>
      <p>A simple CRUD application using Tauri and Rust's Rusqlite</p>
    </header>
    <main>
      <section>
        <h2>Create Table Component</h2>
        <CreateTable />
      </section>
    </main>
  </div>
</template>

<script setup>
import CreateTable from "./components/CreateTable.vue";
</script>

<style scoped>
</style>

Step 3: Implement the Create Table Component

In src/components/CreateTable.vue, create a button to create the table:

<template>
  <div>
    <h1>Create Table</h1>
    <button @click="createTable">Create Table</button>
  </div>
</template>

<script>
import { invoke } from '@tauri-apps/api/tauri';

export default {
  methods: {
    async createTable() {
      try {
        const response = await invoke('create_table');
        console.log('Table created:', response);
      } catch (error) {
        console.error('Error creating table:', error);
      }
    },
  },
};
</script>

Step 4: Implement the Rust Function

In Cargo.toml, add the Rusqlite dependency:

[dependencies]
rusqlite = "0.29.0"

In src-tauri/src/main.rs, implement the Rust function to create the table:

use rusqlite::{Connection, params};
use serde::{Deserialize, Serialize};
use tauri::Result;

#[derive(Debug, Serialize, Deserialize, PartialEq, Clone)]
struct PacketInfo {
    mac_source: String,
    mac_destination: String,
    ethertype: String,
    ip_source: String,
    ip_destination: String,
    protocol: String,
    port_source: String,
    port_destination: String,
    count: u32,
}

#[tauri::command]
fn create_table() -> Result<()> {
    // Open a connection to the SQLite database
    let conn = Connection::open("my_database.db").unwrap();

    // Create a table to store data
    conn.execute(
        "CREATE TABLE IF NOT EXISTS packet_info (
            id INTEGER PRIMARY KEY,
            mac_source TEXT,
            mac_destination TEXT,
            ethertype TEXT,
            ip_source TEXT,
            ip_destination TEXT,
            protocol TEXT,
            port_source TEXT,
            port_destination TEXT,
            count INTEGER
        )",
        [],
    ).unwrap();
    println!("Table created.");
    Ok(())
}

fn main() {
    tauri::Builder::default()
        .invoke_handler(tauri::generate_handler![create_table])
        .run(tauri::generate_context!())
        .expect("Error while running Tauri application");
}

Conclusion

In this tutorial, you have learned how to create a table using Tauri, Vue.js, and Rusqlite. You can now initiate the table creation by clicking the "Create Table" button in your application.

Feel free to customize and extend this example to build more complex CRUD functionality with Tauri.

⚠️ **GitHub.com Fallback** ⚠️