整合營銷服務商
電腦端+手機端+微信端=數據同步管理
免費咨詢熱線：
電腦端+手機端+微信端=數據同步管理
免費咨詢熱線：
訊tmagic-editor是一個所見即所得的頁面可視化編輯器，實現零代碼/低代碼生成頁面，可以快速搭建可視化頁面生產平臺，讓非技術人員可以通過拖拽和配置，自助生成H5頁面、PC頁面、TV頁面，大大降低頁面生產成本。
以下是騰訊視頻會員業務基于tmagic-editor搭建的可視化頁面搭建平臺示意圖。tmagic-editor已經用于騰訊視頻會員、愛玩游戲、云視聽極光、騰訊會議等十幾個騰訊業務，每月生產和發布數百個頁面。
主要是指業務組件，比如圖片組件、抽獎組件、登錄插件等。tmagic-editor本身并不提供業務組件，業務組件由使用tmagic-editor的業務，根據自己的業務需求去自行開發。業務組件一次開發，在多個頁面反復使用，業務組件應該提供一些配置選項，保證靈活性，滿足不同頁面使用該組件時的定制需求。業務組件可以用不同的前端框架實現，如vue2、vue3、react。
這里指通過對組件的拖拽和配置，完成頁面編輯，主要由非技術人員完成。
這個環節在技術實現上，分為生成DSL、構建、部署。生成DSL：編輯器和生成的頁面之間，通過DSL解耦。編輯器上配置頁面，得到的產物是一個序列化js對象的頁面描述文件，這個對象采用js schema描述，描述頁面的基本信息、包含的組件信息、以及組件間邏輯。構建：構建模塊基于runtime代碼，對組件進行打包構建，生成html、js、css文件。構建環節使用的runtime可以根據業務的需要，選擇不同的前端框架實現，tmagic-editor默認提供了vue2、vue3、react三種runtime。部署：將前面環節生成的html、js、css、js schema描述文件，部署到業務自己的服務器上。
如上圖所示，就是tmagic-editor可視化編輯器，tmagic-editor基于vue3實現。包括左側側邊欄、組件列表展示、已選組件的組件樹、中間的頁面拖拽的畫布區域（也叫模擬器）、右側表單配置區域、正中間上方的畫布控制區域（放大縮小、網格線顯隱）、預覽、保存、查看源碼（js schema描述的js對象）、底部區域的頁面添加與刪除。編輯器具有擴展功能，業務可以根據需要在側邊欄和頂部欄增加版本管理、發布等功能。
runtime 的概念，是理解tmagic-editor頁面運行的重要概念，runtime 是承載tmagic-editor頁面的運行環境。可視化頁面需要在tmagic-editor編輯器中搭建、渲染，通過模擬器所見即所得。搭建完成后，保存配置并發布，然后渲染成用戶訪問的真實頁面。其中涉及到兩個不同的 runtime：編輯器中的模擬器，終端打開真實頁面。
由于tmagic-editor在編輯器中的模擬器是通過 iframe 渲染的，和tmagic-editor平臺本身可以做到框架解耦，所以 runtime 也可以用不同框架開發。目前tmagic-editor提供了 vue2/vue3 和 react 的 runtime 。
各個 runtime 的作用除了作為不同場景下的渲染環境，同時也是不同環境的打包構建載體。tmagic-editor示例代碼中的打包就是基于 runtime 進行的。
編輯器可以對一個頁面進行編輯、配置、發布，我們還需要一個管理端來對頁面列表進行管理。我們提供了一個管理端demo，方便業務快速搭建起一個完整的可視化搭建平臺。管理端提供了如下能力：
tmagic-editor并不提供業務組件，業務需要根據自己的業務場景，開發相應的業務組件。比如抽獎組件、視頻播放組件等。tmagic-editor的通用性設計，使得業務方可以使用不同的前端框架去開發組件。tmagic-editor官方已經提供了vue2/vue3、react的runtime，意味著業務可以直接使用這些框架開發組件，如果業務想用其它框架開發組件，則需要開發相應的runtime。
插件的功能是作為頁面邏輯行為的一種補充方式。一般不顯式的在模擬器中被渲染出具體內容（除非插件中會生成組件并插入頁面），通常我們會用插件實現類似登錄，頁面環境判斷，請求攔截器等功能。跟組件一樣，可以用不同前端框架實現。
tmagic-editor提供的是開源代碼，并不是一個saas服務，因此業務需要自己部署可視化搭建平臺的服務。
業務需要管理自己的組件庫，在發布環節基于拿到的頁面js Schema描述文件，基于runtime進行打包構建，并把打包構建的產物部署到自己的服務器/CDN。
如果對編輯器有一些擴展需求，編輯器已經預留了相應的擴展能力，業務可以開發相應擴展功能。tmagic-editor提供了vue2/vue3、react的runtime，業務可以修改runtime，或者開發其它前端框架的runtime。
開源地址：github.com/Tencent/tmagic-editor
在線文檔：tencent.github.io/tmagic-editor/docs/
在線體驗：tencent.github.io/tmagic-editor/playground/index.html
asys(OA自動化辦公系統)
辦公自動化（OA）是面向組織的日常運作和管理，員工及管理者使用頻率最高的應用系統，極大提高公司的辦公效率。
1.項目介紹
oasys是一個OA辦公自動化系統，使用Maven進行項目管理，基于springboot框架開發的項目，mysql底層數據庫，前端采用freemarker模板引擎，Bootstrap作為前端UI框架，集成了jpa、mybatis等框架。作為初學springboot的同學是一個很不錯的項目，如果想在此基礎上面進行OA的增強，也是一個不錯的方案。
2.框架介紹
前端
技術 名稱 版本 官網 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 時間選擇器 4.8 Beta4 http://www.my97.net/ 后端
技術 名稱 版本 官網 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分頁插件 1.0.0 https://pagehelper.github.io 3.部署流程
1.下載項目、把oasys.sql(原tr18lx.sql)導入本地數據庫 2. 修改application.properties， 3. 修改數據源，oasys——>自己本地的庫名，用戶名和密碼修改成自己的 4. 修改相關路徑，配置圖片路徑、文件路徑、附件路徑 5. OasysApplication.java中的main方法運行，控制臺沒有報錯信息，數據啟動時間多久即運行成功 6. 在瀏覽器中輸入localhost:8088/logins
開源地址：https://gitee.com/aaluoxiang/oa_system
筆者之前花了大量的時間在思考如何設計和實現H5頁面可視化編輯器H5-Dooring，從第一個版本到現在經歷了很多次版本迭代和優化，也收到了很多寶貴的建議，目前剛好完成了移動端數據可視化的基本設計和落地方案，在這里特地總結和復盤一下。
我們先來看看實現的基本預覽圖：
在開始正式實現之前筆者先對H5數據可視化做一個基本的介紹，方便大家理解其價值。
隨著人工智能和大數據的快速發展，數據可視化設計在移動端的應用越來越多，主要體現在數據圖表，也就是我們常見的柱狀圖，折線圖，條形圖，雷達圖等。它們能很形象地展示不同產品或者某類特征的變化趨勢，從而為我們決策提供依據。比如說我們常見的性格測試雷達圖，各類金融app比較愛玩的某某g票的趨勢預測折線圖，運營人比較喜歡用的漏斗模型等，幾乎任何領域都有自己的可視化應用。如下圖幾個例子：
所以為了滿足企業對移動端場景下的可視化需求，能設計一款針對移動端的傻瓜式可視化搭建平臺是非常有實際意義的，目前也有很多公司在做，在商業智能領域也有不錯的應用。接下來筆者就來帶大家一起實現一個這樣的H5數據可視化搭建平臺。
目前市面上已有的比較流行的可視化庫有echart，antv，D3.js等，針對于移動端而言，筆者還是覺得antv/f2更加適合，其官網介紹如下：
F2 是一個專注于移動，開箱即用的可視化解決方案，完美支持 H5 環境同時兼容多種環境（Node, 小程序，Weex），完備的圖形語法理論，滿足你的各種可視化需求，專業的移動設計指引為你帶來最佳的移動端圖表體驗。
我們就暫且相信它官網的描述，接下來的技術實現筆者也會基于f2做可視化組件的二次封裝。
【限時免費】AI大廠面試核心考點，六大方向一網打盡
已失效
筆者在開發產品之前的一貫風格就是先要理清需求，只有在需求確定之后我們才能做更加合適的技術選型和方案，所以筆者在此帶大家分析一下移動端可視化編輯器的需求設計。
上圖為一個可視化組件編輯器的基本模型，組成結構大致為： 圖表組件 數據源 * 屬性編輯器（組件標題，顏色，對齊等屬性）
所以說我們大致可以抽象為如下原型：
組件列表為我們提供選擇不同組件的能力，畫布區域主要用來拖拽圖形和調整圖形位置，大小，編輯器用來定制圖形的“形狀”和數據源導入。在了解基本的需求之后我們來進行接下來的開發工作。
由于市場上暫時沒有比較成熟的基于f2的react組件等封裝， 所以這里筆者對其做一個簡單的二次封裝來實現我們的組件定制的需求。對于組件列表，為了提高加載性能，筆者用圖片占位符代替。數據傳遞方式和H5-Dooring已有組件的拖拽一致,這里就不一一介紹了。
在開發組件之前我們先安裝一下f2:
yarn add antv/f2為了進一步降低移動端代碼體積和提高加載性能，我們在引入組件時可以按需引入：
// 引入核心包
const Core = require('@antv/f2/lib/core');
require('@antv/f2/lib/geom/line'); // 只加載折線圖
require('@antv/f2/lib/geom/area'); // 只加載面積圖
按需引入的方式官網上有詳細的說明，感興趣的可以學習了解一下。
在上面的需求分析中我們大致了解了可視化組件需要設置的屬性，這里我們先整理一下以便接下來對可視化組件的封裝：
我們來看看Chart組件的實現：
// 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: 處理數據
const dataX = data.map(item => ({ ...item, value: Number(item.value) }));
// Step 2: 載入數據源
chart.source(dataX);
// Step 3：創建圖形語法，繪制柱狀圖，由 genre 和 sold 兩個屬性決定圖形位置，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開發，為了對組件進行做優化，我們用了memo，如果對這些技術點不熟悉的，稍后可以移步我的react hooks和typescript相關的文章學習。
以上只是完成了基本的可視化組件的封裝，接下來的重點是實現可視化組件和表單編輯器之間的聯動。
表格編輯器的實現我們主要基于antd的Table組件來實現，當我們點擊數據源的時候，會彈出表格編輯器，我們先來看看效果：
我們可以直接對數據源進行編輯，比如修改數據，刪除數據，添加數據，也即是CURD的那套流程。并且支持導入excel數據，這塊筆者將在下一章節來實現。
可編輯表格實現原理就是在表格中加入狀態，分為查看模式和編輯模式，編輯模式采用input框，在失焦時進行保存/切換查看狀態。添加行的邏輯主要是動態插入一條數據，這塊實現也比較簡單，具體實現感興趣的朋友可參考我的源碼。
部分代碼參考如下：
// 添加行
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);
};
// 保存行數據
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的“受控組件”。
對于上面介紹的數據源錄入，我們有兩種模式：手動錄入和文件導入。設計文件導入主要是為了更好的用戶體驗，這里為了實現該功能我們可以采用社區比較火的js-xlsx，一款專業的解析excel數據的插件，而且可以輸出多種數據類型。
我們先來安裝一下：
npm install xlsx
讀取excel文件數據代碼如下：
// 讀取本地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);
}
有了以上代碼，我們只需要在導入excel的按鈕上綁定事件并解析數據即可實現導入功能。大家可以嘗試一下。
以上就基本實現了我們的整個體系設計，后面的雷達圖，折線圖等實現原理也類似。我們看看用H5-Dooring配置出的幾個案例：
當然大家也可以在H5-Dooring定制自己的H5數據可視化面板。
以上教程筆者已經集成到H5-Dooring中，對于一些更復雜的交互功能，通過合理的設計也是可以實現的，大家可以自行探索研究。
github搜索：H5在線編輯器H5-Dooring
如果想學習更多H5游戲, webpack，node，gulp，css3，javascript，nodeJS，canvas數據可視化等前端知識和實戰，歡迎在《趣談前端》一起學習討論，共同探索前端的邊界。
*請認真填寫需求信息，我們會在24小時內與您取得聯系。
