Less

Less（Leaner Style Sheets 的缩写) 是一门向后兼容的 CSS 扩大语言。，它扩大了CSS（层叠样式表）的性能并提供了更灵便、更弱小的款式定义和管理机制。通过应用 Less，开发人员能够编写可保护、可重用的款式代码，并以简洁的语法实现简单的款式成果。本文将介绍 Less 的基本概念和个性，以及如何应用它来简化 CSS 开发过程。想要学习更多的常识，可拜访 犀牛书 的 Less 中文文档。 装置要装置 Less，首先须要确保本地已装置 Node.js 环境，而后运行如下命令，将 Less 装置到零碎的全局环境中： npm install less -g装置结束，可在控制台运行命令lessc -v，如果呈现相干的版本信息，阐明曾经装置胜利。 编译运行在 IED 编辑器如 Vscode 中，新建一个以 .less 为后缀的文件，文件内容可放入如下 Less 格局的款式元素。 @width: 10px;@height: @width + 10px;#header { width: @width; height: @height;}.less文件建设结束并填写内容后，下一步可用命令lessc [option option=parameter ...] <source> [destination]将其编译为以.css为后缀的文件。例如，要将 index.less 编译为 index.css，可用如下命令： lessc index.less index.css编译实现后，即可生成 .css 文件，详情如下图所示： 根本用法变量（Variables）用@申明变量并应用： @width: 10px;@height: @width + 10px;#header { width: @width; height: @height;}输入： ...

正文办法一：通过双斜杠//的形式来进行正文，应用此办法来进行正文在编译成css后，正文在css文件中不会进行展现。办法二：通过斜杠加型号/** */的形式来进行正文，正文会留在编译生成的css文件中。 变量 变量的根底应用变量的定义是通过@变量: 变量值的模式实现的。 @width: 100px; // 这里肯定须要有分号结尾.box { width: @width;}// 编译后果.box { width: 100px;} 变量的扩大应用less变量不仅仅能代表平时的css属性值，有其它很多的场景下也能应用到less变量。 选择器@selector: h2;@{selector} { color: red;}// 编译后果h2 { color: red;} URL门路在less应用门路来引入文件时，须要在门路两边加上单引号或者双引号 @images: '../images'; // 这里必须要有引号.box { background-image: url('@{images}/img.jpg'); // 这里也必须要是应用引号，并且在门路中应用变量时须要大括号包裹变量}// 编译后果.box { background-image: url('../images/img.jpg')}在应用import关键字引入其它less时，变量也能发挥作用 // external.less@color: red;// index.less@path: '../style/'@import '@{path}/external.less'.box { color: @color;}// 编译后果.box { color: red;} 属性名变量值是属性名或属性名一部分时，在援用的时候须要带上大括号。 @color: color;.box { @{color}: green; background-@{color}: red;}// 编译后果.box { color: green; background-color: red;} 混合办法有写过css的同学应该晓得，在一些状况下，局部类选择器有雷同的css属性设置，如果如果想要在各个类选择器中复用这部分css属性，那么须要把公共的css属性独自拿进去，并且为每个类选择器设置这些公共css属性，而后再独自为每个类选择器设置各自的css属性。 ...

最近在做less的一些语法上的解决，想把less的变量在编译时主动转为css的变量应用形式，进而学习了一下less的预处理插件开发。 less反对的插件分为两种模式，一种是一般插件，次要是扩大less的运行时语法(less默认函数)插件，通过@plugin语法应用。这种形式的次要应用请参考官网文档，本文不做探讨。 预处理插件能够对编译的源码在编译前，编译后和编译中进行一些代码调整。也能够增加一些对less进行扩大，如文件系统的扩大等。因为官网还没有对这一块有对应的文档形容，所以本文用于在官网文档进去之前，依据本人的应用教训记录的一些最佳实际。 预处理插件代码构造一个简略的预处理插件的格局为： class LessPlugin { constructor(options) { this.minVersion = [3, 0, 0]; this._options = options; } install(less, pluginManager, functions) { // 插件初始化逻辑 } setOptions() {} printUsage() { return ''; }}插件须要是一个领有install办法的对象，会被注入三个参数less, pluginManager, functions： less: 以后less对象；pluginManager： 插件管理器，用于注册具体的插件；functions：外部办法管理器，@plugin应用的一般插件就是通过functions.add增加下来的预处理插件次要是通过pluginManager对象增加，它的要害API有： addVisitor： 增加ast语法拜访器，能够在编译过程中批改或者查看语法操作；addPreProcessor： 增加预处理器，能够配置源码在通过less解决前进行预处理的hookaddPostProcessor: 增加后处理器，能够配置源码在通过less解决后进行后续加工的hookaddFileManager: 增加一个文件管理器，能够扩大文件解析，次要是解决@import的资源导入解析问题能够查看官网举例的插件列表.另外插件对象中请尽量设置minVersion属性，用来表明该插件兼容的最低的less版本；setOptions是用于承受less命令行形式执行时传入的参数，在构造函数中承受的选项是因为创立插件对象采取类的形式，所以能够在构建函数中承受这个对象创立的前置参数，也就是能够用于应用代码的形式配置插件时的传入的选项；printUsage也是在应用命令行形式注入插件(--plugin=xxxx)，打印帮忙的时候输入的提示信息。 构建过程中批改源码的插件addVisitor能够加一个less的ast语法处理器，在编译过程中对语法进行解决(如将less变量的应用改为css变量的应用)。一个简略的语法拜访器的插件创立为： class LessPlugin { // ... install(less, pluginManager, functions) { // 注册拜访器，拜访器为一个对象 pluginManager.addVisitor(new ExampleVisitor(less, this._options)); } // ...}class ExampleVisitor { constructor(less, options) { this._less = less; this._options = options; this._visitor = new less.visitors.Visitor(this); } run(root) { return this._visitor.visit(root); } // ...其余代码}对于拜访器对象，咱们同样采取class形式创立。个别状况下，都须要将less对象传入，用于拜访less相干api。 ...

less&scss 罕用 mixin&function汇合scssmixin：返回款式汇合定义：@mixin 变量名(参数) { 款式 }调用：@include 变量名(参数);mixin 根底用法 // 单行文本溢出@mixin oneRowOverflow { white-space: nowrap; overflow: hidden; text-overflow: ellipsis;}mixin 传参 // 多行文本溢出@mixin multipleRowsOverflow($width, $row) { width: $width; display: -webkit-box; overflow: hidden; -webkit-box-orient: vertical; word-break: break-all; text-overflow: ellipsis; -webkit-line-clamp: $row;}mixin 参数默认值 // 多行文本溢出@mixin multipleRowsOverflow($width: 100%, $row: 2) { width: $width; display: -webkit-box; overflow: hidden; -webkit-box-orient: vertical; word-break: break-all; text-overflow: ellipsis; -webkit-line-clamp: $row;}mixin + 条件 // 弹性盒布局@mixin flexLayout($justify: null, $align: null, $direction: null) { display: flex; @if $direction !=null { flex-direction: $direction; } @if $justify !=null { justify-content: $justify; } @if $align !=null { align-items: $align; }}mixin + while循环 ...

WiFi 6E (802.11ax) 4×4 MU-MIMO 6GHz QCN9074 Single Band Wireless ModuleQCN9074 802.11ax 4x4 MU-MIMO 6GHz wifi6E QCN9074 11ax 4x4 6G M.2 **DR9074-6E(PN02.7)** https://www.wallystech.com/Ne... MT7915/MT 7975/IPQ6000/IPQ6018/IPQ6010/IPQ4019/IPQ4029/ipq4018/IPQ8072/IPQ8074/QCN9074/QCN9072/QCN9024/IPQ5018/BY:Wallys Communications (Suzhou ) Co., LTDEMAIL:sales3@wallystech.com Wallys Communications (SuZhou) Co., Ltd., http://www.wallystech.com,which is a professional supplier specializing in product design, manufacturing and offering superior OEM/ODM/JDM services in wireless communications. As a specialized manufacturer and exporter for these products in China,We sincerely hope to establish business relations with your esteemed corporation. We mainly develop high power wireless products based on Quacomm chip such asIPQ6000/IPQ6018/IPQ6010/IPQ4019/IPQ4029/IPQ8072/IPQ8074/QCN9074 and so on . Features Qualcomm Atheros QCN90746GHz, max 23dBm per chain, up to 4949MbpsSingle Band 6GHz 4×4 WiFi 6E (802.11ax)4 spatial streams (4SS)M.2 E Key InterfacePCI Express 3.0 InterfaceApplications Security SurveillanceCommercial radio coverageHotel Wireless applicationCountry coverageForest fire protection engineeringSome special scene applicationProduct Description ...

明天写我的项目的时候须要用到less，而后装置了less和less-loader，然而之后在写router下的index文件时报错： TypeError: this.getOptions is not a function查问后发现时less-loader版本装置过高。解决办法：第一步: npm uninstall less-loader第二步: npm install less-loader@6.0.0 参考：https://blog.csdn.net/qq_4243...

Linux中的less命令次要用来浏览文件内容，与more命令的用法类似，不同于more命令的是，less命令可往回卷动浏览以看过的局部。less的用法比起more更加的有弹性。在more的时候,咱们并没有方法向后面翻,只能往后面看，但若应用了less时，就能够应用 ［pageup］ ［pagedown]等按键的性能来往返回后翻看文件，更容易用来查看一个文件的内容！除此之外，在less外头能够领有更多的搜寻性能，不止能够向下搜，也能够向上搜。命令格局less [参数] 文件 命令性能less和more相似,然而应用less能够随便浏览文件,而more仅能向前挪动,却不能向后挪动,more启动时会加载整个文件。而且less在查看之前不会加载整个文件。命令参数Down arrow，Enter，e，或者j --向前挪动一行。Up arrow，y或k -- 向后挪动一行。Space bar 要么 f – 后退一页。b – 向后挪动一页。/pattern – 向前搜寻匹配的模式。?pattern – 向后搜寻匹配的模式。n – 反复上一个搜寻。N – 反向反复先前的搜寻。g – 转到文件的第一行。Ng – 转到文件中的第N行。G – 转到文件的最初一行。p – 转到文件结尾。Np – 进入文件的N％。h – 显示帮忙。q – 退出less。查看文件> less rumenz.txtps查看过程信息并通过less分页显示> ps -ef | less查看命令历史应用记录并通过less分页显示> history | less浏览多个文件> less 1.txt 2.txt输出:n后,切换到 1.txt输出:p后,切换到 2.txt全屏导航ctrl + F - 向前挪动一屏ctrl + B - 向后挪动一屏ctrl + D - 向前挪动半屏ctrl + U - 向后挪动半屏单行导航j - 向前挪动一行k - 向后挪动一行其它导航G - 挪动到最初一行g - 挪动到第一行q / ZZ - 退出 less 命令搜寻性能> less /入门 rumenz.txtn – 向前查找下一个匹配的文本N – 向后查找前一个匹配的文本原文链接:https://rumenz.com/rumenbiji/... 微信公众号:入门小站 ...

CSS 主题切换计划形式一： css / var()1. 定义2套主题色彩变量，属性选择器.root[theme='theme-red'] { --color-bg: rgba(255, 87, 87, 0.05); --font-text-color-title: rgba(255, 87, 87, 0.85); --font-text-color-base: rgba(255, 87, 87, 0.65); --primary: #ff5757;}.root[theme='theme-blue'] { --color-bg: rgba(0, 229, 255, 0.05); --font-text-color-title: rgba(0, 229, 255, 0.85); --font-text-color-base: rgba(0, 229, 255, 0.65); --primary: #00e5ff;}2. 主页面中增加属性theme, 值为相应的主题 theme-red 或 theme-blueimport React, { useEffect, useRef, useState } from 'react';import styles from './theme.less';interface ThemePageProps {}const themeMap = { 红色: 'theme-red', 蓝色: 'theme-blue',};const ThemePage: React.FC<ThemePageProps> = () => { const containerRef = useRef<HTMLDivElement>(null); const [theme, setTheme] = useState('theme-red'); useEffect(() => { containerRef.current?.setAttribute('theme', theme); }, [theme]); return ( <div className={styles.root} ref={containerRef}> <div className={styles.content}> <div className={styles.title}>我是题目</div> </div> <div className={styles.btnWrap}> {Object.entries(themeMap).map(([key, value]) => ( <span key={value} onClick={() => setTheme(value)}> {key} </span> ))} </div> </div> );};export default ThemePage;3. 应用主题变量.root { display: flex; flex-direction: column; background-color: var(--color-bg); height: 100vh;}.content { display: flex; align-content: center; justify-content: center; flex-direction: column; .title { text-align: center; font-size: 20px; color: var(--font-text-color-title); } .info { text-indent: 2em; font-size: 16px; color: var(--font-text-color-base); }}.btnWrap { display: flex; justify-content: center; margin-top: 20px; span { width: 120px; height: 32px; display: flex; align-items: center; justify-content: center; color: var(--primary); border: 2px solid var(--primary); background-color: #fff; border-radius: 10px; margin-right: 20px; cursor: pointer; &:hover { font-weight: bold; } }}4.编译后的文件.theme__root__3Nghz[theme='theme-red'] { --color-bg: rgba(255, 87, 87, 0.05); --font-text-color-title: rgba(255, 87, 87, 0.85); --font-text-color-base: rgba(255, 87, 87, 0.65); --primary: #ff5757;}.theme__root__3Nghz[theme='theme-blue'] { --color-bg: rgba(0, 229, 255, 0.05); --font-text-color-title: rgba(0, 229, 255, 0.85); --font-text-color-base: rgba(0, 229, 255, 0.65); --primary: #00e5ff;}.theme__root__3Nghz { display: flex; flex-direction: column; background-color: var(--color-bg); height: 100vh;}.theme__content__1gRQE { display: flex; align-content: center; justify-content: center; flex-direction: column;}.theme__content__1gRQE .theme__title__2W0ZV { text-align: center; font-size: 20px; color: var(--font-text-color-title);}.theme__content__1gRQE .theme__info__2c8iu { text-indent: 2em; font-size: 16px; color: var(--font-text-color-base);}.theme__btnWrap__2ZtlX { display: flex; justify-content: center; margin-top: 20px;}.theme__btnWrap__2ZtlX span { width: 120px; height: 32px; display: flex; align-items: center; justify-content: center; color: var(--primary); border: 2px solid var(--primary); background-color: #fff; border-radius: 10px; margin-right: 20px; cursor: pointer;}.theme__btnWrap__2ZtlX span:hover { font-weight: bold;}形式二 ： less/ mixin1. 定义2套主题色彩变量, 用theme函数.theme(theme-red) { @color-bg: rgba(255, 87, 87, 0.05); @font-text-color-title: rgba(255, 87, 87, 0.85); @font-text-color-base: rgba(255, 87, 87, 0.65); @primary: #ff5757;}.theme(theme-blue) { @color-bg: rgba(0, 229, 255, 0.05); @font-text-color-title: rgba(0, 229, 255, 0.85); @font-text-color-base: rgba(0, 229, 255, 0.65); @primary: #00e5ff;}2.:global的形式全局范畴引入两套主题款式.theme-red 和 .theme-blue , 匹配全局的款式名:global(.theme-red) { .createTheme(theme-red);}:global(.theme-blue) { .createTheme(theme-blue);}3. 通过createTheme() 混入到每个作用范畴的less文件下.createTheme(@theme-name) { .theme(@theme-name); // 混入的主题色彩变量申明 .root { display: flex; flex-direction: column; background-color: @color-bg; height: 100vh; } .content { display: flex; align-content: center; justify-content: center; flex-direction: column; .title { text-align: center; font-size: 20px; color: @font-text-color-title; } .info { text-indent: 2em; font-size: 16px; color: @font-text-color-base; } } .btnWrap { display: flex; justify-content: center; margin-top: 20px; span { width: 120px; height: 32px; display: flex; align-items: center; justify-content: center; color: @primary; border: 2px solid @primary; background-color: #fff; border-radius: 10px; margin-right: 20px; cursor: pointer; &:hover { font-weight: bold; } } }}4. 在主页面中增加全局款式import React, { useEffect, useRef, useState } from 'react';import styles from './theme.less';interface ThemePageProps {}const themeMap = { 红色: 'theme-red', 蓝色: 'theme-blue',};const ThemePage: React.FC<ThemePageProps> = () => { const containerRef = useRef<HTMLDivElement>(null); const [theme, setTheme] = useState('theme-red'); useEffect(() => { document.documentElement.className = theme; }, [theme]); return ( <div className={styles.root} ref={containerRef}> <div className={styles.content}> <div className={styles.title}>我是题目</div> </div> <div className={styles.btnWrap}> {Object.entries(themeMap).map(([key, value]) => ( <span key={value} onClick={() => setTheme(value)}> {key} </span> ))} </div> </div> );};export default ThemePage;5. 编译后css文件红色主题 ...

本文章是自己从CSDN迁徙的原创文章2021-12-06更新 提供的vite插件@zougt/vite-plugin-theme-preprocessor，已在v1.4.0反对在线动静主题的实现，比原文中提到的计划六的插件更加易用，具备如下特点： 应用老本很低跟ui框架无关，Element-ui、iview、Ant-design 等等等（只有基于 less/sass）都能够不依赖 css3 vars浏览器兼容性良好一个主色带动所有梯度色不须要在线编译，性能优webpack的插件也将会反对，（不只是wepback，有工夫会扩大到更多的构建工具）。 而预设多主题的实现曾经反对vite和webpack，就是以下的原文： 需要背景当应用 react + ant-design 或 vue + element-ui 的组合或者其余框架，在进行我的项目开发到一半或者曾经实现开发时，客户方想要退出在线预设主题切换的成果，这时有如下的抉择： 计划一：应用 css3 的 Variables(须要思考浏览器反对状况)重新整理源码中的 less 或者 sass 变量，在线批改 css 变量达到切换成果，然而组件库中应用了很多的 less 或者 sass 的色彩函数还只是预处理能力不反对 css 变量编译的，须要做很多的组件款式笼罩解决，这是须要不少的工作量的；计划二：预设多份 less 或者 sass 变量文件，应用 webpack 或 gulp 等构建能力提前将所有的款式(包含组件库的)编译出总的多份 css 文件，在线切换 css 文件达到目标，然而须要对我的项目的所有的 less、sass 的援用模式作调整，对构建环境也需很大的调整，款式与 js 齐全拆散，如果有应用 css modules 是更大的麻烦，而且在开发模式下批改调试款式极其不敌对，还不能敌对地对组件库的的 less 或 sass 按需编译；计划三：(不事实的)采纳 css in js 计划对页面和组件重构；计划四：如果你须要的是在线用色彩面板抉择任意的主题色切换，如果是 less 则能够采纳 less.js 在线编译的能力(不思考性能状况)，如果是 sass 则须要后盾服务实时编译 sass，但这些对应用 css modules 的不太敌对解决，在原来的我的项目做改变也要不少的工作量；计划五：如果应用的是 ant-design,能够抉择采纳antd-theme-webpack-plugin、antd-theme-generator、umi-plugin-antd-theme等，这也仅限于 antd；计划六：应用webpack-theme-color-replacer(vite版本对应的是vite-plugin-theme)，此办法是能够选任意主题色切换的，并且不须要实时编译的后盾服务，然而应用起来略显简单，像antd-design这类组件库提供了一个主题色生成其余梯度色彩的js办法的，可能分明整个组件库的色彩梯度是如何与主题色关联的，这类就还好一点。还有就是这种做法只实用于色彩值，如果还须要蕴含border-radius、font-size等其余非色彩变量值，用这个形式可能无奈做到，因为主题不只是色彩局部。以上的计划如果都不适宜你，无妨往下看看 ...

再很多3D机房计划中，管线治理.始终是无奈切实解决的痛点。次要起因有如下几个：1、品种繁冗，机房管线线路繁冗，光是线路类型就包含了强电，遴选公务员弱电走线、光纤网线、消防管线、甚至包含国防线（政策上是躲避展现的） 施工图纸整顿繁冗，波及到各种类型的线路，施工图都起源一大堆，着实无奈动手建模工作量大，线路的建模，是最繁冗的，除了线路多，走势还盘根错节那么针对下面的痛点，咱们又该如何解决。 首先是素材起源问题，记得高中学过，唯心主义辨证方法论的思维，牵牛咱们要牵牛鼻子，既然线路繁冗，何不挑重点先解决，数据中心这个行业，管线最关怀的还是光纤网络线路，而且是只正对数据服务器的网络线路，其它什么强电弱电，甚至是机房外部的动环零碎传感器走线，都不是那么重要。所以咱们先提出主要矛盾。遴选公务员重点解决机房数据业务的网络走线即可。 逻辑线路：只记住终点与通过的设施节点以及起点，主动智能化生成线路。线路不依照理论走向，只记录形容线路上设施的逻辑点位。咱们的解决方案是采纳前面两种，虚实联合。好了 闲话少叙，纳入正题：http://lx.gongxuanwang.com/ss...

1.听闻远方有你  出发跋涉千里。 2.我的每一支笔都晓得你的名字。 3.既然决定了要喜爱小众  就不要怕公众的指导和眼光。 4.有人骂你狼子野心  也有人独爱你灵魂有火。 5.我不想吃平庸的苦  所以我必须登上高峰。 6.心愿你是一颗糖果能收购的小姑娘  也是一座金山都换不回的女英雄。 7.低质量交友不如高质量独处。 8.好好睡一觉是人生的重启形式。 9.自爱和独立  才是意义上的成长。 10.这世界太嘈杂  四周都是实话。 11.所有原谅都是因为不想失去。 12.孤单的人都有他们本人的沼泽。 13.爱你的人已星夜兼程  走在去路。 14.如果喜爱和适合能撞个满怀该多好。 15.你和星星一起  温顺了世间和我所有的梦。 16.心愿坦坦荡荡且利落  完结所有不值得的关系。 17.当你放开了过来  更好的事就会降临。 18.只想和懂我的人说一声幸会。 19.吃不了自律的苦  就要受平庸的罪。 20.咱们都在奔赴不同的人生了。

就是将类型由原来的具体的类型参数化，相似于办法中的变量参数，此时类型也定 义成参数模式（能够称之为类型形参），而后在应用/调用时传入具体的类型（类型实参）。星池starpool 日期/工夫格式化子类的抽象类，它以与语言无关的形式格式化和剖析日期或工夫。它提供了许多类办法，用于依据默认或给定的区域设置和多种格局款式获取默认日期/工夫格式化程序。也可帮忙您格式化和解析任何区域设置的日期。队尾(rear)是容许插入的一端。队头(front)是 容许删除的一端。空队列是不含元素的空表。 在List汇合中容许呈现反复的元素，https://www.starpool.cn 所有的元素是以一种线性形式进行 存储的，在程序中能够通过索引来拜访汇合中的指定元素。另外，List汇合还有一个特点就是元素有 序，即元素的存入程序和取出程序统一

Oracle 对ORA-01591谬误的形容是"lock held by in-doubt distributed transaction %s，由分布式事务持有锁造成的。通过谬误的cause能够看到’Trying to access resource that is locked by a dead two-phase commit transaction that is in prepared state’该谬误是由拜访一个处于prepared状态的二阶段事务所持有锁的资源造成的。 上面简略介绍一下分布式事务。 分布式事务，简略来说，是指一个事务在本地和近程执行，本地须要期待确认近程的事务完结后，进行下一步本地的操作。如通过dblink update近程数据库的一行记录，如果在执行过程中网络异样，或者其余事件导致本地数据库无奈得悉近程页游数据库的执行状况，此时就会产生in doublt的报错。此时须要dba染指，且须要分多种状况进行解决。 分布式事务的，会经验3个阶段： 1.PREPARE PHASE ： 1.1 决定哪个数据库为commit point site。（注，参数文件中commit_point_strength值高的那个数据库为commit point site） 1.2 全局协调者（Global Coordinator）要求所有的点（除commit point site外）做好commit或者rollback的筹备。此时，对分布式事务的表加锁。 1.3 所有分布式事务的节点将它的scn告知全局协调者。 1.4 全局协调者取各个点的最大的scn作为分布式事务的scn。 至此，所有的点都实现了筹备工作，咱们开始进入COMMIT PHASE阶段，此时除commit point site点外所有点的事务均为in doubt状态，直到COMMIT PHASE阶段完结。 2.COMMIT PHASE ：2.1 Global Coordinator将最大scn传到commit point site，要求其commit。2.2 commit point尝试commit或者rollback。分布式事务锁开释。2.3 commit point告诉Global Coordinator曾经commit。2.4 Global Coordinator告诉分布式事务的所有点进行commit。 3.FORGET PHASE ：3.1 参加的点告诉commit point site他们曾经实现commit，commit point site就能遗记（forget）这个事务。3.2 commit point site在近程数据库上革除分布式事务信息。3.3 commit point site告诉Global Coordinator能够革除本地的分布式事务信息。3.4 Global Coordinator革除分布式事务信息。 ...

某客户数据库（Oracle 10.2.0.4）没做任何更改的状况下，简直每个周末上午业务频繁呈现卡顿提早景象，通过认真诊断初步断定因为业务量激增导致tuxedo参数达到阈值，5月10日优化tuxedo参数后业务中断景象不在呈现。 一周后卡顿又一次呈现，第一工夫捕捉景象深刻诊断，联合数据库awr性能报告和nbu备份慢的景象，经测试后发现存储读取速率只有原来的四分之一(50-80M/s)性能降落显著，最终定位链路异样导致整个存储性能降落，前台反馈卡顿提早。具体分析过程如下： 联合数据库及操作系统资源应用状况，能够看出故障时间段页游数据库始终处于忙碌状态，从数据库期待事件及性能剖析报告中，顶峰时间段数据库正在进行备份操作，耗费了大量I/O资源，操作系统磁盘使用率也十分之高，cpu呈现了局部I/O期待。 以上种种景象根本能够断定，故障时间段操作系统I/O的响应曾经无奈满足以后数据库需要，导致数据库呈现了重大的I/Owww.pizei.com期待，从而间接影响了NBU备份工夫的缩短。 为了证实这一点，具体查看数据库I/O性能指标，如下： 查看故障时间段数据库I/O性能指标，失常状况下数据库对I/O的响应要求在10ms之内，以后的指标远远超过了该值，联合之前操作系统磁盘使用率靠近100%的时候整个I/O的输入也只有39-80M/S之间，异样显著。 进一步咱们还通过dd及磁盘文件拷贝测试，同样发现磁盘I/O读速率只有50-80M/S原来的四分之一，此时曾经能够判定主机到存储的链路或存储自身存在异样。

癌症相干成纤维细胞的生物标志物 题目 Biomarkers for cancer-associated fibroblasts 单位 1Department of Thoracic Surgery, The Affiliated Cancer Hospital of Nanjing Medical University & Jiangsu Cancer Hospital & Jiangsu Institute of Cancer Research, Jiangsu Key Laboratory of Molecular and Translational Cancer Research, Nanjing, China.2Department of Science and technology, The Affiliated Cancer Hospital of Nanjing Medical University & Jiangsu Cancer Hospital & Jiangsu Institute of Cancer Research, Jiangsu Key Laboratory of Molecular and Translational Cancer Research, Nanjing, China.Keywords: Biomarker, Cancer-associated fibroblasts, Heterogeneity ...

sass/scss和less的区别：相同点：变量 混入(Mixins) 嵌套 运算 命名空间 作用域 函数不同点：1、编译环境不一样Sass是在服务端解决的，以前是Ruby，当初是Dart-Sass或Node-Sass，而Less是须要引入less.js来解决Less代码输入css到浏览器，也能够在开发环节应用Less，而后编译成css文件，间接放到我的项目中。2、编写变量的形式不同。Sass应用$，而Less应用@。3、Sass反对条件语句，能够应用if{}else{},for{}循环等等。而Less不反对。 正文less提供两种正文：/**/和//两者的区别是/**/会将正文编译到css文件中，而//不会。 变量Less中的变量有以下规定：以@作为变量的起始标识，变量名由字母、数字、_、-组成；没有先定义后应用的规定；定义时 "@变量名: 变量值;" 的模式；援用时采纳 "@变量名" 或 "@{变量名}" 的模式. f.box{ background-color: @color;}// 甚至能够用变量名定义为变量: @fnord: "I am fnord.";@var: 'fnord';content: @@var;// 解析后content: "I am fnord."; 变量能够用相似ruby和php的形式嵌入到字符串中，像@{name}这样的构造 @base-url: "http://assets.fnord.com";background-image: url("@{base-url}/images/bg.png");混合混合能够将一个定义好的class A轻松的引入到另一个class B中，从而简略实现class B继承class A中的所有属性。咱们还能够带参数地调用，就像应用函数一样。 @testz_width:300px;.box{ width: @testz_width; height: @testz_width; background-color: yellow; .border;}.border{ border: solid 5px pink;}// 输入：.box { width: 300px; height: 300px; background-color: yellow; border: solid 5px pink;}咱们还能够带参数地调用，就像应用函数一样。 // 混合带参数.border_02(@border_width){ border: solid yellow @border_width;}.text_hunhe{ .border_02(30px);}// 输入：.border { border: solid 5px pink;}咱们还能够混合是默认带参，当调用的class不传参时，就会传入默认参数 ...

平时的我的项目因为依赖包不多根本都是一个依赖应用一个仓库，但如果开发较为大型的我的项目，或者我的项目组件抽出的比拟细，这种场景下一个依赖应用一个仓库就加大了治理难度。Monorepo就是解决这样场景而产生的，像是Babel、Vue3、React都是应用这样的治理形式。 Monorepo优劣势劣势1、不便代码治理 依赖数据一旦多起来时，泛滥的我的项目仓库会使得批改关联性能须要在几个仓库间切换。 依赖扩散，治理上须要更多的精力，如果不足持续性治理，可能导致功能模块定义偏差。或是各个我的项目内容易存在过多功能雷同的代码，也不不便提取复用。 如果文档整顿不全，有可能呈现交接时导致仓库遗失的状况。 2、分支构建对立 因为模块数众多，各个模块的版本治理与模块分支对应也会越来越简单。 因为模块数众多，可能因为某个小模块的代码批改而未被留神到，导致不容易检测。 3、不便复用与测试 所有依赖同在一个仓库，不便复用、批改、测试。 劣势1、不利于权限治理 因为所有代码都放在同一个仓库，不利于做权限治理，对于我的项目不相熟的人容易批改到其余中央代码。 2、仓库体积大 因为所有代码同放一个仓库，可能有时候批改一个小性能须要拉下残缺的仓库。 如果是引入长期开发者或是新人，不利于疾速上手我的项目。 Lerna、Yarn与Monorepo关系文章题目提到Yarn、Lerna这是比拟支流的Monorepo仓库管理工具。 Yarn是Facebook为了解决NPM应用中诸多问题而创建的包管理工具，其中自带了workspaces性能，能够通过配置根目录的package.json来实现Monorepo仓库治理。然而Yarn只解决了包治理的问题，对于包内的依赖、发版仍然麻烦，此时就须要另一个工具Lerna。 Lerna就是Babel我的项目在包治理时发现解决依赖等诸多不便，因而产生的管理工具。 Monorepo利用装置装置lerna和yarn npm i -g lerna yarn初始化我的项目进入目录，执行初始化命令 lerna init能够应用--independent参数来创立independent模式的我的项目。 lerna有两种版本号管理模式：fixed 和 independent。fixed是默认模式，在这模式下所有包都应用lerna.json里的version字段值。independent模式是每个包应用独立的版本号。执行后在我的项目下会多出package.json、lerna.json文件和packages目录。 packages目录就是寄存多个我的项目的目录，在配置文件中能够批改。 在package.json能够增加一些配置， "private": true, // 公有，主工程不会被公布"workspaces": [ // 申明子package我的项目门路，yarn会读取应用 "packages/*"]lerna.json能够配置一些参数： version: 版本号npmClient: 应用指定的包管理器，值为yarn、npm。默认为npmcommand.publish.ignoreChanges: 值为数组，配置疏忽变更的文件或目录command.publish.message: 自定义公布新版的提交信息，参看@lerna/version （翻译版@lerna/version）command.publish.registry: 配置公布的自定义仓库地址command.bootstrap.ignore: 值为数组，lerna bootstrap命令疏忽的包command.bootstrap.npmClientArgs: 值为数组，lerna bootstrap命令时，会将此变量值传递给npm installcommand.bootstrap.scope: 值为数组，lerna bootstrap命令针对哪些包执行packages: 值为数组，所有子包的门路依赖治理装置依赖只有在我的项目主目录下执行 yarn installyarn会主动读取workspace配置，就能主动装置、解决、软链接各个子包的依赖，对立放在根目录下。 也能够应用lerna的装置命令 lerna bootstrap但可能不如yarn的包管理机制好用，能够看这篇文章《Lerna的依赖治理及hoisting浅析》 增删依赖主我的项目增加依赖 yarn add -W -D [packageName]-W 是指定在我的项目根目录执行命令删除公共依赖 yarn remove -W -D [packageName]给所有子项目增删依赖 ...

vue cli3初始化构建我的项目时，自定义抉择应用less作为css预处理器之后，就会默认装置less、less-loader，并且间接能够在组件中失常应用嵌套构造书写css了。 然而，当咱们须要应用less变量时，比方上面的状况1. 我新建了一个common.less文件，并在main.js中引入它： 2. common.less中任意定义一个变量，比方： 3. 将组件中任意色彩值，批改为 @pink（对应左侧绿色字体） 4. 这时编译报错变量未定义：Variable @pink is undefined 怎么样能力失常应用呢？5. 装置 style-resources-loadernpm i style-resources-loader6. 在vue.config.js（若没有该文件，在根目录下新建）中，减少上面的配置：patterns传入你要加载的含less变量的文件地址（相对路径）。能够传字符串，也能够传数组 const vueConfig = { // 加上以下的配置 chainWebpack: (config) => { const oneOfsMap = config.module.rule("less").oneOfs.store; oneOfsMap.forEach(item => { item .use("style-resources-loader") .loader("style-resources-loader") .options({ // or an array : ["./path/to/vars.less", "./path/to/mixins.less"] 这里的门路不能应用@，否则会报错 patterns: "./src/assets/css/common.less" }) .end() }) } // 其余配置... } module.exports = vueConfig7. 而后重启我的项目 npm run dev，发现能够失常应用了 less变量的状况，我个别用于全局定义几个罕用的色值，组件中拿变量应用，这样前期保护起来，只须要去批改定义的中央即可。还是很不便的~

前 言LeSS的第一次学习是在2019年1月份，过后的感觉挺烧脑，对SystemThinking第一次接触，很多货色似懂非懂，学得并不是很扎实。侥幸的是，两年后终于有机会跟着吕毅老师重修LeSS，也算是对常识的从新回炉了。 第二次加入培训，对于LeSS的更粗疏内容以及使用System Thinking来思考LeSS背地的深层机理有了更深的意识。依照集体学习习惯，照例还是会在培训后写一篇文章作为学习的总结。 特别强调一点，不是说本人有多怠惰，而是想通过输入倒逼输出。大家晓得，很多培训因为在短时间内灌输了大量常识，所以过后大部分的内容只是浅层记忆，尽管感觉有播种，然而过几天就忘得一尘不染了。而如果培训后没有做进一步的整顿，常识没有造成体系化变成本人脑袋里的货色，最终只是竹篮打水一场空。所以我也只是强制本人做一些整顿工作，不然就没有能源再进行温习了。 一、LeSS由来LeSS的全称是Large-Scale Scrum的缩写，是由Craig Larman和Bas Vodde提出的。在2005年左右，Bas还是诺基亚西门子通信公司（简称诺西）的雇员，过后的诺西正在经验从传统开发向麻利开发转型的期间，而Craig作为其中一名内部麻利教练被应聘到诺西帮忙进行麻利转型。 Craig一开始筹备了过后风行的各种轻量级开发框架介绍对诺西的各个团队进行简略的培训，这些轻量级开发框架包含DSDM、XP和Scrum等。而后Craig让团队本人抉择须要采纳哪种框架。最初，有80%以上的团队选了Scrum，起因很简略，Scrum是绝对比较简单的框架，而大家都想挑简略的做。 确定好Scrum后，Craig和Bas又面临一个新的问题。因为Scrum举荐的团队人数是5-9人，而诺西过后的产品团队少则几十人，多则几百人，这种状况该如何更好的采纳Scrum使得既能反对数百人的团队规模，又能放弃Scrum的轻便性呢? 于是Craig和Bas在麻利转型期间做了大量的试验（600多个试验），有些试验无效，有些试验有效。他们俩依据这些试验总结提炼出了一套适应于大规模麻利被称之为LeSS的办法，并写成了两本书，一本叫《精益和麻利开发大型利用指南》，一本叫《精益和麻利开发大型利用实战》。 然而之前的著述次要是分享LeSS具体的试验成绩，比方哪些试验能够驳回，哪些试验须要防止，这对于习惯于先理解总体后理解细节的人们来说有点难入门。因而两位创始人进行了反思，并且认可了“守破离”的形式，于是他们设计出了明天咱们所看到的LeSS框架。 二、LeSS全图咱们只有理解完LeSS的历史后，能力对LeSS全图有更粗浅的了解。 LeSS全图分为四个档次： 最外层是试验，也就是下面提到的Craig和Bas在LeSS施行期间做了600多个试验来验证；往里面一层是指南，两位创始人总结了大略50多个指南，并在他们的第三本LeSS著述《大规模Scrum：大规模麻利组织的设计》中进行具体介绍；再往里一层是框架，接下来咱们会对LeSS框架进行具体的探讨；最外面一层是准则，Craig和Bas把LeSS设计的核心思想提炼了10条准则，咱们将在下个大节介绍。 三、LeSS准则LeSS的准则一共有10条，咱们能够把它们分成三类： 1）与Scrum相干 大规模Scrum也是Scrum——它不是新的被改良的Scrum；透明度；经验性过程管制——Scrum自身就是基于经验性过程管制。2）LeSS本身相干 以少为多——不想要减少更多的角色，因为会导致团队的责任感变弱；不想要更多的工件，因为会导致团队与客户的间隔更远；不想要更多的流程，因为团队对流程的所有权更弱。整体产品聚焦——一个Product Backlog，一个Product Owner，一个PSPI，一个Sprint。以客户为核心——专一于理解客户真正的问题并解决这些问题。3）Meta准则（准则的准则） 排队论；零碎思维——察看、了解和优化整个零碎而不是部分；精益思维；继续改良以求完满——团队须要一直地进行改良试验。四、LeSS框架LeSS依据团队规模不同有两个框架，一个是LeSS框架，适宜2-8个Scrum团队；一个是LeSS Huge框架，适宜8个以上团队。尽管两个框架有所不同，然而它们还是有一些独特要点： 一个产品负责人和一个产品代办事项列表；一个跨所有团队的独特Sprint；一个可交付的产品增量。1）LeSS框架 让咱们先来思考，当一个我的项目只有一个Scrum团队的时候，毫无疑问大家都比拟相熟了，在这里不再赘述。然而如果一个我的项目超过一个Scrum团队的范畴该怎么办？很多人马上会想到，那就组织多个Scrum团队一起工作呗。（比方3个Scrum团队） 咱们再来看Scrum中有个驰名的“3355”的说法，也就是Scrum外面蕴含3个工件、3个角色、5个流动和5个价值观。那么这时问题就来了，对于多个Scrum团队一起工作，咱们是须要1份总的Product Backlog还是保留3份各自Scrum Team的Product Backlog？抑或是1（总的Product Backlog）+3（每个Scrum team各自的Product Backlog）份？ 到底是1还是3还是1+3？不晓得大家有没有进行深层次的思考？LeSS中的答案是只有1份Product Backlog。具体起因在吕毅老师的LeSS培训中花了大量的精力从零碎思维的角度剖析过。 第二个问题是PO须要多少个？只有1个PO还是每个Scrum Team有各自的PO？还是说有一个总的大PO+3个Scrum Team的PO？ 当然，LeSS中强调即便有多个团队，然而只能有一个PO，一个PO对应一份Product Backlog能力保障整体产品聚焦，同时能够防止多PO职责不清的状况。同理可知，一份Product Backlog只对应一个PSPI的输入。 而为了实现在每个Sprint完结后只有一个PSPI的输入，所以3个Scrum团队须要有对立的开发节奏，也就是说Sprint的开始完结工夫必须拉齐，所以LeSS只能有一个Sprint；最初，如果输入只有一份交付件的话，那Sprint Review Meeting也只需一次就行了。因而咱们能够从客户和产品为核心的维度拉出这样的性能条目工作流： （1个）PO ->（1份）Product Backlog ->（1个）Sprint->（1份）PSPI ->（1个）Sprint Review Meeting 接下来咱们再从团队的工作流角度来剖析: 咱们晓得当初有3个Scrum团队，每个团队各自做本人负责的工作。咱们在做Sprint Planning的时候该怎么做？ 咱们须要有一个所有人或者至多所有Scrum团队的代表能加入的打算会，从而使得每个团队都能理解本次Sprint的指标以及各团队晓得该做什么条目，这也被称为Sprint打算一。 当然各团队领了具体工作条目后，具体的工作还须要每个团队本人回去磋商，所以每个团队还会进行Sprint打算二；因而Sprint Planning变成了1+3。（如果有些需要在两个团队之间关联比拟严密的话，也能够两个团队合在一起做多团队Sprint打算二。） 接下来咱们看Sprint Backlog的份数，因为咱们每个团队各自都会做Sprint Planning，毫无疑问应该每个团队各自有各自的Sprint Backlog，也就是说Sprint Backlog应该是3份。 咱们再看每日站会，显然各自团队能够本人开每日站会，咱们没必要举办整体的站会，这会十分耗时。可能很多人会问，对于有些工作会波及到一些跨团队合作，该怎么办？ 一但碰到须要跨团队合作的事件须要实时的进行团队间沟通和协调，而不须要依赖某个固定的工夫和会议再来探讨。 ...

简介： 第十一届中国数据库技术大会（DTCC2020），在北京隆重召开。大会以“架构变革 高效可控”为主题，重点围绕数据架构、AI与大数据、传统企业数据库实际和国产开源数据库等内容开展分享和探讨。在数据库智能运维专场上，邀请了阿里云数据库高级技术专家王涛为大家介绍阿里巴巴电商数据库上云的抉择、思考与实际。阿里巴巴电商数据库原先是在本人独立的IDC保护的，随同着阿里巴巴上云我的项目，数据库轻松实现上云。阿里云云原生管控以及云原生数据库技术能够帮忙业务实现平滑上云指标，进而实现资源最大化老本最优化的指标。阿里巴巴心愿利用阿里云的技术体系，帮忙客户大规模上云，打造本人的运维管控平台。 演讲嘉宾简介：王涛，阿里云数据库高级技术专家，来自阿里云数据库产品事业部，喜爱并酷爱数据库。职业生涯：程序员->DBA->DevOps架构师。2007年开始参加、设计、主导了阿里巴巴数据库体系演进，主导参加了阿里巴巴数据库体系演进，经验了数据库去IOE，规模化MySQL运维，阿里数据库异地多活，数据库上云等多个外围我的项目。目前为阿里云RDS管控负责人，为大家提供平安、稳固、经济、智能的数据库服务。 本次分享次要围绕以下四个方面：一、阿里巴巴电商数据库利用场景介绍二、数据库管控平台演进三、数据库上云的抉择与思考四、将来瞻望 一、阿里巴巴电商数据库利用场景介绍1. 阿里业务个性介绍 —— RDS三节点企业版 什么是阿里巴巴电商数据呢？大家看到的淘宝、天猫、盒马、饿了么上的数据都属于阿里巴巴电商数据，这些业务说应用的数据库目前都在云上。阿里巴巴之前的数据库是RDS高可用版，采纳一主多备模式，然而发现实例无奈做到RPO为零。尝试应用了MySQL半同步等措施，但仍然无奈解决RPO为零的问题。其次是思考采取CAP实践或者BASE实践的问题。CAP指的是一致性（Consistency）、可用性（Availability）、分区容忍性（Partition tolerance）。但事实上数据库是无奈做到同时满足CAP中的三点个性的，只能满足其中一到两项。对于BASE实践大家或者不太熟悉，其外围在于能够做到两头不统一，A和B机器可能独自的时候不统一，然而一旦连上之后就会统一。数据管控零碎上通常恪守BASE实践，数据库更多的时候是抉择CAP原理。解决RPO等于0的问题有几种实现形式，首先是MySQL半同步、还有MySQL Group Replication，这是MySQL 5.7版本之后推出的新性能，然而要求三份数据一样，这个老本是无奈承受的。因而阿里逐步走向了RDS自研的方向。 阿里巴巴在抉择数据库协定也是在Paxos协定 or Raft协定中彷徨，最终抉择了Paxos协定。 阿里巴巴在抉择数据库协定也是在Paxos协定 or Raft协定中彷徨，最终抉择了Paxos协定。Why Paxos，No Raft? 从下图右侧能够看到后面都在提交数据X、前面来了数据Y，在S3中先执行了P3.1，P4.5，A4.5 Y，这意味着Paxos协定不肯定要有序，而Raft是有序的。Raft协定会要求S3先执行P3.1、A 3.1 X而后再执行P4.5，A 4.5 Y。这是Paxos协定和 Raft协定最大的不同。其次，Paxos协定有三种角色，提交者（Propose），接收者（Accept）以及Learn。阿里巴巴自研的RDS对这三种角色进行了转化，Propose叫做Leader，指的是可读可写的数据库节点，Accept叫做Follower，多数派，有全量的数据，能够将本人变成Leader。还有Logger（阿里自研角色），只负责接管日志，没有数据。Leader和Follower有全量数据，Logger只是日志接管节点，如此CPU和内存老本就会升高。Learn叫做Learner，属于观察者角色，有全量数据但没有投票权，即便Learner挂掉，也不会影响Learner少数提交。 2. 阿里业务个性介绍 —— 异地多活 家喻户晓，阿里巴巴的业务还有一个个性，就是异地多活。异地多活有两点益处，都是能够具备Region级别逃逸能力，用户能够在任意单元进行交易。下图右侧是User通过规定分流，在数据中心及其它单元都能够进行交易。异地多活能够做到程度扩大和异地容灾，在每年的双11能够长期建设站点，在9月份建好，在双11之后2周撤掉。 3. 阿里业务个性介绍 —— 数据库异地多写 那么RDS如何应答异地多活？异地多活意味着异地多写。下图展现了反对异地多活的数据库散布状况，首先要有一个核心DB，对应多个核心环境，别离是交易、购物车、商品等。核心数据库写的数据会到对应的Store，Store能够防止调多个线程时影响数据库性能的问题。Writer负责将数据写到对应的单元DB。单元DB中的数据通过Store回到核心的Writer，回到核心DB。能够发现数据的push出现星状，而不是网状，这是出于几点思考，首先很难做DTL，大家都在做DTL，很容易被复制；其次，星状构造能够至多保障一个节点数据是全局统一的，哪怕单元DB挂掉，在核心DB中也有全量数据。 4. 阿里业务个性介绍 —— 数据库异地只读 阿里业务个性使得数据库须要有反对异地只读的个性。Learner节点，具备全量数据，不影响Paxos协定，每个Learner节点都要灾备节点。基于数据库原生复制一致性高。要保障MySQL外部数据的一致性。因而数据库架构会如下图右侧所示，核心有三种节点：Follower、Logger、Learner，它们之间能够相互切换。每个单元有Learner节点和备用的Learner节点，单元利用也在单元Learner中。假如要做一级容灾，那么能够将单元写权重路由到核心，通过核心再Put到各个单元中，如此不仅能够做的全局一致性还能够做到异地多写。 二、数据库管控平台演进1. 数据库管控平台定义 大家往往会误以为做数据库管控就是做数据库运维，但事实上并不是那么简略。数据库管控要做的事件有十分多：首先，数据库高可用是独立的模块，业界罕用的有HA策略；数据备份，业界有备份策略，如全量备份、日志备份、数据轨迹备份等；数据库运维包含实例创立、实例变更、实例销毁、备库重大搭等；建设基础设施，如IDC、服务器选型、硬件运维、CMDB；数据库监控链路和数据告警链路两个不同的模块；还有数据库的计量计费；资源调度；控制台；数据库底层服务，如网关、服务发现等；数据库安全；智能数据库，如数据库智能诊断、数据库智能调参、性能调优等，也是目前次要的一个模块；数据巡检，如配置、参数、状态巡检；网络管理；故障演练；异地多活等等。 能够发现，即便粗略的列举完数据库管控平台蕴含的内容，也会十分多的模块，这导致平台的系统性、复杂性都很高，因为对数据库的依赖性很高，必然造成对其可用性的要求的晋升。那么这些要求应该如何满足？ 2. 阿里巴巴数据库管控平台演进 阿里巴巴的数据库管控平台也是经验了若干代前辈的致力：1) 2003年，过后并没有DBA这个职业。阿里从SA（系统管理员）团队拆出了一位同学做DBA，属于纯人工运维。2) 2006年，开始应用业界风行的Nagios、Cacti等开源工具。3) 2009年，阿里开始自研，自主研发了第一代运维零碎“北斗”，替换了Nagios、Cacti等开源工具。4) 2010年，阿里巴巴开始进行去IOE工作，减速了管控的规模化运维，阿里第一代MySQL运维零碎诞生，“天机”。次要面向监控、可用性、备份。属于单体利用。5) 2013年，随着业务规模不断扩大，阿里第二代MySQL运维零碎诞生，“DBFree”。次要面向自动化运维。6) 2016年，阿里第三代数据库运维零碎“DBPaaS”诞生，满足异地多活、混合云等业务需要。7) 2018年，底层IaaS上云，应用云资源。8) 2020年，阿里电商数据库全面开始上云，开始应用云管控。所有外围数据库（交易、购物车、商品、优惠等）及外围链路都采纳云数据库专属集群（MyBase）模式。基于云原生数据库，构建了上万个节点，实现了RPO=0。 数据库上云的抉择与思考1. 上云计划抉择 —— 数据上云计划抉择 ...

Less 提供了CSS @import CSS规定的几个扩大，以提供更多的灵活性来解决内部文件。 语法： @import (keyword) "filename"; 以下是导入指令的相干详情： reference，应用较少的文件但不输入。inline，在输入中蕴含源文件，但不对其进行解决。less，无论文件扩展名为什么，都将其视为less文件。css，无论文件扩展名为什么，都将其视为CSS文件。once，仅蕴含一次文件（这是默认行为）。multiple，屡次蕴含文件。optional，找不到文件时持续编译。参考应用 @import（reference）导入内部文件，但除非被援用，否则不将导入的款式增加到编译的输入中。 reference 依据所应用的办法（混合还是扩大），会产生不同的后果： mixin：当reference款式用作隐式mixin时，它的规定将被混合，标记为 “not reference”，并照常显示在被援用的地位。extend：扩大选择器时，仅将新选择器标记为未援用，并将其拉入援用 import 语句的地位。Inline应用 @import (inline) 包含内部文件，但不能对其进行解决。 Less应用 @import (less) 医治导入的文件一样都不能少，无论文件扩展名。 @import (less) "main.css";CSS应用 @import (css) 医治导入的文件作为惯例CSS，无论文件扩展名，也就意味着import语句将放弃原样。 @import (css) "main.less"; // 输入 @import "main.less";Once@import 语句的默认行为，也就意味着该文件仅导入一次，该文件的后续导入语句将被疏忽。 @import (once) "main.less"; // 此语句将被疏忽 @import (once) "main.less";Multiple应用 @import (multiple) 容许应用雷同的名称导入的多个文件，这是一次相同的行为。 // file: main.less div { color: green; } // file: index.less @import (multiple) "main.less"; @import (multiple) "main.less"; // 输入后果 div { color: green; } div { color: green; }

明天的知识点 (2021.01.03) —— 第628天 (我也要出题)[html] 写一个垂直的三栏布局，第一栏固定顶部，两头铺满，第三栏固定底部[css] 应用Less有哪些形式？[js] 写一个办法，实现批改以后的URL链接但页面不跳转的性能[软技能] 如何把团队的工作教训积淀下来？有哪些办法？《论语》，曾子曰：“吾日三省吾身”（我每天屡次检查本人）。前端面试每日3+1题，以面试题来驱动学习，每天提高一点！让致力成为一种习惯，让奋斗成为一种享受！置信 保持 的力量！！！欢送在 Issues 和敌人们一起探讨学习！ 我的项目地址：前端面试每日3+1【举荐】欢送跟 jsliang 一起折腾前端，零碎整顿前端常识，目前正在折腾 LeetCode，打算买通算法与数据结构的任督二脉。GitHub 地址 微信公众号欢送大家前来探讨，如果感觉对你的学习有肯定的帮忙，欢送点个Star, 同时欢送微信扫码关注 前端剑解 公众号，并退出 “前端学习每日3+1” 微信群互相交换（点击公众号的菜单：交换）。 学习不打烊，充电加油只为遇到更好的本人，365天无节假日，每天早上5点纯手工公布面试题（死磕本人，愉悦大家）。心愿大家在这虚夸的前端圈里，放弃沉着，保持每天花20分钟来学习与思考。在这变幻无穷，类库层出不穷的前端，倡议大家不要等到找工作时，才狂刷题，提倡每日学习！（不忘初心，html、css、javascript才是基石！）欢送大家到Issues交换，激励PR，感激Star，大家有啥好的倡议能够加我微信一起交换探讨！心愿大家每日去学习与思考，这才达到来这里的目标！！！（不要为了谁而来，要为本人而来！）交换探讨欢送大家前来探讨，如果感觉对你的学习有肯定的帮忙，欢送点个[Star]

明天的知识点 (2020.12.29) —— 第623天 (我也要出题)[html] 写一个windows phone格调的布局[css] Sass和Less有什么相同点？[js] 解释下3 + "2" - 5的值为多少？[软技能] 你会装零碎吗？都有哪些办法？《论语》，曾子曰：“吾日三省吾身”（我每天屡次检查本人）。前端面试每日3+1题，以面试题来驱动学习，每天提高一点！让致力成为一种习惯，让奋斗成为一种享受！置信 保持 的力量！！！欢送在 Issues 和敌人们一起探讨学习！ 我的项目地址：前端面试每日3+1【举荐】欢送跟 jsliang 一起折腾前端，零碎整顿前端常识，目前正在折腾 LeetCode，打算买通算法与数据结构的任督二脉。GitHub 地址 微信公众号欢送大家前来探讨，如果感觉对你的学习有肯定的帮忙，欢送点个Star, 同时欢送微信扫码关注 前端剑解 公众号，并退出 “前端学习每日3+1” 微信群互相交换（点击公众号的菜单：交换）。 学习不打烊，充电加油只为遇到更好的本人，365天无节假日，每天早上5点纯手工公布面试题（死磕本人，愉悦大家）。心愿大家在这虚夸的前端圈里，放弃沉着，保持每天花20分钟来学习与思考。在这变幻无穷，类库层出不穷的前端，倡议大家不要等到找工作时，才狂刷题，提倡每日学习！（不忘初心，html、css、javascript才是基石！）欢送大家到Issues交换，激励PR，感激Star，大家有啥好的倡议能够加我微信一起交换探讨！心愿大家每日去学习与思考，这才达到来这里的目标！！！（不要为了谁而来，要为本人而来！）交换探讨欢送大家前来探讨，如果感觉对你的学习有肯定的帮忙，欢送点个[Star]

<div class="pa-xs mt-md" />通过这种形式增加款式，容易批改保护、对立调整且没有行间款式那样的高权重 Less版@spaceingType: { m: margin; p: padding;};@spaceingDirections: { t: top; r: right; b: bottom; l: left;};@spaceingBaseSize: 16px;@spaceingSizes: { no: 0; xs: 0.5; sm: 1; md: 1.25; lg: 1.5; xl: 2;};each(@spaceingType, .(@typeVal, @typeKey, @typeIdx) { // eg: mt-md each(@spaceingDirections, .(@dirVal, @dirKey, @dirIdx) { each(@spaceingSizes, { .@{typeKey}@{dirKey}-@{key} { @{typeVal}-@{dirVal}: @value * @spaceingBaseSize; } }) }) // eg: ma-md each(@spaceingSizes, { .@{typeKey}a-@{key} { @{typeVal}: @value * @spaceingBaseSize; } // eg: mx-md my-md .@{typeKey}x-@{key} { @{typeVal}-left: @value * @spaceingBaseSize; @{typeVal}-right: @value * @spaceingBaseSize; } .@{typeKey}y-@{key} { @{typeVal}-top: @value * @spaceingBaseSize; @{typeVal}-bottom: @value * @spaceingBaseSize; } })})Sass版$spaceingType: ( m: margin, p: padding);$spaceingDirections: ( t: top, r: right, b: bottom, l: left);$spaceingBaseSize: 16px;$spaceingSizes: ( no: 0, xs: 0.5, sm: 1, md: 1.25, lg: 1.5, xl: 2);@each $typeKey, $typeVal in $spaceingType { @each $sizeKey, $sizeVal in $spaceingSizes { .#{$typeKey}a-#{$sizeKey} { #{$typeVal}: $sizeVal * $spaceingBaseSize; } } @each $sizeKey, $sizeVal in $spaceingSizes { .#{$typeKey}x-#{$sizeKey} { #{$typeVal}-left: $sizeVal * $spaceingBaseSize; #{$typeVal}-right: $sizeVal * $spaceingBaseSize; } } @each $sizeKey, $sizeVal in $spaceingSizes { .#{$typeKey}y-#{$sizeKey} { #{$typeVal}-top: $sizeVal * $spaceingBaseSize; #{$typeVal}-bottom: $sizeVal * $spaceingBaseSize; } } @each $dirKey, $dirVal in $spaceingDirections { @each $sizeKey, $sizeVal in $spaceingSizes { .#{$typeKey}#{$dirKey}-#{$sizeKey} { #{$typeVal}-#{$dirVal}: $sizeVal * $spaceingBaseSize; } } }}

作者：阿里云高级技术专家 改天阿里云高级产品专家 胜通2020年天猫双十一成交额冲破4982亿，在双十一走过12个年头之际，咱们的订单创立峰值达到58.3万笔/秒，再次刷新寰球在线交易系统的记录。历年双十一都是对技术人的一次大考，峰值的丝般光滑体验是大家统一的谋求，而数据库堪称要害。多年双十一大促“磨难”出阿里巴巴DBA一整套技能来应答大考，比方说全链路压测、容灾预案、实时限流等，同时阿里的数据库产品能力也大幅晋升，如智能化的企业级MySQL内核AliSQL，自研PolarDB引擎等，这些硬核能力是阿里巴巴团体数据库团队应答大考的底气。 在数据库引擎技术能力一直攀登高峰的同时，长期以来咱们“仿佛疏忽”一个十分重要的因素，而该因素却是中大型企业上云的必须考量点。如果将时钟指针拨回到半年前，这个重要因素就摆在眼前，是阿里巴巴团体所有的数据库系统全面上云及云原生化过不去的“坎”，它是什么呢？ 一、阿里团体数据库全面上云的挑战当DBA保护的零碎上百套甚至上万套当前，系统管理的复杂度就会急剧回升，加上资源利用效率、业务顶峰反对（如大促流动评估）、流量治理等下级或业务方“强加给”DBA的工作后，整个零碎复杂度就会居高不下，这种复杂度“熵”就会指数级增长，并且无奈通过裁减DBA人数来无效解决问题，DBA本身也会陷入到繁冗的日常反对和“灭火”中，本身价值难以体现，这就是深坎。 阿里巴巴团体就是这样一个巨型的、零碎复杂度“熵”奇高的大型企业。往年阿里双十一要求所有零碎全面上云，相比单纯晋升零碎吞吐扩大能力的技术要求，这个工作更加难实现。简述下当初面临的严厉挑战： 1.如何保障大量数据库短时间内疾速上云？这不仅仅是数据的搬迁过程，还要在此期间反对业务需要，比方说如何做到对业务“无感知”的迁徙数据上云。如何在阿里的巨型体量下，保障所有零碎全面上云的丝般顺滑度？ 2.如何高效反对DBA满足双十一期间的数据库业务需要？DBA对业务零碎是相熟，多零碎之间有的相互依赖有的互相排挤，如何无效的将它们编排好，从而整体利用好数据库资源，这是十分大的挑战。 3.全面上云当前，要反对DBA仍旧对数据库的强治理能力，比方说可能及时登录操作系统排查数据库问题等。 二、全面上云的新打法，以专属集群RDS构建超高效数据库管理体系在全面上云这个残暴指标下，必须找到全新的办法来解决上述三个重点问题，构建一个高复杂度的但“凌乱熵值”很低的超高效的数据库管理体系。这就是全面采纳专属集群RDS的基本前提。 那么咱们是如何极短时间内全面上云并且可能丝般顺滑，如何充分发挥DBA的业务把控能力从而实现对RDS标准化服务的超高效力的治理，以及如何利用专属集群的源生内核能力构建寰球最大的异地多活电商零碎呢？ 2.1 丝般顺滑上云要实现丝般顺滑上云，须要充沛布局和精密的执行。因为阿里团体是隔离于私有云的网络环境，底层对数据库资源的网络配置上云后都会波及变动，数据库还要特地留神防止双写，要和业务做联动的流量治理。上图是咱们实现丝般顺滑上云的根底框架图：1.将数据传输门路尽量缩短，节俭大量工夫：因为阿里团体超高业务量，简直每个数据库系统的数据量都是微小的，少则TB多则PB为单位，咱们采纳最原始无效的办法，将备份文件拷贝到云上环境，而后执行疾速复原。 2.无效疾速复原是另一省时环节。阿里团体数据库广泛有两种存储类型，别离是本地SSD盘和ESSD云盘，两者的备份计划是不同的，本地SSD盘相似于Xtrabackup执行物理的备份，ESSD云盘采纳存储级快照备份。对应的两者疾速复原的办法也不同，本地SSD盘在备份时采纳库表级备份，而复原的则采纳并行表级复原，大幅度的晋升复原速度，ESSD云盘则通过秒级快照复原实现。也就是说从阿里团体网的全量备份、到数据两套环境的传输、到云上环境的疾速复原是一个联动的间断过程，从而大大节俭复原工夫。 3.利用MySQL源生复制实时追加增量数据，确保业务对数据的搬迁无感知。在复制技术方面，AliSQL 针对高提早网络做了大量的协定优化尝试和测试，通过正当的Batching和Pipelining，设计并实现了一整套自适应的针对高提早高吞吐和低提早高吞吐网络的通信模式，极大的晋升了日志传输的性能。另外为了节俭带宽，对binlog全面压缩，同时在压缩率和解压速率上采个较好的均衡值。 4.对立的混合网络环境代理实现流量的按需切换，确保业务感觉迁徙的过程是顺滑的。联动于业务部署，先切换读流量到云上环境，后切换写流量。因为代理层实现通明切换能力，在分钟级级内会放弃原有的数据库连贯，保障切写过程中业务是无感知的，在绝大数状况下成果很好。 2.2 灵便可控的标准化服务治理双十一波及数据库系统数万套，除交易、商品、用户、评估、优惠、店铺、积分等外围零碎外，还有各种“中小型”业务零碎，机会每个业务都有一套或多套数据库，每个业务之间有亲和性或排斥性需要，即必须要在专属集群中满足多样性的业务部署要求。 举例而言，咱们将购物车数据库和购物车利用本身部署在一起，确保购物车不受别的业务影响，同时购物车外部实现穿插部署，大抵部署图如下所示，通过灵便的部署策略，业务方DBA能够制订一套简单部署策略满足业务须要。如上所述参加双十一的业务方特地多，而DBA人数无限，DBA对业务的掌控水平也是高下不一的。一般而言，上述的外围业务基本上比拟清晰，这次要得益于双十一前的一次次全链路压测，交易外围链路业务模型比拟清晰，对数据库容量的预估会很精确。然而这并不是所有状况，比方说创新型业务，对业务流量评估会十分的不精确，可能百倍增长也有可能是百分比增长，此状况下DBA预留数据库资源没有参考根据，如何在无限的资源中反对足够多的创新型业务相对是一大挑战。再比方说原边缘型业务，会因为其余零碎的新依赖、或者业务流量徒增导致流量预期不准，更常见的是被其余零碎新依赖，还容易导致故障。为了解决该不确定性问题，咱们在专属集群上特地开发智能化DAS资源调度零碎，DBA能够通过简略的设置实例的弹性策略，DAS会依据过来零碎的体现状况以及突发状态，基本上以准实时的形式实现秒级资源弹性，分钟级资源调度。秒级资源弹性能力，是在整台主机范畴内灵便的对实例资源进行调整，也能够人工干预爱护一些实例资源不被争抢。分钟级的资源调度能力，这得益于存储计算拆散架构，通过分布式存储的秒级快照能力，以分钟级在不同主机之间从新均衡资源利用调度实例，因为高可用保障系统和代理通明切换能力，这个过程简直是平滑的。通过专属集群，DBA只须要投入一定量的服务器资源，而后专一监控整体集群的资源水位，就能够保障大量的翻新和小型业务的大促性能须要，堪称一夫当关万夫莫开。 2.3 构建源生异地多活双十一零点顶峰流量是微小的，往年交易笔数达到58.3 万笔/秒，数据库集群的TPS超过千万级每秒，微小的洪峰流量通过阿里的单元化数据库部署来分流，从而躲避单个实例单个机房的流量危险。与今年相比，往年单元化数据库全副采纳寰球数据库模式反对多地区的读流量，另外在内核中实现源生多写能力，反对实例集群级别的异地多写多活，从而能够在不同地区分担写流量。如上图所示本次双十一阿里巴巴启用张北、深圳、南通3个地区，针对每个Region是独立开服的，地区之间是低耦合的，通过一个桥梁把他们连接起来，它就是寰球数据库网络，（GDN，Global database network）。部署于不同地区的数据库，采纳MySQL的源生复制技术，保证数据的一致性和实时性。对于异地多活，第一次实现了在内核层的双向同步，在多个地区中都有各自主节点和备节点，在内核中实现双向复制，保障两个地区在数据总量上是统一的，同时写实现分地区分流。这里须要强调的一点，异地多活须要业务的革新，比方这个UID的数据只会在某一个地区写入防止行抵触，此外ID（PK键）也须要应用独立的Sequence，从而实现全局的一致性。业务和数据库在本套架构中实现完满联合，业务只须要关注逻辑的拆分，而数据库本身实现数据的同步组合，底层数据同步复杂性齐全由数据库本身实现。 三、瞻望总结而言，本次双十一为了保障团体数万数据库的全面上云及云原生化，咱们基于专属集群做了很多定向革新和匹配，获得了十分好的成果。外围交易链路总共构建数千台机器集群，总共超过数万的数据库节点，并且所有数据库系统RPO等于0，主备提早做到毫秒级，并保障整体人力效力数量级晋升。灵便调度、源生复制等定制化能力，在专属集群外部实现产品化，通过双十一验证后，逐渐凋谢，将会大幅度晋升企业数据库治理生产力，敬请期待。 原文链接本文为阿里云原创内容，未经容许不得转载。

本节咱们学习 CSS守卫（CSS Guards），在上一节中，咱们学习了混合守卫，如何对 Mixins 进行条件判断。然而某些时候咱们不止须要对 Mixins 进行条件判断， 也须要对 CSS 的款式类进行条件判断。所以这就须要用到 CSS 守卫啦。 CSS 守卫是在 v1.5.0 版本才增加的，而在 v1.5.0 版本之前，如果咱们要定义一个 CSS 守卫： .xkd() when (@choice = true) { p{ color: @color; }}.xkd();当初咱们能够间接在款式类上利用 guard ，例如： p when (@choice = true) { color: red;}咱们还能够通过与 & 符号联合实现 if 类型的语句，从而实现对多个款式类进行条件判断： & when (@choice = true) { p { color: white; } a { color: blue; }}示例：上面咱们来看一个 CSS 守卫的具体例子： @variable: a;.xkd() { @variable: b; .style1 when (@variable=a) { font-size: 12px; color: red; } .style2 when (@variable=b) { font-size: 16px; color: blue; }}.xkd();编译成 CSS 代码： ...

本节咱们学习混合守卫（Mixins Guards），当咱们想在表达式上匹配简略值或参数数量时，Guards 将会很有用。为了尽可能地放弃 CSS 的申明性质，在 @media 查问个性规定中，Less 抉择 Guards 函数的模式而不是 if/ else 语句来实现条件执行。 示例：咱们来看上面这个例子，定义了两个混合：： .common (@w; @h) when ( @w >= 100px) { font-size: 18px;}.common (@w; @h) { color: red;}第一个混合带有条件判断，第二个混合不带有条件判断，上面咱们在两个款式类中援用上述的两个混合： .one{ .common(150px, 50px); }.two{ .common(70px, 20px);}编译成 CSS 代码： .one { font-size: 18px; color: red;}.two { color: red;}能够看到，在 .one 中援用 .common 混合时，给 @w 参数赋值为 150px，满足 @w >= 100px 条件，所以代码编译后，.one 款式类输入了两个混合中的款式属性。.two 款式类则相同，不满足 @w >= 100px 条件，最初只输入了不带条件判断的混合中的款式属性。 Guards比拟运算符Less 中蕴含五个 Guards 比拟运算符，别离是>，>=，=，=<，<。关键字 true 是让两个 Mixins 等价的惟一真值，所以以下两个 Mixins 是等价的： ...

上一节咱们学习了带参混合，当混合作为一个函数时是如何传入参数的。本节咱们来学习混合函数，混合能够反对嵌套，承受参数和返回值。 混合范畴如果咱们在一个混合中定义了变量，那么这个变量只能在这个混合或者援用了这个混合的区域中应用。然而有一个例外，就是如果调用者蕴含一个具备雷同名称的变量，则该变量不会复制到调用者的作用域中，仅存在于调用者本地范畴内的变量受到爱护，而从父范畴继承的变量将会被笼罩。 示例：.xkd() { @w: 10px; @h: 20px;}.p1{ .xkd(); @w: 100px; width: @w; height: @h;}编译成 CSS 代码： .p1 { width: 100px; height: 20px;}Mixins 返回值咱们能够在 Mixins 中定义变量，并将作为它的返回值。 示例：.xkd(@a, @b) { @width: @a + @b;}.good{ .xkd(20px, 30px); width: @width; }编译成 CSS 代码： .good { width: 50px;}上述代码中，咱们在混合 .xkd 中定义了一个变量 @width，变量的值为两参数之和。而后在 .good 中援用了混合 .xkd，其中的 width 属性值为 @width 变量的值。 留神，只有在援用了 .xkd 后，能力应用 @width 变量，否则会报错： .xkd(@a, @b) { @width: @a+@b;}.good{ width: @width; }编译时报错： ...

上一节咱们学习了 Less 中的混合，混合应用起来也很简略不便。本节咱们来学习带参混合，混合能够带一个或多个参数，多个参数之间通过逗号或分号分隔。个别咱们应用分号分隔参数，因为在 Less 中逗号有两种意思，能够示意 Mixins 参数分隔符或 CSS 列表分隔符。 带参Mixins在申明 Mixins 时，参数须要加一个 @ 前缀。 示例：例如申明了一个混合 .xkd ，这个混合带一个 @num 参数： .xkd(@num){ border-radius: @num; border-top: @num;}.good{ .xkd(10px);}编译成 CSS 代码： .good { border-radius: 10px; border-top: 10px;}上述代码中 border-radius 和 border-top属性的值是未知的，由传入的 @num 参数决定。所以在援用这个混合时，须要给参数赋值，否则在编译代码时会报错。 默认参数咱们能够给 Mixins 中所带的参数设置默认值，这样如果引入 Mixins 时未传入参数，将应用默认参数的值。 示例：例如上面这段代码： .xkd(@num:5px; @fontsize:14px){ border-radius: @num; font-size: @fontsize;}.one{ .xkd();}.two{ .xkd(10px, 28px); }编译成 CSS 代码： .one { border-radius: 5px; font-size: 14px;}.two { border-radius: 10px; font-size: 28px;}能够看到上述代码中，.one 中引入 .xkd 时没有给指定参数赋值，输入时应用的是默认参数的值。 ...

Less 的官网地址为：<http://lesscss.org/。 在官网首页，有通知咱们 Less 的两种装置形式，如下所示： 间接援用通过 NPM 装置间接援用咱们先来看间接援用，这个很简略，就是间接在 HTML 页面引入创立好的 Less 文件即可。 在引入之前，咱们须要创立一个 Less 文件，Less 文件的后缀名为 .less，所以咱们能够将文件命名为 index.less。而后咱们就能够通过 <link> 标签向 HTML 页面中引入 index.less 文件，和引入 CSS 文件相似，然而须要将 rel 属性的值批改为 stylesheet/less：<link rel="stylesheet/less" type="text/css" href="index.less" />而后下载应用官网提供的 CDN 进行脚本引入：<script src="//cdnjs.cloudflare.com/ajax/libs/less.js/3.11.1/less.min.js"></script>或者也能够下载 Less.js 保留到本地，而后再引入： <script type="text/javascript" src="less.js" ></script>通过 NPM 装置如果要通过 NPM 来装置，首先咱们要确保电脑上曾经装置了 Node.js，装置地址：https://nodejs.org/en/download/。 大家能够在命令窗口中输出 node -v 来查看本人的电脑是否装置胜利： 如上图所示，呈现版本号则示意装置胜利，因为版本始终会更新，所以你装置的版本可能比 v12.16.1 版本要新。 接着咱们执行上面这个命令来装置 Less，其中 -g 示意全局装置： $ npm install -g less装置好后，如图所示： 从图中能够看出，装置的版本为 less@3.11.3 ，个别默认装置是最新版本的 Less。 而后咱们也能够通过 -v 命名查看 Less 的版本号，如果呈现版本号，则阐明装置胜利。 ...

JNPF平台架构介绍JNPF疾速开发平台采纳前后端拆散技术、采纳B/S架构开发，造成一站式开发多端（APP+PC）应用。 PC端版本介绍 第一个当然是当下热门的.net core了，运行环境为Visual Studio 2017，也能够在IIS上离开部署。 次要技术栈 前端 JS框架：jquery, bootstrap, vue UI框架:bootstrap、ElementUI 富文本编辑：UEditor 文件上传：webuploader 客户端验证：jquery-validate Socket通信:socket. IO，webSocket 图标组件：echarts、highcharts 打印组件:lodop、h5打印 APP JS框架:uniapp, h5, vue APP UI框架:uniapp 后端 外围框架:asp.net core 数据库框架：entityframework、dapper 缓存框架:redis 接口文档：swagger2 我的项目构建：nuget 数据库驱动：mysql、sqlserver、oracle 日志组件:log4net 在线预览：freeSpire.office 代码生成器：自主研发generator 任务调度:quartz office组件：NPOI 后盾展现 代码生成器 统计报表 工作流程 第二个就是java版了 java版采纳前后端拆散，可将代码间接导入idea运行，也可将前后端代码利用ngnix离开部署。 次要技术栈 前端 JS框架：jquery, bootstrap, vue UI框架:bootstrap、ElementUI 富文本编辑：UEditor 文件上传：webuploader 客户端验证：jquery-validate Socket通信:socket. IO，webSocket 图标组件：echarts、highcharts 打印组件:lodop、h5打印 APP JS框架:uniapp, h5, vue ...

低代码开发专治各种因敲代码产生的不适症状 程序员是一个常常和代码打交道的职业，而代码也是程序员安身立命的基本，按理说看到代码应该感到相熟亲切才对。然而，要是和你说有一位程序员的转行起因是因为看到代码就恶心！切实是不想再敲代码了，打算转行销售了。 对此，就有网友很不满： 有网友认为，看到代码就感觉恶心的人，程度也高不到哪里去。正所谓趣味是最好的老师，如果你连敲代码都感觉没趣味的话，你的程度也不会高到哪里去，或者你说你还没有代入感，没有深刻学习的能源吧。 还有网友认为，如果代码有思维，可能也感觉楼主把本人写得恶心了！不得不说话语中没有丝毫给楼主体面。厌弃代码恶心的人，本人的代码必定也好不到那里去！大家也都晓得程序猿敲代码辛苦，还常常要加班改bug，但即便如此，其实程序猿也用不着中途放弃转行，大能够扭转下思路。程序语言的世界那么广大，代码界还有那么多方向能够倒退，何愁找不到适宜本人的倒退空间。比方，眼下正在逐步衰亡的低代码开发就是很多程序猿的福音，越来越多的人走入了低代码开发平台JNPF的世界。 低代码开发，顾名思义即只需编辑极少量的代码即可实现开发流程。它扭转了原始简单的开发模式，缩小了繁琐的代码编写工作，大大解放了程序猿的双手和精力损耗。低代码开发目前支流的倒退方向是在于这些： 1.集成更多组件、更多业务化子零碎 通过低代码平台，想要开发ERP、CRM、OA办公、MIS、MES、物流快递治理等这类企业一站式集成管理系统就能够省去大把工夫、人员以及金钱老本； 2.渐进式JavaScript 框架 框架做分层设计，每层都可选，不同层能够灵便接入其余计划，而当你都想用官网的实现时，会发现也早已筹备好，各层之间包含配套工具都能比接入其余计划更便捷地协同工作； 3.Element疾速成型工具 ElementUI是一套基于VUE2.0的UI框架，它提供了设计原型的axure资源，能够疾速成型出咱们所须要的我的项目，同时它也是一个业余的疾速原型设计工具，让负责定义需要和规格、设计性能和界面的设计师们可能疾速创立应用软件或Web网站的线框图、流程图、原型以及规格阐明文档等内容。 将来，低代码平台的倒退空间是无限大的，它升高了程序语言的开发门槛，程序代码也从此变得不再那么高深莫测让人无奈凑近。越来越多的代码小白也因而与代码结缘并很轻松高效的开发出了本人想要的各类业务流程零碎和治理使用软件，实现了他们的代码梦。

JNPF疾速开发平台 JNPF疾速开发平台采纳前后端拆散技术、采纳B/S架构开发，造成一站式开发多端（APP+PC）应用。 应用JNPF开发平台能够简略、疾速、高效的构建各种类型java我的项目。 JAVA版介绍 JNPF.java版采纳前后端拆散，可将代码间接导入idea运行，也可将前后端代码利用ngnix离开部署。 JNPF主体架构、技术 采纳前后端拆散技术，主体架构为B/S，PC端和APP混合开发。 前后端拆散特点 JNPF疾速开发平台平台采纳全新的前后端拆散架构模式。前后端拆散已成为互联网我的项目开发的业界规范应用形式，通过 nginx+tomcat 等形式（也能够两头加一个nodejs）无效的进行解耦，并且前后端拆散会为当前的大型分布式架构、弹性计算架构、微服务架构、多端化服务（多种客户端，例如：浏览器，车载终端，安卓，IOS 等等）打下松软的根底。 JNPF疾速开发平台的前端我的项目与后端我的项目是两个我的项目，须要独立部署，两个不同的工程，两个不同的代码库，前端通过 ajax 来调用 http 申请调用后端的restful api。前端只须要关注页面的款式与动态数据的解析和渲染，而后端专一于具体业务逻辑。 次要技术栈 前端 JS框架：jquery, bootstrap, vue UI框架:bootstrap、ElementUI 富文本编辑：UEditor 文件上传：webuploader 客户端验证：jquery-validate Socket通信:socket. IO，webSocket 图标组件：echarts、highcharts 打印组件:lodop、h5打印 APP JS框架:uniapp, h5, vue APP UI框架:uniapp 后端 外围框架: springboot 数据库框架：mybatisplus 缓存框架：redis 接口文档：swagger2 我的项目构建：maven 数据库驱动：mysql、sqlserver、oracle 负载平衡：ngnix 日志组件：slf4j 在线预览doc文件：openOffice 代码生成器：自主研发generator 任务调度：quartz 平台展现

先说后果： yarn remove less-loaderyarn add less-loader@5.0.0过程：照着官网配置 yarn add less less-loader --save增加：（关注门路） 报错了：4.（解决）less-loader版本太高所以要升高版本: yarn remove less-loader // 移除过高版本yarn add less-loader@5.0.0 // 增加新的（旧）版本

上一篇咱们通过一个 Node.js 纯 FaaS 的 Serverless 利用，给你介绍了 Serverless 引擎盖下的运作机制，总结来说，FaaS 依赖分层调度和极速冷启动的个性，在无事件时它竟然能够缩容到 0，就像咱们的声控灯一样，有人的时候它能够亮起来，没人的时候，又能够主动关了 听完了原理，我预计你必定会问，FaaS 这么好，然而它的利用场景是什么呢？明天咱们就来一起看下。不过，想要了解 FaaS 的利用场景，咱们就须要先了解 FaaS 的过程模型，这也是除了冷启动之后的另外一个重要概念 FaaS 过程模型FaaS 的冷启动过程，咱们晓得容器和 Runtime 筹备阶段都是由云服务商负责的，咱们只须要关注具体的函数执行就能够了。而函数执行在 FaaS 里是由“函数服务”负责的，当函数触发器告诉“事件”到来时，函数服务就会依据状况创立函数实例，而后执行函数。当函数执行完之后，函数实例也随之完结本人的使命，FaaS 利用缩容到 0，而后开始进入节能模式 其实这里会有一些疑难：函数执行完之后实例是否不完结，让它持续期待下一次函数被调用呢？这样省去了每次都要冷启动的工夫，响应工夫不就能够更快了吗？ 是的，自身 FaaS 也思考到了这种状况，所以从运行函数实例的过程角度来看，就有两种模型。我也画了张图，不便你了解。 用完即毁型：函数实例筹备好后，执行完函数就间接完结。这是 FaaS 最纯正的用法。常驻过程型：函数实例筹备好后，执行完函数不完结，而是返回持续期待下一次函数被调用。这里须要留神，即便 FaaS 是常驻过程型，如果一段时间没有事件触发，函数实例还是会被云服务商销毁 这两个模型其实也对应两种不同的利用场景。举个例子，比方你要把咱们一起在Servless群中的“待办工作”利用部署上线，还记得小程吧，他实现了第一个版本，他用 Express.js框架开发的 MVC 架构，View 层他采纳风行的 React，并且应用了 Ant Design Pro React 组件库，Model 数据库采纳 MongoDB。小程的第一个版本，就是一个典型的传统 Web 服务。 从可控性和革新老本角度来看 Web 服务，服务端部署计划最适宜的还是托管平台 PaaS 或者本人搭服务跑在 IaaS 上。正如我上一讲所说，应用 FaaS 就必须在 FaaS 的条件限度内应用，最佳的做法应该是一开始就选用 FaaS 开发。 然而小程的运气比拟好，咱们查了一下文档，发现 FaaS 的 Node.js 的 Runtime 是反对 Express 的，所以咱们只需大量批改，小程的第一个版本就能够应用 FaaS 的常驻过程计划部署。 ...

在开发挪动端界面时，挪动端适配始终是一个比拟头疼的事件，常见的挪动端适配有viewport适配，rem适配，百分比适配等等，在这里咱们只介绍viewport适配和rem适配。看完这篇文章置信你应该会实战操作挪动端对于不同手机大小的适配问题了。 一：rem适配 rem是指绝对于根元素的字体大小(font-size)的单位，根标签的font-size=1rem。其能够称作为绝对单位，也就是说咱们能够通过视口的大小动静更新根元素字体大小(font-size)的值，从而动静更新rem所绝对的值，应用使得挪动端网页可能适配各种型号的手机。话不多说先上代码。 js代码(用于动静批改其根标签font-size的值)： <script type="text/javascript"> //rem适配 //rem适配原理：扭转了一个元素在不同设施上占据的css像素的个数 /*rem适配的优缺点 长处:没有毁坏完满视口 毛病:px值到rem的转换太简单*/ (function(){ var styleNode = document.createElement("style"); /* 当不除以16时此时1em便占据视口宽度, 那么咱们给其页面中的元素设置宽高根本都会小于1rem,浏览器的计算并不会特地精准容易呈现偏差 */ // var w = document.documentElement.clientWidth; /* 所以此时咱们除以16,使得16rem便占据了满屏,对于页面中大多数元素的rem都会超过1rem */ var w = document.documentElement.clientWidth/16;//获取视口大小 /* 设置此时根元素的fontsize，向html的style款式中增加font-size属性*/ styleNode.innerHTML = "html{font-size:"+w+"px!important}"; //向head标签中增加style标签，其中蕴含html{font-size:w;} document.head.appendChild(styleNode); })() </script>html与css代码: <head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width,initial-scale=1.0,minimum-scale=1.0,maximum-scale=1.0,user-scalable=no"/> <title></title> <style type="text/css"> *{ margin: 0; padding: 0; } #test{ width: 2rem; height: 2rem; background: pink; text-align: center; line-height: 2rem; } </style> </head> <body> <div id="test">test</div> </body> 咱们来看一下通过扭转手机的型号(视口的大小)对于页面的元素有什么变动。 从上述两张图咱们能够看出，当咱们扭转手机的型号后(扭转实现后记得要刷新哦)，视口的大小也产生了扭转，对于test元素的宽高也产生了扭转，此时咱们就可能进行进行挪动端适配了。 ...

flex.flex-container { display: flex; &.flex-align-center { align-items: center; }}.flex-item { flex: 1;}// .flex-shrink {// position: relative;// flex-shrink: 1;// -ms-flex-negative: 1;// -webkit-flex-shrink: 1;// -ms-flex: 0 1 auto;// flex: 0 1 auto;// }@col: 6;.mixin-loop (@i) when (@i > 0) { &.flex-@{i} { flex: 100% / @i !important; } .mixin-loop(@i - 1);}.mixin-loop(@col);height高度@row: 12;.mixin-loop (@i) when (@i > 0) { .row-@{i} { height: 100% / (12 / @i) !important; } .mixin-loop(@i - 1);}.mixin-loop(@row);margin and padding布局// 定义一个数组@sizeList:xs,sm,md,lg,xlg,xxlg;@list: t, r, b, l;/* 间距 n的倍数 */@base-spacing: 10px;.base-spacing-margin-t (@spacing: 1) { margin-top: @base-spacing * @spacing;}.base-spacing-margin-r (@spacing: 1) { margin-right: @base-spacing* @spacing;}.base-spacing-margin-b (@spacing: 1) { margin-bottom: @base-spacing* @spacing;}.base-spacing-margin-l (@spacing: 1) { margin-left: @base-spacing* @spacing;}.base-spacing-padding-t (@spacing: 1) { padding-top: @base-spacing* @spacing;}.base-spacing-padding-r (@spacing: 1) { padding-right: @base-spacing* @spacing;}.base-spacing-padding-b (@spacing: 1) { padding-bottom: @base-spacing* @spacing;}.base-spacing-padding-l (@spacing: 1) { padding-left: @base-spacing* @spacing;}// 条件.padding-mixin(@a, @i) when (@a = t) { .base-spacing-padding-t(@i);}.padding-mixin(@a, @i) when (@a = r) { .base-spacing-padding-r(@i);}.padding-mixin(@a, @i) when (@a = b) { .base-spacing-padding-b(@i);}.padding-mixin(@a, @i) when (@a = l) { .base-spacing-padding-l(@i);}.margin-mixin(@a, @i) when (@a = t) { .base-spacing-margin-t(@i);}.margin-mixin(@a, @i) when (@a = r) { .base-spacing-margin-r(@i);}.margin-mixin(@a, @i) when (@a = b) { .base-spacing-margin-b(@i);}.margin-mixin(@a, @i) when (@a = l) { .base-spacing-margin-l(@i);}// class.test (@className, @i ,@name) { .p-@{name}-@{className} { .padding-mixin(@name, @i / 2); } .m-@{name}-@{className} { .margin-mixin(@name, @i / 2); } //.p-@{name}-@{className} { // .base-spacing-padding-t(@i); //}}// 循环.loop(@i) when (@i < (length(@sizeList)+1)) { .s-loop(@j) when (@j < (length(@list)+1)) { //.sss(extract(@list, @i)); .test(extract(@sizeList, @i), @i, extract(@list, @j)); .s-loop(@j+1); } .s-loop(1); .loop(@i+1);}.loop(1);

不晓得各位同学有没有感觉当初css在前端圈子里越来越不受“待见”了。起因可能有下： 难以模块化，不可保护，没啥能够深入研究的面试根本也不会问啊局部公司还有 css 工程师，前端不须要关怀。。。然而作为从看张鑫旭大佬的文章才一步步开启我的前端之路的开发er，我可不能“忘了本”。犹记得才刚刚转行那会面试的时候会问我“你感觉本人css和js哪个更善于？”，我都会不犹豫的说“css”。 平时用 BEM 规定写款式的同学可能常常会遇到上面这样的（相似）场景，标签列表中会有失常状态和选中状态。故事的开始就是起于这样一段html代码： <!-- 第1种组织模式，集体比拟偏向这种 --><!-- tag外面的子节点变多的时候不须要给每一个子节点都增加 --active 的修饰符 --><div class="tag tag--active"> <img src="" class="tag__img" /> <span class="tag__text">222</span></div><!-- 第2种组织模式 --><!-- 可能更合乎 bem的 思维（缩小款式嵌套）--><div class="tag"> <img src="" class="tag__img--active" /> <span class="tag__text--active">222</span></div>针对第一种html的构造，如何通过父级选择器 & 更优雅的写出款式。当初咱们就从 & 的根底用法一步步说起。 为了不便咱们应用命令行测试，请全局装置less npm install less -g // 以后版本：3.11.3上面的例子都是基于常见的通过 BEM 写款式的业务场景。 置信看完这篇文章的同学再用 BEM 规定写款式的时候代码肯定会土气的一批。 根本用法& 运算符示意一个嵌套规定的父选择器下面是 less 官网对于 & 的定义（请肯定要粗浅领会），上面咱们通过例子来逐渐感触。 .header { &__text { color: #000; &--active { color: #fff; } } &:before { content: ''; display: block; } &.test3 { font-size: 12px; }}通过 lessc 编译后： ...