整合營(yíng)銷服務(wù)商
電腦端+手機(jī)端+微信端=數(shù)據(jù)同步管理
免費(fèi)咨詢熱線：
電腦端+手機(jī)端+微信端=數(shù)據(jù)同步管理
免費(fèi)咨詢熱線：
訊tmagic-editor是一個(gè)所見(jiàn)即所得的頁(yè)面可視化編輯器，實(shí)現(xiàn)零代碼/低代碼生成頁(yè)面，可以快速搭建可視化頁(yè)面生產(chǎn)平臺(tái)，讓非技術(shù)人員可以通過(guò)拖拽和配置，自助生成H5頁(yè)面、PC頁(yè)面、TV頁(yè)面，大大降低頁(yè)面生產(chǎn)成本。
以下是騰訊視頻會(huì)員業(yè)務(wù)基于tmagic-editor搭建的可視化頁(yè)面搭建平臺(tái)示意圖。tmagic-editor已經(jīng)用于騰訊視頻會(huì)員、愛(ài)玩游戲、云視聽(tīng)極光、騰訊會(huì)議等十幾個(gè)騰訊業(yè)務(wù)，每月生產(chǎn)和發(fā)布數(shù)百個(gè)頁(yè)面。
主要是指業(yè)務(wù)組件，比如圖片組件、抽獎(jiǎng)組件、登錄插件等。tmagic-editor本身并不提供業(yè)務(wù)組件，業(yè)務(wù)組件由使用tmagic-editor的業(yè)務(wù)，根據(jù)自己的業(yè)務(wù)需求去自行開(kāi)發(fā)。業(yè)務(wù)組件一次開(kāi)發(fā)，在多個(gè)頁(yè)面反復(fù)使用，業(yè)務(wù)組件應(yīng)該提供一些配置選項(xiàng)，保證靈活性，滿足不同頁(yè)面使用該組件時(shí)的定制需求。業(yè)務(wù)組件可以用不同的前端框架實(shí)現(xiàn)，如vue2、vue3、react。
這里指通過(guò)對(duì)組件的拖拽和配置，完成頁(yè)面編輯，主要由非技術(shù)人員完成。
這個(gè)環(huán)節(jié)在技術(shù)實(shí)現(xiàn)上，分為生成DSL、構(gòu)建、部署。生成DSL：編輯器和生成的頁(yè)面之間，通過(guò)DSL解耦。編輯器上配置頁(yè)面，得到的產(chǎn)物是一個(gè)序列化js對(duì)象的頁(yè)面描述文件，這個(gè)對(duì)象采用js schema描述，描述頁(yè)面的基本信息、包含的組件信息、以及組件間邏輯。構(gòu)建：構(gòu)建模塊基于runtime代碼，對(duì)組件進(jìn)行打包構(gòu)建，生成html、js、css文件。構(gòu)建環(huán)節(jié)使用的runtime可以根據(jù)業(yè)務(wù)的需要，選擇不同的前端框架實(shí)現(xiàn)，tmagic-editor默認(rèn)提供了vue2、vue3、react三種runtime。部署：將前面環(huán)節(jié)生成的html、js、css、js schema描述文件，部署到業(yè)務(wù)自己的服務(wù)器上。
如上圖所示，就是tmagic-editor可視化編輯器，tmagic-editor基于vue3實(shí)現(xiàn)。包括左側(cè)側(cè)邊欄、組件列表展示、已選組件的組件樹(shù)、中間的頁(yè)面拖拽的畫布區(qū)域（也叫模擬器）、右側(cè)表單配置區(qū)域、正中間上方的畫布控制區(qū)域（放大縮小、網(wǎng)格線顯隱）、預(yù)覽、保存、查看源碼（js schema描述的js對(duì)象）、底部區(qū)域的頁(yè)面添加與刪除。編輯器具有擴(kuò)展功能，業(yè)務(wù)可以根據(jù)需要在側(cè)邊欄和頂部欄增加版本管理、發(fā)布等功能。
runtime 的概念，是理解tmagic-editor頁(yè)面運(yùn)行的重要概念，runtime 是承載tmagic-editor頁(yè)面的運(yùn)行環(huán)境。可視化頁(yè)面需要在tmagic-editor編輯器中搭建、渲染，通過(guò)模擬器所見(jiàn)即所得。搭建完成后，保存配置并發(fā)布，然后渲染成用戶訪問(wèn)的真實(shí)頁(yè)面。其中涉及到兩個(gè)不同的 runtime：編輯器中的模擬器，終端打開(kāi)真實(shí)頁(yè)面。
由于tmagic-editor在編輯器中的模擬器是通過(guò) iframe 渲染的，和tmagic-editor平臺(tái)本身可以做到框架解耦，所以 runtime 也可以用不同框架開(kāi)發(fā)。目前tmagic-editor提供了 vue2/vue3 和 react 的 runtime 。
各個(gè) runtime 的作用除了作為不同場(chǎng)景下的渲染環(huán)境，同時(shí)也是不同環(huán)境的打包構(gòu)建載體。tmagic-editor示例代碼中的打包就是基于 runtime 進(jìn)行的。
編輯器可以對(duì)一個(gè)頁(yè)面進(jìn)行編輯、配置、發(fā)布，我們還需要一個(gè)管理端來(lái)對(duì)頁(yè)面列表進(jìn)行管理。我們提供了一個(gè)管理端demo，方便業(yè)務(wù)快速搭建起一個(gè)完整的可視化搭建平臺(tái)。管理端提供了如下能力：
tmagic-editor并不提供業(yè)務(wù)組件，業(yè)務(wù)需要根據(jù)自己的業(yè)務(wù)場(chǎng)景，開(kāi)發(fā)相應(yīng)的業(yè)務(wù)組件。比如抽獎(jiǎng)組件、視頻播放組件等。tmagic-editor的通用性設(shè)計(jì)，使得業(yè)務(wù)方可以使用不同的前端框架去開(kāi)發(fā)組件。tmagic-editor官方已經(jīng)提供了vue2/vue3、react的runtime，意味著業(yè)務(wù)可以直接使用這些框架開(kāi)發(fā)組件，如果業(yè)務(wù)想用其它框架開(kāi)發(fā)組件，則需要開(kāi)發(fā)相應(yīng)的runtime。
插件的功能是作為頁(yè)面邏輯行為的一種補(bǔ)充方式。一般不顯式的在模擬器中被渲染出具體內(nèi)容（除非插件中會(huì)生成組件并插入頁(yè)面），通常我們會(huì)用插件實(shí)現(xiàn)類似登錄，頁(yè)面環(huán)境判斷，請(qǐng)求攔截器等功能。跟組件一樣，可以用不同前端框架實(shí)現(xiàn)。
tmagic-editor提供的是開(kāi)源代碼，并不是一個(gè)saas服務(wù)，因此業(yè)務(wù)需要自己部署可視化搭建平臺(tái)的服務(wù)。
業(yè)務(wù)需要管理自己的組件庫(kù)，在發(fā)布環(huán)節(jié)基于拿到的頁(yè)面js Schema描述文件，基于runtime進(jìn)行打包構(gòu)建，并把打包構(gòu)建的產(chǎn)物部署到自己的服務(wù)器/CDN。
如果對(duì)編輯器有一些擴(kuò)展需求，編輯器已經(jīng)預(yù)留了相應(yīng)的擴(kuò)展能力，業(yè)務(wù)可以開(kāi)發(fā)相應(yīng)擴(kuò)展功能。tmagic-editor提供了vue2/vue3、react的runtime，業(yè)務(wù)可以修改runtime，或者開(kāi)發(fā)其它前端框架的runtime。
開(kāi)源地址：github.com/Tencent/tmagic-editor
在線文檔：tencent.github.io/tmagic-editor/docs/
在線體驗(yàn)：tencent.github.io/tmagic-editor/playground/index.html
asys(OA自動(dòng)化辦公系統(tǒng))
辦公自動(dòng)化（OA）是面向組織的日常運(yùn)作和管理，員工及管理者使用頻率最高的應(yīng)用系統(tǒng)，極大提高公司的辦公效率。
1.項(xiàng)目介紹
oasys是一個(gè)OA辦公自動(dòng)化系統(tǒng)，使用Maven進(jìn)行項(xiàng)目管理，基于springboot框架開(kāi)發(fā)的項(xiàng)目，mysql底層數(shù)據(jù)庫(kù)，前端采用freemarker模板引擎，Bootstrap作為前端UI框架，集成了jpa、mybatis等框架。作為初學(xué)springboot的同學(xué)是一個(gè)很不錯(cuò)的項(xiàng)目，如果想在此基礎(chǔ)上面進(jìn)行OA的增強(qiáng)，也是一個(gè)不錯(cuò)的方案。
2.框架介紹
前端
技術(shù) 名稱 版本 官網(wǎng) freemarker 模板引擎 springboot1.5.6.RELEASE集成版本 https://freemarker.apache.org/ Bootstrap 前端UI框架 3.3.7 http://www.bootcss.com/ Jquery 快速的JavaScript框架 1.11.3 https://jquery.com/ kindeditor HTML可視化編輯器 4.1.10 http://kindeditor.net My97 DatePicker 時(shí)間選擇器 4.8 Beta4 http://www.my97.net/ 后端
技術(shù) 名稱 版本 官網(wǎng) SpringBoot SpringBoot框架 1.5.6.RELEASE https://spring.io/projects/spring-boot JPA spring-data-jpa 1.5.6.RELEASE https://projects.spring.io/spring-data-jpa Mybatis Mybatis框架 1.3.0 http://www.mybatis.org/mybatis-3 fastjson json解析包 1.2.36 https://github.com/alibaba/fastjson pagehelper Mybatis分頁(yè)插件 1.0.0 https://pagehelper.github.io 3.部署流程
1.下載項(xiàng)目、把oasys.sql(原tr18lx.sql)導(dǎo)入本地?cái)?shù)據(jù)庫(kù) 2. 修改application.properties， 3. 修改數(shù)據(jù)源，oasys——>自己本地的庫(kù)名，用戶名和密碼修改成自己的 4. 修改相關(guān)路徑，配置圖片路徑、文件路徑、附件路徑 5. OasysApplication.java中的main方法運(yùn)行，控制臺(tái)沒(méi)有報(bào)錯(cuò)信息，數(shù)據(jù)啟動(dòng)時(shí)間多久即運(yùn)行成功 6. 在瀏覽器中輸入localhost:8088/logins
開(kāi)源地址：https://gitee.com/aaluoxiang/oa_system
筆者之前花了大量的時(shí)間在思考如何設(shè)計(jì)和實(shí)現(xiàn)H5頁(yè)面可視化編輯器H5-Dooring，從第一個(gè)版本到現(xiàn)在經(jīng)歷了很多次版本迭代和優(yōu)化，也收到了很多寶貴的建議，目前剛好完成了移動(dòng)端數(shù)據(jù)可視化的基本設(shè)計(jì)和落地方案，在這里特地總結(jié)和復(fù)盤一下。
我們先來(lái)看看實(shí)現(xiàn)的基本預(yù)覽圖：
在開(kāi)始正式實(shí)現(xiàn)之前筆者先對(duì)H5數(shù)據(jù)可視化做一個(gè)基本的介紹，方便大家理解其價(jià)值。
隨著人工智能和大數(shù)據(jù)的快速發(fā)展，數(shù)據(jù)可視化設(shè)計(jì)在移動(dòng)端的應(yīng)用越來(lái)越多，主要體現(xiàn)在數(shù)據(jù)圖表，也就是我們常見(jiàn)的柱狀圖，折線圖，條形圖，雷達(dá)圖等。它們能很形象地展示不同產(chǎn)品或者某類特征的變化趨勢(shì)，從而為我們決策提供依據(jù)。比如說(shuō)我們常見(jiàn)的性格測(cè)試?yán)走_(dá)圖，各類金融app比較愛(ài)玩的某某g票的趨勢(shì)預(yù)測(cè)折線圖，運(yùn)營(yíng)人比較喜歡用的漏斗模型等，幾乎任何領(lǐng)域都有自己的可視化應(yīng)用。如下圖幾個(gè)例子：
所以為了滿足企業(yè)對(duì)移動(dòng)端場(chǎng)景下的可視化需求，能設(shè)計(jì)一款針對(duì)移動(dòng)端的傻瓜式可視化搭建平臺(tái)是非常有實(shí)際意義的，目前也有很多公司在做，在商業(yè)智能領(lǐng)域也有不錯(cuò)的應(yīng)用。接下來(lái)筆者就來(lái)帶大家一起實(shí)現(xiàn)一個(gè)這樣的H5數(shù)據(jù)可視化搭建平臺(tái)。
目前市面上已有的比較流行的可視化庫(kù)有echart，antv，D3.js等，針對(duì)于移動(dòng)端而言，筆者還是覺(jué)得antv/f2更加適合，其官網(wǎng)介紹如下：
F2 是一個(gè)專注于移動(dòng)，開(kāi)箱即用的可視化解決方案，完美支持 H5 環(huán)境同時(shí)兼容多種環(huán)境（Node, 小程序，Weex），完備的圖形語(yǔ)法理論，滿足你的各種可視化需求，專業(yè)的移動(dòng)設(shè)計(jì)指引為你帶來(lái)最佳的移動(dòng)端圖表體驗(yàn)。
我們就暫且相信它官網(wǎng)的描述，接下來(lái)的技術(shù)實(shí)現(xiàn)筆者也會(huì)基于f2做可視化組件的二次封裝。
【限時(shí)免費(fèi)】AI大廠面試核心考點(diǎn)，六大方向一網(wǎng)打盡
已失效
筆者在開(kāi)發(fā)產(chǎn)品之前的一貫風(fēng)格就是先要理清需求，只有在需求確定之后我們才能做更加合適的技術(shù)選型和方案，所以筆者在此帶大家分析一下移動(dòng)端可視化編輯器的需求設(shè)計(jì)。
上圖為一個(gè)可視化組件編輯器的基本模型，組成結(jié)構(gòu)大致為： 圖表組件 數(shù)據(jù)源 * 屬性編輯器（組件標(biāo)題，顏色，對(duì)齊等屬性）
所以說(shuō)我們大致可以抽象為如下原型：
組件列表為我們提供選擇不同組件的能力，畫布區(qū)域主要用來(lái)拖拽圖形和調(diào)整圖形位置，大小，編輯器用來(lái)定制圖形的“形狀”和數(shù)據(jù)源導(dǎo)入。在了解基本的需求之后我們來(lái)進(jìn)行接下來(lái)的開(kāi)發(fā)工作。
由于市場(chǎng)上暫時(shí)沒(méi)有比較成熟的基于f2的react組件等封裝， 所以這里筆者對(duì)其做一個(gè)簡(jiǎn)單的二次封裝來(lái)實(shí)現(xiàn)我們的組件定制的需求。對(duì)于組件列表，為了提高加載性能，筆者用圖片占位符代替。數(shù)據(jù)傳遞方式和H5-Dooring已有組件的拖拽一致,這里就不一一介紹了。
在開(kāi)發(fā)組件之前我們先安裝一下f2:
yarn add antv/f2為了進(jìn)一步降低移動(dòng)端代碼體積和提高加載性能，我們?cè)谝虢M件時(shí)可以按需引入：
// 引入核心包
const Core = require('@antv/f2/lib/core');
require('@antv/f2/lib/geom/line'); // 只加載折線圖
require('@antv/f2/lib/geom/area'); // 只加載面積圖
按需引入的方式官網(wǎng)上有詳細(xì)的說(shuō)明，感興趣的可以學(xué)習(xí)了解一下。
在上面的需求分析中我們大致了解了可視化組件需要設(shè)置的屬性，這里我們先整理一下以便接下來(lái)對(duì)可視化組件的封裝：
我們來(lái)看看Chart組件的實(shí)現(xiàn)：
// components/Chart
import { Chart } from '@antv/f2';
import React, { memo, PropsWithChildren, useEffect, useRef } from 'react';
import ChartImg from '@/assets/chart.png';
import styles from './index.less';
type DataItem = {
name: string;
value: number;
};
interface XChartProps {
isTpl: boolean;
title: string;
color: string;
size: number;
paddingTop: number;
data: Array<DataItem>;
}
const XChart = (props: PropsWithChildren<XChartProps>) => {
const { isTpl, data, color, size, paddingTop, title } = props;
const chartRef = useRef(null);
useEffect(() => {
if (!isTpl) {
const chart = new Chart({
el: chartRef.current || undefined,
pixelRatio: window.devicePixelRatio, // 指定分辨率
});
// step 2: 處理數(shù)據(jù)
const dataX = data.map(item => ({ ...item, value: Number(item.value) }));
// Step 2: 載入數(shù)據(jù)源
chart.source(dataX);
// Step 3：創(chuàng)建圖形語(yǔ)法，繪制柱狀圖，由 genre 和 sold 兩個(gè)屬性決定圖形位置，genre 映射至 x 軸，sold 映射至 y 軸
chart
.interval()
.position('name*value')
.color('name');
// Step 4: 渲染圖表
chart.render();
}
}, []);
return (
<div className={styles.chartWrap}>
<div className={styles.chartTitle} style={{ color, fontSize: size, paddingTop }}>
{title}
</div>
{isTpl ? <img src={ChartImg} alt="dooring chart" /> : <canvas ref={chartRef}></canvas>}
</div>
);
};
export default memo(XChart);以上Chart組件就基本封裝完畢，如果有更多定制化需求，也可以自行添加。代碼中我們采用typescript和React Hooks開(kāi)發(fā)，為了對(duì)組件進(jìn)行做優(yōu)化，我們用了memo，如果對(duì)這些技術(shù)點(diǎn)不熟悉的，稍后可以移步我的react hooks和typescript相關(guān)的文章學(xué)習(xí)。
以上只是完成了基本的可視化組件的封裝，接下來(lái)的重點(diǎn)是實(shí)現(xiàn)可視化組件和表單編輯器之間的聯(lián)動(dòng)。
表格編輯器的實(shí)現(xiàn)我們主要基于antd的Table組件來(lái)實(shí)現(xiàn)，當(dāng)我們點(diǎn)擊數(shù)據(jù)源的時(shí)候，會(huì)彈出表格編輯器，我們先來(lái)看看效果：
我們可以直接對(duì)數(shù)據(jù)源進(jìn)行編輯，比如修改數(shù)據(jù)，刪除數(shù)據(jù)，添加數(shù)據(jù)，也即是CURD的那套流程。并且支持導(dǎo)入excel數(shù)據(jù)，這塊筆者將在下一章節(jié)來(lái)實(shí)現(xiàn)。
可編輯表格實(shí)現(xiàn)原理就是在表格中加入狀態(tài)，分為查看模式和編輯模式，編輯模式采用input框，在失焦時(shí)進(jìn)行保存/切換查看狀態(tài)。添加行的邏輯主要是動(dòng)態(tài)插入一條數(shù)據(jù)，這塊實(shí)現(xiàn)也比較簡(jiǎn)單，具體實(shí)現(xiàn)感興趣的朋友可參考我的源碼。
部分代碼參考如下：
// 添加行
handleAdd = () => {
const { count, dataSource } = this.state;
const newData = {
key: count,
name: `dooring ${count}`,
value: 32,
};
const newDataSource = [...dataSource, newData];
this.setState({
dataSource: newDataSource,
count: count + 1,
});
this.props.onChange && this.props.onChange(newDataSource);
};
// 保存行數(shù)據(jù)
handleSave = row => {
const newData = [...this.state.dataSource];
const index = newData.findIndex(item => row.key === item.key);
const item = newData[index];
newData.splice(index, 1, {
...item,
...row,
});
this.setState({ dataSource: newData });
this.props.onChange && this.props.onChange(newData);
};
上面代碼的this.props.onChange主要是為了antd的Form能接受到變化，使Table Editor成為Form的“受控組件”。
對(duì)于上面介紹的數(shù)據(jù)源錄入，我們有兩種模式：手動(dòng)錄入和文件導(dǎo)入。設(shè)計(jì)文件導(dǎo)入主要是為了更好的用戶體驗(yàn)，這里為了實(shí)現(xiàn)該功能我們可以采用社區(qū)比較火的js-xlsx，一款專業(yè)的解析excel數(shù)據(jù)的插件，而且可以輸出多種數(shù)據(jù)類型。
我們先來(lái)安裝一下：
npm install xlsx
讀取excel文件數(shù)據(jù)代碼如下：
// 讀取本地excel文件
function readLocalFile(file, callback) {
let reader = new FileReader();
reader.onload = function(e) {
let data = e.target.result;
let formData = XLSX.read(data, {type: 'binary'});
if(callback) callback(formData);
};
reader.readAsBinaryString(file);
}
有了以上代碼，我們只需要在導(dǎo)入excel的按鈕上綁定事件并解析數(shù)據(jù)即可實(shí)現(xiàn)導(dǎo)入功能。大家可以嘗試一下。
以上就基本實(shí)現(xiàn)了我們的整個(gè)體系設(shè)計(jì)，后面的雷達(dá)圖，折線圖等實(shí)現(xiàn)原理也類似。我們看看用H5-Dooring配置出的幾個(gè)案例：
當(dāng)然大家也可以在H5-Dooring定制自己的H5數(shù)據(jù)可視化面板。
以上教程筆者已經(jīng)集成到H5-Dooring中，對(duì)于一些更復(fù)雜的交互功能，通過(guò)合理的設(shè)計(jì)也是可以實(shí)現(xiàn)的，大家可以自行探索研究。
github搜索：H5在線編輯器H5-Dooring
如果想學(xué)習(xí)更多H5游戲, webpack，node，gulp，css3，javascript，nodeJS，canvas數(shù)據(jù)可視化等前端知識(shí)和實(shí)戰(zhàn)，歡迎在《趣談前端》一起學(xué)習(xí)討論，共同探索前端的邊界。
*請(qǐng)認(rèn)真填寫需求信息，我們會(huì)在24小時(shí)內(nèi)與您取得聯(lián)系。
