This is an automated email from the ASF dual-hosted git repository.
kirs pushed a commit to branch master
in repository https://gitbox.apache.org/repos/asf/dolphinscheduler-website.git
The following commit(s) were added to refs/heads/master by this push:
new 2a04acb Update docs for development (#333)
2a04acb is described below
commit 2a04acbf37128354219d87ab34da457e9a6b3552
Author: Shiwen Cheng <[email protected]>
AuthorDate: Wed Apr 28 11:46:30 2021 +0800
Update docs for development (#333)
---
development/en-us/backend-development.md | 23 +-
development/en-us/dev-frontend-development.md | 768 ---------------------
development/en-us/development-environment-setup.md | 134 ++--
development/en-us/frontend-development.md | 52 +-
development/zh-cn/backend-development.md | 22 +-
development/zh-cn/dev-frontend-development.md | 764 --------------------
development/zh-cn/development-environment-setup.md | 169 ++---
development/zh-cn/frontend-development.md | 48 +-
site_config/development.js | 10 +-
9 files changed, 208 insertions(+), 1782 deletions(-)
diff --git a/development/en-us/backend-development.md
b/development/en-us/backend-development.md
index b276401..1b13823 100644
--- a/development/en-us/backend-development.md
+++ b/development/en-us/backend-development.md
@@ -2,10 +2,10 @@
## Environmental requirements
- * MySQL (5.5+) : Must be installed
- * JDK (1.8+) : Must be installed
- * ZooKeeper (3.4.6+) ：Must be installed
- * Maven (3.3+) ：Must be installed
+ * MySQL (5.5+) : Must be installed
+ * JDK (1.8+) : Must be installed
+ * ZooKeeper (3.4.6+) : Must be installed
+ * Maven (3.3+) : Must be installed
Because the dolphinscheduler-rpc module in DolphinScheduler uses Grpc, you
need to use Maven to compile the generated classes.
For those who are not familiar with maven, please refer to: [maven in five
minutes](http://maven.apache.org/guides/getting-started/maven-in-five-minutes.html)(3.3+)
@@ -21,6 +21,7 @@ when deploy version >= 1.2.0 , please use:
```
mvn -U clean package -Prelease -Dmaven.test.skip=true
```
+
before 1.2.0, please use:
```
mvn -U clean package assembly:assembly -Dmaven.test.skip=true
@@ -31,12 +32,12 @@ before 1.2.0, please use:
After normal compilation, it will generate
`./dolphinscheduler-dist/target/apache-dolphinscheduler-{version}-bin.tar.gz`
in the current directory.
```
- bin
- conf
- lib
- script
- sql
- install.sh
+bin
+conf
+lib
+script
+sql
+install.sh
```
- Description
@@ -49,5 +50,3 @@ script : cluster start, stop, and service monitoring start
and stop scripts
sql : project depends on sql file
install.sh : one-click deployment script
```
-
-
diff --git a/development/en-us/dev-frontend-development.md
b/development/en-us/dev-frontend-development.md
deleted file mode 100644
index 2dede33..0000000
--- a/development/en-us/dev-frontend-development.md
+++ /dev/null
@@ -1,768 +0,0 @@
-# Front-end development documentation
-
-### Technical selection
-```
-Vue mvvm framework
-
-Es6 ECMAScript 6.0
-
-Element-ui
-
-form-create JSON form generator
-
-D3 Visual Library Chart Library
-
-Jsplumb connection plugin library
-
-Lodash high performance JavaScript utility library
-```
-
-
-### Development environment
-
-- #### Node installation
-Node package download (Note: The node version must be a long-term version,
currently the highest version of Node supports 14+) `https://nodejs.org/en/`
-Node.js extension, you can install nvm management node version, install nrm
management mirror source
-
-
-- #### Front-end project construction
-Use the command line mode `cd` to enter the `dolphinscheduler-ui` project
directory, check the usage status of the npm mirror source `npm get registry`,
if it is not a Taobao mirror, set the mirror to Taobao mirror `npm config set
registry http://registry.npm.taobao.org`, then execute `npm install` to pull
project dependency packages
-
-
-- Configure `.env` file for the interface to interact with the backend
-
-Open the `.env` file in the `dolphinscheduler-ui` directory, and add the
back-end service ip address and port to the file to interact with the back-end.
The contents of the `.env` file are as follows:
-```
-# Proxy interface address (modified by yourself)
-API_BASE = http://192.168.xx.xx:12345(Note: API interface must be written in
the form of IP address, not http://localhost:12345)
-
-# If you need to access the project with ip, you can remove the "#" (example)
-#DEV_HOST = 192.168.xx.xx
-```
-
-> ##### ! ! ! Special attention here. If the project reports a "node-sass
error" error while pulling the dependency package, execute the following
command again after execution.
-```
-npm install node-sass --unsafe-perm //Install node-sass dependency separately
-```
-
-- #### Development environment operation
-- `npm start` project development environment (after startup address
http://localhost:8888/#/)
-
-
-#### Front-end project release
-
-- `npm run build` project packaging (after packaging, the root directory will
create a folder called dist for publishing Nginx online)
-
-Run the `npm run build` 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 <id|name>` 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 => 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 utill `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 relationship
-| Workflow
- - Workflow definition
- - Workflow instance
- - Task instance
-```
-
-Resource Management => `http://localhost:8888/#/resource/file`
-```
-| File Management
-| udf Management
- - Resource Management
- - Function management
-
-
-
-```
-
-Data Source Management => `http://localhost:8888/#/datasource/list`
-
-monitoring Center => `http://localhost:8888/#/monitor/servers/master`
-```
-| Service management
- - Master
- - Worker
- - Zookeeper
- - DB
-| Statistics management
- - Statistics
-```
-
-Security Center => `http://localhost:8888/#/security/tenant`
-```
-| Tenant Management
-| User Management
-| Alarm Group Management
-| Alarm instance management
-| Worker Group Management
-| Yarn queue management
-| Token Management
-```
-
-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/
-
-```
-
-## Menu added
-The public menu only needs to be in `/src/js/conf/home/router/index.js` Just
add it，Such as: Home
-```
- {
- path: '/home',
- name: 'home',
- component: resolve => require(['../pages/home/index'], resolve),
- meta: {
- title: `${i18n.$t('Home')} - DolphinScheduler`,
- refresh_in_switched_tab: true
- }
- }
-```
-
-## Exception handling
-Intercept all request requests in the `/src/js/module/io/index.js file`, and
analyze and handle the status code returned by the interface through the
response interceptor. The code is as follows
-```
-import io from '@/module/axios/index'
-import cookies from 'js-cookie'
-
-const apiPrefix = '/dolphinscheduler'
-const reSlashPrefix = /^\/+/
-
-const resolveURL = (url) => {
- if (url.indexOf('http') !== -1) {
- return url
- }
- if (url.charAt(0) !== '/') {
- return `${apiPrefix}/${url.replace(reSlashPrefix, '')}`
- }
-
- return url
-}
-
-/**
- * Resolve backend api url
- */
-export { resolveURL }
-
-/**
- * Set io default instance resolveUrl globally
- */
-io.config.resolveURL = resolveURL
-io.config.timeout = 0
-io.config.maxContentLength = 200000
-io.config.validateStatus = function (status) {
- if (status === 401 || status === 504) {
- window.location.href = `${PUBLIC_PATH}/view/login/index.html`
- return
- }
- return status
-}
-
-// io.config.emulateJSON = false
-const _propRequest = io.request
-
-// Add a local request interceptor
-io.request = (spec) => {
- return _propRequest.call(io, spec)
-}
-
-// Global response interceptor registion
-io.interceptors.response.use(
- response => {
- return response
- }, error => {
- // Do something with response error
- return Promise.reject(error)
- }
-)
-
-// Global request interceptor registion
-io.interceptors.request.use(
- config => {
- const sIdCookie = cookies.get('sessionId')
- const sessionId = sessionStorage.getItem('sessionId')
- const requstUrl = config.url.substring(config.url.lastIndexOf('/') + 1)
- if ((!sIdCookie || (sessionId && sessionId !== sIdCookie)) && requstUrl
!== 'login') {
- window.location.href = `${PUBLIC_PATH}/view/login/index.html`
- } else {
- const { method } = config
- if (method === 'get') {
- config.params = Object.assign({}, config.params, {
- _t: Math.random()
- })
- }
- config.headers = config.headers || {}
- const language = cookies.get('language')
- if (language) config.headers.language = language
- if (sIdCookie) config.headers.sessionId = sIdCookie
- return config
- }
- }, error => {
- // Do something with request error
- return Promise.reject(error)
- }
-)
-
-export default io
-```
-
-## 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
-<article-item :article-status="true"></article-item>
-```
-
-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.
-```
-<ul>
- <li v-for="item in list" :key="item.id">
- {{ item.title }}
- </li>
-</ul>
-```
-
-v-for should be avoided on the same element as v-if (`for example: <li>`)
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.
-```
-<ul v-if="showList">
- <li v-for="item in list" :key="item.id">
- {{ item.title }}
- </li>
-</ul>
-```
-
-##### 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.
-```
-<div v-if="hasData" key="mazey-data">
- <span>{{ mazeyData }}</span>
-</div>
-<div v-else key="mazey-none">
- <span>no data</span>
-</div>
-```
-
-##### 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.
-```
-<input :value="mazeyUser" @click="verifyUser">
-```
-
-##### 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
`<template>`、`<script>`、`<style>`.
-
-```
-<template>
- <div class="test-model">
- test
- </div>
-</template>
-<script>
- export default {
- name: "test",
- data() {
- return {}
- },
- props: {},
- methods: {},
- watch: {},
- beforeCreate() {
- },
- created() {
- },
- beforeMount() {
- },
- mounted() {
- },
- beforeUpdate() {
- },
- updated() {
- },
- beforeDestroy() {
- },
- destroyed() {
- },
- computed: {},
- components: {},
- }
-</script>
-
-<style lang="scss" rel="stylesheet/scss">
- .test-model {
-
- }
-</style>
-
-```
-
-
-## JavaScript specification
-
-##### 1.var / let / const
-It is recommended to no longer use var, but use let / const, prefer const. The
use of any variable must be declared in advance, except that the function
defined by function can be placed anywhere.
-
-##### 2.quotes
-```
-const foo = 'after division'
-const bar = `${foo}，ront-end engineer`
-```
-
-##### 3.function
-Anonymous functions use the arrow function uniformly. When multiple
parameters/return values are used, the object's structure assignment is used
first.
-```
-function getPersonInfo ({name, sex}) {
- // ...
- return {name, gender}
-}
-```
-The function name is uniformly named with a camel name. The beginning of the
capital letter is a constructor. The lowercase letters start with ordinary
functions, and the new operator should not be used to operate ordinary
functions.
-
-##### 4.object
-```
-const foo = {a: 0, b: 1}
-const bar = JSON.parse(JSON.stringify(foo))
-
-const foo = {a: 0, b: 1}
-const bar = {...foo, c: 2}
-
-const foo = {a: 3}
-Object.assign(foo, {b: 4})
-
-const myMap = new Map([])
-for (let [key, value] of myMap.entries()) {
- // ...
-}
-```
-
-##### 5.module
-Unified management of project modules using import / export.
-```
-// lib.js
-export default {}
-
-// app.js
-import app from './lib'
-```
-
-Import is placed at the top of the file.
-
-If the module has only one output value, use `export default`，otherwise no.
-
-## HTML / CSS
-
-##### 1.Label
-
-Do not write the type attribute when referencing external CSS or JavaScript.
The HTML5 default type is the text/css and text/javascript properties, so there
is no need to specify them.
-```
-<link rel="stylesheet" href="//www.test.com/css/test.css">
-<script src="//www.test.com/js/test.js"></script>
-```
-
-##### 2.Naming
-The naming of Class and ID should be semantic, and you can see what you are
doing by looking at the name; multiple words are connected by a link.
-```
-// positive example
-.test-header{
- font-size: 20px;
-}
-```
-
-##### 3.Attribute abbreviation
-CSS attributes use abbreviations as much as possible to improve the efficiency
and ease of understanding of the code.
-
-```
-// counter example
-border-width: 1px;
-border-style: solid;
-border-color: #ccc;
-
-// positive example
-border: 1px solid #ccc;
-```
-
-##### 4.Document type
-
-The HTML5 standard should always be used.
-
-```
-<!DOCTYPE html>
-```
-
-##### 5.Notes
-A block comment should be written to a module file.
-```
-/**
-* @module mazey/api
-* @author Mazey <[email protected]>
-* @description test.
-* */
-```
-
-
-## interface
-
-##### All interfaces are returned as Promise
-Note that non-zero is wrong for catching catch
-
-```
-const test = () => {
- return new Promise((resolve, reject) => {
- resolve({
- a:1
- })
- })
-}
-
-// transfer
-test.then(res => {
- console.log(res)
- // {a:1}
-})
-```
-
-Normal return
-```
-{
- code:0,
- data:{}
- msg:'success'
-}
-```
-
-Error return
-```
-{
- code:10000,
- data:{}
- msg:'failed'
-}
-```
-If the interface is a post request, the Content-Type defaults to
application/x-www-form-urlencoded; if the Content-Type is changed to
application/json,
-Interface parameter transfer needs to be changed to the following way
-```
-io.post('url', payload, null, null, { emulateJSON: false } res => {
- resolve(res)
-}).catch(e => {
- reject(e)
-})
-```
-
-##### Related interface path
-
-dag related interface `src/js/conf/home/store/dag/actions.js`
-
-Data Source Center Related Interfaces
`src/js/conf/home/store/datasource/actions.js`
-
-Project Management Related Interfaces
`src/js/conf/home/store/projects/actions.js`
-
-Resource Center Related Interfaces `src/js/conf/home/store/resource/actions.js`
-
-Monitoring center Related Interface `src/js/conf/home/store/monitor/actions.js`
-
-Security Center Related Interfaces `src/js/conf/home/store/security/actions.js`
-
-User Center Related Interfaces `src/js/conf/home/store/user/actions.js`
-
-
-
-## Extended development
-
-##### 1.Add node
-
-(1) First place the icon icon of the node in the
`src/js/conf/home/pages/dag/img `folder, and note the English name of the node
defined by the `toolbar_${in the background. For example: SHELL}.png`
-
-(2) Find the `tasksType` object in
`src/js/conf/home/pages/dag/_source/config.js` and add it to it.
-```
-'DEPENDENT': { // The background definition node type English name is used
as the key value
- desc: 'DEPENDENT', // tooltip desc
- color: '#2FBFD8' // The color represented is mainly used for tree and gantt
-}
-```
-
-(3) Add a `${node type (lowercase)}`.vue file in
`src/js/conf/home/pages/dag/_source/formModel/tasks`. The contents of the
components related to the current node are written here. Must belong to a node
component must have a function _verification () After the verification is
successful, the relevant data of the current component is thrown to the parent
component.
-```
-/**
- * Verification
-*/
- _verification () {
- // datasource subcomponent verification
- if (!this.$refs.refDs._verifDatasource()) {
- return false
- }
-
- // verification function
- if (!this.method) {
- this.$message.warning(`${i18n.$t('Please enter method')}`)
- return false
- }
-
- // localParams subcomponent validation
- if (!this.$refs.refLocalParams._verifProp()) {
- return false
- }
- // store
- this.$emit('on-params', {
- type: this.type,
- datasource: this.datasource,
- method: this.method,
- localParams: this.localParams
- })
- return true
- }
-```
-
-(4) Common components used inside the node component are under` _source`, and
`commcon.js` is used to configure public data.
-
-##### 2.Increase the status type
-
-(1) Find the `tasksState` object in
`src/js/conf/home/pages/dag/_source/config.js` and add it to it.
-
-```
- 'WAITTING_DEPEND': { // 'WAITTING_DEPEND': { //Backend defines state type,
frontend is used as key value
- id: 11, // front-end definition id is used as a sort
- desc: `${i18n.$t('waiting for dependency')}`, // tooltip desc
- color: '#5101be', // The color represented is mainly used for tree and gantt
- icoUnicode: '', // font icon
- isSpin: false // whether to rotate (requires code judgment)
-}
-```
-
-##### 3.Add the action bar tool
-(1) Find the `toolOper` object in
`src/js/conf/home/pages/dag/_source/config.js` and add it to it.
-```
-{
- code: 'pointer', // tool identifier
- icon: '', // tool icon
- disable: disable, // disable
- desc: `${i18n.$t('Drag node and selected item')}` // tooltip desc
-}
-```
-
-(2) Tool classes are returned as a constructor
`src/js/conf/home/pages/dag/_source/plugIn`
-
-`downChart.js` => dag image download processing
-
-`dragZoom.js` => mouse zoom effect processing
-
-`jsPlumbHandle.js` => drag and drop line processing
-
-`util.js` => belongs to the `plugIn` tool class
-
-
-The operation is handled in the `src/js/conf/home/pages/dag/_source/dag.js` =>
`toolbarEvent` event.
-
-
-##### 3.Add a routing page
-
-(1) First add a routing address`src/js/conf/home/router/index.js` in route
management
-```
-routing address{
- path: '/test', // routing address
- name: 'test', // alias
- component: resolve => require(['../pages/test/index'], resolve), // route
corresponding component entry file
- meta: {
- title: `${i18n.$t('test')} - EasyScheduler` // title display
- }
-},
-```
-
-(2)Create a `test` folder in `src/js/conf/home/pages` and create an `index.vue
`entry file in the folder.
-
- This will give you direct access to`http://localhost:8888/#/test`
-
-
-##### 4.Increase the preset mailbox
-
-Find the `src/lib/localData/email.js` startup and timed email address input to
automatically pull down the match.
-```
-export default
["[email protected]","[email protected]","[email protected]"]
-```
-
-##### 5.Authority management and disabled state processing
-
-The permission gives the userType according to the backUser interface
`getUserInfo` interface: `"ADMIN_USER/GENERAL_USER" `permission to control
whether the page operation button is `disabled`.
-
-specific operation：`src/js/module/permissions/index.js`
-
-disabled processing：`src/js/module/mixin/disabledState.js`
-
diff --git a/development/en-us/development-environment-setup.md
b/development/en-us/development-environment-setup.md
index 3b074ab..bfb7a43 100644
--- a/development/en-us/development-environment-setup.md
+++ b/development/en-us/development-environment-setup.md
@@ -8,152 +8,150 @@
3. Clone your forked repository to the local file system.
-```
- git clone https://github.com/apache/dolphinscheduler.git
+```bash
+git clone https://github.com/apache/dolphinscheduler.git
```
4. After finished the clone, go into the project directory and execute the
following commands:
-```
- git branch -a #check the branch
- git checkout dev #switch to the dev branch
- git pull #sychronize the branch with the remote branch
- mvn -U clean package -Prelease -Dmaven.test.skip=true #because the
project uses gRPC, you need to compile the project to generate the required
classes
+```bash
+git branch -a #check the branch
+git checkout dev #switch to the dev branch
+git pull #sychronize the branch with the remote branch
+mvn -U clean package -Prelease -Dmaven.test.skip=true #mvn package
```
#### Install node
1. Install nvm
- curl -o- https://raw.githubusercontent.com/nvm-sh/nvm/v0.35.3/install.sh
+ curl -o- https://raw.githubusercontent.com/nvm-sh/nvm/v0.37.2/install.sh |
bash
2. Refresh the environment variables
- source ~/.bash_profile
+ source ~/.bash_profile
3. Install node
- nvm install v12.12.0
- note:mac users could install npm through brew:brew install npm
+ nvm install v12.20.2
+ note: Mac users could install npm through brew: brew install npm
4. Validate the node installation
- node --version
+ node --version
#### Install zookeeper
1. Download zookeeper
-
http://apache.mirrors.hoobly.com/zookeeper/zookeeper-3.6.2/apache-zookeeper-3.6.2-bin.tar.gz
+
https://www.apache.org/dyn/closer.lua/zookeeper/zookeeper-3.6.3/apache-zookeeper-3.6.3-bin.tar.gz
2. Copy the zookeeper config file
- cp conf/zoo_sample.cfg conf/zoo.cfg
+ cp conf/zoo_sample.cfg conf/zoo.cfg
3. Modify zookepper config
- vi conf/zoo.cfg
- dataDir=./tmp/zookeeper
+ vi conf/zoo.cfg
+ dataDir=./tmp/zookeeper
4. Start/stop zookeeper
- ./bin/zkServer.sh start
- ./bin/zkServer.sh stop
+ ./bin/zkServer.sh start
+ ./bin/zkServer.sh stop
#### Create database
Create user, user name: ds_user, password: dolphinscheduler
```
- mysql> CREATE DATABASE dolphinscheduler DEFAULT CHARACTER SET utf8 DEFAULT
COLLATE utf8_general_ci;
- mysql> GRANT ALL PRIVILEGES ON dolphinscheduler.* TO 'ds_user'@'%'
IDENTIFIED BY 'dolphinscheduler';
- mysql> GRANT ALL PRIVILEGES ON dolphinscheduler.* TO 'ds_user'@'localhost'
IDENTIFIED BY 'dolphinscheduler';
- mysql> flush privileges;
+mysql> CREATE DATABASE dolphinscheduler DEFAULT CHARACTER SET utf8 DEFAULT
COLLATE utf8_general_ci;
+mysql> GRANT ALL PRIVILEGES ON dolphinscheduler.* TO 'ds_user'@'%' IDENTIFIED
BY 'dolphinscheduler';
+mysql> GRANT ALL PRIVILEGES ON dolphinscheduler.* TO 'ds_user'@'localhost'
IDENTIFIED BY 'dolphinscheduler';
+mysql> flush privileges;
```
#### Set up the front-end
1. Enter the dolphinscheduler-ui directory
- cd dolphinscheduler-ui
+ cd dolphinscheduler-ui
2. Run npm install
#### Set up the back-end
1. Import the project to IDEA
- file-->open
+ file-->open
2. Modify the database configuration in the datasource.properties file in the
resource directory of the dao module
```
- spring.datasource.driver-class-name=com.mysql.jdbc.Driver
- spring.datasource.url=jdbc:mysql://localhost:3306/dolphinscheduler
- spring.datasource.username=ds_user
- spring.datasource.password=dolphinscheduler
+spring.datasource.driver-class-name=com.mysql.jdbc.Driver
+spring.datasource.url=jdbc:mysql://127.0.0.1:3306/dolphinscheduler?useUnicode=true&characterEncoding=UTF-8
+spring.datasource.username=ds_user
+spring.datasource.password=dolphinscheduler
```
3. Modify pom.xml in the root directory and modify the scope of
mysql-connector-java to compile
4. Refresh the dao module, run the main method of
org.apache.dolphinscheduler.dao.upgrade.shell.CreateDolphinScheduler to
automatically insert the tables and data required by the project.
-5. Modify the service module
- try to change the zookeeper.quorum part of the zookeeper.properties file
- zookeeper.quorum=localhost:2181
-
-6. Modify the .env file of the dolphinscheduler-ui module
-
-```
- API_BASE = http://localhost:12345
- DEV_HOST = localhost
-```
+5. Modify the service module
+ try to change the zookeeper.quorum part of the zookeeper.properties file
+ zookeeper.quorum=localhost:2181
#### Start the project
1. Start zookeeper
- ./bin/zkServer.sh start
+ ./bin/zkServer.sh start
2. Start MasterServer
- run the main method of
org.apache.dolphinscheduler.server.master.MasterServer, you need to set the
following VM options:
+ run the main method of
org.apache.dolphinscheduler.server.master.MasterServer, you need to set the
following VM options:
```
- -Dlogging.config=classpath:logback-master.xml
-Ddruid.mysql.usePingMethod=false
+-Dlogging.config=classpath:logback-master.xml -Ddruid.mysql.usePingMethod=false
```
3. Start WorkerServer
- run the main method of
org.apache.dolphinscheduler.server.worker.WorkerServer, you need to set the
following VM options:
+ run the main method of
org.apache.dolphinscheduler.server.worker.WorkerServer, you need to set the
following VM options:
```
- -Dlogging.config=classpath:logback-worker.xml
-Ddruid.mysql.usePingMethod=false
+-Dlogging.config=classpath:logback-worker.xml -Ddruid.mysql.usePingMethod=false
```
4. Start ApiApplicationServer
- run the main method of
org.apache.dolphinscheduler.api.ApiApplicationServer, you need to set the
following VM options:
+ run the main method of
org.apache.dolphinscheduler.api.ApiApplicationServer, you need to set the
following VM options:
```
- -Dlogging.config=classpath:logback-api.xml -Dspring.profiles.active=api
+-Dlogging.config=classpath:logback-api.xml -Dspring.profiles.active=api
```
5. We are not going to start the other modules. if they are required to be
started, check script/dolphinscheduler-daemon.sh and set them the same VM
Options.
```
- if [ "$command" = "api-server" ]; then
- LOG_FILE="-Dlogging.config=classpath:logback-api.xml
-Dspring.profiles.active=api"
- CLASS=org.apache.dolphinscheduler.api.ApiApplicationServer
- elif [ "$command" = "master-server" ]; then
- LOG_FILE="-Dlogging.config=classpath:logback-master.xml
-Ddruid.mysql.usePingMethod=false"
- CLASS=org.apache.dolphinscheduler.server.master.MasterServer
- elif [ "$command" = "worker-server" ]; then
- LOG_FILE="-Dlogging.config=classpath:logback-worker.xml
-Ddruid.mysql.usePingMethod=false"
- CLASS=org.apache.dolphinscheduler.server.worker.WorkerServer
- elif [ "$command" = "alert-server" ]; then
- LOG_FILE="-Dlogback.configurationFile=conf/logback-alert.xml"
- CLASS=org.apache.dolphinscheduler.alert.AlertServer
- elif [ "$command" = "logger-server" ]; then
- CLASS=org.apache.dolphinscheduler.server.log.LoggerServer
- else
- echo "Error: No command named \`$command' was found."
- exit 1
- fi
+if [ "$command" = "api-server" ]; then
+ LOG_FILE="-Dlogging.config=classpath:logback-api.xml
-Dspring.profiles.active=api"
+ CLASS=org.apache.dolphinscheduler.api.ApiApplicationServer
+elif [ "$command" = "master-server" ]; then
+ LOG_FILE="-Dlogging.config=classpath:logback-master.xml
-Ddruid.mysql.usePingMethod=false"
+ CLASS=org.apache.dolphinscheduler.server.master.MasterServer
+elif [ "$command" = "worker-server" ]; then
+ LOG_FILE="-Dlogging.config=classpath:logback-worker.xml
-Ddruid.mysql.usePingMethod=false"
+ CLASS=org.apache.dolphinscheduler.server.worker.WorkerServer
+elif [ "$command" = "alert-server" ]; then
+ LOG_FILE="-Dlogback.configurationFile=conf/logback-alert.xml"
+ CLASS=org.apache.dolphinscheduler.alert.AlertServer
+elif [ "$command" = "logger-server" ]; then
+ CLASS=org.apache.dolphinscheduler.server.log.LoggerServer
+else
+ echo "Error: No command named '$command' was found."
+ exit 1
+fi
```
-6. cd dolphinscheduler-ui directory and run npm run start
+6. Start web ui
+
+```bash
+cd dolphinscheduler-ui
+npm run start
+```
#### Visit the project
-1. Visit http://localhost:12345/dolphinscheduler
+1. Visit http://localhost:8888
-2. Sign in with the administrator account
- username: admin
- password: dolphinscheduler123
+2. Sign in with the administrator account
+ username: admin
+ password: dolphinscheduler123
diff --git a/development/en-us/frontend-development.md
b/development/en-us/frontend-development.md
index 538021f..297a7cc 100644
--- a/development/en-us/frontend-development.md
+++ b/development/en-us/frontend-development.md
@@ -15,42 +15,35 @@ Jsplumb connection plugin library
Lodash high performance JavaScript utility library
```
-
### Development environment
- #### Node installation
-Node package download (note version 8.9.4)
`https://nodejs.org/download/release/v8.9.4/`
-
+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 enter the Taobao image command line to enter `npm install -g cnpm
--registry=https://registry.npm.taobao.org`
-
-> Run `cnpm install`
+> If `npm install` is very slow, you can set the taobao mirror
+```
+npm config set registry http://registry.npm.taobao.org/
+```
-- Create a new `.env` file or the interface that interacts with the backend
+- Modify `API_BASE` in the file `dolphinscheduler-ui/.env` to interact with
the backend:
-Create a new` .env` file in the `dolphinscheduler-ui `directory, add the ip
address and port of the backend service to the file, and use it to interact
with the backend. The contents of the` .env` file are as follows:
```
-# Proxy interface address (modified by yourself)
-API_BASE = http://192.168.xx.xx:12345
-
-# If you need to access the project with ip, you can remove the "#" (example)
-#DEV_HOST = 192.168.xx.xx
+# back end interface address
+API_BASE = 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.
-```
-npm install node-sass --unsafe-perm //Install node-sass dependency separately
+
+```bash
+npm install node-sass --unsafe-perm #Install node-sass dependency separately
```
- #### Development environment operation
-- `npm start` project development environment (after startup address
http://localhost:8888/#/)
-
+- `npm start` project development environment (after startup address
http://localhost:8888)
#### Front-end project release
@@ -60,8 +53,7 @@ Run the `npm run build` 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/#/`
-
+Visit address` http://localhost:8888`
#### Start with node and daemon under Linux
@@ -94,7 +86,6 @@ Execute `pm2 start npm -- run dev` to start the project in
the project `dolphins
```
-
### Project directory structure
`build` some webpack configurations for packaging and development environment
projects
@@ -144,7 +135,6 @@ Public module and utill `src/js/module`
`util` => tool
-
### System function module
Home => `http://localhost:8888/#/home`
@@ -164,9 +154,6 @@ Resource Management =>
`http://localhost:8888/#/resource/file`
| udf Management
- Resource Management
- Function management
-
-
-
```
Data Source Management => `http://localhost:8888/#/datasource/list`
@@ -182,7 +169,6 @@ Security Center => `http://localhost:8888/#/security/tenant`
User Center => `http://localhost:8888/#/user/account`
-
## Routing and state management
The project `src/js/conf/home` is divided into
@@ -206,15 +192,14 @@ 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
@@ -243,7 +228,8 @@ The internal common component of the
`src/js/module/components` project writes t
```
##### 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.
+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
@@ -368,7 +354,6 @@ For uniformity and ease of reading, they should be placed
in the order of `<tem
```
-
## JavaScript specification
##### 1.var / let / const
@@ -454,7 +439,6 @@ border: 1px solid #ccc;
```
##### 4.Document type
-
The HTML5 standard should always be used.
```
@@ -471,7 +455,6 @@ A block comment should be written to a module file.
* */
```
-
## interface
##### All interfaces are returned as Promise
@@ -534,8 +517,6 @@ Security Center Related Interfaces
`src/js/conf/home/store/security/actions.js`
User Center Related Interfaces `src/js/conf/home/store/user/actions.js`
-
-
## Extended development
##### 1.Add node
@@ -585,7 +566,6 @@ User Center Related Interfaces
`src/js/conf/home/store/user/actions.js`
(4) Common components used inside the node component are under` _source`, and
`commcon.js` is used to configure public data.
##### 2.Increase the status type
-
(1) Find the `tasksState` object in
`src/js/conf/home/pages/dag/_source/config.js` and add it to it.
```
diff --git a/development/zh-cn/backend-development.md
b/development/zh-cn/backend-development.md
index 52e168f..ed9d157 100644
--- a/development/zh-cn/backend-development.md
+++ b/development/zh-cn/backend-development.md
@@ -2,10 +2,10 @@
## 环境要求
- * MySQL (5.5+) : 必装
- * [JDK](https://www.oracle.com/technetwork/java/javase/downloads/index.html)
(1.8+) : 必装
- * ZooKeeper(3.4.6+) ：必装
- * [Maven](http://maven.apache.org/download.cgi)(3.3+) ：必装
+ * MySQL (5.5+) : 必装
+ * [JDK](https://www.oracle.com/technetwork/java/javase/downloads/index.html)
(1.8+) : 必装
+ * ZooKeeper(3.4.6+) : 必装
+ * [Maven](http://maven.apache.org/download.cgi)(3.3+) : 必装
因DolphinScheduler中dolphinscheduler-rpc模块使用到Grpc，需要用到Maven编译生成所需要的类
对maven不熟的伙伴请参考: [maven in five
minutes](http://maven.apache.org/guides/getting-started/maven-in-five-minutes.html)(3.3+)
@@ -32,12 +32,12 @@ http://maven.apache.org/install.html
正常编译完后，会在当前目录生成
`./dolphinscheduler-dist/target/apache-dolphinscheduler-{version}-bin.tar.gz`，解压该gz包得到以下目录：
```
- bin
- conf
- lib
- script
- sql
- install.sh
+bin
+conf
+lib
+script
+sql
+install.sh
```
- 说明
@@ -50,5 +50,3 @@ script : 集群启动、停止和服务监控启停脚本
sql : 项目依赖sql文件
install.sh : 一键部署脚本
```
-
-
diff --git a/development/zh-cn/dev-frontend-development.md
b/development/zh-cn/dev-frontend-development.md
deleted file mode 100644
index e6cf12e..0000000
--- a/development/zh-cn/dev-frontend-development.md
+++ /dev/null
@@ -1,764 +0,0 @@
-# 前端开发文档
-
-### 技术选型
-```
-Vue mvvm框架
-
-Es6 ECMAScript 6.0
-
-Element-ui
-
-form-create JSON表单生成器
-
-D3 可视化库图表库
-
-Jsplumb 连线插件库
-
-Lodash 高性能的 JavaScript 实用工具库
-```
-
-
-### 开发环境搭建
-
-- #### Node安装
-Node包下载 (注意：node版本必须是长期版本,目前Node最高版本支持14+) `https://nodejs.org/zh-cn/`
-node.js扩展，可以安装nvm管理node版本，安装nrm管理镜像源
-
-
-- #### 前端项目构建
-用命令行模式 `cd` 进入 `dolphinscheduler-ui`项目目录,查看npm镜像源使用状态`npm get
registry`,如果不是淘宝镜像，将镜像设置成淘宝镜像`npm config set registry
http://registry.npm.taobao.org`,然后执行 `npm install` 拉取项目依赖包
-
-
-- 配置`.env`文件，用于跟后端交互的接口
-
-在`dolphinscheduler-ui`目录下打开`.env`文件，在文件里添加后端服务的ip地址和端口，用于跟后端交互，`.env`文件内容如下：
-```
-# 代理的接口地址（自行修改）
-API_BASE =
http://192.168.xx.xx:12345(注意：API接口一定要写成IP地址的形式，不要写成http://localhost:12345)
-
-# 如果您需要用ip访问项目可以把 "#" 号去掉（例）
-#DEV_HOST = 192.168.xx.xx
-```
-
-> ##### ！！！这里特别注意 项目如果在拉取依赖包的过程中报 " node-sass error " 错误，请在执行完后再次执行以下命令
-```
-npm install node-sass --unsafe-perm //单独安装node-sass依赖
-```
-
-- #### 开发环境运行
-- `npm start` 项目开发环境 (启动后访问地址 http://localhost:8888/#/)
-
-
-#### 前端项目发布
-
-- `npm run build` 项目打包 (打包后根目录会创建一个名为dist文件夹，用于发布线上Nginx)
-
-运行 `npm run build` 命令，生成打包文件（dist）包
-
-再拷贝到服务器对应的目录下（前端服务静态页面存放目录）
-
-
-访问地址 `http://localhost:8888/#/`
-
-
-#### Linux下使用node启动并且守护进程
-
-安装pm2 `npm install -g pm2`
-
-在项目`dolphinscheduler-ui`根目录执行 `pm2 start npm -- run dev` 启动项目
-
-#### 命令
-
-- 启用 `pm2 start npm -- run dev`
-
-- 停止 `pm2 stop npm`
-
-- 删除 `pm2 delete npm`
-
-- 状态 `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 <id|name>` to get more details about an app
-
-```
-
-
-### 项目目录结构
-
-`build` 打包及开发环境项目的一些webpack配置
-
-`node_modules` 开发环境node依赖包
-
-`src` 项目所需文件
-
-`src => images` 公共图片存放
-
-`src => js` js/vue
-
-`src => lib` 公司内部组件（公司组件库开源后可删掉）
-
-`src => sass` sass文件 一个页面对应一个sass文件
-
-`src => view` 页面文件 一个页面对应一个html文件
-
-```
-> 项目采用vue单页面应用(SPA)开发
-- 所有页面入口文件在 `src/js/conf/${对应页面文件名 => home}` 的 `index.js` 入口文件
-- 对应的sass文件则在 `src/sass/conf/${对应页面文件名 => home}/index.scss`
-- 对应的html文件则在 `src/view/${对应页面文件名 => home}/index.html`
-```
-
-公共模块及util `src/js/module`
-
-`components` => 内部项目公共组件
-
-`download` => 下载组件
-
-`echarts` => 图表组件
-
-`filter` => 过滤器和vue管道
-
-`i18n` => 国际化
-
-`io` => io请求封装 基于axios
-
-`mixin` => vue mixin 公共部分 用于disabled操作
-
-`permissions` => 权限操作
-
-`util` => 工具
-
-
-### 系统功能模块
-
-首页 => `http://localhost:8888/#/home`
-
-项目管理 => `http://localhost:8888/#/projects/list`
-```
-| 项目首页
-| 工作流关系
-| 工作流
- - 工作流定义
- - 工作流实例
- - 任务实例
-```
-
-资源中心 => `http://localhost:8888/#/resource/file`
-```
-| 文件管理
-| UDF管理
- - 资源管理
- - 函数管理
-```
-
-数据源中心 => `http://localhost:8888/#/datasource/list`
-
-监控中心 => `http://localhost:8888/#/monitor/servers/master`
-```
-| 服务管理
- - Master
- - Worker
- - Zookeeper
- - DB
-| 统计管理
- - Statistics
-```
-
-
-安全中心 => `http://localhost:8888/#/security/tenant`
-```
-| 租户管理
-| 用户管理
-| 告警组管理
-| 告警实例管理
-| Worker分组管理
-| Yarn队列管理
-| 令牌管理
-```
-
-用户中心 => `http://localhost:8888/#/user/account`
-
-
-## 路由和状态管理
-
-项目 `src/js/conf/home` 下分为
-
-`pages` => 路由指向页面目录
-```
- 路由地址对应的页面文件
-```
-
-`router` => 路由管理
-```
-vue的路由器，在每个页面的入口文件index.js 都会注册进来 具体操作：https://router.vuejs.org/zh/
-```
-
-`store` => 状态管理
-```
-每个路由对应的页面都有一个状态管理的文件 分为：
-
-actions => mapActions => 详情：https://vuex.vuejs.org/zh/guide/actions.html
-
-getters => mapGetters => 详情：https://vuex.vuejs.org/zh/guide/getters.html
-
-index => 入口
-
-mutations => mapMutations => 详情：https://vuex.vuejs.org/zh/guide/mutations.html
-
-state => mapState => 详情：https://vuex.vuejs.org/zh/guide/state.html
-
-具体操作：https://vuex.vuejs.org/zh/
-
-```
-
-## 菜单添加
-公共的菜单只需要在 `/src/js/conf/home/router/index.js` 中添加就可以了，如：首页
-```
- {
- path: '/home',
- name: 'home',
- component: resolve => require(['../pages/home/index'], resolve),
- meta: {
- title: `${i18n.$t('Home')} - DolphinScheduler`,
- refresh_in_switched_tab: true
- }
- }
-```
-
-## 异常处理
-在 `/src/js/module/io/index.js` 文件中对所有的 request请求进行拦截， 通过response
拦截器对接口返回的状态码进行分析与异常处理，代码如下
-```
-import io from '@/module/axios/index'
-import cookies from 'js-cookie'
-
-const apiPrefix = '/dolphinscheduler'
-const reSlashPrefix = /^\/+/
-
-const resolveURL = (url) => {
- if (url.indexOf('http') !== -1) {
- return url
- }
- if (url.charAt(0) !== '/') {
- return `${apiPrefix}/${url.replace(reSlashPrefix, '')}`
- }
-
- return url
-}
-
-/**
- * Resolve backend api url
- */
-export { resolveURL }
-
-/**
- * Set io default instance resolveUrl globally
- */
-io.config.resolveURL = resolveURL
-io.config.timeout = 0
-io.config.maxContentLength = 200000
-io.config.validateStatus = function (status) {
- if (status === 401 || status === 504) {
- window.location.href = `${PUBLIC_PATH}/view/login/index.html`
- return
- }
- return status
-}
-
-// io.config.emulateJSON = false
-const _propRequest = io.request
-
-// Add a local request interceptor
-io.request = (spec) => {
- return _propRequest.call(io, spec)
-}
-
-// Global response interceptor registion
-io.interceptors.response.use(
- response => {
- return response
- }, error => {
- // Do something with response error
- return Promise.reject(error)
- }
-)
-
-// Global request interceptor registion
-io.interceptors.request.use(
- config => {
- const sIdCookie = cookies.get('sessionId')
- const sessionId = sessionStorage.getItem('sessionId')
- const requstUrl = config.url.substring(config.url.lastIndexOf('/') + 1)
- if ((!sIdCookie || (sessionId && sessionId !== sIdCookie)) && requstUrl
!== 'login') {
- window.location.href = `${PUBLIC_PATH}/view/login/index.html`
- } else {
- const { method } = config
- if (method === 'get') {
- config.params = Object.assign({}, config.params, {
- _t: Math.random()
- })
- }
- config.headers = config.headers || {}
- const language = cookies.get('language')
- if (language) config.headers.language = language
- if (sIdCookie) config.headers.sessionId = sIdCookie
- return config
- }
- }, error => {
- // Do something with request error
- return Promise.reject(error)
- }
-)
-
-export default io
-```
-
-
-## 规范
-## Vue规范
-##### 1.组件名
-组件名为多个单词，并且用连接线（-）连接，避免与 HTML 标签冲突，并且结构更加清晰。
-```
-// 正例
-export default {
- name: 'page-article-item'
-}
-```
-
-##### 2.组件文件
-`src/js/module/components`项目内部公共组件书写文件夹名与文件名同名,公共组件内部所拆分的子组件与util工具都放置组件内部
`_source`文件夹里。
-```
-└── components
- ├── header
- ├── header.vue
- └── _source
- └── nav.vue
- └── util.js
- ├── conditions
- ├── conditions.vue
- └── _source
- └── search.vue
- └── util.js
-```
-
-##### 3.Prop
-定义 Prop 的时候应该始终以驼峰格式（camelCase）命名，在父组件赋值的时候使用连接线（-）。
-这里遵循每个语言的特性，因为在 HTML 标记中对大小写是不敏感的，使用连接线更加友好；而在 JavaScript 中更自然的是驼峰命名。
-```
-// Vue
-props: {
- articleStatus: Boolean
-}
-// HTML
-<article-item :article-status="true"></article-item>
-```
-
-Prop 的定义应该尽量详细的指定其类型、默认值和验证。
-
-示例：
-
-```
-props: {
- attrM: Number,
- attrA: {
- type: String,
- required: true
- },
- attrZ: {
- type: Object,
- // 数组/对象的默认值应该由一个工厂函数返回
- default: function () {
- return {
- msg: '成就你我'
- }
- }
- },
- attrE: {
- type: String,
- validator: function (v) {
- return !(['success', 'fail'].indexOf(v) === -1)
- }
- }
-}
-```
-
-##### 4.v-for
-在执行 v-for 遍历的时候，总是应该带上 key 值使更新 DOM 时渲染效率更高。
-```
-<ul>
- <li v-for="item in list" :key="item.id">
- {{ item.title }}
- </li>
-</ul>
-```
-
-v-for 应该避免与 v-if 在同一个元素（`例如：<li>`）上使用，因为 v-for 的优先级比 v-if 更高，为了避免无效计算和渲染，应该尽量将
v-if 放到容器的父元素之上。
-```
-<ul v-if="showList">
- <li v-for="item in list" :key="item.id">
- {{ item.title }}
- </li>
-</ul>
-```
-
-##### 5.v-if / v-else-if / v-else
-若同一组 v-if 逻辑控制中的元素逻辑相同，Vue
为了更高效的元素切换，会复用相同的部分，`例如：value`。为了避免复用带来的不合理效果，应该在同种元素上加上 key 做标识。
-```
-<div v-if="hasData" key="mazey-data">
- <span>{{ mazeyData }}</span>
-</div>
-<div v-else key="mazey-none">
- <span>无数据</span>
-</div>
-```
-
-##### 6.指令缩写
-为了统一规范始终使用指令缩写，使用`v-bind`，`v-on`并没有什么不好，这里仅为了统一规范。
-```
-<input :value="mazeyUser" @click="verifyUser">
-```
-
-##### 7.单文件组件的顶级元素顺序
-样式后续都是打包在一个文件里，所有在单个vue文件中定义的样式，在别的文件里同类名的样式也是会生效的所有在创建一个组件前都会有个顶级类名
-注意：项目内已经增加了sass插件，单个vue文件里可以直接书写sass语法
-为了统一和便于阅读，应该按 `<template>`、`<script>`、`<style>`的顺序放置。
-
-```
-<template>
- <div class="test-model">
- test
- </div>
-</template>
-<script>
- export default {
- name: "test",
- data() {
- return {}
- },
- props: {},
- methods: {},
- watch: {},
- beforeCreate() {
- },
- created() {
- },
- beforeMount() {
- },
- mounted() {
- },
- beforeUpdate() {
- },
- updated() {
- },
- beforeDestroy() {
- },
- destroyed() {
- },
- computed: {},
- components: {},
- }
-</script>
-
-<style lang="scss" rel="stylesheet/scss">
- .test-model {
-
- }
-</style>
-
-```
-
-
-## JavaScript规范
-
-##### 1.var / let / const
-建议不再使用 var，而使用 let / const，优先使用 const。任何一个变量的使用都要提前申明，除了 function
定义的函数可以随便放在任何位置。
-
-##### 2.引号
-```
-const foo = '后除'
-const bar = `${foo}，前端工程师`
-```
-
-##### 3.函数
-匿名函数统一使用箭头函数，多个参数/返回值时优先使用对象的结构赋值。
-```
-function getPersonInfo ({name, sex}) {
- // ...
- return {name, gender}
-}
-```
-函数名统一使用驼峰命名，以大写字母开头申明的都是构造函数，使用小写字母开头的都是普通函数，也不该使用 new 操作符去操作普通函数。
-
-##### 4.对象
-```
-const foo = {a: 0, b: 1}
-const bar = JSON.parse(JSON.stringify(foo))
-
-const foo = {a: 0, b: 1}
-const bar = {...foo, c: 2}
-
-const foo = {a: 3}
-Object.assign(foo, {b: 4})
-
-const myMap = new Map([])
-for (let [key, value] of myMap.entries()) {
- // ...
-}
-```
-
-##### 5.模块
-统一使用 import / export 的方式管理项目的模块。
-```
-// lib.js
-export default {}
-
-// app.js
-import app from './lib'
-```
-
-import 统一放在文件顶部。
-
-如果模块只有一个输出值，使用 `export default`，否则不用。
-
-
-## HTML / CSS
-
-###### 1.标签
-在引用外部 CSS 或 JavaScript 时不写 type 属性。HTML5 默认 type 为 `text/css` 和
`text/javascript` 属性，所以没必要指定。
-```
-<link rel="stylesheet" href="//www.test.com/css/test.css">
-<script src="//www.test.com/js/test.js"></script>
-```
-
-##### 2.命名
-Class 和 ID 的命名应该语义化，通过看名字就知道是干嘛的；多个单词用连接线 - 连接。
-```
-// 正例
-.test-header{
- font-size: 20px;
-}
-```
-
-##### 3.属性缩写
-CSS 属性尽量使用缩写，提高代码的效率和方便理解。
-
-```
-// 反例
-border-width: 1px;
-border-style: solid;
-border-color: #ccc;
-
-// 正例
-border: 1px solid #ccc;
-```
-
-##### 4.文档类型
-应该总是使用 HTML5 标准。
-```
-<!DOCTYPE html>
-```
-
-##### 5.注释
-应该给一个模块文件写一个区块注释。
-```
-/**
-* @module mazey/api
-* @author Mazey <[email protected]>
-* @description test.
-* */
-```
-
-
-## 接口
-
-##### 所有的接口都以 Promise 形式返回
-注意非0都为错误走catch
-
-```
-const test = () => {
- return new Promise((resolve, reject) => {
- resolve({
- a:1
- })
- })
-}
-
-// 调用
-test.then(res => {
- console.log(res)
- // {a:1}
-})
-```
-
-正常返回
-```
-{
- code:0,
- data:{}
- msg:'成功'
-}
-```
-
-错误返回
-```
-{
- code:10000,
- data:{}
- msg:'失败'
-}
-```
-接口如果是post请求，Content-Type默认为application/x-www-form-urlencoded；如果Content-Type改成application/json，
-接口传参需要改成下面的方式
-```
-io.post('url', payload, null, null, { emulateJSON: false } res => {
- resolve(res)
-}).catch(e => {
- reject(e)
-})
-```
-
-##### 相关接口路径
-
-dag 相关接口 `src/js/conf/home/store/dag/actions.js`
-
-数据源中心 相关接口 `src/js/conf/home/store/datasource/actions.js`
-
-项目管理 相关接口 `src/js/conf/home/store/projects/actions.js`
-
-资源中心 相关接口 `src/js/conf/home/store/resource/actions.js`
-
-监控中心 相关接口 `src/js/conf/home/store/monitor/actions.js`
-
-安全中心 相关接口 `src/js/conf/home/store/security/actions.js`
-
-用户中心 相关接口 `src/js/conf/home/store/user/actions.js`
-
-
-
-## 扩展开发
-
-##### 1.增加节点
-
-(1) 先将节点的icon小图标放置`src/js/conf/home/pages/dag/img`文件夹内，注意
`toolbar_${后台定义的节点的英文名称 例如:SHELL}.png`
-(2) 找到 `src/js/conf/home/pages/dag/_source/config.js` 里的 `tasksType` 对象，往里增加
-```
-'DEPENDENT': { // 后台定义节点类型英文名称用作key值
- desc: 'DEPENDENT', // tooltip desc
- color: '#2FBFD8' // 代表的颜色主要用于 tree和gantt 两张图
-}
-```
-
-(3) 在 `src/js/conf/home/pages/dag/_source/formModel/tasks` 增加一个
`${节点类型（小写）}`.vue 文件，跟当前节点相关的组件内容都在这里写。 属于节点组件内的必须拥有一个函数 `_verification()`
验证成功后讲当前组件的相关数据往父组件抛。
-```
-/**
- * 验证
-*/
- _verification () {
- // datasource 子组件验证
- if (!this.$refs.refDs._verifDatasource()) {
- return false
- }
-
- // 验证函数
- if (!this.method) {
- this.$message.warning(`${i18n.$t('请输入方法')}`)
- return false
- }
-
- // localParams 子组件验证
- if (!this.$refs.refLocalParams._verifProp()) {
- return false
- }
- // 存储
- this.$emit('on-params', {
- type: this.type,
- datasource: this.datasource,
- method: this.method,
- localParams: this.localParams
- })
- return true
- }
-```
-
-(4) 节点组件内部所用到公共的组件都在`_source`下，`commcon.js`用与配置公共数据
-
-##### 2.增加状态类型
-(1) 找到 `src/js/conf/home/pages/dag/_source/config.js` 里的 `tasksState` 对象，往里增加
-```
-'WAITTING_DEPEND': { //后端定义状态类型 前端用作key值
- id: 11, // 前端定义id 后续用作排序
- desc: `${i18n.$t('等待依赖')}`, // tooltip desc
- color: '#5101be', // 代表的颜色主要用于 tree和gantt 两张图
- icoUnicode: '', // 字体图标
- isSpin: false // 是否旋转（需代码判断）
-}
-```
-
-##### 3.增加操作栏工具
-(1) 找到 `src/js/conf/home/pages/dag/_source/config.js` 里的 `toolOper` 对象，往里增加
-```
-{
- code: 'pointer', // 工具标识
- icon: '', // 工具图标
- disable: disable, // 是否禁用
- desc: `${i18n.$t('拖动节点和选中项')}` // tooltip desc
-}
-```
-
-(2) 工具类都以一个构造函数返回 `src/js/conf/home/pages/dag/_source/plugIn`
-
-`downChart.js` => dag 图片下载处理
-
-`dragZoom.js` => 鼠标缩放效果处理
-
-`jsPlumbHandle.js` => 拖拽线条处理
-
-`util.js` => 属于 `plugIn` 工具类
-
-
-操作则在 `src/js/conf/home/pages/dag/_source/dag.js` => `toolbarEvent` 事件中处理。
-
-
-##### 3.增加一个路由页面
-
-(1) 首先在路由管理增加一个路由地址`src/js/conf/home/router/index.js`
-```
-{
- path: '/test', // 路由地址
- name: 'test', // 别名
- component: resolve => require(['../pages/test/index'], resolve), //
路由对应组件入口文件
- meta: {
- title: `${i18n.$t('test')} - DolphinScheduler` // title 显示
- }
-},
-```
-
-(2) 在`src/js/conf/home/pages` 建一个 `test` 文件夹，在文件夹里建一个`index.vue`入口文件。
-
- 这样就可以直接访问 `http://localhost:8888/#/test`
-
-
-##### 4.增加预置邮箱
-
-找到`src/lib/localData/email.js`启动和定时邮箱地址输入可以自动下拉匹配。
-```
-export default
["[email protected]","[email protected]","[email protected]"]
-```
-
-##### 5.权限管理及disabled状态处理
-
-权限根据后端接口`getUserInfo`接口给出`userType:
"ADMIN_USER/GENERAL_USER"`权限控制页面操作按钮是否`disabled`
-
-具体操作：`src/js/module/permissions/index.js`
-
-disabled处理：`src/js/module/mixin/disabledState.js`
-
diff --git a/development/zh-cn/development-environment-setup.md
b/development/zh-cn/development-environment-setup.md
index 7471fc8..a3ea82d 100644
--- a/development/zh-cn/development-environment-setup.md
+++ b/development/zh-cn/development-environment-setup.md
@@ -8,43 +8,49 @@
3. 把自己仓库 clone 到本地
- ` git clone https://github.com/apache/dolphinscheduler.git`
+```bash
+git clone https://github.com/apache/dolphinscheduler.git
+```
-4. git clone 项目后，进入项目目录，执行以下命令。
+4. git clone 项目后，进入项目目录，执行以下命令
-```
-1. git branch -a #查看分支
+```bash
+1. git branch -a #查看分支
2. git checkout dev #切换到dev分支
3. git pull #同步分支
-4. mvn -U clean package -Prelease -Dmaven.test.skip=true
#由于项目使用了gRPC，所以需要先编译项目生成需要的类。
+4. mvn -U clean package -Prelease -Dmaven.test.skip=true #mvn打包
```
#### 安装node
1. 安装nvm
- curl -o- https://raw.githubusercontent.com/nvm-sh/nvm/v0.35.3/install.sh
| bash
+ curl -o- https://raw.githubusercontent.com/nvm-sh/nvm/v0.37.2/install.sh |
bash
+
2. 刷新环境变量
- source ~/.bash_profile
-3. 安装node
- nvm install v12.12.0
- 备注:mac用户还可以通过brew安装npm:brew install npm
-4. 验证node安装成功
- node --version
+ source ~/.bash_profile
+3. 安装node
+ nvm install v12.20.2
+ 备注: Mac用户还可以通过brew安装npm: brew install npm
+4. 验证node安装成功
+ node --version
#### 安装 zookeeper
1. 下载 zookeeper
-
http://apache.mirrors.hoobly.com/zookeeper/zookeeper-3.6.2/apache-zookeeper-3.6.2-bin.tar.gz
+
https://www.apache.org/dyn/closer.lua/zookeeper/zookeeper-3.6.3/apache-zookeeper-3.6.3-bin.tar.gz
+
2. 复制配置文件
- cp conf/zoo_sample.cfg conf/zoo.cfg
+ cp conf/zoo_sample.cfg conf/zoo.cfg
+
3. 修改配置
- vi conf/zoo.cfg
- dataDir=./tmp/zookeeper
+ vi conf/zoo.cfg
+ dataDir=./tmp/zookeeper
+
4. 启动/停止 zookeeper
- ./bin/zkServer.sh start
- ./bin/zkServer.sh stop
+ ./bin/zkServer.sh start
+ ./bin/zkServer.sh stop
#### 创建数据库
@@ -55,94 +61,93 @@ mysql> CREATE DATABASE dolphinscheduler DEFAULT CHARACTER
SET utf8 DEFAULT COLLA
mysql> GRANT ALL PRIVILEGES ON dolphinscheduler.* TO 'ds_user'@'%' IDENTIFIED
BY 'dolphinscheduler';
mysql> GRANT ALL PRIVILEGES ON dolphinscheduler.* TO 'ds_user'@'localhost'
IDENTIFIED BY 'dolphinscheduler';
mysql> flush privileges;
-
```
#### 搭建前端
1. 进入 dolphinscheduler-ui 的目录
- cd dolphinscheduler-ui
-2. 执行 npm install
+ cd dolphinscheduler-ui
+2. 执行 npm install
#### 搭建后端
1. 将项目导入到 idea 中
- file-->open
+ file-->open
-2. 修改 dao 模块 resource 目录下 datasource.properties 文件中的数据库配置信息
+2. 修改 dao 模块 resource 目录下 datasource.properties 文件中的数据库配置信息
- ```
- spring.datasource.driver-class-name=com.mysql.jdbc.Driver
- spring.datasource.url=jdbc:mysql://localhost:3306/dolphinscheduler
- spring.datasource.username=ds_user
- spring.datasource.password=dolphinscheduler
- ```
+```
+spring.datasource.driver-class-name=com.mysql.jdbc.Driver
+spring.datasource.url=jdbc:mysql://127.0.0.1:3306/dolphinscheduler?useUnicode=true&characterEncoding=UTF-8
+spring.datasource.username=ds_user
+spring.datasource.password=dolphinscheduler
+```
3. 修改根项目中 pom.xml，将 mysql-connector-java 依赖的 scope 修改为 compile
-4. 刷新 dao 模块，运行
org.apache.dolphinscheduler.dao.upgrade.shell.CreateDolphinScheduler 的main
方法，自动插入项目所需的表和数据
+4. 刷新 dao 模块，运行
org.apache.dolphinscheduler.dao.upgrade.shell.CreateDolphinScheduler 的 main
方法，自动插入项目所需的表和数据
+
+5. 修改 service 模块 zookeeper.properties 中 quorum 配置
+ zookeeper.quorum=localhost:2181
+
+#### 启动项目
-5. 修改 service 模块 zookeeper.properties 中链接信息 (zookeeper.quorum)
- zookeeper.quorum=localhost:2181
+1. 启动 zookeeper
+ ./bin/zkServer.sh start
-6. 修改dolphinscheduler-ui模块的 .env 文件
+2. 启动 MasterServer，执行 org.apache.dolphinscheduler.server.master.MasterServer 的
main 方法，需要设置 VM Options:
```
-API_BASE = http://localhost:12345
-DEV_HOST = localhost
+-Dlogging.config=classpath:logback-master.xml -Ddruid.mysql.usePingMethod=false
```
-#### 启动项目
+3. 启动WorkerServer，执行org.apache.dolphinscheduler.server.worker.WorkerServer的
main方法，需要设置 VM Options:
-1. 启动 zookeeper
- ./bin/zkServer.sh start
-
-2. 启动 MasterServer，执行 org.apache.dolphinscheduler.server.master.MasterServer 的
main 方法,需要设置 VM Options:
-
- ```
- -Dlogging.config=classpath:logback-master.xml
-Ddruid.mysql.usePingMethod=false
- ```
-
-3.
启动WorkerServer，执行org.apache.dolphinscheduler.server.worker.WorkerServer的main方法,需要设置VM
Options:
-
- ```
- -Dlogging.config=classpath:logback-worker.xml
-Ddruid.mysql.usePingMethod=false
- ```
-
-4. 启动 ApiApplicationServer，执行
org.apache.dolphinscheduler.api.ApiApplicationServer 的 main 方法,需要设置 VM Options:
-
- ```
- -Dlogging.config=classpath:logback-api.xml
-Dspring.profiles.active=api
- ```
-
-5. ,这里暂时不启动其它模块，如果启动其它模块，那么去查询script/dolphinscheduler-daemon.sh文件,设置相应的VM
Options
-
- ```
- if [ "$command" = "api-server" ]; then
- LOG_FILE="-Dlogging.config=classpath:logback-api.xml
-Dspring.profiles.active=api"
- CLASS=org.apache.dolphinscheduler.api.ApiApplicationServer
- elif [ "$command" = "master-server" ]; then
- LOG_FILE="-Dlogging.config=classpath:logback-master.xml
-Ddruid.mysql.usePingMethod=false"
- CLASS=org.apache.dolphinscheduler.server.master.MasterServer
- elif [ "$command" = "worker-server" ]; then
- LOG_FILE="-Dlogging.config=classpath:logback-worker.xml
-Ddruid.mysql.usePingMethod=false"
- CLASS=org.apache.dolphinscheduler.server.worker.WorkerServer
- elif [ "$command" = "alert-server" ]; then
- LOG_FILE="-Dlogback.configurationFile=conf/logback-alert.xml"
- CLASS=org.apache.dolphinscheduler.alert.AlertServer
- elif [ "$command" = "logger-server" ]; then
- CLASS=org.apache.dolphinscheduler.server.log.LoggerServer
- else
- echo "Error: No command named \`$command' was found."
- exit 1
- fi
- ```
+```
+-Dlogging.config=classpath:logback-worker.xml -Ddruid.mysql.usePingMethod=false
+```
+
+4. 启动 ApiApplicationServer，执行
org.apache.dolphinscheduler.api.ApiApplicationServer 的 main 方法，需要设置 VM Options:
+
+```
+-Dlogging.config=classpath:logback-api.xml -Dspring.profiles.active=api
+```
+
+5. 这里暂时不启动其它模块，如果启动其它模块，那么去查询script/dolphinscheduler-daemon.sh文件，设置相应的 VM
Options
+
+```
+if [ "$command" = "api-server" ]; then
+ LOG_FILE="-Dlogging.config=classpath:logback-api.xml
-Dspring.profiles.active=api"
+ CLASS=org.apache.dolphinscheduler.api.ApiApplicationServer
+elif [ "$command" = "master-server" ]; then
+ LOG_FILE="-Dlogging.config=classpath:logback-master.xml
-Ddruid.mysql.usePingMethod=false"
+ CLASS=org.apache.dolphinscheduler.server.master.MasterServer
+elif [ "$command" = "worker-server" ]; then
+ LOG_FILE="-Dlogging.config=classpath:logback-worker.xml
-Ddruid.mysql.usePingMethod=false"
+ CLASS=org.apache.dolphinscheduler.server.worker.WorkerServer
+elif [ "$command" = "alert-server" ]; then
+ LOG_FILE="-Dlogback.configurationFile=conf/logback-alert.xml"
+ CLASS=org.apache.dolphinscheduler.alert.AlertServer
+elif [ "$command" = "logger-server" ]; then
+ CLASS=org.apache.dolphinscheduler.server.log.LoggerServer
+else
+ echo "Error: No command named '$command' was found."
+ exit 1
+fi
+```
6. 启动前端 ui 模块
- cd dolphinscheduler-ui 目录，执行 npm run start
+
+```bash
+cd dolphinscheduler-ui
+npm run start
+```
#### 访问项目
-1. 访问 http://localhost:12345/dolphinscheduler
- 输入管理员账户 admin，密码 dolphinscheduler123 进行登陆
+1. 访问 http://localhost:8888
+
+2. 登录管理员账号
+ 用户: admin
+ 密码: dolphinscheduler123
diff --git a/development/zh-cn/frontend-development.md
b/development/zh-cn/frontend-development.md
index 529da37..40a8d02 100644
--- a/development/zh-cn/frontend-development.md
+++ b/development/zh-cn/frontend-development.md
@@ -2,7 +2,7 @@
### 技术选型
```
-Vue mvvm框架
+Vue mvvm 框架
Es6 ECMAScript 6.0
@@ -15,42 +15,35 @@ Jsplumb 连线插件库
Lodash 高性能的 JavaScript 实用工具库
```
-
### 开发环境搭建
- #### Node安装
-Node包下载 (注意版本 8.9.4) `https://nodejs.org/download/release/v8.9.4/`
-
+Node包下载 (注意版本 v12.20.2) `https://nodejs.org/download/release/v12.20.2/`
- #### 前端项目构建
用命令行模式 `cd` 进入 `dolphinscheduler-ui`项目目录并执行 `npm install` 拉取项目依赖包
-> 如果 `npm install` 速度非常慢
-
-> 可以转淘宝镜像命令行输入 `npm install -g cnpm --registry=https://registry.npm.taobao.org`
-
-> 运行 `cnpm install`
+> 如果 `npm install` 速度非常慢，你可以设置淘宝镜像
+```
+npm config set registry http://registry.npm.taobao.org/
+```
-- 新建一个`.env`文件，用于跟后端交互的接口
+- 修改 `dolphinscheduler-ui/.env` 文件中的 `API_BASE`，用于跟后端交互：
-在`dolphinscheduler-ui`目录下新建一个`.env`文件，在文件里添加后端服务的ip地址和端口，用于跟后端交互，`.env`文件内容如下：
```
# 代理的接口地址（自行修改）
-API_BASE = http://192.168.xx.xx:12345
-
-# 如果您需要用ip访问项目可以把 "#" 号去掉（例）
-#DEV_HOST = 192.168.xx.xx
+API_BASE = http://127.0.0.1:12345
```
> ##### ！！！这里特别注意 项目如果在拉取依赖包的过程中报 " node-sass error " 错误，请在执行完后再次执行以下命令
-```
-npm install node-sass --unsafe-perm //单独安装node-sass依赖
+
+```bash
+npm install node-sass --unsafe-perm #单独安装node-sass依赖
```
- #### 开发环境运行
-- `npm start` 项目开发环境 (启动后访问地址 http://localhost:8888/#/)
-
+- `npm start` 项目开发环境 (启动后访问地址 http://localhost:8888)
#### 前端项目发布
@@ -60,9 +53,7 @@ npm install node-sass --unsafe-perm //单独安装node-sass依赖
再拷贝到服务器对应的目录下（前端服务静态页面存放目录）
-
-访问地址 `http://localhost:8888/#/`
-
+访问地址 `http://localhost:8888`
#### Linux下使用node启动并且守护进程
@@ -95,7 +86,6 @@ npm install node-sass --unsafe-perm //单独安装node-sass依赖
```
-
### 项目目录结构
`build` 打包及开发环境项目的一些webpack配置
@@ -145,7 +135,6 @@ npm install node-sass --unsafe-perm //单独安装node-sass依赖
`util` => 工具
-
### 系统功能模块
首页 => `http://localhost:8888/#/home`
@@ -180,7 +169,6 @@ npm install node-sass --unsafe-perm //单独安装node-sass依赖
用户中心 => `http://localhost:8888/#/user/account`
-
## 路由和状态管理
项目 `src/js/conf/home` 下分为
@@ -210,10 +198,8 @@ mutations => mapMutations =>
详情：https://vuex.vuejs.org/zh/guide/mutations.
state => mapState => 详情：https://vuex.vuejs.org/zh/guide/state.html
具体操作：https://vuex.vuejs.org/zh/
-
```
-
## 规范
## Vue规范
##### 1.组件名
@@ -244,6 +230,7 @@ export default {
##### 3.Prop
定义 Prop 的时候应该始终以驼峰格式（camelCase）命名，在父组件赋值的时候使用连接线（-）。
这里遵循每个语言的特性，因为在 HTML 标记中对大小写是不敏感的，使用连接线更加友好；而在 JavaScript 中更自然的是驼峰命名。
+
```
// Vue
props: {
@@ -367,7 +354,6 @@ v-for 应该避免与 v-if 在同一个元素（`例如：<li>`）上使用，
```
-
## JavaScript规范
##### 1.var / let / const
@@ -454,6 +440,7 @@ border: 1px solid #ccc;
##### 4.文档类型
应该总是使用 HTML5 标准。
+
```
<!DOCTYPE html>
```
@@ -468,7 +455,6 @@ border: 1px solid #ccc;
* */
```
-
## 接口
##### 所有的接口都以 Promise 形式返回
@@ -531,13 +517,12 @@ dag 相关接口 `src/js/conf/home/store/dag/actions.js`
用户中心 相关接口 `src/js/conf/home/store/user/actions.js`
-
-
## 扩展开发
##### 1.增加节点
(1) 先将节点的icon小图标放置`src/js/conf/home/pages/dag/img`文件夹内，注意
`toolbar_${后台定义的节点的英文名称 例如:SHELL}.png`
+
(2) 找到 `src/js/conf/home/pages/dag/_source/config.js` 里的 `tasksType` 对象，往里增加
```
'DEPENDENT': { // 后台定义节点类型英文名称用作key值
@@ -581,6 +566,7 @@ dag 相关接口 `src/js/conf/home/store/dag/actions.js`
(4) 节点组件内部所用到公共的组件都在`_source`下，`commcon.js`用与配置公共数据
##### 2.增加状态类型
+
(1) 找到 `src/js/conf/home/pages/dag/_source/config.js` 里的 `tasksState` 对象，往里增加
```
'WAITTING_DEPEND': { //后端定义状态类型 前端用作key值
diff --git a/site_config/development.js b/site_config/development.js
index 8c50b40..063bf1f 100644
--- a/site_config/development.js
+++ b/site_config/development.js
@@ -21,11 +21,7 @@ export default {
link: '/en-us/development/frontend-development.html',
},
{
- title: 'Dev Frontend Development',
- link: '/en-us/development/dev-frontend-development.html',
- },
- {
- title: 'plugin-development',
+ title: 'Plugin Development',
link: '/en-us/development/plugin-development.html',
},
],
@@ -55,10 +51,6 @@ export default {
link: '/zh-cn/development/frontend-development.html',
},
{
- title: 'dev前端开发',
- link: '/zh-cn/development/dev-frontend-development.html',
- },
- {
title: '插件开发',
link: '/zh-cn/development/plugin-development.html',
},
