王者荣耀妲己全衣去除贴吧
您的位置:首頁>>電腦軟件

SpreadJS與Vue集成,蘇寧集團『極客辦公』系統開發案例

發布時間:2019-09-05 18:36:00  來源:互聯網    背景:

  “造極”如今已成為蘇寧集團的年度核心關鍵詞。“造極”在具體工作上的體現,代表著蘇寧不斷追求極致的工匠精神,即對待每一個環節,都要嚴格要求、精益求精。“極客辦公”系統,正是在這種環境下應運而生。

  本期公開課,葡萄城特邀蘇寧易購系統架構師——候健,為我們深入講解:如何在Vue腳手架工程中,整合SpreadJS純前端表格控件與在線表格編輯器源碼,實現Web版全功能Excel的具體實踐。

· 點此查看視頻回放:https://www.grapecity.com.cn/support/webinars

  蘇寧易購集團股份有限公司(簡稱“蘇寧易購”)成立于1990年,是中國領先的O2O智慧零售商。面對互聯網、物聯網、大數據時代,蘇寧易購持續推進智慧零售和線上線下融合戰略,主打全品類經營、全渠道運營、全球化拓展,開放物流云、數據云和金融云,通過門店端、PC端、移動端和家庭端的四端協同,為用戶帶來無處不在的一站式服務體驗。

  蘇寧易購采購 SpreadJS 純前端表格控件,主要是為其構建基于Web 端 + Vue 集成的Excel數據管理系統,即“極客辦公平臺”,該系統用于收集集團內部信息數據,代替常用的 excel表格,通過在線填報的方式匯總、審批、合并數據,以達到實時管控、協同辦公的目的。

  了解更多關于 SpreadJS 純前端表格控件:https://www.grapecity.com.cn/developer/spreadjs

  蘇寧易購“極客辦公平臺”簡介

  “極客辦公平臺”是蘇寧易購全新的內部管理系統,該系統使用SpreadJS完成了Web端Excel 數據交互、在線Excel功能開發以及數據填報模塊等功能。

  在采購SpreadJS 之前,公司管理內部信息的辦法是:在Excel上安裝插件,通過插件與數據庫通信,實現數據權限管控,這樣做非常的低效且混亂。而新的極客辦公平臺提供了更加靈活的管理方式和更為親切的辦公體驗。

  為保證新老系統順利過渡,需要完成大量的Excel數據遷移工作,因此,新老系統對Excel文件的兼容性至關重要。借助SpreadJS 純前端無損導入導出Excel這一產品特性,極客辦公平臺得以順利完成交付并迅速投入使用。

  1.極客辦公平臺現階段的主要使用場景為人事信息錄入管理,分為管理端和填報端兩大模塊。

  2.管理端負責設計填報模板,如字段名稱、數據類型、必填項等。填報端主要負責用戶填報的權限管控。

  3.系統前端生成的Excel模板文件會通過json傳遞至后端解析處理,系統根據模板信息生成數據庫Table并保存。

  開發環境介紹

  1. 前端框架:Vue、webpack、vue-cli

  2. 表格插件:SpreadJS V12、在線表格編輯器

  在開發階段最好引用未壓縮的SpreadJS組件代碼庫(上圖標紅的代碼文件),這樣可以方便調試。

  使用腳手架搭建標準 Vue 工程

  創建Vue腳手架工程命令:

  項目目錄結構如下:

  前端展示界面如下:

  點擊【表格頁面】,此時呈現的效果如下圖(因為目前為止,我們還沒有集成SpreadJS的插件和在線表格編輯器,因此該區域顯示為一塊灰色的DIV):

  集成 SpreadJS 純前端表格控件與在線表格編輯器

  SpreadJS在線表格編輯器目錄結構:

  Vue工程目錄結構:

  與Vue集成步驟:將SpreadJS在線表格編輯器目錄中【src】下的所有文件拷貝到Vue工程目錄的static 文件下即可。

  這里有個小問題:為什么要把SpreadJS在線表格編輯器的源碼復制到static 目錄,而不是assets 目錄?

  其實通過Vue的官方說明,就可以理解:首先,assets文件夾和static文件夾在vue-cli生成的項目中,都是用來存放靜態資源的。assets目錄中的文件會被webpack處理解析為模塊依賴,并只支持相對路徑形式。

  而static 目錄下的文件并不會被Webpack處理:它們會直接被復制到最終的打包目錄(默認是dist/static)下。必須使用絕對路徑引用這些文件,這是通過在 config.js 文件中的build.assetsPublicPath 和 build.assetsSubDirectory 連接來確定的。Webpack默認將static目錄的文件原原本本地輸出,所以當頁面要使用絕對路徑時,資源文件就需要放在static目錄下。

  因為Vue運行起來并不是靜態的,我們還需要將static目錄中的index.html文件內容,全部拷貝到Vue的入口文件【index.html】中。修改完所有的資源文件路徑后,打開項目展示頁面的控制臺,我們會發現,此時已經將所有的SpreadJS以及在線表格編輯器資源引入成功了。

  從 index.js 分析SpreadJS表格編輯器與插件的加載過程:

  完成上述步驟后,打開static目錄中的index.js 文件,將上圖紅框中的三行代碼拷貝到準備加載插件的組件文件中:components/spreadjs.vue。

  spreadjs.vue:

  傳統的只集成 SpreadJS 插件的方式依然有效。

  此時,打開項目展示頁面,發現SpreadJS插件似乎沒有被正確加載?

  下面,我們將著手解決插件未正確加載的問題:從官方提供的index.html文件中,將所有承載SpreadJS表格主體部分的元素,全部拷貝到spreadjs.vue中,替換默認的container標簽。

  打開前端展示頁面,就會發現原本灰色的部分,出現了一個加載動畫。

  為了讓Vue正確讀取到spreadWrapper.html和ribbon.html的內容,需要修改項目路徑,增加‘static/’根目錄。

  asyncLoader.js

  完成上述步驟后,頁面部分會正常顯示SpreadJS的表格以及底部狀態欄。

  為了讓SpreadJS的菜單欄也正確顯示,還需要修改fileMenu.js的路徑:

  fileMenu.js

  注意,SpreadJS的菜單工具欄是通過絕對定位顯示在頁面上方的,為了讓菜單工具欄正確顯示,我們還需要調整SpreadJS工具欄距頁面頂部的高度(默認為top:195px)。

  Local.cn.css:

  刷新頁面,最終效果如下:

  至此,我們已經成功的將SpreadJS 純前端表格控件和在線表格編輯器與Vue框架集成。

  修復再次進入頁面插件時未加載的問題

  完成了SpreadJS與Vue的集成后,當我們點擊瀏覽器“返回”按鈕,再次進入表格編輯器頁面時,會發現樣式全部錯亂:

  造成上述問題的原因: index.js 中的 js 代碼,并不會隨著路由的切換而重新執行。

  為了修復此問題,我們可以:

  1. 將插件的源碼加載方式改為 ES6

  2. 在 Vue 對應的頁面組件 mount 中重新調用初始化方法

  蘇寧使用SpreadJS 與在線表格編輯器的應用實踐

  這是我們使用SpreadJS純前端表格控件開發的“人才臺賬”項目應用截圖,SpreadJS已經幫我們實現了微軟Office Excel 90%以上的功能,我們只需增加一些UI樣式和下拉框,就可以迅速交付一套完整的基于Web的 Excel功能模塊,對于提升項目研發效率、較低后期維護成本來說,SpreadJS均可提供巨大幫助。

  OK,今天的分享就到這里,大家可以自行前往SpreadJS官網下載體驗,同時也可以在這里觀看本次課程回放。

  SpreadJS官網訪問:https://www.grapecity.com.cn/developer/spreadjs

特別提醒:本網內容轉載自其他媒體,目的在于傳遞更多信息,并不代表本網贊同其觀點。其原創性以及文中陳述文字和內容未經本站證實,對本文以及其中全部或者部分內容、文字的真實性、完整性、及時性本站不作任何保證或承諾,并請自行核實相關內容。本站不承擔此類作品侵權行為的直接責任及連帶責任。如若本網有任何內容侵犯您的權益,請及時聯系我們,本站將會在24小時內處理完畢。


返回網站首頁 本文來源:互聯網

本文評論
《沉睡魔咒2》與朱莉再續前緣,騰訊手機管家提醒勿下山寨病毒軟件
當魔法力量與人類欲望相互碰撞,受人尊重的女王化身毀滅使者,邪惡女巫成為守護一方和平的衛士。迪士...
日期:10-18
Windows 10 Build 19002發布:藍牙配對優化向快速通道成員開放
10月18日消息 微軟今天面向Windows Insider快速通道的用戶發布了20H1的最新預覽版系統更新,內部版...
日期:10-18
Ubuntu 20.04 LTS代號“Focal Fossa”,明年4月正式發布
Ubuntu 19.10“Eoan Ermine”剛剛發布,20.04版本也已開始亮相。仍然遵循英文字母順序的...
日期:10-18
金山文檔上線“跨表引用”,在線文檔分水嶺漸顯
作為一款專業在線協作文檔工具,金山WPS旗下的金山文檔日前上線了“跨表格引用數據”功能...
日期:10-17
這兩個實用的WPS功能,讓PPT制作更輕松
不管是學校里的學生,還是職場的上班族,大部分會選擇WPS作為處理辦公文檔的軟件。為了能滿足大家日...
日期:10-17
預警!永恒之藍下載器木馬新增BlueKeep漏洞檢測代碼,未修復比例高達近30%
近日,騰訊安全御見威脅情報中心監測發現,“永恒之藍下載器”木馬再次更新,新增了BlueK...
日期:10-17
微軟Windows 10計算器更新:全面支持三角學、 函數(f)
10月16日消息 Windows 10系統內置了一款計算器,也可以從應用商店下載,并且具有一些專用于更高級工...
日期:10-16
谷歌Chrome瀏覽器測試新功能:解決愛吃內存問題
10月15日消息 谷歌Chrome瀏覽器是Windows上占用資源最多的應用程序之一,如果安裝擴展程序或打開過...
日期:10-15
Safari瀏覽器欺詐網站警告功能引發用戶隱私擔憂
有用戶發現,在蘋果的Safari的隱私條款中有一個特別的條款。叫做 Fraudulent Webstie Warning ,欺...
日期:10-14
Mac終于和iTunes說再見了 那Windows用戶呢?
macOS Catalina 的發布可能會減少 Mac iTunes 用戶對蘋果著名的臃腫的媒體管理和播放應用程序的抱怨...
日期:10-14
微軟Windows 10更新助手存漏洞:黑客可執行系統級權限代碼
10月12日消息 據外媒報道,Microsoft Windows 10 Update Assistant(微軟Win 10更新助手)中的一個安...
日期:10-12
《中國機長》等國慶檔大片叫座,手機觀影當心中招木馬病毒
“我和我的祖國,一刻也不能分割,無論我走到哪里,都流出一首贊歌……”王菲翻...
日期:10-12
PS和LR在蘋果macOS Catalina上出現“兼容性問題”
macOS Catalina正式版已經推出多日,但如果你是PhotoShop和Lightroom的重度用戶的話,建議你暫時不...
日期:10-09
刪除的微信聊天記錄怎么恢復?專業軟件讓恢復變得輕而易舉
如果未來的某一天,我很不不幸的遭遇了車禍或者是其他意外,那我一定一定是不愿意死的,因為&hellip...
日期:10-08
蘋果手機微信聊天記錄怎么徹底刪除?左滑刪除只是掩耳盜鈴!
蘋果手機微信聊天記錄怎么徹底刪除?這個月蘋果官網又推出新款手機蘋果iPhone11Pro,很多土豪小伙伴...
日期:09-30
淘集集可以提現嗎?如何提現?
隨著越來越多人用淘集集app進行購物,也聽說了淘集集購物返紅包,甚至可以直接體現,這是真的嗎?要怎么...
日期:09-29
如何用智能電視觀看網盤內容?當貝市場一招搞定
智能電視上的視頻內容很多時候無法滿足我們用戶需求,這時應該怎么辦?當貝小編今天就給大家解答一下...
日期:09-29
Windows 10補丁KB4517210發布,升級1903版本更順暢了
9月29日消息 Windows 10版本1903(2019年5月更新)正式準備進行大規模部署推送,并且微軟現在正在推出...
日期:09-29
Mozilla的Firefox Nightly不再對TLS 1.0和TLS 1.1提供支持
Mozilla在最新的Firefox Nightly版本中已不再對TLS 1.0和TLS 1.1加密協議提供支持。此舉是繼蘋果、...
日期:09-29
騰訊安全:IE瀏覽器曝遠程執行代碼漏洞 騰訊安全強勢推出漏洞修復工具
近日,微軟發布一例遠程執行代碼漏洞(CVE-2019-1367)漏洞修復補丁,攻擊者可利用網頁掛馬和郵件進行...
日期:09-27
  專欄介紹
王涵 的專欄
王涵發表的文章
積分:
自我介紹 :
 
王者荣耀妲己全衣去除贴吧 常来海南麻将手机版下载 8月股票推荐 买福彩赚钱 黑龙江11选5计划软件 上海快三走势图今天 云南2017彩票中奖 双色球选号技巧 49彩票安卓 456棋牌官网手机版 篮球胜分差怎么算 湖北福彩 917游戏通比牛牛技巧 上证指数十年走势图 3d字迷 新疆时时彩五星基本 东北用麻将摆王八怎么摆