- 博客(138)
- 收藏
- 关注
RSS订阅原创 后台管理项目笔记
比如目前的路由是/a/aa/aaa，那么此时this.$route.matched匹配到的会是一个数组，包含’/‘，‘/a’,’/aa’,'/aaa’这四个路由信息，从而可以直接利用路由信息渲染面包屑导航。legend：图例组件；3、可以删除，删除当前tag，如果是最后一个，那么路由调整到他前面那个标签，并且背景变蓝，如果不是最后一个那么路由调整到他后面那个标签对应的路由。2、点击：切换到相应的路由，以及改变背景颜色，当点击左侧栏时，如果tag没有该菜单名称则新增，如果已经有了那么当前tag背景颜色加深。
2023-02-08 15:21:54
941
原创 mock.js的使用
每个属性由三部分组成：属性名、生成规则、属性值生成规则的含义需要依赖属性值的类型才能确定占位符只是在属性值字符串中占个位置，并不会出现在最终的属性值中@占位符@占位符(参数 [, 参数])占位符引用的是Mock.Random中的方法可以通过 Mock.Random.extend() 来扩展自定义占位符。
2022-12-16 20:54:43
1736
原创 This的指向
func（）函数被myObject调用，因此里面的this指向myObject，之后返回的函数，立即执行，this指向window，但由于self之前已经保存过了this，因此self的指向是myObject。
2022-12-01 09:08:29
83
原创 登录页面验证
sessionStorage：是会话期间的存储机制，数据只在当前标签页共享，存在本地，关闭浏览器后会清除数据，关闭标签页清除数据。localStorage：是持久化的存储机制，数据会存在浏览器中，浏览器关了数据也还在，只有清除缓存才会小时。sessionStorage有token：页面1去页面2–直接进入。token只应该在当前网站打开期间生效，因此应该保存在sessionStorage。sessionStorage没有token：去登录页。to.path 和from.path都是’/’
2022-11-30 08:20:32
480
原创 fabric-canvas常用操作
fabric在层级中的默认状态：如果画布中存在多个元素，且当他们之间都是层叠时，当选中底层的元素时，这个元素会默认跳到顶层，当释放元素后，又回到之前的层级。如果实在canvas对象中添加事件，那么事件所有的触发区域就是canvas本身。提供了内部的事件驱动，包含了简单的鼠标事件到复杂的对象交互事件。on的方法代表挂载事件监听，off则表示移除事件监听。
2022-11-21 22:16:26
1215
原创 fabric笔记-序列化和反序列化，SVG解析器
就像toJSON和toObject一样，toSVG（在画布上调用时）将其逻辑委托给每个单独的对象，并且每个单独的对象都有其自己的toSVG方法，该方法专用于对象类型。“objects”当前为空，因为画布上没有任何内容，并且背景具有默认的透明值（“ rgba（0，0，0，0）”）JSON.stringify(canvas)方法在传递的对象上隐式调用toJSON方法（如果存在），fabric中的canvas实例具有toJSON方法，因此等同于JSON.stringify(canvas.toJSON())
2022-11-15 21:51:42
1072
原创 Promise、async、await知识点
笔记：掘金微任务包括：MutationObserver、Promise.then()或catch()、Promise为基础开发的其它技术，比如fetch API、V8的垃圾回收过程、Node独有的process.nextTick。宏任务包括：script 、setTimeout、setInterval 、setImmediate 、I/O 、UI rendering。注意⚠️：在所有任务开始的时候，由于宏任务中包括了script，所以浏览器会先执行一个宏任务，在这个过程中你看到的延迟任务(例如setTi
2022-11-15 15:50:14
475
原创 自定义控件、渲染和动作
控制框的范围由控制线限定控制点：点击并拖动不同的控制点，会产生不同的交互效果目前只支持四个方向的统一设置，不支持单独设置决定旋转控制点和主题之间有没有控制线修改控制线的颜色设置为false的时候，控件的就是实心的要注意使用实现有没有一个更好的监听的办法，想官网这样。不需要写这么多的重复代码官方requestRenderAll（）方法与RenderAll（）方法一样使用控件来修改多边形的形状需要理解内部多边形逻辑，以及描点和转换采用一个布尔值，用于确定笔画的宽度是否一直设置
2022-11-13 15:06:07
379
原创 demo6--fabric-官网-路径上添加文字
为用户提供了指定颜色的用户界面，或者可视化颜色选择器demo4和demo5是关于图片处理的，不知道干什么，暂时应该还不需要先不学。
2022-11-12 15:52:30
322
原创 实现画刷相关fabric-canvas笔记-参考官网-demo3
问题？. 在vscode中总是会自动的加空格在setting.json中添加或者其并不是fabric默认构建的部分，需要重新下载> http://fabricjs.com/erasing但是如果只下载这几个单独的部分，再去引用，会报错。因此直接将所有的都下载下来，一块引用不要选中下面的，不认会少了相关的函数开启绘画模式，在普通的框选模式下是不支持绘画的如果在初始化的时候不开启，也可以在后面使用`canvas.isDrawingMode = true* 的方式来设置可以通过修改width来
2022-11-12 09:03:21
895
原创 将本地的pdf文件添加到canvas中-fabric.js的使用-参考官网
fabric.js添加PDF 可以实现浏览器PDF的阅读，以及PDF转为图片展示（多页和单页皆可）
2022-11-10 21:50:23
1355
原创 vue使用json-server 模拟数据
在package.json文件中，scripts中配置一个mock，该端口号作为访问虚拟数据的端口号。该端口作为脚手架的端口号。
2022-11-09 16:07:25
1546
原创 css登录界面
伪元素是元素，就是css模拟出来的一个盒子（如果想在盒子内部插入一个小盒子，就使用伪元素（主要用来做装饰作用））注意：加法和减法的运算符号两边必须有空格；乘法：两个值之间必须有一个数字；除法：左边必须为数字。，（博班如果是鼠标经过盒子，盒子里面的样式会有变化，则使用伪类）2、巧用flex布局，不要总是想着子绝父相加浮动。伪类是一种状态，可以视作选择器，比如说鼠标经过。函数允许在声明 CSS 属性值时执行一些计算。如果想让div元素的大小是整个界面。单位设置网页元素的尺寸，其也是。表示继承父级元素的属性。
2022-09-21 20:39:46
3148
原创 vue案例
关键：先将用户输入的数据，利用回车作为切割符，转换为数组后，再利用Math.random产生最忌数，来获取数组的下标，再将挑选出来的数据进行显示。textarea输入的数据，按照空格分行之后，怎么获取每个元素：this.inputdata.split('\n')怎么将date类型的input标签绑v-model的value。1、收集用输入的随机选择的个数--v-model 进行绑定。怎么将date类型的input的时间转换为时间戳。2、收集用户输入的数据--监听回车事件。计算时间戳的时候有点迷糊。
2022-09-19 22:26:28
409
原创 Vue使用脚手架出现问题 2
再去C盘里面找到.vue-templates文件夹，如果没有的话就创建一个文件夹。将之前解压后的内容复制到该新建的文件夹中。直接下载安装包，之后再解压。此时就可以成功创建模板了。
2022-09-17 17:12:50
488
原创 Vue基础案例-查询窗口
然后使用Object.value('obj') 得到一个包含由属性值的数组，再使用数组索引判断属性值是否等于内容。2、input表单的v-model可以由v-bind:value以及v-on:input组成。Object.keys('obj')得到一个包含由对象属性组成的数组。居中的元素的left= (网页宽 –元素的宽) /2;居中的元素的top =（网页高 –元素的高）/ 2;3、怎么判断有一个数组的对象中是否含有某个属性值。1、怎么判断有一个数组的对象中是否含有某个属性。
2022-09-14 15:52:55
458
原创 flex布局
1、调整窗口的时候，子元素始终位于窗口正中央height: 100vh;注意要给父元素一个高度；vh表示相对于可是窗口的高度单位1vh=1/100的可视窗口高度2、圣杯布局--上中下布局使用flex布局，子元素会无法设置宽度：需要使用flex布局指定宽度flex: 0 0 50px参数：放大属性 缩小属性 项目长度...
2022-06-05 20:05:06
300
2
原创 JS实现加减-简易计算
这个题目前一周左右在小红书刷到，想着就去就做一下，第一版因为思路不清晰，没有完整的实现功能。后来忙着改论文，就一直拖到现在。想着回去在看看这篇，发现已经找不到了。记录错误思路：window.onload = function() { //实现一个简易的计算器 //点击上面的按钮，要输入到输入框中 btns = document.querySelectorAll('button') input = document.querySelector('input...
2022-05-30 10:21:29
1962
原创 JS仿qq下拉菜单
功能：1、点击我的好友会展开下拉出具体的好友2、再次点击，会折叠内容3、首次点击某个具体的好友，只有当前这个好友高亮4、再次点击这个好友时，高亮状态就会消失主要练习：js绑定事件慢慢修改小细节：再次点击，会折叠内容时，里面的高亮要全部取消<!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8"> <meta http-equiv=".
2022-05-22 21:36:47
109
原创 JS电影选票
<!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8"> <meta http-equiv="X-UA-Compatible" content="IE=edge"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <title...
2022-04-28 09:15:20
383
原创 京东官网首页js+css+html基础
1、让盒子宽度撑满整个页面 width: 100%;2、加了绝对定位（已经脱离了标准流）的盒子不能使用margin:auto 来使盒子居中解决办法： .box { position: absolute; /* 调整水平居中，先左移50%的宽度，在用外边框调整至自身盒子一半的距离，实现居中 */ left: 50%; margin-left: -100px; /* 垂...
2022-04-23 14:19:19
1363
原创 淘宝搜索效果
1、获取用户输入的搜索关键词需要监听输入框的keyup事件2、封装getSuggestList函数发JSONP请求，获取内容3、渲染建立列表的UI结构（模板引擎）1、定义搜索建议列表2、定义模板结构：服务器响应回来的数据（res）把res直接给模板引擎：要对res里面的result进行遍历，一开始取得是result里面索引号为0的数据3、定义渲染模板结构的函数4、搜索关键词为空时隐藏搜索建议列表5、实现输入框的防抖<!D...
2022-04-11 21:05:16
440
原创 ajax上传图像
<!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8"> <meta http-equiv="X-UA-Compatible" content="IE=edge"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <title...
2022-04-10 17:05:55
1258
原创 模板引擎--新闻案例
主要在于修改js1、获取新闻数据2、定义模板3、编译模板4、定义事件过滤器5、定义补零函数使用模板引擎时，报template not found: Cannot read property ‘value‘ of null错误。var sta = template('box', data)第一个参数一定是script得id，不能是类<!DOCTYPE html><html lang="en"><head> ...
2022-04-09 11:03:00
2105
原创 ajax模板引擎
<!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8"> <meta http-equiv="X-UA-Compatible" content="IE=edge"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <title>D.
2022-04-07 22:06:57
1174
原创 ajax评论案例
bootstrap、form表单得使用把发表评论得区域变成一个表单<!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8"> <meta http-equiv="X-UA-Compatible" content="IE=edge"> <meta name="viewport" content="width=device-wid...
2022-04-07 20:58:05
337
原创 Ajax进度条
使用：Easy Mock创建api接口注意：若弹出该invalid or unexpected token错误提示信息，说明编写的数据格式有问题，修改为正确格式即可创建成。随后可以在postman中进行验证：ajax通过GET方法获取数据：根据获取出来得阶段数据来更改相对应得进度：<!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8"> <.
2022-04-06 22:34:09
1125
原创 JS实现网易云轮播效果图
1、div宽度直接与浏览器界面宽度一致：width:100%2、怎么让图片在一个绝对定位的盒子中垂直居中显示？继续加绝对定位。然后改变top，和left的值3、采用外置的js文件，需要等到页面加载完毕：window.onload=function(){}4、添加和移除元素的类名：先获取DOM对象，然后通过classList.add('current')（里面不需要加.）和classList.remove()即可添加类型和删除类名。5、事件委托： 比如有100个li，每个li都有相同的click点击
2022-04-03 11:28:46
1434
空空如也
空空如也
TA创建的收藏夹 TA关注的收藏夹
TA关注的人