qq_59517599的博客

原创 实现svg图在Element+图片预览组件中显示

在 Element UI 的 el-image-viewer 组件中，直接使用 SVG 图片作为源是不直接支持的，因为 el-image-viewer 主要用于查看常规图像格式如 JPG, PNG 等。然而，你可以通过一些变通方法来展示 SVG 图片。首先，你需要将 SVG 文本转换为一个可用的 Data URL。这可以通过编码 SVG 文本并将其格式化为 Data URL 来实现。这样就能实现即使手里只有svg图或文本 也能用element组件预览它了。另外如果后端返回的是SVG文本可以这样来操作。

原创 仿钉钉排班管理，基于Element Plus的排班表格可编辑实现思路

这样应该空数据表格就好了，再用弹出框组件el-popover来配合按钮（按钮我用着方便，要求美观也能自己写或者其他样式），先要将后端给我的数据做个处理，要所在列有对应行的属性名，所以日期全称fullDate就派上用场，我们在表格数据的每个元素加入循环对象，对象键是对应日期，对象值就是对应班次的name，列如：{2023-12-12：早班}这样 那不管想怎么渲染上表格都可以很轻松，数据的处理根据后端返回给我们的数据来处理，下面是我的处理代码。下面是完整的页面代码。循环遍历渲染出表格头来。

原创 uniapp中在组件中使用被遮挡或层级显示问题

uniapp中在组件中使用或croll-view标签内使用uni-popup在真机环境下会被scroll-view兄弟元素遮挡，在开发环境下和安卓系统中可以正常显示，但在ios中出现了问题。看了许多文章都没有找到问题的原因，最后看到这一个文章。

原创 vue3+ts 组合式api中（setup)如何使用getCurrentInstance，以及用它替代this

getCurrentInstance是一个function方法，getCurrentInstance()是一个对象，proxy也是一个对象。proxy是getCurrentInstance()对象中的一个属性，通过对象的解构赋值方式拿到proxy。这种只适合本地调试，运行到线上就会报错，为ts的类型错误，类型“ComponentInternalInstance | null”上不存在属性“proxy”的错误。vue3的setup中没有this时需要使用getCurrentInstance()来获取。

原创 如何实现移动端侧边目录栏收缩，并监听点击目录栏以外则自动收缩

子组件，侧边导航栏，用父子间的传参 配合watch来监听侧边栏是否展开，展开则添加点击监听函数，收缩则去除点击监听函数。判断点击是否点击到aside组件外可以通过检查目标元素（e.target）是否不包含在组件的根元素（this.$el）中，如果目标元素在组件之外，我们调用父组件的函数expendClick（）来实现自动收缩，另外因为expend按钮在父组件中，点击按钮也会被判定为false，导致按钮展开功能失效。此时是展开侧边栏，添加了点击监听事件，这时我们点击侧边栏以外部分。

原创 js如何从对象中删除属性值为空字符串的属性

现在，filteredObj 中将只包含属性值不为空字符串的属性。注意，这个函数将返回一个新对象，而不是修改原始对象。

转载 es6 html5 css3 新增

html5的新特性1.语义化标签有利于seo，有助于爬虫抓取更多的有效信息，爬虫是依赖于标签来确定上下文和各个关键字的权重。 语义化的html在没有css的情况下也能呈现较好的内容结构与代码结构 方便其他设备的解析 便于团队开发和维护2.表单新特性3.多媒体视频(video)和音频(audio)4.web存储sessionstorage:关闭浏览器清空数据，储存大小约5M。 localstorage：永久生效，存储大小20M，多窗口下都可以使用 都只能储存字符串css3

原创 javascript中实现跨域的方式总结

第一种方式：jsonp请求；jsonp的原理是利用<script>标签的跨域特性，可以不受限制地从其他域中加载资源，类似的标签还有<img>. 第二种方式：document.domain；这种方式用在主域名相同子域名不同的跨域访问中 第三种方式：window.name；window的name属性有个特征：在一个窗口(window)的生命周期内,窗口载入的所有的页面都是共享一个window.name的，每个页面对window.name都有读写的权限，window.name是持久..

转载 深拷贝与浅拷贝

1、什么是浅拷贝创建一个新对象，这个对象有着原始对象属性值的一份精确拷贝。如果属性是基本类型，拷贝的就是基本类型的值，如果属性是引用类型，拷贝的就是内存地址，所以如果其中一个对象改变了这个地址，就会影响到另一个对象。上图中，`SourceObject`是原对象，其中包含基本类型属性`field1`和引用类型属性`refObj`。浅拷贝之后基本类型数据`field2`和`filed1`是不同属性，互不影响。但引用类型`refObj`仍然是同一个，改变之后会对另一个对象...

原创 http的八种网络请求方式

原创 *vue如果有el 又有$mount会是什么情况？

先看是否有DOM与vue创建的vm的关联选项el如果没有就看是否有挂载动作$mount,如果都写了，一定会关联而且是$mount优先如果组件写了template模板 也依然会调用它底层的render函数去渲染

原创 vue项目运行流程，代码运行流程

项目运行流程:npmrunservewebpack的配置文件中如下配置(vue的脚手架):入口是src文件夹中的main.js出口是dist文件夹中的main.js:模板html是public文件夹中的index.html热更新服务器的配置:8080端口在内存打包的文件生成dist然后托管打包运行过程中遇到了.vue的文件就会启动vue-loader去解析这种文件编码解析方式就是把导出的对象解析为一个组件吧template标签内部的整个模板解析组件的template属性...

原创 *vue中如何实现css的作用域

在style标签中添加scoped属性，其原理是打包工具会为添加了scoped属性的vue文件生成一个hash值，为每一个标签添加这个属性，然后把我们css代码处理成带这个属性的选择器，实现css的作用域

原创 *vue生命周期函数相关问题

什么是生命周期函数:相当于是一种特殊事件,当vm实例在整个运行的过程中,会在不同的时期去执行特定的函数,这样的函数就是vue的生命周期函数beforeCreate created beforeMount mounted destory/x这些钩子都只执行一次beforeUpdate updated第一次构建不会调用,以后每次data被更新了就会调用beforeDestroy destroyed 销毁的方式有两种:用户关闭和代码this.$destroy()//销毁vm实例为什么要

原创 *vue中计算属性和方法的区别 及计算属性中重计算问题的解决方法

计算属性会把使用到的data中的属性缓存起来，防止页面发生大量重复计算， 提升js 运行效率,如果计算属性中使用到的data中那部分数据变了才会重新调用计算属性 methods方法没有计算结果缓存起来，data任何数据发生改变，方法都会被重新调用一遍 方法常常是作用的事件使用,计算属性常常是动态计算结果时使用1.如果是修改了data中监听的某个的属性值 计算属性就会运行2.如果是修改了data中监听的某个属性值内部的数据,计算属性就不会重新运行比如:计算属性使用的是data中的一个数组,某个交互把数

原创 vue、react、angluar之间的区别

vue：1.vue的思想是响应式的，也就是基于是数据可变的2.vue是把html，css，js组合到一起，用各自的处理方式3.vue是声明式的写法，通过传入各种options，api和参数都很多4.vue很多东西都是内置的，写起来确实方便一些react：1.react整体是函数式的思想，把组件设计成纯组件，状态和逻辑通过参数传入，所以在react中，是单向数据流，推崇结合immutable来实现数据不可变。2.react的思路是all in js，通过js来生成html3

原创 *MVC和MVVM的区别

MVC在实际应用开发场景中，开发者常用的一种设计模式是MVCM--model：数据模型层。是应用程序中用于处理数据逻辑的部分 V--view：视图层。是应用程序中处理显示的部分 C--controller：控制层。是应用程序中处理用户交互的部分MVVM M--model：模型层。业务相关的数据对象 V--view：视图层。展现出用户界面 VM--viewModel：视图模型层。就是与界面相对...

原创 *vue的特点 渐进增强和优雅降级

自底层向上增量式的渐进式框架自底层向上：五层技术分管各层功能 相互有关联但不冲突第一层：写页面；声明渲染第二层：网页和网站的模块化开发：高内聚低耦合 组件系统第三层：url加载不同页面 路由系统第四层：数据管理第五层:开发环境--脚手架渐进增强（Progressive Enhancement）：一开始就针对低版本浏览器进行构建页面，完成基本的功能，然后再针对高级浏览器进行效果、交互、追加功能达到更好的体验。优雅降级（Graceful Degradation）：一开始就构建站点

原创 *vue的响应式数据/动态数据刷新的实现，双向绑定的概念

简单点讲响应式数据绑定:只能由代码改变UI或者只能由UI改变代码双向数据绑定:代码改变UI,UI也能改变代码vue实现数据双向绑定主要是：采用数据劫持结合发布者-订阅者模式的方式，通过Object.defineProperty（）来劫持各个属性的setter，getter，在数据变动时发布消息给订阅者，触发相应监听回调。当把一个普通 Javascript 对象传给 Vue 实例来作为它的 data 选项时，Vue 将遍历它的属性，用 Object.defineProperty 将它们转为 get

原创 *vue 如何去掉页面闪烁问题

界面加载的时候会把节点直接挂载到文档树中,导致{{msg+"666"}}这个字符串会显示一下，vue对象生成data数据时候 回去刷新界面 把{{msg+"666"}}字符串替换成结果字符串，导致界面第一次加载的时候会闪屏解决方法：1、使用v-text或者v-html指令操作 2、css样式中添加[v-cloak] {display:none};原理是css样式在数据以及js之前加载，此时相当于不存在节点，在数据以及js加载完成后，v-cloak自...

原创 什么是egg.js及egg.js的常规用法

egg.js 是『约定优先于配置』的一个 Node.js web 框架egg的约定规则：1 app/router.js：用于配置URL路由规则；2 app/controller/** ：用于解析用户的输入，处理后返回相应的结果；3 app/service/： 用于编写业务逻辑层；4 app/public/： 用于放置静态资源；5 config/config.{env}.js： 用于编写配置文件；...

原创 *http协议

TCP/IP协议是HTTP协议的底层协议建立连接经过三次握手，断开连接经过四次挥手ip连接后发送一个数据包后端计算机返回一个数据包在发送一个数据包状态码后端的数据包的响应数据包的响应行的第二个位置200成功303重定向401没注册的网址403没有访问权限404资源没找到500服务器的代码有问题503服务器维护传统服务器Apache、Nginx、Tomcat、IIS稳定安全node...

原创 游览器的事件循环机制和node.js的事件循环机制

浏览器的事件循环机制1.脚本就是一个任务宏任务2.脚本代码执行然后:js代码是单线程的,在主线程中执行所有的js任务2.js任务可能调用底层提供异步任务的api:网络任务promsie计时器3.遇到了异步任务时就把微任务或者宏任务添加到底层的子线程中执行 （1）先执行微任务(比如promise) （2）微任务执行完毕时会触发微任务的回调函数(就是主线程绑定的回调) （3）如果微任务执行了就执行宏任务 （4）但是不管是微任务还是宏任务都是异步的也就是虽然...

原创 封装网络请求axios

Axios 是一个基于 promise 的 HTTP 库，可以用在浏览器和 node.js 中。 <script type="text/javascript"> function myaxios (url) { var p1=new Promise((resolve,reject)=>{ var xhr=new XMLHttpRequest() xhr.open("GET",url,true) xhr.send() xhr.o.

原创 *js的promise

1、Promise是一个ES5末期提供的构造函数,ES6正式写入标准浏览器厂商实现了它的功能,它解决了异步编程的回调函数的无限制嵌套的地狱回调的问题<script>//es6解决异步的promsie方式 xx1() .then(xx2()) .then(xx3()) //es7 await xx1() await xx2() await xx3() console.log(typeof Promise) console.log(..

原创 *代理服务器

常常看做的业务来区分名字:代理服务器(中转服务器) 爬虫 大数据分析 SEO 自己的前端页面请求自己的后端ajax接口(没有问题) 利用后端去请求别的服务器的ajax接口(没有跨域限制) 再把请求的数据发送给自己的前端页面主要用到后端的request第三方模块 request.get(url,(err,status,body)=>{})//get请求 request.post(url,(err,status,body)=>{})//post请求 request(url,(err,status

原创 *所有网络请求的方法以及解决AJAX无法跨域访问的方法

网络请求的方法有：1、网站：浏览器的地址栏只能发送get请求,参数拼接到网址中返回的数据浏览器去解析(如果浏览器能解析返回的编码就会解析,解析不了就下载默认路径)2、 link的href当前浏览器解析dom时遇到了这个标签就发送get请求返回的数据加载3、mate当前浏览器解析dom时遇到了这个标签就发送get请求返回的数据加载4、 css内部的代码url@import遇到这个标签也会发送get请求然后按照使用规则去加载资源5、a的href用户点击并...

原创 *get传参与post传参

post与get的区别：1.Post传输数据时，不需要在URL中显示出来，而Get方法要在URL中显示。2.Post传输的数据量大，可以达到2M，而Get方法由于受到URL长度的限制,只能传递大约1024字节.3.Post顾名思义,就是为了将数据传送到服务器段,Get就是为了从服务器段取得数据.而Get之所以也能传送数据,只是用来设计告诉服务器,你到底需要什么样的数据.Post的信息作为http请求的内容，而Get是在Http头部传输的。get和post的区别1get方式传递的参数可以在页面..

原创 *JSONP

当用AJAX跨越访问就会被拦截，此时就应用到JSONP浏览器的同源策略ajax网络请求是如果当前页面来自于a服务器但是想请求b服务器的资源就会被浏览器阻止同源:协议ipporthttps://www.baidu.com/index.htmlhttp://www.baidu.com/ajax1非同源https://news.baidu.com/ajax1非同源...

原创 npm模块和package.json

package.json文件是一个项目的配置文件一般放在项目的根部它里面有很字段有不同意义npminit-y会生成项目的配置文件npmrunxx执行当前目录下的配置文件中的scripts的xx指令npm它也是node安装的核心模块npm常常是用于构建项目的功能在命令行操作npmi按照配置文件的依赖清单去下载项目依赖的模块npminstallxx下载模块到项目中(npmi的时候会全部按照清单的版本下载)npmixx...

原创 *原生AJAX

什么是AJAX：AJAX即异步的javascript和XMLAJAX 最大的优点是在不重新加载整个页面的情况下，可以与服务器交换数据并更新部分网页内容。AJAX 不需要任何浏览器插件，但需要用户允许JavaScript在浏览器上执行。如果要让用户留在当前页面中，同时发出新的HTTP请求，就必须用JavaScript发送这个新请求，接收到数据后，再用JavaScript更新页面，这样一来，用户就感觉自己仍然停留在当前页面，但是数据却可以不断地更新。AJAX的原生代码：<scrip.

原创 req和res 静态资源的托管

总结: url模块 parse(req.url)==>{pathname:?前面和port后面的部分 query:查询字符串} querystring parse(querystring) ==>mime 模块 mimi.getType(str) //跟据字符串的后缀给我们返回mime类型 "大类型/小类型"<script>var http=require("http")var fs=require("fs")var url=requ...

原创 node.js里fs模块的常用方法

读取文件夹（目录）<script>varfs=require("fs")fs.readdir(__dirname+"/src",(err,infos)=>{console.log(err,infos) //（错误，文件名）})删除文件的引用<script>var fs=require("fs")fs.unlink(__dirname+"/src/buy.mp4",(err)=>{console.log(err)})追加...

原创 静态网站的搭建及基础理论

‘http’是一个文件夹：先找当前目录下的node_modules里面的http文件夹（第三方模块）如果没有就去全局安装目录找（第三方模块）也没有就去node的核心模块库（核心模块）__dirname是node中的全局变量是一个字符串代表了当前目录自定义模块的导入语法：es6是 export default {}node环境 module.exports={}自定义模块的导出语法：es6 import xxx from "路径"node require("文件路径")...

原创 正则表达式

什么是正则表达式：是字符串的匹配模式 <script> let reg1=/a/gi//查找a g：表示在全字符串里查找 i：表示不区分大小写 let str='abcdcsfaabaaad_ac12acac3aaaabcabc'; console.log(str.match(reg1)); let reg2=/[ab]c/g//查找a或b开头的 如ac、bc console.log(str.match(

原创 面试题: 获取当前网页的参数,解析为一个, querystring转对象

<script>var url=window.location.href var url="http://www.baidu.com/20210720/page1.html?username=karen&pwd=123&cb=fn&count=20" function querystringformart (url) { var obj={} var arr1=url.split("?") //console.log(re) .

原创 解构赋值的基本概念

解构赋值==>按照某种数据的结构进行解析数据然后赋值给变量var(修饰)model(模型)=dataSource(数据源)接受数据的地方就可以使用解构隐式操作：var[age,setAge]=useState(initialState)...

原创 遍历:把一个数据容器中的元素全部取出来使用

1.for循环是最便历数据容器最好的方法:1.兼容性好2.逻辑简单(好交接)for(leti=0;i<arr.length;i++){ console.log(arr[i]) }2、ofEach是for循环后来出的方法但是它不返回新数组直接操作原数组(一般不推荐使用)vararr=[100,200,300]arr.forEa...

原创 数组的常用方法

1、 arr.push("hello") //在数组的末尾添加 影响原数组arr.unshift("hello") //在数组的头部添加 影响原数组2、arr.pop() //在数组的末尾删除一个元素 影响原数组arr.shift() //在数组的头部删除一个元素 影响原数组3、arr.splice(截取开始下标，截取个数，加入元素) //影响原数组4、数组合并：arr.concat(arr1) 或者 [...a...

原创 字符串的常用方法

111字符串的常用方法如下，strr="hellokaren"1、转字符串 toStringstr.toString()// 这里有个隐式操作,varhideObj=newString();re1.value="hellokaren";varre1=hideObj.toString()2、裁剪 str.split("e")返回值["h","llokar","n"]不会改变原来的字符串面试题: 获取当前网页的参数,解析为一个, query...