Vue开发
This is my vue develop exprience~2020/5/7 16:02 Write过往项目经验总结
关键词:Vue,CSS,SVN,WebPack,IconFont,Flex,Jeecg,Iview,ElementUI
12345678使用Vue开发页面,环境配置,导入包,Package,使用IView组件进行页面开发。(使用开源组件一定需要查看开发文档!!!!!!)CSS排版布局,flex学习并使用,各种定位的深入了解。router路由在Vue当中的使用,熟练使用组件进行开发。熟练使用SVN进行提交和更新代码,提交需要带钩子,如果本地有更改过的文件,在更新时需要将有改动的文件删除再更新,否则会出现乱码父子组件间的传值通信,Props的使用,对话框的熟练使用。分析需求并设计页面,使用Axure进行页面的设计,使用开源的移动端组件和阿里的IconFont,必要时可以自行设计组件。熟悉WebPack框架和Cli脚手架。
1234使用ant-design-jeecg-vue进行开发,代码自动生成。文档链接:[jeecg开发文档]("ht ...
Web前端性能优化-页面加载
Web前端性能优化的方式1.减少HTTP请求1一个页面80%~90%的时间花在了下载页面中的所有组件进行的HTTP请求上。因此,改善响应时间最简单的途径就是减少HTTP请求的数量。
2.将样式表放在头部12将样式表放在头部对于实际页面加载的时间影响不大,但是这会减少页面首屏出现的时间,使页面内容逐步呈现,改善用户体验,放置“白屏”。将样式表放在文档底部会阻止浏览器中的内容逐步出现,为了避免当样式变化时重绘页面元素,浏览器会阻塞内容逐步呈现,造成“白屏”。这源自浏览器的行为,如果样式表仍在加载,构建呈现树就是一种浪费,因为所有样式表加载解析完毕之前无需绘制任何东西。
3.将脚本放在底部123跟样式表相同,脚本放在底部对于实际页面加载的数据影响不大。JS的下载和执行会阻塞DOM树的构建,所以script放在首屏范围内的HTML代码段里会截断首屏的内容。下载脚本时并下载是禁用的——即使使用了不同的主机名,也不会启用其他的下载。因为脚本可能修改页面内容,因此浏览器会等待;另外也是为了保证脚本能够按照正确的顺序执行,因为后面的脚本可能与前面的脚本存在依赖关系,不按照顺序执行可能会产生错误。
4. ...
根据测试文档测试
根据对应的文档对功能进行操作测试得出相对应的问题,然后解决。12345查询数据的重置问题联动数据的查询条件字段的重置问题删除数据时影响到的页数问题正则验证考虑全面的问题考虑功能操作的合理性
1234测试步骤:根据文档中的测试用例进行测试编写并产生测试记录表,并且需要上传到SVN文件夹当中在RedMine上登记缺陷,并确定该缺陷的优先级
ES6语法知识点
学习ES6语法记录知识点关键词:JavaScript
let和const命令12345678910111213141516171819202122ES6新增的let命令,用法类似于Var,let声明的变量只在let命令所在的代码块有效(作用域问题)。let要先声明再调用,否则系统会报错。For循环当中的i就很适合使用let命令,For循环当中设置变量那一块的作用域与循环体内部的作用域不同,相当于父子作用域。var命令声明的变量在脚本运行时就存在,所以先调用对象不会报错,但是显示undefined。let命令会绑定这个块级作用域,在声明之前无法改变变量的值。(暂时性死区)let在相同作用域内不允许重复声明一个变量。注意块级作用域的问题,{{}}=>为两层作用域。ES6中块级作用域声明的函数类似于Var,提升到全局作用域或函数作用域的头部。const声明一个只读的常量,声明后无法改变,声明需要赋值,否则会报错。const的作用域与let命令相同,同样存在暂时性死区,而且也无法重复声明。const声明的变量的值并不是不得改动,变量指向那个内存地址 ...
SVN工具在编辑器上的使用
方便SVNcommit和update2020/5/13 10:53 Write关键词:SVN
在WebStorm上配置SVN,方便操作
1.2.3.
参考链接:https://blog.csdn.net/yaomengzhi/article/details/80723925
清除浮动的方法
页面UI设计与开发
2020/5/11 16:56 Write关键词:浮动
在非IE浏览器(如Firefox)下,当容器的高度为auto,且容器的内容中有浮动(float为left或right)的元素,在这种情况下,容器的高度不能自动伸长以适应内容的高度,使得内容溢出到容器外面而影响(甚至破坏)布局的现象。这个现象叫浮动溢出,为了防止这个现象的出现而进行的CSS处理,就叫CSS清除浮动。
12345678910111213141516.news { background-color: gray; border: solid 1px black; }.news img { float: left; }.news p { float: right; }<div class="news"><img src="news-pic.jpg" /><p>some text</p></div>
清除浮动的 ...
Flex布局
页面CSS样式之Flex布局
2020/5/11 14:56 Write关键词:UI
使用flex布局
1在父容器设置属性 display: flex
Flex的核心概念就是容器和轴。容器包括外层的父容器和内层的子容器,轴包括主轴和交叉轴,Flex的布局特性构建在这两个概念上(如上图)。
1.容器容器具有这样的特点:父容器可以统一设置子容器的排列方式,子容器也可以单独设置自身的排列方式,如果两者同时设置,以子容器的设置为准。
1.1父容器·设置子容器沿主轴排列:justify-contentjustify-content 属性用于定义如何沿着主轴方向排列子容器。
12345flex-start: 起始端对齐flex-end:末尾段对齐center:居中对齐space-around:子容器沿主轴均匀分布,位于首尾两端的子容器到父容器的距离是子容器间距的一半space-between:子容器沿主轴均匀分布,位于首尾两端的子容器与父容器相切
·设置子容器如何沿交叉轴排列:align-itemsalign-items 属性用于定义如何沿着交叉轴方向分配子容器的间距
...
正则表达式
匹配搜索和验证
2020/5/11 14:48 Write关键词:JS
常规1234567891011121314151617181920212223242526^ 匹配一个输入或一行的开头,/^a/匹配"an A",而不匹配"An a"$ 匹配一个输入或一行的结尾,/a$/匹配"An a",而不匹配"an A"* 匹配前面元字符0次或多次,/ba*/将匹配b,ba,baa,baaa+ 匹配前面元字符1次或多次,/ba*/将匹配ba,baa,baaa? 匹配前面元字符0次或1次,/ba*/将匹配b,ba(x) 匹配x保存x在名为$1...$9的变量中x|y 匹配x或y{n} 精确匹配n次{n,} 匹配n次以上{n,m} 匹配n-m次[xyz] 字符集(character set),匹配这个集合中的任一一个字符(或元字符)[^xyz] 不匹配这个集合中的任何一个字符[\b] 匹配一个退格符\b 匹配一个单词的边界\B 匹配一个单 ...
使用HEXO搭建个人博客
搭建博客过程!
2020/5/9 16:27 Write关键词:GitPage
1234567891011121314151617181920下载安装git//下面的终端操作都使用Git Bush Herenpm install hexo-cli -g //安装hexohexo init *****.github.io (****为自己的github名)//初始化博客cd *****.github.io //进入目录hexo g//生成静态页面hexo s//启动服务器,在localhost:4000上查看刚生成的博客页ssh-keygen -t rsa -C "**********" (****为个人邮箱,注意引号)//配置SSH根据路径找到id_rsa.pub,复制里面的内容在Github项目当中Setting中找到SSH and GPG keys黏贴进去ssh -T git@github.com (输入yes)//回到Git Bash中检查需要在主文件夹中的_config.yml文件配置deploy // 配置属性的时候需要在冒号后空一格 ...
CSS样式
页面UI设计与开发
2020/5/9 15:01 Write关键词:UI
选择器优先权:important>内联>id>类|伪类|属性选择>伪元素|标签>通配符>继承
注意可继承属性和不可继承属性
12345cursor: 改变光标的形式box-sizing:使Padding往内伸缩outline:外边框focus:获取焦点font-size:0 (解决空格留白问题)
浮动的特点元素浮动后会脱离文档流浮动以后元素会一直向父元素的最上方移动直到遇到父元素的边框或者其他的浮动元素,会停止移动如果浮动元素的上边是一个块元素,则浮动元素不会覆盖块元素浮动元素不会超过他上边的浮动的兄弟元素,最多一边齐浮动元素不会覆盖文字,文字会自动环绕在浮动元素的周围,可以通过浮动来实现文字环绕的效果
元素浮动后的效果块元素:块元素脱离文档流以后(不会独占一行,宽度高度会被内容撑开)内联元素:脱离文档流后变成块元素
定位relative:相对于自己(相对定位)开启元素的相对定位后,如果不设置偏移量元素不会发生任何变化相对定位元素对于自身在文档流中的位置 ...