From 5c1443a97d9fe8307ff97fe1f28cb84c15fc746e Mon Sep 17 00:00:00 2001 From: SbloodyS <460888207@qq.com> Date: Thu, 15 Jan 2026 09:33:35 +0800 Subject: [PATCH 1/3] fronend doc improvement --- .../development-environment-setup.md | 4 +- .../en/contribute/frontend-development.md | 691 ------------------ .../development-environment-setup.md | 6 +- .../zh/contribute/frontend-development.md | 691 ------------------ 4 files changed, 3 insertions(+), 1389 deletions(-) delete mode 100644 docs/docs/en/contribute/frontend-development.md delete mode 100644 docs/docs/zh/contribute/frontend-development.md diff --git a/docs/docs/en/contribute/development-environment-setup.md b/docs/docs/en/contribute/development-environment-setup.md index bf39a248e663..3820d0502b37 100644 --- a/docs/docs/en/contribute/development-environment-setup.md +++ b/docs/docs/en/contribute/development-environment-setup.md @@ -8,7 +8,7 @@ Before setting up the DolphinScheduler development environment, please make sure - [JDK](https://www.oracle.com/technetwork/java/javase/downloads/index.html): v1.8+ - [Maven](http://maven.apache.org/download.cgi): v3.5+ - [Node](https://nodejs.org/en/download): v16.0+ -- [Pnpm](https://pnpm.io/installation): v8.0+ (Make sure pnpm is compatible with Node.js, see also: [Compatibility](https://pnpm.io/installation#compatibility)) +- [Pnpm](https://pnpm.io/installation): v7.0+ (Make sure pnpm is compatible with Node.js, see also: [Compatibility](https://pnpm.io/installation#compatibility)) ### Clone Git Repository @@ -153,8 +153,6 @@ Find the class `org.apache.dolphinscheduler.StandaloneServer` in IntelliJ IDEA a Install frontend dependencies and run it. -> Note: You can see more detail about the frontend setting in [frontend development](./frontend-development.md). - If you have not yet installed `pnpm`, you can install it using the following command before running the front-end component: ```shell diff --git a/docs/docs/en/contribute/frontend-development.md b/docs/docs/en/contribute/frontend-development.md deleted file mode 100644 index bba03f3cd93f..000000000000 --- a/docs/docs/en/contribute/frontend-development.md +++ /dev/null @@ -1,691 +0,0 @@ -# Front-end development documentation - -### Technical selection - -``` -Vue mvvm framework - -Es6 ECMAScript 6.0 - -Ans-ui Analysys-ui - -D3 Visual Library Chart Library - -Jsplumb connection plugin library - -Lodash high performance JavaScript utility library -``` - -### Development environment - -- - -#### Node installation - -Node package download (note version v12.20.2) `https://nodejs.org/download/release/v12.20.2/` - -- - -#### Front-end project construction - -Use the command line mode `cd` enter the `dolphinscheduler-ui` project directory and execute `npm install` to pull the project dependency package. - -> If `npm install` is very slow, you can set the taobao mirror - -``` -npm config set registry http://registry.npmmirror.com/ -``` - -- Modify `VITE_APP_DEV_WEB_URL` in the file `dolphinscheduler-ui/.env.development` to interact with the backend: - -``` -# back end interface address -VITE_APP_DEV_WEB_URL = 'http://127.0.0.1:12345' -``` - -##### ! ! ! Special attention here. If the project reports a "node-sass error" error while pulling the dependency package, execute the following command again after execution. - -```bash -npm install node-sass --unsafe-perm #Install node-sass dependency separately -``` - -- - -#### Development environment operation - -- `pnpm run dev` project development environment (after startup address http://localhost:8888) - -#### Front-end project release - -- `pnpm run build:prod` project packaging (after packaging, the root directory will create a folder called dist for publishing Nginx online) - -Run the `pnpm run build:prod` command to generate a package file (dist) package - -Copy it to the corresponding directory of the server (front-end service static page storage directory) - -Visit address` http://localhost:8888` - -#### Start with node and daemon under Linux - -Install pm2 `npm install -g pm2` - -Execute `pm2 start npm -- run dev` to start the project in the project `dolphinscheduler-ui `root directory - -#### command - -- Start `pm2 start npm -- run dev` - -- Stop `pm2 stop npm` - -- delete `pm2 delete npm` - -- Status `pm2 list` - -``` - -[root@localhost dolphinscheduler-ui]# pm2 start npm -- run dev -[PM2] Applying action restartProcessId on app [npm](ids: 0) -[PM2] [npm](0) ✓ -[PM2] Process successfully started -┌──────────┬────┬─────────┬──────┬──────┬────────┬─────────┬────────┬─────┬──────────┬──────┬──────────┐ -│ App name │ id │ version │ mode │ pid │ status │ restart │ uptime │ cpu │ mem │ user │ watching │ -├──────────┼────┼─────────┼──────┼──────┼────────┼─────────┼────────┼─────┼──────────┼──────┼──────────┤ -│ npm │ 0 │ N/A │ fork │ 6168 │ online │ 31 │ 0s │ 0% │ 5.6 MB │ root │ disabled │ -└──────────┴────┴─────────┴──────┴──────┴────────┴─────────┴────────┴─────┴──────────┴──────┴──────────┘ - Use `pm2 show ` to get more details about an app - -``` - -### Project directory structure - -`build` some webpack configurations for packaging and development environment projects - -`node_modules` development environment node dependency package - -`src` project required documents - -`src => combo` project third-party resource localization `npm run combo` specific view `build/combo.js` - -`src => font` Font icon library can be added by visiting https://www.iconfont.cn Note: The font library uses its own secondary development to reintroduce its own library `src/sass/common/_font.scss` - -`src => images` public image storage - -`src => js` js/vue - -`src => lib` internal components of the company (company component library can be deleted after open source) - -`src => sass` sass file One page corresponds to a sass file - -`src => view` page file One page corresponds to an html file - -``` -> Projects are developed using vue single page application (SPA) -- All page entry files are in the `src/js/conf/${ corresponding page filename => home} index.js` entry file -- The corresponding sass file is in `src/sass/conf/${corresponding page filename => home}/index.scss` -- The corresponding html file is in `src/view/${corresponding page filename => home}/index.html` -``` - -Public module and util `src/js/module` - -`components` => internal project common components - -`download` => download component - -`echarts` => chart component - -`filter` => filter and vue pipeline - -`i18n` => internationalization - -`io` => io request encapsulation based on axios - -`mixin` => vue mixin public part for disabled operation - -`permissions` => permission operation - -`util` => tool - -### System function module - -Home => `http://localhost:8888/#/home` - -Project Management => `http://localhost:8888/#/projects/list` - -``` -| Project Home -| Workflow - - Workflow definition - - Workflow instance - - Task instance -``` - -Resource Management => `http://localhost:8888/#/resource/file` - -``` -| File Management -``` - -Data Source Management => `http://localhost:8888/#/datasource/list` - -Security Center => `http://localhost:8888/#/security/tenant` - -``` -| Tenant Management -| User Management -| Alarm Group Management - - master - - worker -``` - -User Center => `http://localhost:8888/#/user/account` - -## Routing and state management - -The project `src/js/conf/home` is divided into - -`pages` => route to page directory - -``` -The page file corresponding to the routing address -``` - -`router` => route management - -``` -vue router, the entry file index.js in each page will be registered. Specific operations: https://router.vuejs.org/zh/ -``` - -`store` => status management - -``` -The page corresponding to each route has a state management file divided into: - -actions => mapActions => Details：https://vuex.vuejs.org/zh/guide/actions.html - -getters => mapGetters => Details：https://vuex.vuejs.org/zh/guide/getters.html - -index => entrance - -mutations => mapMutations => Details：https://vuex.vuejs.org/zh/guide/mutations.html - -state => mapState => Details：https://vuex.vuejs.org/zh/guide/state.html - -Specific action：https://vuex.vuejs.org/zh/ -``` - -## specification - -## Vue specification - -##### 1.Component name - -The component is named multiple words and is connected with a wire (-) to avoid conflicts with HTML tags and a clearer structure. - -``` -// positive example -export default { - name: 'page-article-item' -} -``` - -##### 2.Component files - -The internal common component of the `src/js/module/components` project writes the folder name with the same name as the file name. The subcomponents and util tools that are split inside the common component are placed in the internal `_source` folder of the component. - -``` -└── components - ├── header - ├── header.vue - └── _source - └── nav.vue - └── util.js - ├── conditions - ├── conditions.vue - └── _source - └── search.vue - └── util.js -``` - -##### 3.Prop - -When you define Prop, you should always name it in camel format (camelCase) and use the connection line (-) when assigning values to the parent component. -This follows the characteristics of each language, because it is case-insensitive in HTML tags, and the use of links is more friendly; in JavaScript, the more natural is the hump name. - -``` -// Vue -props: { - articleStatus: Boolean -} -// HTML - -``` - -The definition of Prop should specify its type, defaults, and validation as much as possible. - -Example： - -``` -props: { - attrM: Number, - attrA: { - type: String, - required: true - }, - attrZ: { - type: Object, - // The default value of the array/object should be returned by a factory function - default: function () { - return { - msg: 'achieve you and me' - } - } - }, - attrE: { - type: String, - validator: function (v) { - return !(['success', 'fail'].indexOf(v) === -1) - } - } -} -``` - -##### 4.v-for - -When performing v-for traversal, you should always bring a key value to make rendering more efficient when updating the DOM. - -``` - -``` - -v-for should be avoided on the same element as v-if (`for example:
  • `) because v-for has a higher priority than v-if. To avoid invalid calculations and rendering, you should try to use v-if Put it on top of the container's parent element. - -``` - -``` - -##### 5.v-if / v-else-if / v-else - -If the elements in the same set of v-if logic control are logically identical, Vue reuses the same part for more efficient element switching, `such as: value`. In order to avoid the unreasonable effect of multiplexing, you should add key to the same element for identification. - -``` -
    - {{ mazeyData }} -
    -
    - no data -
    -``` - -##### 6.Instruction abbreviation - -In order to unify the specification, the instruction abbreviation is always used. Using `v-bind`, `v-on` is not bad. Here is only a unified specification. - -``` - -``` - -##### 7.Top-level element order of single file components - -Styles are packaged in a file, all the styles defined in a single vue file, the same name in other files will also take effect. All will have a top class name before creating a component. -Note: The sass plugin has been added to the project, and the sas syntax can be written directly in a single vue file. -For uniformity and ease of reading, they should be placed in the order of `