Front End: Vue3, Vite, Css...

Directus APP uses Vue 3, TypeScript, built with Vite. This article records front-end related knowledge learned during the evaluation of the Directus APP. 1. Vite Build tool, similar to webpack. 1.1. Principle Uses the browser’s ES6 module loading function, so front-end can load JS modules on demand. During development, bundling is not needed. <script type="module" src="./foo.js"></script> The above module-type loaded foo.js can also import other modules and export. Browsers recognize import and export commands in JS and will send requests to the backend to load on demand. ...

March 19, 2022 · 5 min

Directus

1. Collection A Collection corresponds to a table in the database. Directus collections have some unique concepts, such as alias fields and sort attributes. 1.1. Alias Fields that do not map directly to an actual database column are called “alias” fields. For example, presentation fields (such as dividers and groups) and certain relational types that display data stored elsewhere (such as One-to-Many (O2M) and Many-to-Many (M2M)). O2M, M2M, M2A, etc., don’t have actual columns in the table. They are called alias fields. ...

March 13, 2022 · 4 min

Docker

1. Docker The client operates images and containers through the docker daemon running on the host, and the registry provides image publishing and downloading (similar to npm and pip). A Docker image is a special read-only file system that provides programs, libraries, resources, configuration files, and other files required for container runtime. It also contains some configuration parameters prepared for runtime (such as anonymous volumes, environment variables, users, etc.). The image does not contain any dynamic data, and its content will not change after being built. ...

March 8, 2022 · 39 min

A Simple API Proxy

1. Background When configuring Directus to use DingTalk QR code login, I found that DingTalk’s password-free login (OAuth 2) is not consistent with the RFC specification. Protocol conversion is needed before it can communicate with Directus normally. This is a relatively niche requirement, and there was no existing software available, so I had to build it myself. 2. Main Functions Can act as a middleware for API communication, forwarding communication between clients and API servers, recording LOGs for convenient protocol analysis; As a middleware, it can modify request content and response content; it can do protocol adaptation and conversion. APIPROXY is a RESTFUL API proxy, monitor and adaptor. ...

March 5, 2022 · 2 min

Designing High-Performance and Scalable API Services

Directus itself is a NodeJS-based API server. The TPS it can support depends on multiple factors such as the database system and API query design. This article provides some architectural considerations to enable Directus applications to scale with business growth by adding hardware, thereby improving system processing capacity and achieving good scalability in performance. 1. How to Plan a Scalable Directus Application Directus focuses on two aspects for handling high load scenarios: ...

March 2, 2022 · 2 min

OAuth2 Application Practice: Attempting to Integrate DingTalk Login with Directus

1. Project Overview The expected outcome of this small project is to allow Directus to support logging in with DingTalk accounts. After understanding the OAuth2 protocol (see the previous blog post, reference 1), we have enough knowledge to implement this. Directus natively supports GitHub login, so the approach is to start with GitHub. Follow these steps: Configure Directus to use GitHub account login to get familiar with Directus’s standard OAuth support Configure Directus to use DingTalk account login; since DingTalk’s protocol implementation differs from RFC6749/GitHub, we may need to handle issues as they arise Deploy Directus to the server environment and verify on both DingTalk PC and mobile versions 2. Environment Configuration Use ngrok locally to expose a service to receive OAuth server redirects. ...

February 27, 2022 · 11 min

Introducing Niche Open Source Software into Your Project

1. Introduction Open source software is the foundation of the information society. There are many types of software on GitHub, with different market positioning and maturity levels. For mature general-purpose software like Linux and NGINX, there are few concerns about introducing them into your own projects. Because they’re general-purpose, many people use them. You can find numerous success stories and many developers to maintain them. When problems arise, it’s easy to find answers online. ...

February 25, 2022 · 3 min