自定义博客皮肤VIP专享

*博客头图:

格式为PNG、JPG,宽度*高度大于1920*100像素,不超过2MB,主视觉建议放在右侧,请参照线上博客头图

请上传大于1920*100像素的图片!

博客底图:

图片格式为PNG、JPG,不超过1MB,可上下左右平铺至整个背景

栏目图:

图片格式为PNG、JPG,图片宽度*高度为300*38像素,不超过0.5MB

主标题颜色:

RGB颜色,例如:#AFAFAF

Hover:

RGB颜色,例如:#AFAFAF

副标题颜色:

RGB颜色,例如:#AFAFAF

自定义博客皮肤

-+
  • 博客(43)
  • 收藏
  • 关注

原创 React Hooks的设计思想和基本使用

介绍React Hooks的设计思想及基本使用

2023-05-06 15:53:30 754

原创 Jest中的钩子函数

Jest中的钩子函数----beforeEach、beforeAll、afterEach、afterAll

2023-03-20 13:32:20 116

原创 前端测试异步代码的测试方法---- jest

前端测试异步代码的测试方法

2023-03-20 11:04:15 132

原创 数据库验证失败,提交的字段在本地数据表的schema文件中不存在

数据库验证失败,提交的字段在本地数据表的schema文件中不存在问题解决办法:问题使用uniCloud,在前端直接操作数据库表时,报了以下错误前端代码如下:在阅读了官方前端操作数据库表的文档,确定前端代码未出现问题在网上搜寻答案及根据错误提示得出,问题应该是出现在schema文件中最开始schema文件为解决办法:uniCloud schema官方文档:DB Schema需要在schema文件中添加相应字段 chat_members在properties中添加 chat_memb

2022-04-27 11:30:17 4472 1

原创 关于微信小程序授权登陆之后需要在个人信息页展示信息,如微信头像,昵称这件事

开发时使用uniapp进行开发,不过用什么开发都不重要。在搞完微信授权登陆后,又遇到需要把用户昵称和头像展示在个人信息页的情况,在试了很多方法后,发现了便利的方法。有想过从数据库获取数据,也想过从登陆页面跳转个人信息页时带参数跳转....但都很麻烦,而且不太想是正确的思路,自己也搞失败了。最终在查阅相关博客后,发现可以在授权登陆后,获取到的用户信息随 token 一起存入storage中,在需要使用的地方从storage中获取就行。在登陆界面:使用uni.setStorageSync()存储

2022-04-08 20:07:27 2739

转载 关于uniapp小程序在微信开发者运行时找不到app.json这件事

按照官网步骤在HbuilderX 编译后,可以打开微信开发者工具,但是会报错[ app.json 文件内容错误] app.json: app.json 未找到解决步骤:1、查看项目中文件,确实没有app.json 文件2、那说明HbuilderX在编译之后 会自己生成 app.json。因为此文件是微信小程序的标配入口文件。 所以开始找一下HbuilderX在编译之后生成的代码包3、找到【unpackage】文件夹,打开之后找到【dist】,打开之后找到【dev】,打开之后找到...

2022-04-07 16:54:58 12578 4

原创 前端面试——JS+HTTP等篇(部分)

1、说一下闭包(一句话概括)闭包就是能够读取其他函数内部变量的函数,或者子函数在外调用,子函数所在的父函数的作用域不会被释放。2、说说前端中的事件流HTML中与javascript交互是通过事件驱动来实现的,例如鼠标点击事件onclick、页面的滚动事件onscroll等等,可以向文档或者文档中的元素添加事件侦听器来预订事件。想要知道这些事件是在什么时候进行调用的,就需要了解一下“事件流”的概念。什么是事件流:事件流描述的是从页面中接收事件的顺序,DOM2级事件流包括下面几个阶段。事件捕获阶段

2021-09-21 10:32:49 343

原创 前端面试——css篇(部分)

1、inline-block、inline和block的区别;为什么img是inline还可以设置宽高Block是块级元素,其前后都会有换行符,能设置宽度,高度,margin/padding水平垂直方向都有效。Inline:设置width和height无效,margin在竖直方向上无效,padding在水平方向垂直方向都有效,前后无换行符Inline-block:能设置宽度高度,margin/padding水平垂直方向 都有效,前后无换行符2、了解重绘和重排吗,知道怎么去减少重绘和重排吗,让文档

2021-09-20 10:38:44 127

原创 为什么会出现浮动?什么时候需要清除浮动?清除浮动的方式有哪些?

浮动元素碰到包含它的边框或者浮动元素的边框停留。由于浮动元素不在文档流中,所以文档流的块框表现得就像浮动框不存在一样。浮动元素会漂浮再文档流得块框上。浮动带来的问题:父元素的高度无法被撑开,影响与父元素同级的元素与浮动元素同级的非浮动元素(内联元素)会跟随其后若非第一个元素浮动,则该元素之前的元素也需要浮动,否则会影响页面显示的结构清除浮动的方式:(1)、父级div定义 height原理:父级div手动定义height,就解决了父级div无法自动获取到高度的问题。优点:简单、代码少、容

2021-09-20 08:09:32 891

原创 HTTP状态码

参考回答:201 Created 已创建。成功请求并创建了新的资源202 Accepted 已接受。已经接受请求,但未处理完成203 Non-Authoritative Information 非授权信息。请求成功。但返回的meta信息不在原始的服务器,而是一个副本204 No Content 无内容。服务器成功处理,但未返回内容。在未更新网页的情况下,可确保浏览器继续显示当前文档205 Reset Content 重置内容。服

2021-09-20 08:09:19 45

原创 描述一下XSS和CRSF攻击?防御方法?

XSS、CRFS攻击XSS, 即为(Cross Site Scripting), 中文名为跨站脚本, 是发生在目标用户的浏览器层面上的,当渲染DOM树的过程成发生了不在预期内执行的JS代码时,就发生了XSS攻击。大多数XSS攻击的主要方式是嵌入一段远程或者第三方域上的JS代码。实际上是在目标网站的作用域下执行了这段js代码。CSRF(Cross Site Request Forgery,跨站请求伪造),字面理解意思就是在别的站点伪造了一个请求。专业术语来说就是在受害者访问一个网站时,其 Cookie

2021-09-20 08:08:42 358

原创 Cookie、sessionStorage、localStorage的区别

共同点:都是保存在浏览器端,并且是同源的。不同点:Cookie:cookie数据始终在同源的http请求中携带(即使不需要),即cookie在浏览器和服务器间来回传递。而sessionStorage和localStorage不会自动把数据发给服务器,仅在本地保存。cookie数据还有路径(path)的概念,可以限制cookie只属于某个路径下,存储的大小很小只有4K左右。 (重点:可以在浏览器和服务器端来回传递,存储容量小,只有大约4K左右)sessionStorage:仅在当前浏览器窗口关闭前

2021-09-20 08:08:27 91

原创 表单的基本组成和用途?表单提交中 Get 和 Post 的区别?

表单的组成:表单标签、表单域、表单按钮a、表单标签:这里面包含了处理表单数据所用 CGI 程序的 URL, 以及数据提交到服务器的方法。b、表单域:包含了文本框、密码框、隐藏域、多行文本框、复选框、单选框、下拉选择框、和文件上传框等。c、表单按钮:包括提交按钮,复位按钮和一般按钮;用于将数据传送到服务器上的 CGI 脚本或者取消输入,还可以用表单按钮来控制其他定义了处理脚本的处理工作。主要用途:表单在网页中主要负责数据采集的功能,和向服务器传送数据。Get 和 Post 的区别:get 是

2021-09-19 19:15:48 277

原创 HTML标签中的 src 和 href 有什么区别?

一种回答:href 是超文本引用,它是指向资源的位置,建立与目标文件的联系;src 目的是把资源下载到页面中浏览器解析 href 不会阻塞对文档的处理(这就是官方加以使用 link 引入而不是 @import 的原因),src 会阻塞对文档的处理。另一种回答:src用于替换当前元素, href 用于在当前文档和引用资源之间确立联系。src是 source 的缩写,指向外部资源的位置,指向的内容将会嵌入到文档中当前标签所在位置;在请求 src 资源时会将其指向的资源下载并应用到文档内,

2021-09-19 19:10:17 220

原创 iframe是什么?有哪些优缺点?

iframe 可以在一个网站里面嵌入另一个网站的内容。iframe的优点iframe 能够原封不动的把嵌入的网页展现出来;如果有多个网页引用 iframe,那么只需要修改 iframe 的内容,就可以实现调用的每一个页面内容的更改,方便快捷;网页如果为了统一风格,头部和版本都是一样的,就可以写成一个页面,用 iframe 来嵌套,可以提高提高代码的可重用性;如果遇到加载缓慢的第三方内容如图标和广告,这些问题都可以由 iframe 来解决。iframe的缺点会产生很多页面,不容易管理;.

2021-09-19 19:01:47 570

原创 常见的浏览器内核有哪些

Trident内核:IE,MaxThon,TT,The World,360, 搜狗浏览器等。 [ 又称 MSHTML]Gecko内核:Netscape6 及以上版本, FF,MozillaSuite/SeaMonkey 等Presto内核:Opera7 及以上。 [Opera 内核原为: Presto ,现为: Blink;]Webkit内核:Safari,Chrome 等。 [ Chrome 的: Blink ( WebKit 的分支) ]...

2021-09-19 18:48:57 261

原创 对浏览器内核的理解

主要分成两部分:渲染引擎(layout engineer或 Rendering Engine) 和 JS 引擎。渲染引擎:负责取得网页的内容(HTML、 XML 、图像等等)、整理讯息(例如加入 CSS 等),以及计算网页的显示方式,然后会输出至显示器或打印机。浏览器的内核的不同对于网页的语法解释会有不同,所以渲染的效果也不相同。所有网页浏览器、电子邮件客户端以及其它需要编辑、显示网络内容的应用程序都需要内核。JS引擎:解析和执行 javascript 来实现网页的动态效果。最开始渲染引擎和JS引

2021-09-19 18:46:49 113

原创 页面导入样式时,使用link 和@import有什么区别?

link 属于HTML标签,而@import 是 css提供的;页面被加载时,link 会同时被加载,而 @import 引用的 css 会邓导页面被加载完再加载;@import只在IE5以上才能识别,而link是XHTML标签,无兼容问题;link 方式的样式的权重高于 @import的权重...

2021-09-19 18:43:47 117

原创 对HTML语义化的理解

什么是 HTML 语义化?基本上都是围绕着几个主要的标签,像标题( H1~H6 )、列表( li )、强调( strong em )等等根据内容的结构化(内容语义化),选择合适的标签(代码语义化)便于开发者阅读和写出更优雅的代码的同时让浏览器的爬虫和机器很好地解析。为什么要语义化?为了在没有CSS的情况下,页面也能呈现出很好地内容结构、代码结构 : 为了裸奔时好看;用户体验:例如title、 alt 用于解释名词或解释图片信息、 label 标签的活用;有利于SEO:和搜索引擎建立良好沟

2021-09-19 16:06:14 186

原创 JS 详解 Cookie、 LocalStorage 与 SessionStorage

三者的区别与联系可参考这篇博客:JS 详解 Cookie、 LocalStorage 与 SessionStorage

2021-09-19 15:59:30 75

原创 Vue不允许在已经创建的实例上动态添加新的根级响应式属性---解决办法

Vue不允许在已经创建的实力上动态添加新的根级响应式属性。Vue不能检测到对象属性的添加或删除,最好的方式就是在初始化实例前声明根级响应式属性,哪怕知识一个空值。如果需要在运行过程中实现属性的添加或删除,则可以使用全局Vue,Vue.set 和 Vue.delete 方法。Vue.setVue.set 方法用于设置对象的属性,它可以解决Vue 无法检测添加属性的限制语法格式如下:Vue.set(target, key, value)参数说明:target:可以是对象或数组key:可以

2021-09-19 14:29:44 778

原创 自定义组件的v-model(v-model的实现原理)

自定义组件的v-model组件上的 v-model 默认会利用名为 value 的 prop 和名为 input 的事件。按照Vue官网介绍,Vue的双向绑定是一种语法糖。本质上是“负责监听用户的输入事件以更新数据,并对一些极端场景进行一些特殊处理。”<input v-model="parentData">等价于:<input :value="parentData" @input="parentData = $event.target.value">

2021-09-19 11:55:44 10060

原创 对 Object.defineProperty 的理解

Object.defineProperty() 方法会直接在一个对象上定义一个新属性,或者修改一个对象的现有属性,并返回此对象。该方法接受三个参数: 第一个参数是 obj:要定义属性的对象、 第二个参数是 prop:要定义或修改的属性的名称或 Symbol、 第三个参数是 descriptor:要定义或修改的属性描述符。虽然可以直接添加属性和值,但是使用这种方式,可以进行更多的配置。函数的第三个参数 descriptor 所表示的属性描述符有两种形式:数据描述符和存取描述符。数据描述符是一个

2021-09-17 21:25:08 134

原创 Object.is() 与比较运算符“==“、“===“的区别

使用双等号(==)进行相等判断时,如果两边的类型不一致,则会进行强制类型转化后再进行比较;使用三等号(===)进行相等判断时,如果两边的类型不一致时,不会做强制类型转换,直接返回 false;使用 Object.is() 进行相等判断时,一般情况下和三等号的判断相同,它处理了一些特殊的情况,比如 -0 和 +0 不再相等,两个 NaN 是相等的。...

2021-09-17 20:16:46 204

原创 JS检测数据类型的方式--四种

1.typeof其中数组、对象、null都会被判断为object2.instanceofinstanceof 可以正确判断对象的类型,其内部运行机制是判断在其原型链中能否找到该类型的原型。可以看到,instanceof 只能正确判断引用数据类型,而不能判断基本数据类型。instanceof 运算符可以用来测试一个对象在其原型链中是否存在一个构造函数的 prototype 属性。3.constructorconstructor 有两个作用,一个是判断数据的类型,二是对象实例通过 cons

2021-09-17 18:48:50 488 2

原创 Vue任意组件间通信方式--两种方法

Vue中除了父子间通信,还有需要在兄弟之间通信或者祖孙之间通信的情况而这两种情况下需要有更方便的通信方式,有以下两种:全局事件总线和一、全局事件总线(GlobalEventBus)1.一种组件间通信的方式,适用于任意组件间通信。2.安装全局事件总线:new Vue({ ...... beforeCreate(){ Vue.prototype.$bus = this // 安装全局事件总线,$bus就是当前应用的vm }, ......})3.使用事件总

2021-09-17 10:37:06 302

原创 JS输出内容为[ObjectObiect]问题

在实习的项目中遇到了控制台输出内容为[Object Object]本身是object的类型查看之后是因为 我写的代码是这种(想要测试输出内容) res为object类型console.log("11111"+res)结果输出[Object Object]这是因为我加了 “+” 运算符,它在这种情况下(字符串 + 其它什么东西),会调用toString()方法,将其它类型的东西转化为字符串,再和原始字符串拼接成一个字符串。去掉加号 分别输出,就成功了。toString, JSON.parse(

2021-09-02 17:31:56 601

转载 js中this的指向问题

学习中发现这篇文章讲的不错记录一下JS中 this 指向问题

2021-08-25 16:14:33 41 2

原创 Vue学习笔记(一)

VUE学习笔记简单认识vue读音类似于viewVue是一个渐进式框架渐进式意味着你可以将Vue作为你应用的一部分嵌入其中,带来丰富的交互体验或者如果希望将更多的业务逻辑使用Vue实现,那么Vue的核心库以及其生态系统比如Vue全家桶(Core+Vue+router+Vuex),也可以满足各种各样的需求Vue有很多特点和Web开发中常见的高级功能解耦视图和数据可复用的组件前端路由技术状态管理虚拟DOM...

2021-08-19 09:27:41 123

转载 Vue数据双向绑定

MVVM模式说到 Vue 的双向绑定首先联系到的就是 MVVM(Model-View-ViewModel)模式了,如下图所示,当视图发生改变的时候传递给 VM,再让数据得到更新,当数据发生改变的时候传给 VM,使得视图发生改变。MVVM 模式是通过以下三个核心组件组成:M: Model - 包含了业务和验证逻辑的数据模型;V: View - 定义屏幕中 View 的结构,布局和外观;VM: ViewModel - 扮演“View”和“Model”之间的使者,帮忙处理 View 的全部业务逻辑。

2021-08-15 02:04:24 2955 1

原创 多种方法解决多个div并排显示的问题

平时做项目中总是能碰到让多个div显示在一排的问题例如:将上图显示为:其实有很多种方法都可解决此问题在这里做一下总结一、使用 display也就是说块元素占用了全部宽度,前后会带有换行符,会自动的在一行显示,而内联元素只需要设置宽度,不会带有换行符,也就是默认不换行那么我们就可以考虑把 div 这种块元素转换为内联元素 即可实现 div 在一行显示,就可达到我们的目的display有很多属性值 如下:none:隐藏对象。与visibility属性的hidden值不同,其不为被隐藏的对

2021-08-15 01:27:56 17447

原创 display: box让多个div并排显示

在平时做项目的时候 常常会用到让多个div并排显示如图让三个不同颜色的div并排显示在框内此刻的代码为: <style> .btns{ width: 300px; border: 1px solid black; } #btn1, #btn2, #btn3{ width: 100px; }</style> <div class="btns"> <div id="btn1" sty

2021-08-10 17:48:37 546

原创 Vue点击外部空间隐藏div

最近做项目有用到点击外部空间隐藏div适用于点击事件展示提示框、点击外部即可隐藏触发点击事件,展示div可以用 v-show判断隐藏div的方法如下在utils增加文件 clickoutside.js/ 点击外部隐藏divconst clickoutside = { // 初始化指令 bind(el, binding, vnode){ function documentHandler(e) { // 这里判断点击的元素是否是本身,是本身,则返回

2021-08-10 16:59:41 989

原创 Vue监测数据的原理

代码如下:<!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&

2021-08-09 22:38:58 217

原创 Vue收集表单数据

如下可实现表单数据的收集<!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"> &lt

2021-08-09 22:35:36 63

原创 axios post请求小案例

post请求结构如下:function post() { axios.post('url', { // url表示请求地址 后面是请求传递的参数,是个对象,例如 id为1,姓名为YuChen的用户请求所需要的数据 "id": 1, "name": "YuChen" }).then(response => { console.log('url', response.data) }, error => {

2021-08-01 11:22:36 813

原创 Vue button多选单选问题(点击选中可改变样式)

​做出如上效果利用:class="item.ischeck == true ? 'btn_selected' : ''"三元表达式判断是否选中并改变样式代码片段如下:<div class="intent_btn"> <van-button style="width: .90rem;" v-for="(item, index) in List" :key="index" :class="item.ischeck == true ? 'btn_selected' : ''"

2021-08-01 10:52:29 1329

原创 SassError: expected selector报错 / 修改Vant自带样式问题/深度作用选择器

今天在写项目的时候有用到Vant作为UI库,但是需要自己设置样式这时候就出现了问题,修改无效自己要设的样式如下: .van-field{ .van-field__label { font-size: .3rem; font-weight: bold; color: #141C23; } }然后并没有改过来然后想说用 !important 强制设置 但依旧没用后来上网查,有如下解决办法:(1)用 /deep/.van-.

2021-07-21 17:57:39 1514

转载 js中Object.defineProperty()方法的解释

(在园里看到一篇讲解Object.defineProperty()的非常好的博文,我把他转载过来,给自己留个笔记。)原文出处https://www.cnblogs.com/junjun-001/p/11761252.html#commentform菜菜: “老大,那个, Object.defineProperty 是什么鬼?”假设我们有个对象 user ; 我们要给它增加一个属性 name , 我们会这么做 1 2 3 varuser = {}..

2021-07-20 21:41:40 161

原创 Vue报错:Property or method “showAreaFilter“ is not defined on the instance but referenced during .....

报错问题:Property or method "showAreaFilter" is not defined on the instance but referenced during render. Make sure that this property is reactive, either in the data option, or for class-based components, by initializing the property.翻译:属性或方法“showAreaFi

2021-06-30 10:22:55 599

空空如也

空空如也

TA创建的收藏夹 TA关注的收藏夹

TA关注的人

提示
确定要删除当前文章?
取消 删除