alpha_xu_vvvvv的博客

转载 常用的正则记录

一、校验数字的表达式 1 数字：^[0-9]*$ 2 n位的数字：^\d{n}$ 3 至少n位的数字：^\d{n,}$ 4 m-n位的数字：^\d{m,n}$ 5 零和非零开头的数字：^(0|[1-9][0-9]*)$ 6 非零开头的最多带两位小数的数字：^([1-9][0-9]*)+(.[0-9]{1,2})?$ 7 带1-2位小数的正数或负数：^(\-)?\d+(\.\d{1,2})?$ 8 正数、负数、和小数：^(\-|\+)?\d+(\.\d+)?$ 9 有两位小数的正实数：^[

原创 css选择器记录

div[attribute] 选择所有带有attribute属性div元素div[attribute = “xxx”] 选择所有带有attribute属性并且值等于xxx的div元素div[attribute ^= “xxx”] 选择所有带有attribute属性并且开头值等于xxx的div元素div[attribute $= “xxx”] 选择所有带有attribute属性并且结尾值等于xxx的div元素div[attribute *= “xxx”] / div[attribut

原创 作用域链的理解

作用域链就是js设计用来找变量的，顺着作用域链找变量，直到全局的global，如果在之前找到，那么就会停止。作用域（英文：scope）是据名称来查找变量的一套规则，可以把作用域通俗理解为一个封闭的空间，这个空间是封闭的，不会对外部产生影响，外部空间不能访问内部空间，但是内部空间可以访问将其包裹在内的外部空间。 let jennie = { jisoo: 123 }; let fnc = function a() { let b = 1; let aloha = "lisa

原创 vue的异步更新队列

原创 vue生命周期

从最开始的流程往下分析整体init events $ lifecycle（说明：初始化事件和生命周期）什么是事件？什么是生命周期？vue api文档中事件有（on、once、off、emit四个方法），生命周期有（mount、forceUpdate、nextTick、destroy四个方法，其他那么多生命周期钩子应该也在这初始化的，要不然下一步的beforeCreate是哪里来的）beforeCreate（组件刚被创建，组建属性计算之前，如data属性等 执行的钩子函数）说白了这里给我们用户

原创 vue 死循环 loop function

<el-table-column prop="state" label="提取状态" width="384" align="center" class-name="bugAwardClass" > <template slot-scope="scope"> <!-- bug --> <span :

原创 elementUi遇到的坑

1.Message 消息提示 自动弹出前提：我是按需引入组件的问题：每一次程序进去就出弹出没有内容的消息弹窗解决办法：就是按需引入的时候不需要在mainjs全局的引入与注册哪个组件用到就在哪个组件引入就好了。...

转载 async await和promise的区别？

await的异步:由于浏览器/引擎负责解释和执行JavaScript的主线程是单线程，同步执行一个耗时较大的任务会导致阻塞。异步执行代码可以解决阻塞问题，但会带来顺序的不确定性（要注意这里顺序的不确定性指的是多个异步过程的不确定性）。如果这些任务彼此不相关，就不一定需要交互，如果没有相互影响的话，不确定性是完全可以接受的。如果你需要保证异步执行的顺序，比如依次远程读取一系列url,按顺序触发动画等，就需要嵌套很多层回调函数。多级嵌套的回调函数弊端很多：不直观，强耦合，回调的不确定性，不利于维护与复用。..

原创 vue路由解耦

1、params 传参this.$router.push({name: ‘…’, params: {id: …}})params传参, 路径不能使用path 只能使用name，否则params将无效。取数据： this.$route.params.id2、query 传参params传参, 路径可以使用path或者namethis.router.push(path:′.....′,query:id:.....)取数据：this.router.push({path: '.....', query:

原创 Http遇到的问题总结

Authorization 属性HTTP协议中的 Authorization 请求消息头含有服务器用于验证用户代理身份的凭证，通常会在服务器返回401 Unauthorized 状态码以及WWW-Authenticate 消息头之后在后续请求中发送此消息头。就是用来给后端判断是谁在请求数据...

原创 vue-遇到的问题

vue数组响应式检测不到的情况css—opacity的继承问题opacity属性会被子元素继承 那么如果你要背景opacity 0.5 半透明 那么这个标签上的文字也会被设置为opacity 0.5 继承了，解决办法：1.使用rgba 兼容问题–不兼容低级浏览器ie2. 使子元素不是子元素 用绝对定位把应该的子元素 设置到对应的位置 即 就是不要是设置是opacity属性的标签的子标签就好了。...

原创 broder-bottom 设置长度

<div class="tabbarBxos"> <div class="tab_item"> <span>首页首页</span> </div> <div class="tab_item"> <span>项目大厅</span> </div> <div class="tab_it

原创 vue - data必须是函数返回的对象

为什么对象、数组 需要以一个function 返回data也是因为对象、数组都是引用型数据类型。当多个组件new实例的话，就会直接引用同一个data的对象的数据，一个组件数据修改，另一个就会跟着修改。当data是一个function返回的，就是每一个data都是不一样的存放地址。官网的解释：当一个组件被定义，data 必须声明为返回一个初始数据对象的函数，因为组件可能被用来创建多个实例。如果 data 仍然是一个纯粹的对象，则所有的实例将共享引用同一个数据对象！通过提供 data 函数，每次创..

原创 element menu 刷新后还是打开当前路由的menuitem

原创 element表单 覆盖原方法

原创 git - 1

当你上传本地代码导github失败 查看日志显示 403 timeout解决办法： 修改 url= https://github.com/waittingbar/xxx.git 为 url=ssh://git@github.com/waittingbar/xxx.git

原创 数组的方法总结

数组方法Array.from && newSet()Array.from的设计目的是快速便捷把一个类似数组的可迭代对象创建成一个新的数组实例。通俗的讲，只要一个对象有length，Array.from就能把它变成一个数组，返回新的数组，而不改变原对象。let likeArr = { '0': 'a', '1': 'b', '2': 'c', length: 3};// ES5的写法var arr1 = [].slice.call(likeArr

原创 PictureBed图床

PictureBedauthor : alohaxuuuublog : http://alohaxuuuu.fun/introduceThis is a simple project from local img to http img.I hope this project inspires you.IDEA: Upload to the server local database stored ,through HTTP: domain/XXX/XXX to access this imag

原创 网易云音乐-Vue

AlohaMusic音乐播放平台介绍这是一个仿网易云音乐的音乐播放平台。技术栈Vue 2 + Vue Router + Vuex + Axios + ElementUI + SCSS 后端接口网易云官方API接口图片懒加载 路由懒加载 webpack分割打包完成的功能 推荐歌单 歌单详情页、歌手详情页 排行榜 歌手 评论 下载音乐 播放音乐 随机、顺序、歌单、单曲播放 详情播放器页面 MV、视频（需登录） 私人FM 最近播放 歌单收藏 创建歌单 搜索 消

原创 egg后台、前端post请求出现403问题

egg后台、前端post请求出现403问题原因是egg 框架内置了安全系统，默认开启防止 XSS 攻击 和 CSRF 攻击。在Security的默认拦截器里，默认会开启CSRF处理，判断请求是否携带了token，如果没有就拒绝访问。并且，在请求为(GET|HEAD|TRACE|OPTIONS)时，则不会开启。就是要不你关闭了这个安全拦截器，要不你请求带token。解决办法：1.关闭拦截器在config.default.js中添加如下配置：config.security = { csrf

原创 总结从零搭建个人博客

总结从零搭建个人博客服务器腾讯、阿里随便买一个（需要3个月以上）域名买一个域名，买完之后需要审核、实名认证、报备，全部跑完整个流程大概需要一个多星期。域名备案完需要把备案号以连接的方式写到你的bolg底部宝塔宝塔是一个图形化的网站管理的软件，很好用。不需要你懂太对Linux的命令就可以挂载网站、服务器。怎么一步步搭网站就不说了，百度一搜一堆。上传个人博客代码（前台、后台、后端）这里就陈述一下我的一些搭网站遇到的一些问题。我的个人博客是参考了技术胖这位爱分享的程序员的博客（文章尾部有连接

原创 CORS跨域问题

报错信息：Access to XMLHttpRequest at 'http://xxx.xxx.xxx.xxx/admin/checkLogin' from origin 'http://localhost:3002' has been blocked by CORS policy: Response to preflight request doesn't pass access control check: The value of the 'Access-Control-Allow-Origin'

转载 vue-cli4打包知识点

转载于https://blog.csdn.net/weixin_43638968/article/details/109093199

原创 TypeError: Cannot read property ‘tapPromise‘ of undefined

在用webpack打包vue项目的时候要开启gzip会出现的错误compression-webpack-plugin版本问题需要用5.0.1版本npm i compression-webpack-plugin@5.0.1

原创 客户端渲染（CSR）VS服务端渲染(SSR)

客户端渲染（CSR）VS服务端渲染(SSR)渲染：就是将数据和模版组装成html服务端渲染：就是用户在浏览你的网页的时候，请求一个网页，服务端直接把这个网页的静态HTML显示在你眼前。解析模板的工作完全交给后端来做，客户端只需要解析HTML页面。后端生成静态化文件。即生成缓存片段，减少数据库查询的浪费时间。高效。有利于SEO。使前端耗时少。（不需要跑一遍JS）不利于前后端分离，开发效率低。（前端修改了css，后端就需要跟着修改）客户端渲染：客户端渲染模式下，服务端把渲染的静态文件给

转载 SPA缺点

SPA缺点1.首屏加载慢的原因网络延时问题资源文件体积是否过大资源是否重复发送请求去加载了加载脚本的时候，渲染内容堵塞了解决办法常见的几种SPA首屏优化方式：减小入口文件积、UI框架按需加载、图片资源的压缩、组件重复打包、开启GZip压缩减小入口文件积常用的手段是路由懒加载，不需要打开首页就把全部组件都加载了，按需引用。静态资源本地缓存后端返回资源问题：采用HTTP缓存，设置Cache-Control，Last-Modified，Etag等响应头采用Service Work

原创 谈谈对单页面应用与多页面应用的理解

谈谈对单页面应用与多页面应用的理解多页面应用原理：每一次页面跳转，后台就会返回一个新的HTML。如果有公共资源，每一次跳转都需要重新加载。（整页刷新）页面跳转：使用window.location.href = "./index.html"进行页面间的跳转。页面间数据传递：可以使用path?account="123"&password=""路径携带数据传递的方式，或者localstorage、cookie等存储方式单页面应用原理：用vue写的项目是单页应用，刷新页面会请求一个HTML文件，

原创 浏览器的兼容性问题

浏览器的兼容性问题1.什么是浏览器的兼容性？浏览器的兼容性就是在不同的浏览器运行都可以展示网站原本需要被显示的内容。即在不同的浏览器都可以正常显示网站内容（IE、Chrome、Safari等等）2.为什么会出现浏览器的兼容性问题？出现浏览器兼容性是因为每一个浏览器都有自己的一套规范，没有进行统一。例如：IE浏览器无法跟上新的html、css这些新特性；window与mac同一个浏览器也会有不一样的。由于不同浏览器的不同对代码的解析不同，而产生的在页面上显示的效果不同。3.解决浏览器的兼容性问题

转载 浏览器兼容问题

引用大佬的文章 ： https://blog.csdn.net/zfangls/article/details/53908063javascript ：1.HTML对象获取问题FireFox：document.getElementById(“idName”);ie:document.idname或者document.getElementById(“idName”).解决办法：统一使用document.getElementById(“idName”);2.const问题说明:Firefox下,可

原创 The AudioContext was not allowed to start. It must be resumed after a user gesture on the page

chrome的The AudioContext was not allowed to start. It must be resumed (or created) after a user gesture on the page. document.documentElement.addEventListener("mousedown", () => { if (context.state !== "running") context.resume(); });

原创 Vue拿到原生DOM事件event

Vue的小知识点1.如果需要在Vue中拿到原生DOM事件event//这里的greet不需要（）和参数<div id="example-2"> <!-- `greet` 是在下面定义的方法名 --> <button @click="greet">Greet</button></div>methods: { greet(event) { alert('Hello ' + this.name + '!')

原创 js知识点总结

CSS隐藏元素的几种方法（至少说出三种）Opacity:元素本身依然占据它自己的位置并对网页的布局起作用。它也将响应用户交互;Visibility:与 opacity 唯一不同的是它不会响应任何用户交互。此外，元素在读屏软件中也会被隐藏;Display:display 设为 none 任何对该元素直接打用户交互操作都不可能生效。此外，读屏软件也不会读到元素的内容。这种方式产生的效果就像元素完全不存在;Position:不会影响布局，能让元素保持可以操作;​ z-index：-999数组的方法/

原创 css样式污染问题

一、css样式污染问题记录1.外面标签 的class的content ，然后comment组件里面也有使用名字为content的class，不知道为什么组件里面的content就有外面content的属性