编程纪元

​ Flask 常用扩展1 Flask-Cors用于处理跨域资源共享的扩展。 文档地址 1pip install -U flask-cors 2 Flask-Limiter Memcached给接口提供速率限制，可以设置各种后端配置来提供限制功能，如：Redis、MongoDB、Memcached、In-Memory（在内存中限制）。文档地址 1pip install Flask-Limiter 3 Flask-JWT-Extended添加了flask的JWT支持，且增加了其他的功能：自动加载用户、自定义声明验证Token等。文档地址 1pip install Flask-JWT-Extended 4 flask-marshmallow用户python对象的一个序列化反序列换的库。在flask中可与 Flask-SQLAlchemy集成。文档地址 1pip install flask-marshmallow 5 Flask-SQLAlchemyflask的一个orm扩展。文档地址 1pip install Flask-SQLAlc ...

​ CSS转换过渡和动画转换可以对元素进行移动、缩放、转动、拉伸。转换的效果是让某个元素改变形状，大小和位置。可以使用2D和3D来转换元素， 1 2D转换1.1 平移 translate根据左(X轴)和顶部(Y轴)位置给定的参数，从当前元素位置移动。 12345div { transform: translate(50px,100px); -ms-transform: translate(50px,100px); /* IE 9 */ -webkit-transform: translate(50px,100px); /* Safari and Chrome */} 以上css规则：是从左边元素移动50个像素，并从顶部移动100像素。 1.2 旋转 rotate顺时针旋转的角度。负值是逆时针旋转。 12345div { transform: rotate(30deg); -ms-transform: rotate(30deg); /* IE 9 */ -webkit-transfor ...

​ CSS媒体查询CSS 媒体查询为你提供了一种应用 CSS 的方法，仅在浏览器和设备的环境与你指定的规则相匹配的时候 CSS 才会真的被应用 媒体查询是响应式 Web 设计的关键部分，因为它允许你按照视口的尺寸创建不同的布局，不过它也可以用来探测和你的站点运行的环境相关联的其它条件，比如用户是在使用触摸屏还是鼠标。 1 媒体查询基础最简单的媒体查询语法看起来是像这样的： 123@media media-type and (media-feature-rule) { /* CSS rules go here */} 它由以下部分组成： 一个媒体类型，告诉浏览器这段代码是用在什么类型的媒体上的（例如印刷品或者屏幕）； 一个媒体表达式，是一个被包含的 CSS 生效所需的规则或者测试； 一组 CSS 规则，会在测试通过且媒体类型正确的时候应用。 2 媒体类型 all：适用于所有设备。 print：适用于在打印预览模式下在屏幕上查看的分页材料和文档。 screen：主要用于屏幕。 speech：主要用于语音合成器 3 媒体特征规则3.1宽 ...

​ CSS布局-弹性盒子与网格布局css的布局技术可以让我们控制他们的相对正常布局流、周边元素、父容器或者主视口/窗口的位置。常见的布局形式有：正常布局流、display属性布局、弹性盒子布局、网格布局、浮动布局、定位布局、表格布局、多列布局。 每种技术都有他们的用途，通过理解各个布局的相关理念，构建理想的布局方案。 一些布局技术会覆盖默认的布局技术； display：默认的一些属性inline、block、inline-block在正常布局流中的表现形式为对应的盒模型的属性。 在CSS中实现页面的布局的主要方法是设定display的值，正常的布局流中所有的属性都有一个display的值，例如在段落下面显示另外一个段落，是因为他的display的值是block吗，如果在段落中添加了一个连接，这个段落并不会换行，是应为连接a的display的属性值是inline。 在讨论布局时，最重要的两个值是display:flex和display:grid。 1 弹性布局：flex主要解决问题： 在父内容里面垂直居中一个块内容。 使容器的所有子项占用等量的可用宽度/高度， ...

​ CSS布局-浮动与定位与多列布局1 浮动 float浮动属性最初只用在成块的文本内的图像上，使用浮动来布局页面被看做传统的布局方法。 1.1 添加浮动浮动元素会脱离正常的文档布局流，并吸附到其父容器的左/右边元素）。在正常布局中位于该浮动元素之下的内容，此时会围绕着浮动元素，填满其右/左侧的空间。 123.box { float: left; /* left和right */} 1.2 清除浮动一个浮动元素会被移出正常文档流，且其他元素会显示在它的下方。如果我们不想让剩余元素也受到浮动元素的影响，我们需要 停止 它；这是通过添加 clear 属性实现的。 123.cleared { clear: left;} clear 属性接受下列值： left：停止任何活动的左浮动 right：停止任何活动的右浮动 both：停止任何活动的左右浮动 1.3 清除浮动元素周围的盒子第一种方式，其过程为：先向包含浮动内容及其本身的盒子后方插入一些生成的内容，并将生成的内容清除浮动。（比较传统的形式） 12345.wra ...

​ 1 CSS文本样式1.1 字体栈因为无法抱枕没字网页的上使用的字体的可用性，所以可以提供一个字体栈，这样浏览器就可以有多种选择。只需要使用font-famioly属性，其值用几个逗号分离的字体名称组成。使用方式如下： 123p { font-family: "Trebuchet MS", Verdana, sans-serif;} 默认情况下，浏览器会检查第一个字体，在征集其中是否可用，如果不可用则会顺延到下一个字体，在进行检查以此类推，都不可用则会使用默认的字体。 备注： 有一些字体名称不止一个单词，比如Trebuchet MS ，那么就需要用引号包裹。 1.2 字体大小主要注意字体的单位 px：将像素的值赋予文本，他是一个绝对的单位，任何情况下页面上的文本大小都是固定的。 em：1em等于当前元素的父元素上设置的字体的大小，如果设置了大量的不同字体大小的嵌套元素， 可能会导致字体大小非常混乱。 rem：1rem等于html中根元素的字体的大小（），而不是父元素的字体大小，但是不支持IE8及以下版本。 标签 ...

​ CSS背景和边框设计CSS的背景和边框，可以是CSS的样式更具有多样性。CSS背景可以做哪些不同的事情？ 1 背景1.1 颜色背景：background-color定义了CSS中任何元素的背景颜色，属性接受的是有效的color值，==背景会扩展到元素的内容和内边距的下面==。 1234567891011.box { background-color: #567895;}h2 { background-color: black; color: white;}span { background-color: rgba(255,255,255,.5);} 1234<div class="box"> <h2>Background Colors</h2> <p>Try changing the background <span>colors</span>.</p></div> 1. ...

​ 前端包管理器之pnpmpnpm 正如他官网的口号一样：速度快、节省磁盘空间的软件包管理器。 主要解决了npm的一些痛点： 如果有多个项目，那么使用npm的情况下每个项目就会有各自的依赖，可能会造成依赖的重复，浪费磁盘空间。 不同版本的依赖，存储在同一位置，且不会因为版本的不同而修改保存依赖包的所有文件。 最终的体现结果就是依赖的存储空间变少了，速速也会变快，官方声称构建速度是同类构建工具的将近2倍。 1 安装pnpm建议写卸载现有的npm,node和nvm等其他的包管理器，和node版本管理器。 没有安装nodejs的情况下安装 1iwr https://get.pnpm.io/install.ps1 -useb | iex 已经安装了npm的情况下安装, 直接全局安装。 1npm install -g pnpm 安装后修改如果嫌pnpm的命令长，可以改为短命令：pn 在windows中只需要两步： 1234567# 1、使用管理员打开终端notepad $profile.AllUsersAllHosts# 2、在 profile.ps1 文件里加入：s ...

​ 前端包管理器之npmnpm是一个软件注册中心，有大量的开发者和组织将软件上传到npm。npm是由三部分构成， website、cli、register。 我们最常用的就是npm cli。 1 安装npm要使用npm, 需要安装node.js和npm软件，node.js 是一个异步事件驱动的 JavaScript 运行时。 node.js 就像其他的语言一样，有很多的版本， npm官网推荐使用nvm–一个node版本管理器，为了解决nodejs各种版本不兼容的问题，类似Python的conda。 nvm: 一个node版本管理器， 提供不同版本的node和npm安装。 node.js: 一个JavaScript运行时。 npm: 一个前端包管理器。 2 安装nvm在windwos上安装 nvm Github地址，下载地址。 直接下载 .exe 可执行文件进行安装。 常用命令： 1234567891011121314151617nvm version # 显示nvm的版本nvm list # 列出当前系统安装的node.js 版本列表，使用【*】开头的代表，正在 ...

​ CSS溢出 在CSS中一切皆盒子，我们可以设置盒子的大小，但是当我们的内容大于盒子的大小的时候，就会导致内容溢出。 控制溢出的几种方式 overflow 默认值：visible，默认情况下溢出是可见的。 如果想让溢出的元素裁减掉，可以使用hidden。 既不裁剪也不希望溢出，scroll 更合适，他会在原本的盒子上加一个滚动条，既保证盒子的大小，也不会将数据裁减掉。 123456.box { border: 1px solid #333333; width: 200px; height: 100px; overflow: scroll;} 123<div class="box">This box has a height and a width. This means that if there is too much content to be displayed within the assigned height, there will be an overflow situation. If ...