Foreword:
Our project is based on Elasticsearch for data storage and query. Friends who have used ES should know that there is no friendly ES desktop client software comparable to MySQL desktop client software. Use ES is very troublesome, and there are three points that are often complained about:
Senior tester complained: Why should I choose ES for technology selection, adding, deleting, modifying and checking data is a mess, which seriously affects my test efficiency!
R&D Xiaobai complained: When creating a new index, why is it so troublesome to set the field type, and the script needs to be written a lot!
R&D handover complaints: There are so many index fields, what does each field mean? Is there no related documentation?
An ideal programmer:
If there is no tool, then we will write one ourselves. For programmers, isn’t writing a small tool something that can be done just by thinking about it? Just do it. It didn’t take long for the tool to appear in front of everyone. It is more convenient and easy to use than kibana and ES-header. Colleagues also think it is very good. Part of the interface is as follows:
For details of the tool, please refer to it. I also want you to try it out and make suggestions.
Download link: https://github.com/duzhimin/fast-es/releases/download/v1.0/FastES_v1.0_Setup.exe
Function introduction: https://github.com/duzhimin/fast-es/blob/main/docs/instructions.md
Here comes the problem:
After the likes, followed by complaints, there are two points of complaints:
Ugly interface: developed based on java swing, inherently ugly
Can't be used cross-platform: can only be used under Windows
What's the matter?
there is always a solution to a problem:
Looking for a cross-platform and beautified technology stack to develop this client
1. Technology selection
After some technical research, we finally chose electron-vite for the following reasons:
electron：
Electron is a framework for building desktop applications using JavaScript, HTML, and CSS. By merging Chromium and Node.js into the same runtime environment, build applications compatible with Mac, Windows and Linux platforms. By using electron, we can achieve cross-platform + beautification
advantage:
Easy to develop, the technology stack is suitable for front-end students (UI uses Web technology, and the system API interaction part uses NodeJS)
shortcoming:
1) The packaging volume is large, and the runtime environment of Chromium and NodeJS needs to be packaged
2) Large memory consumption: Chromium itself consumes more memory, and NodeJS is run by JIT. Compared with C++ and other AOT languages, the memory consumption is also greater.
quickly:
Vite is a new front-end building tool that can significantly improve the front-end development experience.
electron-vite
electron-vite is a new Electron development build tool designed to provide a faster and more streamlined development experience for Electron.
View+ElementPlus
Needless to say, these two are very mature front-end development frameworks, which can be used between
Environment construction:
1. Install nodejs
https://nodejs.org/en/ v18.14.1
2. To check whether Node.js is installed correctly, please enter the following command in your terminal:
node -v
npm -v
3. First create a folder and initialize the npm package
mkdir my-electron-app && cd my-electron-app
npm init
4. Install the electron package into the development dependencies of the application
npm install --save-dev electron
Add a start command under the scripts field in your package.json configuration file:
{
"scripts": {
"start": "electron ."
}
}6. The start command allows you to open your application in development mode: npm start
7. Install vscode
front-end development tools
8. Install element-plus
npm install element-plus --save
quick start
npm create @quick-start/electron
Follow the prompts to enter the name of the project step by step
Execute npm start to see the relevant interface
Remarks (may cause errors in npm download related packages due to network reasons, just try again)
Effect
