資訊專欄INFORMATION COLUMN
摘要：頁面布局是流程操作欄，工具箱流程組件，繪圖區(qū)。關(guān)于這部分可以了解一下的流程拖拽方法，這里推薦大神張?chǎng)涡竦奈恼掠辛肆鞒痰哪K，當(dāng)然還需要線路的指向。
目前有很多公司都有工作流的產(chǎn)品。關(guān)于工作流的架構(gòu)大致都是將工作流制定一個(gè)規(guī)范、標(biāo)準(zhǔn)數(shù)據(jù)模板，后臺(tái)程序再解析這些數(shù)據(jù)模板。一些公司的工作流是數(shù)據(jù)庫(kù)配置的，其實(shí)推薦將工作流可視化，這樣就會(huì)節(jié)省人力和物力來讀懂這些數(shù)據(jù)。關(guān)于流程可視化必然想到了在頁面直接操作流程，如果想在頁面操作就需要將流程數(shù)據(jù)圖像化，通過操作圖像生成可以解析的數(shù)據(jù)格式。
目前前端技術(shù)已經(jīng)足夠先進(jìn)，我們完全無需再使用傳統(tǒng)的ES3、ES5去實(shí)現(xiàn)這個(gè)功能，強(qiáng)大的ES6（面向?qū)ο笏枷耄┖?jiǎn)化了曲折的路徑，讓只懂一點(diǎn)點(diǎn)JS的后端開發(fā)人員完全可以上手實(shí)現(xiàn)這一功能。
首先，需要配置nodejs環(huán)境，因?yàn)閺?qiáng)大的nodejs有能夠編譯ES6的組件babel。https://nodejs.org/en/
其次，需要?jiǎng)?chuàng)建一個(gè)工程，引入webpack打包工具，我們最終會(huì)將所有js文件打包成一個(gè)bundle.js的文件并壓縮混淆。https://webpack.github.io/
最后，我們需要引入編譯器babel。https://www.babeljs.cn/
環(huán)境搭好之后，我們開始工程的設(shè)計(jì)。
頁面布局是流程操作欄，工具箱（流程組件），繪圖區(qū)。我們通過操作工具欄的組件，在繪圖區(qū)繪制出流程的環(huán)節(jié)模塊，每個(gè)模塊都需要設(shè)置各種屬性，當(dāng)然，對(duì)于整個(gè)流程也需要屬性設(shè)置。
布局定下來之后，就該實(shí)現(xiàn)如何拖拽了。關(guān)于這部分可以了解一下H5的流程拖拽方法，這里推薦大神張?chǎng)涡竦奈恼耯ttp://www.zhangxinxu.com/wor...
有了流程的模塊，當(dāng)然還需要線路的指向。這里需要使用svg實(shí)現(xiàn)這個(gè)功能。我們需要在畫布區(qū)域放置一個(gè)svg的顯示區(qū)，當(dāng)拖拽工具的線條在這里生成svg的路徑path，然后將線條的兩端連接兩個(gè)環(huán)節(jié)模塊，這就需要通過改變path的路徑屬性來實(shí)現(xiàn)。具體svg的基礎(chǔ)知識(shí)可以參考大神阮一峰的文章http://www.ruanyifeng.com/blo...
現(xiàn)在就剩下按照自己的需求繼續(xù)完善具體功能了，看看我自己做的功能吧：
有問題的可以在加QQ交流群交流：1003516412
文章版權(quán)歸作者所有，未經(jīng)允許請(qǐng)勿轉(zhuǎn)載,若此文章存在違規(guī)行為，您可以聯(lián)系管理員刪除。
轉(zhuǎn)載請(qǐng)注明本文地址：http://systransis.cn/yun/103536.html
摘要：頁面布局是流程操作欄，工具箱流程組件，繪圖區(qū)。關(guān)于這部分可以了解一下的流程拖拽方法，這里推薦大神張?chǎng)涡竦奈恼掠辛肆鞒痰哪K，當(dāng)然還需要線路的指向。 目前有很多公司都有工作流的產(chǎn)品。關(guān)于工作流的架構(gòu)大致都是將工作流制定一個(gè)規(guī)范、標(biāo)準(zhǔn)數(shù)據(jù)模板，后臺(tái)程序再解析這些數(shù)據(jù)模板。一些公司的工作流是數(shù)據(jù)庫(kù)配置的，其實(shí)推薦將工作流可視化，這樣就會(huì)節(jié)省人力和物力來讀懂這些數(shù)據(jù)。關(guān)于流程可視化必然想到了在...
摘要：案例說明使用原生完成桌面操作級(jí)應(yīng)用，對(duì)于原生的掌握情況而言，是一個(gè)較為全面的綜合型案例。本次課從事件相關(guān)的功能入手，給大家?guī)碓敿?xì)的分享。 showImg(https://segmentfault.com/img/bVbh1qw); 案例說明：使用原生 JS 完成桌面操作級(jí)應(yīng)用，對(duì)于原生 JS 的掌握情況而言，是一個(gè)較為全面的綜合型案例。本次課從事件（event）相關(guān)的功能入手，給大家...
摘要：在拖拽旋轉(zhuǎn)圖片的實(shí)現(xiàn)中，最符合的就是上面這題的情況，接下來好好說明一下。經(jīng)過按計(jì)算機(jī)推導(dǎo)出來的結(jié)論，反三角函數(shù)計(jì)算出來的結(jié)果是弧度，而一直使用的角表示的其實(shí)是角的弧度。拖拽圍繞著圖片的中心旋轉(zhuǎn)，圖片中心作為公式中的原點(diǎn)設(shè)為點(diǎn)使用。 讓我們來看看以下這道題： 已知點(diǎn)A(x1,y1)和點(diǎn)B(x2,y2)，求兩點(diǎn)求與圓點(diǎn)O(x0,y0)的夾角θ的角度：∠θ=arctan[(y2-y0)/(x...
摘要：前言本文主要使用來實(shí)現(xiàn)前后端分離的認(rèn)證登陸和權(quán)限管理，適合和我一樣剛開始接觸前后端完全分離項(xiàng)目的同學(xué)，但是你必須自己搭建過前端項(xiàng)目和后端項(xiàng)目，本文主要是介紹他們之間的互通，如果不知道這么搭建前端項(xiàng)目的同學(xué)可以先找別的看一下。 前言 本文主要使用spring boot + shiro + vue來實(shí)現(xiàn)前后端分離的認(rèn)證登陸和權(quán)限管理，適合和我一樣剛開始接觸前后端完全分離項(xiàng)目的同學(xué)，但是你必...
閱讀 1421·2021-09-02 09:53
閱讀 2680·2021-07-29 13:50
閱讀 1727·2019-08-30 11:07
閱讀 1586·2019-08-30 11:00
閱讀 1464·2019-08-29 14:00
閱讀 1858·2019-08-29 12:52
閱讀 2578·2019-08-29 11:11
閱讀 3432·2019-08-26 12:23
