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