FE.FW-AngularJS 1.x 实现进销存系统感悟与反思

陆斌发布于2019-08-20 14:02 / 670人阅读

摘要：背景作为单页大型应用的框架爱好者的我，不实现个大型应用练练手怎么赶说自己熟练，于是尝试实现了大部分的进销存功能。本文主要对实现业务需求中遇到的问题以及解决方案进行阐述。不确保对其他项目有可移植性。

背景

作为单页大型应用的mv*框架AngularJS爱好者的我，不实现个大型web应用练练手怎么赶说自己熟练ng，于是尝试实现了大部分erp的进销存功能。本文主要对实现业务需求中遇到的问题以及解决方案进行阐述。不确保对其他项目有可移植性。

问题与解决方案

Q:目录结构的设计

├─api                //后端接口
└─fw                 //前端框架
    ├─angular
    ├─font-awesome
    ├─jquery
    ├─sheetjs
    ...
├─app
   ├─css            //样式文件
   ├─html           //模板资源
   ├─img            //图片资源
   └─js             //前端业务逻辑
    ├─app.js            //ng主要配置文件
    ├─animations.js     //ng动效
    ├─controller.xx.js  //业务逻辑文件，xx表示一个业务模块或对象
    ├─...
    ├─directives.js     //ng指令
    ├─filters.js        //ng数据过滤
    ├─services.js       //ng服务
    ├─factories.js      //ng工厂
    ├─main.js           //在ng前引入的原生js函数
    

└─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.复杂逻辑搜索（自己实现一下咯，数据校验要很严格）

5.excel导入与识别
xlsx.js是个神奇的东西，把excel的读取与导出都放在了前端，给服务器分担了不少压力，用户等待时间也减少。

6.列表多选
checklist-model使用map比input绑定再遍历要快，当列表有大量数据的时候差距明显

7.多标签
迫不得已用了iframe，Angular禁忌...

8.二级菜单
纯css实现，无压力，权限判断与菜单获取倒是废了不少功夫

9.优雅弹窗
纯css实现x2

一些细节
1.等待框

2.右下加载完成提示

3.左下功能文本提示

遇到的坑

发现登录获取菜单权限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对于快速开发实现功能实在是方便，双向绑定在遇到大量数据的时候会导致页面渲染卡顿，比如全选或者渲染长表格，因为是数据处理，此时的css3动效也会卡住，所以要合理设计加载大量数据的时候，谨慎选择界面的交互方式，达到最好的用户体验效果。

本文提到的目录结构只是官方demo的改良版，可以自己添加原生js在ng里调用，多了配置文件等等，对于一些能用css实现的功能尽量用css，能用js前端处理数据的地方就尽量别放到后端，在排序、数据过滤等操作就可放到前端，这样后端sql排序的时间也能减少，提高了软件的执行效率。

angualr并不是没有缺点，当然并不想对react，vue进行比较，毕竟每种业务逻辑不同，选择适合该需求的框架就行。如果比较下来真的没啥合适的框架，恭喜你可以自己造轮子了~

GPU云服务器云服务器基于webrtc的视频会议系统的设计与实现进销存系统 linux操作系统的web服务器的设计与实现管理工作反思

文章版权归作者所有，未经允许请勿转载,若此文章存在违规行为，您可以联系管理员删除。

转载请注明本文地址：https://www.ucloud.cn/yun/81378.html

基于Javaweb实现进销存管理系统

摘要：项目编号运行环境开发工具数据库应用服务器开发技术本系统基于技术开发完成一套商品的进销存管理系统，前端采用开发，界面简洁大方，用户体验较好。项目编号：BS-XX-054 运行环境：开发工具：IDEA / ECLIPSE 数据库：MYSQL5.7 应用服务器：TOMCAT8.5.31 开发技...

不知名网友 2021-11-29 10:50 评论0 收藏0
常见的企业管理系统

摘要：功能介绍软件的核心应用是流程审批协同工作公文管理国企和政府机关沟通工具文档管理信息中心电子论坛计划管理项目管理任务管理会议管理关联人员系统集成门户定制通讯录工作便签问卷调查常用工具计算器万年历等。清单 ERP进销存管理系统 OA协同办公管理系统 CRM客户关系管理系统 HRM人力资源管理系统 EAM资产管理系统绩效管理系统成本管理系统设备管理系统质量管理系统 ERP进销存...

bladefury 2019-07-01 10:35 评论0 收藏0
如何准备校招技术面试

摘要：网易跨境电商考拉海购在线笔试现场技术面面。如何看待校招面试招聘，对公司而言，是寻找劳动力对员工而言，是寻找未来的同事。如何准备校招技术面试标签：面试 [TOC] 2017 年互联网校招已近尾声，作为一个非 CS 专业的应届生，零 ACM 经验、零期刊论文发表，我通过自己的努力和准备，从找实习到校招一路运气不错，面试全部通过，谨以此文记录我的校招感悟。写在前面写作动机 ...

MkkHou 2019-08-15 11:58 评论0 收藏0
【亲测非常好用】勤哲 Excel 服务器2007 V13.0.144 最好用稳定版本，带注册，无限用

摘要：下载链接提取码勤哲服务器无限用户非常好用非常稳定。服务器是一个面向最终用户的信息系统设计工具与运行平台，它的作用是帮助我们建立适合需要的管理信息系统，实现管理的信息化。本人亲自给企业开发的套系统，第一套系统截图第二套系统截图下载链接：https://pan.baidu.com/s/1ds_...

Imfan 2021-11-15 11:37 评论0 收藏0