Effect display:

Implementation principle:

  • Electron is based on a native node and can connect to a local database
  • Electron allows the main process to communicate with the renderer process via the IPC communication mechanism
  • Data is transmitted through a communication mechanism and printed on the page console

Implementation steps

  1. Generate the basic project by scaffolding the basic VUE framework code
$ yarn create vite <project-name> --template vue
$ cd <project-name>
$ yarn
$ yarn dev
Copy the code

Specific installation tutorial, please visit the vue website: v3.cn.vuejs.org/guide/insta…

  1. Enter project engineering to install the electron and mysql tools
$yarn add electron $yarn add mysql // If ts is used, $yarn add -d @types/mysql is recommendedCopy the code

  1. Create a directory electron and an entry index.js file in the root directory

  2. Create a utils directory under electron and write a utility class sql.js as the connection tool for mysql

const mysql = require('mysql'); Const pool = mysql.createpool ({host: 'domain name or IP', port:' port ', user: 'account ', password:' password ', database: 'database name'}); Var query=function(SQL,callback){pool.getConnection(function(err,conn){if(err){callback(err,null,null); }else{conn.query(SQL,function(qerr,vals,fields){// conn.release(); pool.releaseConnection(conn); // Event-driven callback(qerr,vals,fields); }); }}); }; Module. exports = {pool, query}Copy the code
  1. Write the entry index.js file
// The electron base introduces const {app, Function createWindow () {const win = new BrowserWindow({const win = new BrowserWindow({ Width: 800, height: 600, webPreferences:{// In vue, to introduce the content in electron, use the two nodeIntegration:true, contextIsolation: False}}) / / open the debug tool to win in the electron page webContents. OpenDevTools () / / connect to win Vue page. The loadURL (" http://localhost:3000 ")} / / Initialize the form app.whenReady().then(() => {createWindow()})Copy the code

Specific can consult the official documentation of electron www.electronjs.org/docs/tutori…

  1. Package. json adds an executable script
"Scripts ": {"dev": "vite", "build": "vite build", "serve": "Vite preview", "electron": "electron."Copy the code
  1. Start two terminals and run two commands respectively
$YARN dev // One terminal starts this (this one starts first) $YARN electron // Another terminal starts thisCopy the code

You can see thisThat is, the basic environment is configured successfully

  1. Implement the business part
// index.js // add ipcMain const {app, BrowserWindow,ipcMain} = require('electron') const conn = require('./electron/utils/ SQL '); function createWindow () { const win = new BrowserWindow({ width: 800, height: 600, webPreferences:{// nodeIntegration:true, contextIsolation: {// nodeIntegration:true, contextIsolation: false } }) win.webContents.openDevTools() win.loadURL("http://localhost:3000") } app.whenReady().then(() => { CreateWindow ()}) // Add a process listener, Ipcmain. on('send',(event, Arg) => {console.log('connect mysql SQL :',arg) // prints "SQL" // receive args where args is an SQL statement Conn. query(arg,(qerr, fields)=>{conn.query((qerr,vals,fields)=>{ Pass vals back to event.sender. Send ('reply', vals); })}); // HelloWorld.vue <template> <h1>{{ msg }}</h1> <p> <a href="https://vitejs.dev/guide/features.html" target="_blank"> Vite Documentation </a> | <a href="https://v3.vuejs.org/" target="_blank">Vue 3 Documentation</a> </p> <button Type ="button" @click="test()"> // Change the default click event to test() count is: {{ state.count }} </button> <p v-for="item in state.data" v-bind:key="item.id">{{item.subtitle}}</p> <p> Edit <code>components/HelloWorld.vue</code> to test hot module replacement. </p> </template> <script setup> import { DefineProps, reactive} from 'vue' // from electron ipcRenderer // nodeIntegration:true, // contextIsolation; // nodeIntegration:true, // contextIsolation: false const { ipcRenderer} = window.require('electron'); defineProps({ msg: String }) const state = reactive({ count: Function test(){if(state.data.length>0){state.data=[] state.count = 0}else{// Send ipcrenderer. send('send','select * from T_banner '); On ('reply',(event,args)=>{state. Count =args.length console.log(args); }) } } </script> <style scoped> a { color: #42b983; } </style>Copy the code

Finally, re-run the two commands on both terminals to achieve the effect of the top image

conclusion

Last time someone asked this question, I pretty to try, just as a realization of the idea, but also a personal learning record. You are welcome to discuss any ideas you have.

I think with this, is not the future graduation design what library management system can be more simple ~~ ha ha ha