RainLotus'Blog

一、认识常见组件1.Cloumn1234567// 沿垂直方向布局的容器。Column(value?: {space?: string | number}){}//space:纵向布局元素垂直方向间距,默认值为0，设负值不生效。//支持alignItems、justifyContent属性//alignItems：设置子组件在水平方向上的对齐格式。//justifyContent：设置子组件在垂直方向上的对齐格式。 2.Flex1234//以弹性方式布局子组件的容器组件Flex(value?: { direction?: FlexDirection, wrap?: FlexWrap, justifyContent?: FlexAlign, alignItems?: ItemAlign, alignContent?: FlexAlign })//[具体参数文档](https://docs.openharmony.cn/pages/v3.2Beta/zh-cn/application-dev/reference/arkui-ts/ ...

多层级饼图1.概念直观上来说，就是一环环饼图嵌套展示，不过每一层内环都与相邻外环构成父子关系。如同树的结构一样，一个父亲节点含有多个孩子节点，每个孩子节点依次含有多个孙子节点，依次类推…… 用多层级的饼图可以很直观判断出，他们相互之间的占比及从属关系。 2.准备工作2.1）安装echarts123456npm install echarts --saveimport * as echarts from 'echarts';或者<script type="text/javascript" src="https://cdn.jsdelivr.net/npm/echarts@5.3.3/dist/echarts.min.js"></script> 2.2）样例展示1234567891011121314151617181920212223242526272829303132333435363738394041424344454647484950515253545556575859606162636465666 ...

一、NG-ALAIN安装1.介绍NG-ALAIN 是一个企业级中后台前端/设计解决方案脚手架，秉承 Ant Design 的设计价值观，目标也非常简单，希望在Angular上面开发企业后台更简单、更快速。它内嵌了NG-ZORRO的组件库，用户体验较为完整。 2.安装 全局 Angular Cli1npm install -g @angular/cli 创建Angular项目1ng new my-project --style less --routing 添加NG-ALAIN1ng add ng-alain@10.x // 本人的angular/cli脚手架版本是10，ng-alain的安装需要和脚手架版本一致才行 以上皆顺利进行后，来到package.json文件下，小做一点点修改： 1.将scripts下的start的”ng s -o” 改成 “ng s -o –port 80” (指定端口号是为了避免端口号占用，80端口号的好处，在网页上显示时会省略端口，仅个人喜好。其他端口号亦可，注意避免端口相同即可) 2.配置请求的URL环境 在src/envir ...

一、判断密码强度1.纯js部分123456789101112131415161718192021222324252627282930313233343536373839 progStatus = 0; // 当前包含的种类 correctTypePwd = false; // 当密码种类超过两种时为true，纯数字或者字母则为false valueLength = 0; // 当前输入的密码长度---------------------------------------------// 校验密码强度 checkPwdStrongth(value) { const arr = []; this.progStatus=0; if (value) { if (value.length < 8) {// 最初级别 密码小于8位 return arr; } if (/\d/.test(value)) {// 如果用 ...

一、Angular配置与安装1、Angular介绍Angular是谷歌开发的一款开源的web前端框架，诞生于2009年，由Misko Hevery 等人创建，后为Google所收购。是一款优秀的前端JS框架，已经被用于Google的多款产品当中。 根据项目数统计angular（1.x 、2.x 、4.x、5.x、6.x、7.x 、8.x、9.x）是现在网上使用量最大的框架。 Angular基于TypeScript和react、vue相比 Angular更适合中大型企业级项目。 目前2019年12月25日angular最新版本angular9.x。根据官方介绍，Angular每过几个月就会更新一个版本。Angular2.x以后所有的Angular版本用法都是一样的，此教程同样适用于Angular7.x 、Angular8.x、Angular9.x 以及未来的其它版本…. 2、学习Angular必备基础必备基础：html 、css 、js、es6 如果有Typescript基础更容易理解，没有Typescript基础也可以学此教程。此教程中用到的Typescript语法会详细讲解。 T ...

一、数组去重1.利用ES6 Set去重（ES6中最常用）1234const arr = [1,1,'true','true',true,true,15,15,false,false, undefined,undefined, null,null, NaN, NaN,'NaN', 0, 0, 'a', 'a',{},{}];const arr2=[...new Set(arr)]console.log(arr2) //[1, "true", true, 15, false, undefined, null, NaN, "NaN", 0, "a", {}, {}] ps:不考虑兼容性，这种去重的方法代码最少。这种方法还无法去掉“{}”空对象，后面的高阶方法会添加去掉重复“{}”的方法。 动图如下： 2.利用for嵌套for，然后splice去重（ES ...

1. Umi介绍1.1 Umi是什么https://umijs.org/zh-CN/docs 一套可插拔的企业级 react 应用框架，由dva作者 sorrycc 完成，它既是一个框架也是一个工具。 Umi 以路由为基础的，同时支持配置式路由和约定式路由，保证路由的功能完备，并以此进行功能扩展。然后配以生命周期完善的插件体系，覆盖从源码到构建产物的每个生命周期，支持各种功能扩展和业务需求。 他在Umi中引入了 UI 工具 antd，打包工具 roadhog，路由 react-router和状态管理器 dva，做到了可插拔机制。通过约定、自动生成和解析代码等方式来辅助开发，减少开发者要写的代码量。 它主要具备以下功能： 可扩展，Umi 实现了完整的生命周期，并使其插件化，Umi 内部功能也全由插件完成。此外还支持插件和插件集，以满足功能和垂直域的分层需求。 开箱即用，Umi 内置了路由、构建、部署、测试等，仅需一个依赖即可上手开发。并且还提供针对 React 的集成插件集，内涵丰富的功能，可满足日常 80% 的开发需求。 企业级，经蚂蚁内部 3000+ 项目以及阿里、优酷、 ...

TypeScript1.1 TS简介TypeScript 是 JavaScript 的强类型版本。然后在编译期去掉类型和特有语法，生成纯粹的 JavaScript 代码。由于最终在浏览器中运行的仍然是 JavaScript，所以 TypeScript 并不依赖于浏览器的支持，也并不会带来兼容性问题。 TypeScript 是 JavaScript 的超集，这意味着他支持所有的 JavaScript 语法。并在此之上对 JavaScript 添加了一些扩展，如 class / interface / module 等。这样会大大提升代码的可阅读性。 和 JavaScript 弱类型不同，TypeScript 这种强类型语言最大的优势在于静态类型检查，可以在代码开发阶段就预知一些低级错误的发生。 一种类似于 JavaScript 的语言，在 JavaScript 的基础之上增加了类型，同时增强了 JavaScript 部分语法功能 遵循 EcmaScript 6 标准规范 由微软开发 Angular 2 框架采用 TypeScript 编写 背后有微软和谷歌两大公司的 ...

1. Vue/cli脚手架介绍vue-cli是vue官网提供的一个脚手架，这个构建工具大大降低了webpack的使用难度，支持热更新，有webpack-dev-server的支持，相当于启动了一个请求服务器，给你搭建了一个测试环境，只关注开发就OK 1.1 安装vue-cli创建Vue2.x项目12345678910//1.之前安装过vue的2.0版本，你需要把2.0相关的删除 npm uni -g vue-cli//2.安装vue/cli脚架 npm i -g @vue/cli@4.5.8//3.将配置环境变量 C:\dev\nodejs//4.检查版本号,目前安装vuecli 4.5.8 vue -V//5.创建项目 vue create project-name 选择vue2x 1234567891011//查看最终生效的 webpack 配置信息vue inspect > output.js//配置文件参考文档https://cli.vuejs.org/zh/config/#devserver-proxy//运行Appnpm run se ...

1.Ant Design Pro介绍Ant Design Pro 是一个企业级中后台前端/设计解决方案 特性 优雅美观：基于 Ant Design 体系精心设计 常见设计模式：提炼自中后台应用的典型页面和场景 最新技术栈：使用 React/dva/antd 等前端前沿技术开发 响应式：针对不同屏幕大小设计 主题：可配置的主题满足多样化的品牌诉求 国际化：内建业界通用的国际化方案 最佳实践：良好的工程实践助您持续产出高质量代码 Mock 数据：实用的本地数据调试方案 UI 测试：自动化测试保障前端产品质量 创建项目： yarn create umi myprotest yarn install yarn start 注意：这里创建项目的时候选择V5版本 ​ Pro V4+antd@4 版本权限验证不好用。Pro V4+antd@4 可以查看完整版的ant design pro项目。 ​ Pro V4+antd@3 版本有区块不好用 2.目录结构和配置介绍2.1 目录结构 2.2 配置文件2.2.1 config.ts该文件类似.um ...