angularjs

开发一个大型后台管理系统,应该用前后端分离的技术方案吗?

删除回忆录丶 提交于 2020-11-19 23:58:47
开发一个大型后台管理系统,应该用前后端分离的技术方案吗? 话说这天,我们团队开会讨论了一个问题,不,与其说“讨论”,不如说“争吵”更合适。 背景是这样的: 我们要开发一个 xxx 后台管理系统,这个系统业务复杂、功能又多,大家的争吵集中在“这个系统是否应该用前后端分离的方案”。 这次争吵的问题比较典型,于是我就写了这篇文章。为了大家好理解,把“xxx 后台管理系统”泛化一下,变成: 开发一个大型后台管理系统,应该用前后端分离的技术方案吗? 先说一下,本文中的观点肯定有人不认同,再加上我对前端技术掌握有限,所以大家批判的看吧。 1. 先审题,冷静的分析一下 前后端分离的优点多多,这不需要多说,大家人人都清楚。 来,讨论之前,我们先一起好好审审题。 结合“开发一个大型后台管理系统”这个约束条件,冷静的分析一下: • 什么是后台管理系统:首先后台管理系统这个称呼,意味着这是一个 B 端系统。可以小到部门级应用(客户投诉登记系统、办公设备台账系统),大一点可以是大集团级核心系统(500 强保险公司客服、呼叫中心),可以是 ERP、CRM、OA(SAP、用友、泛微协同),可以是一个 B2C 电商的商城后台、支付网关管理控制台,可以是 Saas 的管理后台(Salesforce、Teambition、Jira),可以大到阿里云控制台…… • 什么是大型:我理解大型系统是指功能模块多、交互复杂

华为5G折叠屏幕适配

只谈情不闲聊 提交于 2020-11-18 03:43:50
华为5G折叠屏幕的发布,迎来新的一个设备——移动端的折叠设备华为Max;华为Max设备分辨率有以下几种 8.0,6.8,6.38,这三种场景下页面展示都是不一样的表现,需要我们在开发中注意监听屏幕变化,来动态加载我们的页面,更换场景; 华为官网展示了华为Max的多屏幕操作,从前端而言:这需要我们做好不同屏幕下业务呈现的多样性,以及交互的流畅性;5G的来领,数据传输极大提升,视频下载速度会提高,html5新标签video,会迎来新的发展,视频下载和存储,以及视频播放过程中内存占用问题需要考量,以及poster的使用时机需要把握,4G和5G切换,兼容问题等。 下面是我针对华为Max做出的适配方法,仅供参考,不对之处,望大家指正 head标签中引入不同样式文件,适配不同的设备 <link rel="stylesheet" media="screen and (max-device-width:1240px)" href="max.css" />   针对max可以编写不同的样式表,特殊化max的布局,减少页面的重绘重排; 使用vue、react、angular等组件化框架,可以结合框架的声明周期,我们获取设备的不同宽度,加载不同的页面组件和业务,可以友好地做到一套代码兼容多端设备;可见对于代码兼容性和拓展性依旧是我们学习和工作的重点

angular 接入 IdentityServer4

陌路散爱 提交于 2020-11-14 10:39:25
angular 接入 IdentityServer4 Intro 最近把活动室预约的项目做了一个升级,预约活动室需要登录才能预约,并用 IdentityServer4 做了一个统一的登录注册中心,这样以后就可以把其他的需要用户操作的应用统一到 IdentityServer 这里,这样就不需要在每个应用里都做一套用户的机制,接入 IdentityServer 就可以了。 目前活动室预约的服务器端和基于 angular 的客户端已经完成了 IdentityServer 的接入,并增加了用户的相关的一些功能,比如用户可以查看自己的预约记录并且可以取消自己未开始的预约, 还有一个小程序版的客户端暂时还未完成接入,所以小程序版目前暂时是不能够预约的 为什么要写这篇文章 目前在网上看到很多都是基于 implicit 模式接入 IdentityServer,这样实现起来很简单,但是现在 OAuth 已经不推荐这样做了,OAuth 推荐使用 code 模式来代替 implicit implicit 模式会有一些安全风险,implicit 模式会将 accessToken 直接返回到客户端,而 code 模式只是会返回一个 code,accessToken 和 code 的分离的两步,implicit 模式很有可能会将 token 泄露出去 详细可以参考 StackOverflow 上的这个问答

解构赋值,reset参数,扩展运算符,class,import、export

此生再无相见时 提交于 2020-11-14 04:03:48
  还是来用react了。前端框架都研究看看。这次网站就用它来做了。因为angular使用的ts,所以一些es6的规则也不是很清晰,都摘抄在下。   es6允许按照一定模式从数组和对象中提取值,对变量进行赋值,这被称为解构。   let [a,b,c]=[1,2,3];a//1 b//2   对象解构:   let name ='a';   let age=18;   let per={name,age};   per//obj{name : 'a' ,age : 18}   对象相反解构:   let per={name:'a' , age:18};   let {name ,age}=per;   name//'a'   age//18   对象参数解构:   function sum({x,y}){     return x+y;   }   sum({x:1,y:2}); //3   对象解构在这里让我感到比较困惑,以前得这种对象解构,赋值只会写成let name=per.name,现在直接将值赋予变量。对象参数解构中,直接传入对象,而不是对象的值,而在方法中直接使用对象的值,这个是不是应该和对象中得参数名相同才可以这样做,做个实验: function sum({ x, y }) { return x + y; } alert(sum({ a: 1 , b: 2 }));