The recommended Direct in this issue is a real-time API and application dashboard for managing SQL database content.

Introduction to Directus

Directus is a real-time API and application dashboard used for managing SQL database content.

• Free and open-source. There are no artificial restrictions, supplier lockdowns, or hidden paywalls.
• REST and GraphQL APIs. Immediately build a super fast Node.js API on top of any SQL database.
• Manage pure SQL. Suitable for new or existing SQL databases without migration.
• Choose your database. Supports PostgreSQL, MySQL, SQLite, OracleDB, CockroachDB, MariaDB, and MS-SQL.
• Local or cloud. Run locally, install locally, or use our self-service cloud service (with free packages available).
• Completely scalable. Built in white label makes it easy to customize our modular platform.
• Modern dashboard. Our no code Vue.js application is safe and intuitive for non-technical users, and does not require training.

How does this work

Directus is installed as a layer on top of a new or existing SQL database.

Applications and APIs dynamically ‘mirror’ your actual architecture and content in real-time. This is similar to how technical database clients (such as PHPMyAdmin) work. However, Database Introduction has many unique advantages:

• Absolute control over your pure SQL database schema.
• Provide complete transparency, portability, and security for your data.
• Allow importing existing databases without modification or migration.
• All functions of direct database access and raw complex SQL queries.
• Significantly improve performance through optimization and indexing.

Who is it for?

Directus enables the entire team to work together and access data in one place.

development
The developers have obtained a complete data connectivity toolkit, which includes REST and GraphQL APIs, a JavaScript SDK, access to global variables for custom configuration options, and direct command-line access to digital assets.
Advanced users
Data analysts and data scientists have in app tools to query data, build in app analytics dashboards, and extract or upload data in file format. In addition, these users can still freely link to other services and run raw SQL queries directly on the database.
Business users
Codeless applications are secure and intuitive enough to allow everyone to access data, even the most non-technical users. Administrators can create fully detailed permissions for roles and individual users.

install

Create a new Directus project by running the following npm command:

npm init directus-project my-project

Alternatively, using yarn:

yarn create directus-project my-project

Just follow the setup prompts, and the CLI will create your new project directory (e.g.) my-project、 Configuration files and initial database. It is crucial to keep your project up-to-date in order to fully utilize Directus and ensure that you have the latest security patches.

require

Directus only requires Node.js and supports most operating systems and SQL database vendors.

• Node.js 12.20+
• npm 6.x+

Supported databases

• PostgreSQL 10+
• MySQL 5.7.8+ / 8+（have mysql_native_password）
• MariaDB 10.2.7+
• SQLite 3+
• CockroachDB 21.1.13+ [1]
• Microsoft SQL 13+ [1]
• OracleDB 19+ [1]

The old version may be valid, but it has not been officially tested/supported.
Supported operating systems

• Ubuntu 18.04
• CentOS / RHEL 8
• macOS Catalina Or updated version
• window 10/11
• Docker（DockerHub + Dockerfile）

API reference

Dynamic API
The API of this platform uses database mirroring to dynamically generate REST endpoints and GraphQL schema based on connected database architecture. Due to the fact that these endpoints return data based on your specific architecture and configured permissions, the input/output of the API varies greatly for each installation.
REST and GraphQL
There is no difference in the available functionality between REST and GraphQL endpoints. The available features in both are mapped to the same set of core services, which means you won’t lose any performance or functionality by choosing one of them.
verification
By default, all data in the system is inaccessible to unauthenticated users. To obtain access to protected data, you must include an access token in each request or configure permissions for public roles.
Relationship data
Directus only retrieves fields explicitly requested in the project. You can use fields parameters in REST or regular nested queries in GraphQL to nested retrieve relational data. For example, this allows you to retrieve article authors included in article data, or obtain relevant log entry points for application analysis data.
#Create/Update/Delete
Similar to obtaining, relationship content can also be deeply modified.
#Many to one
The relationship management of many to one relationships is quite simple. You can simply submit the required changes as objects to the relational keys in the collection. For example, if you want to create a new featured article on the page, you can submit:

{
	"featured_article": {
		"title": "This is my new article!"
	}
}

This will create a new record in the relevant collection and save its primary key in the field of featured_article for that item. To update an existing project, simply provide the updated primary key, and Directus will consider it as an update rather than creating:

{
	"featured_article": {
		"id": 15,
		"title": "This is an updated title for my article!"
	}
}

Seeing that many to one relationships store foreign keys on the field itself, items can be deleted by invalidating the field:

{
	"featured_article": null
}

#One to many (/many to many)
One to many, therefore many to many and many to any relationship can be updated in one of the following two ways:
Basic
The API will return an array of one to many fields as nested keys or items (based on fields parameters). You can use the same structure to select what the relevant items are:

{
	"children": [2, 7, 149]
}

You can also provide an object instead of a primary key to dynamically create nested new projects, or provide an object containing a primary key to update existing projects:

{
	"children": [
		2, // assign existing item 2 to be a child of the current item
		{
			"name": "A new nested item"
		},
		{
			"id": 149,
			"name": "Assign and update existing item 149"
		}
	]
}

To remove items from this relationship, simply omit them from the array:

{
	"children": [2, 149]
}

This one to many update method is very useful for smaller relational datasets.

Project Settings

general

• Project Name – Name used at the top of the navigation bar and on login/public pages
• Project descriptor – a descriptor displayed at the top of the navigation bar below the project name and on the login/public page
• Project URL – URL when clicking on the logo at the top of the module bar
• Default Language – The default language used in the application.

modular

• Module Bar – allows customization of the links displayed in the module bar. Show or hide modules by switching checkboxes, reorder links by dragging the sorting handle, or create a new custom link using the following fields: Name – title of the module link, also displayed in the tool tip when hovering icon – URL of the icon for selecting the module button – should start with the link in the Directus application/The beginning of the link in

#Security

• Auth Password Policy — Set policy requirements for passwords for all users using JavaScript regular expressions. Support the following options: none – not recommended weak – at least 8 characters strong – uppercase, lowercase, numeric, and special characters
• Auth Login Attempts — Set the number of failed login attempts allowed before the user account is locked. After locking, the administrator user needs to unlock the account.

Files and Storage

The file middleware of this platform allows for real-time cropping and conversion of image assets. This means that you can simply request the original image, including any necessary conversion parameters, and you will receive a new asset as a response.

To prevent malicious users from consuming your storage space by requesting a large number of random sizes, you can use the following options to limit possible conversions.

• Allowed Transformations – Used to enable, disable, or restrict image conversion
• Default Folder – Set the default folder for adding new assets. This will not affect existing files. Please note that the field may override this value.
• Conversion Presets – Allow setting specific image conversions to simplify requests or restrict usage. Key – a unique identifier that allows for faster and easier image conversion requests. Suitable for – including (preserving aspect ratio), overlay (forcing exact size), suitable for internal or external width – width and height of the image – height quality of the image – compression or quality scaling of the image – when enabled, the image will not be resized – allows changing the output format to: JPG, PNG, WebP, or TIFF

Custom Panel

Expand entry point

The entry point for the panel is the file in the index folder of the expansion pack. Src/It exports a configuration object containing options for configuring panel behavior. When loading the panel, this object is imported by the Directus host.
Example of entry point:

import PanelComponent from './panel.vue';

export default {
	id: 'custom',
	name: 'Custom',
	icon: 'box',
	description: 'This is my custom panel!',
	component: PanelComponent,
	options: [
		{
			field: 'text',
			name: 'Text',
			type: 'string',
			meta: {
				interface: 'input',
				width: 'full',
			},
		},
	],
	minWidth: 12,
	minHeight: 8,
};

available options

• id— The unique key for this panel. Using author prefixes to limit the scope of proprietary panels is a good practice.
• name— The readable name of this panel.
• icon— Icon names from the material icon set, or an extended list of custom icons for Directus.
• description— A brief description (<80 characters) of this panel displayed in the application.
• component— Reference to your panel components.
• options— Options for the panel. It can be an option object or a dedicated Vue component.
• minWidth- The minimum grid unit width on the dashboard panel.
• minHeight- The minimum height of the grid unit on the dashboard panel.

PANEL ASSEMBLY

The panel component is part of the extension program, and when your panel is applied to data visualization in the dashboard within the Insights module, the Directus application will present the component. This panel component must be a Vue component. The most direct way to write Vue components is to use the Vue single file component syntax.
Example of panel component using Vue SFC syntax:

<template>
	<div class="text" :class="{ 'has-header': showHeader }">
		{{ text }}
	</div>
</template>

<script>
export default {
	props: {
		showHeader: {
			type: Boolean,
			default: false,
		},
		text: {
			type: String,
			default: '',
		},
	},
};
</script>

<style scoped>
.text {
	padding: 12px;
}

.text.has-header {
	padding: 0 12px;
}
</style>

#Available props

• showHeader boolean — Whether to display the title. It is useful for alternative styles based on additional/reduced space.
• dashboard uuid – UUID string of the dashboard containing the panel.
• height number – The current configuration height of the panel.
• width number – The current configuration width of the panel.
• now Date – View the Date object when viewing a dashboard that includes panels.

—END—

Open source protocol: GPL-3.0