mocoll的博客

初始化项目，用官网的命令，结果报错，百度了很多，没解决，最后找得到个这个方法。

两种方式原理相同，写法不一样。

解决方法打开package.json包将下面部分修改然后打包。

访问域名是https的，前端websockt连接用的ws，导致出错。所以换成wss连接就行了。http 对应 ws。https 对应 wss。

【代码】VUE3 + vite 跨域配置。

【代码】NUXT3+ts 解决跨域配置。

注意：以上代码将在 Vue 应用程序中创建一个基本的 Markdown 编辑器，并使用 axios 库将粘贴的图片上传到服务器。可以根据需要更改 formData 和 response.data.url，以适应服务器端代码。addImageBlobHook 钩子将在用户粘贴图像时触发，并将图像数据作为 Blob 对象传递给回调函数。

api_api__WEBPACK_IMPORTED_MODULE_13_.imageList is not a function仔细看这个语句，imageList不是一个方法，说明此方法没有定义所以，定义一下方法就解决了，报其他类似的错是一样的解决方法

一、在plugins文件夹加下创建一个xxx.js文件二、文件内写入用到的包的路径三、找到store下的nuxt.config.js四、按照下面格式将刚刚创建的js文件的路径写在src上，ssr改为false注意：刚刚修改完配置文件需要重新启动项目，不然只刷新界面可能会出现window is not defined的报错...

一、Vue基础简介1.1、前端开发模式的发展1.1.1、静态页面● 最初的网页以HTML为主，是纯静态的网页。网页是只读的，信息流只能从服务端到客户端单向流通。开发人员也只关心页面的样式和内容.1.1.2、异步刷新，操作DOM● 1995年，网景工程师Brendan Eich花了10天时间设计了JavaScript语言。随着JavaScript的诞生，我们可以操作页面的DOM元素及样式，页面有了一些动态的效果，但是依然是以静态为主。● ajax盛行:▶ 2005年开始， ajax逐渐被前端开发

一、AJAX基础概念1.1、AJAX概念ASynchronous JavaScript And XML 异步的JavaScript和XML，Alax是一种在无需重新加载整个网页的情况下，能够更新部分网页的技术。通过在后台与服务器进行少量数据交换，Ajax可以使网页实现异步更新。这意味着可以在不重新加载整个网页的情况下，对网页的某部分进行更新。传统的网页(不使用Ajax) 如果需要更新内容，必须重载整个网页页面。用于提升用户体验1.2、异步和同步在客户端和服务器端相互通信的基础上① 同步客

jQuery已经淘汰了，有兴趣的同学可以瞅瞅，等我整理笔记，到时候发布一些VUE的笔记一、jQuery概述1.1、JavaScript库JavaScript库:即library ,是一个封装好的特定的集合(方法和函数)。从封装大堆函数的角度理解库,就是在这个库中,封装了很多预先定义好的函数在里面,比如动画animate、hide、show ,比如获取元素等。简单理解:就是一个JS文件、里面对我们原生js代码进行了封装,存放到里面。这样我们可以快速高效的使用这些封装好的功能了。比如jQuery ,就

一、Node.js基础1.1、简介简单的说Node.js就是运行在服务端的JavaScript。Node.js是一个基于Chrome JavaScript运行时建立的一个平台，是一个事件驱动I/0服务端JavaScript环境，基于Google的V8引擎，V8引擎执行Javascript的速度非常快, 性能非常好。1.2、安装1.2.1、下载对应你系统的Node.js版本:https://nodejs.org/en/download/1.2.2、选安装目录进行安装推荐下载LTS版本。完成以后

三、表单验证分析:1.手机号码: /^1[3|4151718][0-9]9$/2.QQ:[1-9][0-9]{4,} (腾讯,QQ号从10000开始)3.昵称是中文:^[u4e00-\u9fa5]{28}$JS代码：

一、面向对象的Tab栏切换功能需求：1.点击tab栏,可以切换效果。2.点击+号,可以添加tab项和内容项。3.点击x号,可以删除当前的tab项和内容项。4.双击tab项文字或者内容项文字,可以修改里面的文字内容。思路：抽象对象: Tab对象● 该对象具有切换功能。● 该对象具有添加功能。。● 该对象具有删除功能。● 该对象具有修改功能。HTML 代码JS代码：笔记中图片丢失了二、用户名验证功能需求:1.如果用户名输入合法，则后面提示信息为:用户名合法，并且颜色为绿色。

一、ES6简介什么是ES6 ?ES的全称是ECMAScript,它是由ECMA国际标准化组织制定的一项脚本语言的标准化规范。ES6实际上是一个泛指，泛指ES2015及后续的版本。为什么使用ES6 ?每一次标准的诞生都意味着语言的完善，功能的加强。JavaScript语言本身 也有一些令人不满意的地方。● 变量提升特性增加 了程序运行时的不可预测性。● 语法过于松散,实现相同的功能，不同的人可能会写出不同的代码。二、ES6的新增语法2.1、letES6中新增的用于声明变量的关键字。●

一、正则表达式概述1.1、什么是正则表达式.正则表达式( Regular Expression )是用于匹配字符串中字符组合的模式。在JavaScript中,正则表达式也是对象。正则表通常被用来检索、替换那些符合某个模式(规则)的文本,例如验证表单:用户名表单只能输入英文字母、数字或者下划线,昵称输入框中可以输入中文(匹配)。此外,正则表达式还常用于过滤掉页面内容中的一些敏感词(替换) ，或从字符串中获取我们想要的特定部分(提取)等。其他语言也会使用正则表达式,本阶段主要是利用JavaScript正

一、什么是递归?如果一个函数在内部可以**调用其本身，**那么这个函数就是递归函数。简单理解:函数内部自己调用自己这个函数就是递归函数。递归函数的作用和循环效果一样。由于递归很容易发生“栈溢出”错误( stack overflow ) , 所以必须要加退出条件return。二、利用递归求数学题1、求1*2*3…*n 阶乘。2、求斐波那契数列。3、利用递归求:根据id返回对应的数据对象三、浅拷贝和深拷贝1.浅拷贝只是拷贝一层，更深层次对象级别的只拷贝引用。2.深拷贝拷贝多层，每一级

一、变量作用域变量根据作用域的不同分为两种:全局变量和局部变量。1.函数内部可以使用全同变星。2.函数外部不可以使用局部变量。3.当函数执行完毕,本作用域内的局部变量会销毁。二、什么是闭包闭包( closure )指有权访问另一个函数作用域中变量的函数。---- JavaScript 高级程序设计。简单理解就是, 一个作用域可以访问另外一个函数内部的局部变量。闭包的主要作用:延伸了变量的作用范围。三、闭包案例3.1、面试-----循环注册点击事件。立即执行函数也称为小闭包，因为看立

三、严格模式3.1、什么是严格模式JavaScript除了提供正常模式外,还提供了严格模式( strictmode )。ES5 的严格模式是采用具有限制性JavaScript变体的一种方式,即在严格的条件下运行JS代码。严格模式在IE10以上版本的浏览器中才会被支持, 1旧版本浏览器中会被忽略。严格模式对正常的JavaScript语义做了-些更改:1.消除了Javascript语法的一 些不合理、不严谨之处，减少了-些怪异行为。2.消除代码运行的一些不安全之处 ,保证代码运行的安全。3.提高编

二、this2.1、函数内this的指向这些this的指向,是当我们调用函数的时候确定的。调用方式的不同决定 了this的指向不同一般指向我们的调用者。2.2、改变函数内部this指向JavaScript为我们专]提供了一些函数方法来帮我们更优雅的处理函数内部 this的指向问题,常用的有bind()、call()、apply() 三种方法。1. call()方法call()方法调用一个对象。简单理解为调用函数的方式,但是它可以改变函数的this指向。2、apply()方法apply()

一、函数的定义和调用1.1、函数的定义方式1.函数声明方式function关键字(命名函数)。2.函数表达式(匿名函数)。3.new Function(‘参数1’, ‘參数2’， ‘函数体’)。new Function(‘参数1’, ‘參数2’， ‘函数体’)● Function 里面参数都必须是字符串格式。● 第三种方式执行效率低,也不方便写,因此较少使用。● 所有函数都是Function的实例(对象)。● 函数也属于对象。JS中—万物皆对象1.2、函数的调用方式1.普通函数

三、ES5中的新增方法3.1 、ES5新增方法概述ES5中给我们新增了-些方法,可以很方便的操作数组或者字符串, 这些方法主要包括:● 数组方法● 字符串方法● 对象方法3.2、数组方法迭代(遍历)方法: forEach()、map()、 filter()、 some()、 every() ;● currentValue :数组当前项的值。● index :数组当前项的索引。● arr :数组对象本身。● filter() 方法创建一个 新的数组,新数组中的元素是通过检查指定数组中

二、继承ES6之前并没有给我们提供extends继承。我们可以通过 构造函数+原型对象 模拟实现继承,被称为组合继承。2.1 、call()调用这个函数并且修改函数运行时的this指向● thisArg :当前调用函数this的指向对象● arg1 , arg2 :传递的其他参数2.2、借用构造函数继承父类型属性核心原理:通过cal()把父类型的this指向子类型的this , 这样就可以实现子类型继承父类型的属性。2.3、借用原型对象继承父类型方法如果利用对象的形式修改了原型对象,别

一、构造函数和原型1.1、概述在典型的OOP的语言中(如Java) , 都存在类的概念,类就是对象的模板,对象就是类的实例,但在ES6之前,JS中并没用引入类的概念。ES6,全称ECMAScript6.0 , 2015.06发版。但是目前浏览器的JavaScript是ES5版本,大多数高版本的浏览器也支持ES6 ,不过只实现了ES6的部分特性和功能。在ES6之前, 对象不是基于类创建的,而是用一-种称为构建函数的特殊函数来定义对象和它们的特征。创建对象可以通过以下种方式:1.对象字面量2.ne

三、类的继承3.1、继承现实中的继承:子承父业,比如我们都继承了父亲的姓。程序中的继承:子类可以继承父类的一些属性和方法。语法：注意：继承中，如果实例化子类输出一个方法，先看子类有没有这个方法，如果有就先执行子类的。继承中，如果子类里面没有,就去查找父类有没有这个方法，如果有,就执行父类的这个方法(就近原则)。3.2 、super关键字super关键字用于访问和调用对象父类上的函数。可以调用父类的构造函数，也可以调用父类的普通函数。语法：注意:子类在构造函数中使用super,必须放

二、 ES6中的类和对象面向对象面向对象更贴近我们的实际生活，可以使用面向对象描述现实世界事物.但是事物分为具体的事物和抽象的事物。手机抽象的(泛指的)具体的(特指的)面向对象的思维特点:1.抽取(抽象)对象共用的属性和行为组织(封装)成一个类（模板）。2.对类进行实例化，获取类的对象。面向对象编程我们考虑的是有哪些对象,按照面向对象的思维特点不断的创建对象使用对象指挥对象做事情。2.1、对象现实生活中:万物皆对象,对象是一个具体的事物 ,看得见摸得看的实物。例如,一本书、一辆汽车、

一、面向对象的编程介绍1.1、两大编程思想● 面向过程● 面向对象1.2面向过程编程POP(Process-oriented programming)面向过程就是分析出解决问题所需要的步骤,然后用函数把这些步骤-步- 步实现,使用的时候再一个一个的依次调用就可以了。举个栗子:将大象装进冰箱,面向过程做法。面向过程,就是按照我们分析好了的步骤,按照步骤解决问题。1.3面向对象编程00P (Object Oriented Programming)面向对象是把事务分解成为一个个对象,然后由对象

二十六、返回顶部滚动窗口至文档中的特定位置。window.scroll(x, y)①带有动画的返回顶部②此时可以继续使用我们封装的动画函数③只需要把所有的left相关的值改为跟页面垂直滚动距离相关就可以了④页面滚动了多少,可以通过window.pageYoffset得到⑤最后是页面滚动,使用windowscrollx,y)二十七、筋斗云效果鼠标经过某个小i ,筋斗云跟这到当前小i位置鼠标离开这个小i ,筋斗云复原为原来的位置鼠标点击了某个小li，筋斗云就会留在点击这个小i的位置思路

二十四、仿京东侧边导航栏HTML 代码：JS代码二十五、网页轮播图轮播图也称为焦点图,是网页中比较常见的网页特效。功能需求:1.鼠标经过轮播图模块,左右按钮显示,离开隐藏左右按钮。①因为js较多，我们单独新建js文件夹，再新建js文件，引入页面中。②此时需要添加load事件。③鼠标经过轮播图模块，左右按钮显示，离开隐藏左右按钮。④显示隐藏display按钮JS代码：2.动态生成小圆圈① 动态生成小圆圈。。② 核心思路:小圆圈的个数要跟图片张数一致。③ 所以首先先得到u里

二十三、仿京东放大镜效果整体思路：① 整个案例可以分为三个功能模块。② 鼠标经过小图片盒子,黄色的遮挡层和大图片盒子显示，离开隐藏2个盒子功能。③ 黄色的遮挡层跟随鼠标功能。④ 移动黄色遮挡层,大图片跟随移动功能。移动思路：①黄色的遮挡层跟随鼠标功能。②把鼠标坐标给遮挡层不合适。因为遮挡层坐标以父盒子为准。③首先是获得鼠标在盒子的坐标。④之后把数值给遮挡层做为left和top值。⑤此时用到鼠标移动事件,但是还是在小图片盒子内移动。⑥发现，遮挡层位置不对,需要再减去盒子自身高度和宽度的

二十一、获取URL参数数据思路：①第一个登录页面,里面有提交表单，action提交到index.html页面。②第二个页面,可以使用第一个页面的参数,这样实现了-个数据不同页面之间的传递效果。③第二个页面之所以可以使用第一个页面的数据,是利用了URL里面的location.search参数。④在第二个页面中,需要把这个参数提取。⑤第一步去掉 ? 利用substr 。⑥第二步利用 = 号分割键和值split( ‘ = ‘ ) 。JS代码:二十二、模拟框拖拽思路：① 点击弹出层，模态框

十九、发送短信验证码倒计时思路：① 按钮点击之后,会禁用disabled为true。② 同时按钮里面的内容会变化,注意button里面的内容通过innerHTML修改。③ 里面秒数是有变化的，因此需要用到定时器。④ 定义一个变量,在定时器里面,不断递减 。⑤ 如果变量为0说明到了时间,我们需要停止定时器,并且复原按钮初始状态。JS 代码：二十、5S钟之后自动跳转页面思路：① 利用定时器做倒计时效果。② 时间到了,就跳转页面。使用location.href。JS 代码：...

十七、5秒自动关闭广告思路：①核心思路: 5秒之后,就把这个广告隐藏起来。②用定时器setTimeout 。JS 代码：十八、倒计时思路：①这个倒计时是不断变化的,因此需要定时器来自动变化( setInterval )②三个黑色盒子里面分别存放时分秒③三个黑色盒子利用innerHTML放入计算的小时分钟秒数④第一次执行也是间隔亳秒数，因此刚刷新页面会有空白⑤最好采取封装函数的方式,这样可以先调用一次这个函数 ,防止刚开始刷新页面有空白问题。HTML 代码：JS 代码：（倒计时

十五、模拟京东按键输入思路：① 核心思路:检测用户是否按下了s键,如果按下s键,就把光标定位到搜索框里面。② 使用键盘事件对象里面的keyCode判断用户按下的是否是s键。③ 搜索框获得焦点:使用js里面的focus()方法。JS代码：十六、模拟京东快递单号的查询要求:当我们在文本框中输入内容时，文本框上面自动显示大字号的内容。思路：①快递单号输入内容时，上面的大号字体盒子(con )尿(这里面的字号更大)②表单检测用户输入:给表单添加键盘事件③同时把快递单号里面的值( value

十三、动态生成表格思路：① 因为里面的学生数据都是动态的,我们需要js动态生成。这里我们模拟数据，自己定义好数据。数据我们采取对象形式存储。② 所有的数据都是放到tbody里面的行里面。③ 因为行很多, 我们需要循环创建多个行(对应多少人)。HTML 代码：JS 代码：十四、跟随鼠标案例思路：①鼠标不断的移动，使用鼠标移动事件: mousemove 。②在页面中移动,给document注册事件。③图片要移动距离，而且不占位置,我们使用绝对定位即可。④核心原理:每次鼠标移动

十一、简单版发布留言思路：① 核心思路:点击按钮之后,就动态创建一个i ,添加到ul里面。② 创建li的同时,把文本域里面的值通过i.nnerHTML赋值给li 。③ 如果想要新的留言后面显示就用appendChild如果想要前面显示就用insertBefore 。HTML 代码：JS 代码：十二、简单版删除留言（接十一）思路：① 当我们把文本域里面的值赋值给1i的时候,多添加一个删除的链接 。② 需要把所有的链接获取过来.当我们点击当前的链接的时候,删除当前链接所在的li。③ 阻

九、tab栏切换案例（自定义属性）思路：① Tab栏切换有2个大的模块。② 上的模块选项卡,点击某一个,当前这一个底色会是红色,其余不变(排他思想)修改类名的方式。③ 下面的模块内容,会跟随上面的选项卡变化。所以下面模块变化写到点击事件里面。④ 规律:下面的模块显示内容和上面的选项卡一一对应 ，相匹配。⑤ 核心思路:给上面的tab_ list 里面的所有小li添加自定义属性，属性值从0开始编号。⑥ 当我们点击tab_ list 里面的某个小li，让tab__con 里面对应序号的内容显示，其余

七、表格隔行变色思路：①用到新的鼠标事件鼠标经过onmouseover鼠标离开onmouseout②核心思路:鼠标经过tr行，当前的行变背景颜色，鼠标离开去掉当前的背景颜色③注意:第一行( thead里面的行)不需要变换颜色,因此我们获取的是tbody里面的行HTML 代码：JS 代码：八、表单全选取消全选思路：① 全选和取消全选做法:让下面所有复选框的checked属性(选中状态)跟随全选按钮即可。② 下面复选框需要全部选中，上面全选才 能选中做法:给下面所有复选框绑定点击事

五、密码框格式错误提示信息思路：①首先判断的事件是表单失去焦点onblur 。②如果输入正确则提示正确的信息颜色为绿色小图标变化。③如果输入不是6到16位,则提示错误信息颜色为红色小图标变化。④因为里面变化样式较多,我们采取className修改样式。HTML 代码：需要更改的CSS代码：Js 代码：六、百度换肤效果思路：①这个案例练习的是给一组元素注册事件②给4个小图片利用循环注册点击事件③当我们点击了这个图片,让我们页面背景改为当前的图片④核心算法:把当前图片的src路