資訊專欄INFORMATION COLUMN
摘要：背景作為單頁大型應用的框架愛好者的我，不實現(xiàn)個大型應用練練手怎么趕說自己熟練，于是嘗試實現(xiàn)了大部分的進銷存功能。本文主要對實現(xiàn)業(yè)務需求中遇到的問題以及解決方案進行闡述。不確保對其他項目有可移植性。
背景
作為單頁大型應用的mv*框架AngularJS愛好者的我，不實現(xiàn)個大型web應用練練手怎么趕說自己熟練ng，于是嘗試實現(xiàn)了大部分erp的進銷存功能。本文主要對實現(xiàn)業(yè)務需求中遇到的問題以及解決方案進行闡述。不確保對其他項目有可移植性。
問題與解決方案Q:目錄結構的設計
├─api //后端接口
└─fw //前端框架
├─angular
├─font-awesome
├─jquery
├─sheetjs
...
├─app
├─css //樣式文件
├─html //模板資源
├─img //圖片資源
└─js //前端業(yè)務邏輯
├─app.js //ng主要配置文件
├─animations.js //ng動效
├─controller.xx.js //業(yè)務邏輯文件，xx表示一個業(yè)務模塊或對象
├─...
├─directives.js //ng指令
├─filters.js //ng數(shù)據(jù)過濾
├─services.js //ng服務
├─factories.js //ng工廠
├─main.js //在ng前引入的原生js函數(shù)
└─config.js //ng配置文件
└─config.php //后端配置文件
└─favicon.png //站點圖標
└─index.html //站點入口
└─package.json //node-webkit配置文件
Q:必備的組件
1.日期控件（ui-datepicker或jquery封裝的derective都有）
2.搜索控件（select2這種富文本選項的）
3.表格（由于原生的table套btn又是各種指令渲染特別慢，只好ui-grid了）
4.復雜邏輯搜索（自己實現(xiàn)一下咯，數(shù)據(jù)校驗要很嚴格）
5.excel導入與識別
xlsx.js是個神奇的東西，把excel的讀取與導出都放在了前端，給服務器分擔了不少壓力，用戶等待時間也減少。
6.列表多選
checklist-model使用map比input綁定再遍歷要快，當列表有大量數(shù)據(jù)的時候差距明顯
7.多標簽
迫不得已用了iframe，Angular禁忌...
8.二級菜單
純css實現(xiàn)，無壓力，權限判斷與菜單獲取倒是廢了不少功夫
9.優(yōu)雅彈窗
純css實現(xiàn)x2
一些細節(jié)
1.等待框
2.右下加載完成提示
3.左下功能文本提示
發(fā)現(xiàn)登錄獲取菜單權限cookie存不下，于是放到localstorage
.factory("localStorage", ["$window", function($window) {
return {
put: function(key, value) { //存儲對象，以JSON格式存儲
$window.localStorage[key] = JSON.stringify(value);
},
get: function(key) { //讀取對象
return JSON.parse($window.localStorage[key] || null);
}
}
}])
挺多人遇到過的問題，鏈接過濾轉換
.filter("trustAsResourceUrl", ["$sce", function($sce) {
return function(val) {
return $sce.trustAsResourceUrl(val);
};
}])
坑先寫這么多，想到了再更。
感悟反思angualr 1.x對于快速開發(fā)實現(xiàn)功能實在是方便，雙向綁定在遇到大量數(shù)據(jù)的時候會導致頁面渲染卡頓，比如全選或者渲染長表格，因為是數(shù)據(jù)處理，此時的css3動效也會卡住，所以要合理設計加載大量數(shù)據(jù)的時候，謹慎選擇界面的交互方式，達到最好的用戶體驗效果。
本文提到的目錄結構只是官方demo的改良版，可以自己添加原生js在ng里調用，多了配置文件等等，對于一些能用css實現(xiàn)的功能盡量用css，能用js前端處理數(shù)據(jù)的地方就盡量別放到后端，在排序、數(shù)據(jù)過濾等操作就可放到前端，這樣后端sql排序的時間也能減少，提高了軟件的執(zhí)行效率。
angualr并不是沒有缺點，當然并不想對react，vue進行比較，畢竟每種業(yè)務邏輯不同，選擇適合該需求的框架就行。如果比較下來真的沒啥合適的框架，恭喜你可以自己造輪子了~
文章版權歸作者所有，未經(jīng)允許請勿轉載,若此文章存在違規(guī)行為，您可以聯(lián)系管理員刪除。
轉載請注明本文地址：http://systransis.cn/yun/81378.html
摘要：項目編號運行環(huán)境開發(fā)工具數(shù)據(jù)庫應用服務器開發(fā)技術本系統(tǒng)基于技術開發(fā)完成一套商品的進銷存管理系統(tǒng)，前端采用開發(fā)，界面簡潔大方，用戶體驗較好。 項目編號：BS-XX-054 運行環(huán)境： 開發(fā)工具：IDEA / ECLIPSE 數(shù)據(jù)庫：MYSQL5.7 應用服務器：TOMCAT8.5.31 開發(fā)技...
摘要：功能介紹軟件的核心應用是流程審批協(xié)同工作公文管理國企和政府機關溝通工具文檔管理信息中心電子論壇計劃管理項目管理任務管理會議管理關聯(lián)人員系統(tǒng)集成門戶定制通訊錄工作便簽問卷調查常用工具計算器萬年歷等。 清單 ERP進銷存管理系統(tǒng) OA協(xié)同辦公管理系統(tǒng) CRM客戶關系管理系統(tǒng) HRM人力資源管理系統(tǒng) EAM資產(chǎn)管理系統(tǒng) 績效管理系統(tǒng) 成本管理系統(tǒng) 設備管理系統(tǒng) 質量管理系統(tǒng) ERP進銷存...
摘要：網(wǎng)易跨境電商考拉海購在線筆試現(xiàn)場技術面面。如何看待校招面試招聘，對公司而言，是尋找勞動力對員工而言，是尋找未來的同事。 如何準備校招技術面試 標簽 ： 面試 [TOC] 2017 年互聯(lián)網(wǎng)校招已近尾聲，作為一個非 CS 專業(yè)的應屆生，零 ACM 經(jīng)驗、零期刊論文發(fā)表，我通過自己的努力和準備，從找實習到校招一路運氣不錯，面試全部通過，謹以此文記錄我的校招感悟。 寫在前面 寫作動機 ...
摘要：下載鏈接提取碼勤哲服務器無限用戶非常好用非常穩(wěn)定。服務器是一個面向最終用戶的信息系統(tǒng)設計工具與運行平臺，它的作用是幫助我們建立適合需要的管理信息系統(tǒng)，實現(xiàn)管理的信息化。本人親自給企業(yè)開發(fā)的套系統(tǒng)，第一套系統(tǒng)截圖第二套系統(tǒng)截圖 下載鏈接：https://pan.baidu.com/s/1ds_...
閱讀 3750·2021-09-22 10:57
閱讀 1921·2019-08-30 15:55
閱讀 2711·2019-08-30 15:44
閱讀 1740·2019-08-30 15:44
閱讀 1885·2019-08-30 15:44
閱讀 2256·2019-08-30 12:49
閱讀 1060·2019-08-29 18:47
閱讀 3144·2019-08-29 16:15
