MariaDB-Editor
所属分类：数据库系统
开发工具：TypeScript
文件大小：0KB
下载次数：0
上传日期：2023-08-09 11:01:01
上 传 者：
sh-1993
说明： 娱乐项目。使用React、TypeScript&Node.js构建SQL数据编辑器；MariaDB与Docker.、。，
(Recreational project. Building an editor for SQL data with React, TypeScript & Node.js; MariaDB hosted with Docker.,)
文件列表:
client/ (0, 2023-08-29)
client/index.html (363, 2023-08-29)
client/package.json (967, 2023-08-29)
client/postcss.config.js (80, 2023-08-29)
client/src/ (0, 2023-08-29)
client/src/components/ (0, 2023-08-29)
client/src/components/ActionPopup.tsx (1162, 2023-08-29)
client/src/components/AnimatedSubmitButton.tsx (756, 2023-08-29)
client/src/components/Button.tsx (564, 2023-08-29)
client/src/components/ConfirmDialogue.tsx (3824, 2023-08-29)
client/src/components/DetailsDropdown.tsx (308, 2023-08-29)
client/src/components/Foldout.tsx (2197, 2023-08-29)
client/src/components/ProtectedRoute.tsx (406, 2023-08-29)
client/src/components/XMarkButton.tsx (420, 2023-08-29)
client/src/components/form/ (0, 2023-08-29)
client/src/components/form/Input.tsx (739, 2023-08-29)
client/src/components/form/InputList.tsx (959, 2023-08-29)
client/src/components/form/TextArea.tsx (659, 2023-08-29)
client/src/connection/ (0, 2023-08-29)
client/src/connection/ConnectionPage.tsx (3063, 2023-08-29)
client/src/connection/ConnectionRoutes.tsx (658, 2023-08-29)
client/src/connection/components/ (0, 2023-08-29)
client/src/connection/components/ConnectionPageFrame.tsx (382, 2023-08-29)
client/src/index.css (58, 2023-08-29)
client/src/main.tsx (681, 2023-08-29)
client/src/network/ (0, 2023-08-29)
client/src/network/AuthenticationProvider.tsx (909, 2023-08-29)
client/src/network/calls.ts (1769, 2023-08-29)
client/src/network/connectionAPI.ts (474, 2023-08-29)
client/src/network/queryAPI.ts (155, 2023-08-29)
client/src/network/tableAPI.ts (834, 2023-08-29)
client/src/query/ (0, 2023-08-29)
client/src/query/QueryConsolePage.tsx (2030, 2023-08-29)
client/src/query/components/ (0, 2023-08-29)
client/src/query/components/ConfirmQueryText.tsx (242, 2023-08-29)
client/src/query/components/QueryConsoleButton.tsx (734, 2023-08-29)
client/src/row/ (0, 2023-08-29)
client/src/row/RowPage.tsx (3851, 2023-08-29)
... ...
# **MariaDB-Editor**
## **Introduction**
I wanted to build an SQL editor to increase my understanding of relational databases in fullstack development; the end result could be useful as a starting template for other projects with a Docker-hosted backend.
## **Description**
The project includes an SPA React + TypeScript frontend client where you can view and edit SQL data from MariaDB, as well as query the database directly. Additionally, a Node.js backend was developed to integrate with Docker. By working on this project I've gained valuable experience in building full-stack applications with relational data, it's also been a lot of fun.
## **UI images**
## **How to run locally**
1. Clone the project
```
git clone https://github.com/jfMoller/MariaDB-Editor.git
```
2. Install local dependencies in the project directory
```
cd client
npm i
cd server
npm i
```
3. Run the project
```bash
cd server
npm run dev
```
## **How do I get started with Docker & MariaDB?**
### 1. Download Docker desktop:
https://docs.docker.com/get-docker/
### 2.Pull the official MariaDB image:
Open a terminal and run the following command:
```bash
docker pull mariadb
```
### 3.Run the MariaDB Container:
Once you have the MariaDB image, you can create and run a container using the docker run command. For example:
```bash
docker run -d --name my_mariadb -e MYSQL_ROOT_PASSWORD=my_password -p 3306:3306 mariadb
```
* Replace "my_mariadb" with your preferred container name.
* Replace "my_password" with your desired root password.
### 4. Verify the Running Container:
To check if the MariaDB container is running, use the following command:
```bash
docker ps
```
### 5. Download DataGrip (or an equivalent database IDE)
https://www.jetbrains.com/datagrip/download/#section=windows
### 6. Create a new data source (DataGrip)
Open DataGrip and create a new data source, select "MariaDB". Enter your root password from step 3 to access the container.
### 7. Create a database in your container
Create a new database, copy an old one, or use an example (see db-examples.md).
### 8. Connecting through MariaDB-Editor
Once your Docker container is up and running, and you've created a new database, you can connect to said database by entering the host, user, password and database name.
近期下载者：
相关文件：
收藏者：