- 博客(51)
- 收藏
- 关注
RSS订阅原创 flex布局各属性介绍
在指定父元素中，子元素平分父元素空间 子元素不需要设置宽度（因为要平分父元素宽度），给父元素设置 display:flex 后，给子元素设置 flex:1；即可 一句话总结flex布局 通过给父元素添加flex属性，控制子元素的位置和排列方式 父元素常见属性——flex-direction 元素跟着主轴方向排列 设置完主轴方向之后，侧轴对应生成 父元素常用属性——justify-content 父元素常用属性——flex-wrap 在fle
2022-04-12 22:28:31
432
原创 CSS常见单位总结 px，%，em，rem，vw，vh
1.px px是绝对单位，不会随浏览器页面大小的变化而变化 px其实就是像素点，相对于自身屏幕尺寸。 2. % 相对单位 % 相对于其父元素的宽高进行百分比分配，若父元素宽高改变，子元素设置了 % 则也会随之改变 3.vw 和 vh 相对单位 vw 和 vh 是相对于视口宽高的单位 视口就是目前能看到的整个展示内容的屏幕大小 vw 和 vh 只有0-100的取值，类似于 百分比 % vw 和 vh 会随视口的变化而变化 4.em em是相对单位，最终大小由计
2022-04-06 15:21:47
1297
原创 力扣19删除链表的倒数第N个结点
19. 删除链表的倒数第 N 个结点 - 力扣（LeetCode） (leetcode-cn.com)/** * Definition for singly-linked list. * struct ListNode { * int val; * struct ListNode *next; * }; */// 思路：// 利用双指针，先让快指针先走n步// 然后快指针和慢指针同时走，直到快指针指向了末尾结点// 此时慢指针指向就是要删除结点的前一个结点//
2022-04-06 09:42:30
414
原创 力扣24 俩俩交换链表中的结点
24. 两两交换链表中的节点 - 力扣（LeetCode） (leetcode-cn.com)/** * Definition for singly-linked list. * struct ListNode { * int val; * struct ListNode *next; * }; */struct ListNode* swapPairs(struct ListNode* head){ // 创建虚拟头结点 // 想要俩俩交换元素需要另一
2022-04-05 17:38:43
1218
原创 链表操作技巧--虚拟头结点
在链表删除当中，删除头结点和删除非头结点的操作是不一样的，链表的其他节点都是通过前一个节点来移除当前节点，而头结点没有前一个节点，所以需要单独写一段逻辑来处理移除头结点的情况。为了统一操作链表，不用单独为操作头结点额外书写逻辑，可以设置一个虚拟头结点。也就是给头结点前面再加一个结点。题目示例：203. 移除链表元素 - 力扣（LeetCode） (leetcode-cn.com)struct ListNode* removeElements(struct ListNode* head, int
2022-04-05 10:34:17
1714
1
原创 力扣206反转链表
206. 反转链表 - 力扣（LeetCode） (leetcode-cn.com)struct ListNode* reverseList(struct ListNode* head){ // 实际上是操作三个指针 // 形参head指针被当作指向当前需要反转结点的指针，然后让head的地址域指向前一个结点（pre）即可 // temp是存储当前要反转结点的下一个结点，为之后继续向下一个结点反转做准备 // pre指针初始值为null，指向被反转结点的前一个结点。
2022-04-05 10:08:39
221
原创 JS执行上下文以及事件循环机制
参考文章：面试官：说说执行上下文吧 - 掘金 (juejin.cn)理解JavaScript的执行上下文 - 知乎 (zhihu.com)事件循环 - JavaScript Guidebook (tsejx.github.io)1；执行上下文：指当前执行环境中的变量、函数声明，参数（arguments），作用域链，this等信息。分为全局执行上下文、函数执行上下文，其区别在于全局执行上下文只有一个，函数执行上下文在每次调用函数时候会创建一个新的函数执行上下文。2；执行上下文组成：
2022-04-04 22:41:10
638
原创 力扣232 用栈实现队列
题目连接：232. 用栈实现队列 - 力扣（LeetCode） (leetcode-cn.com)思路都在代码注释当中。该题中栈是用数组表示的 没有指针概念 为了方便理解所以把指向数组下标位置的标志称为了指针。typedef struct { // 用俩个栈模拟队列 栈用数组表示 int stackIn[100],stackOut[100]; // 栈是后进后出，只在栈尾进行操作，所以每个栈只需要一个指针(指向栈尾) int stackInTop,stackOu
2022-04-04 11:24:59
745
原创 同源策略以及CORS跨域资源共享
一；同源策略：1.同源是一种安全机制，为了预防某些恶意行为（例如 Cookie 窃取等），浏览器限制了从同一个源加载的文档或脚本如何与来自另一个源的资源进行交互。2.满足同源要具备三方面：协议相同、域名相同、端口相同。3.只要以上三点有一点不满足，就会产生跨域，解决跨域常见的方法：JSONP，CORS。二；什么是CORS：1.CORS （Cross-Origin Resource Sharing，跨域资源共享）由一系列 HTTP 响应头组成，这些 HTTP 响应头决定浏览器是否阻止前端
2022-03-28 15:02:55
1496
转载 Vue项目中$nextTick的使用场景
Vue中的$nextTick有什么作用？ - 简书 (jianshu.com)https://www.jianshu.com/p/dce747bc708f
2022-03-26 20:58:46
308
原创 JS 定时器结合闭包实现-节流与防抖
防抖：概念：用户连续点击，前面的触发都被取消，只有最后一次触发的回调在规定时间后才会触发。即：如果连续触发 只会执行最后一次触发的回调。使用场景：百度搜索框中输入对应内容下方会有相关内容的提示，如果每输入一个文字都发送一次请求是非常浪费性能的，所以使用节流设置一个时间，只有当用户输入完内容之后不在输入，经过了预先设置好的时间才会发起请求。// 防抖// 概念：用户连续点击，前面的触发都被取消，只有最后一次触发的回调在规定时间后才会触发。// 即 如果连续触发 只会执行最后一次触发的
2022-03-26 20:23:31
874
原创 export 和 export default 区别
一个js文件就是一个模块。exprot 分别暴露：如果想单独暴露出该 js 文件（模块）的某些变量，则可以使用 export 进行分别暴露。// 获取floor数据export const reqGetFloorList = ()=>{ return mockRequest({ url:'/floor', method:'GET', })}// 获取搜索模块数据 地址：/api/list 方式 post // 当前接口给服务
2022-03-26 17:20:26
275
原创 Vue路由指定重定向跳转（电商项目中的路由跳转逻辑）
需求概述：当用户没有进行登录时是不允许跳转到 个人订单，我的购物车等页面的，如果用户在未登录状态下点击了这些选项，则跳转到登录页面让用户进行登录。当用户登录完成之后不是跳转回首页，而是直接跳转回用户点击的那个选项本应跳转的页面。比如点击个人订单跳转到登录页面了，完成登陆后直接跳转回个人订单页面。解决方法：1.在进行路由跳转登录页面时动态的给登录页面传递 query 参数。（下方图片代码是写在全局路由守卫当中的）2.因为在跳转时给 login 登录页面传递了 query 参数.
2022-03-12 14:49:04
2678
原创 JS原型与原型链详解
1.每个构造函数身上都有一个 prototype 原型，它的身上一般用于定义并存放该构造函数公用的方法，让每个由该构造函数所实例化出来的实例对象都可以使用 prototype 原型身上的方法，避免内存的浪费。2.原型对象 prototype 身上存在一个 constructor 属性，该属性指向创建该实例对象的构造函数，即表明该实例对象是由哪个构造函数创建出来的。3.每个对象身上都有一个 __proto__属性，我们称它为 对象原型，该对象原型指向构造函数身上的prototype原型对象。4.因
2022-03-12 09:58:22
483
原创 async和await用法介绍
一；async1.函数前面加上 async 关键字，则该函数会返回一个结果为 promise 的对象。2. async 函数返回 promise 对象的状态。2.1：如果返回的是一个非 Promise 类型的数据， 则async 函数返回 promise 的状态 为 fulfilled 成功。2.2：如果返回的是一个 Promise对象，则 async 函数返回 promise 的状态由返回的Promise对象的状态决定。2.3：如果 throw Errow 抛出异常，则 async 函
2022-03-11 22:36:07
11011
1
原创 Vue2和Vue3实现响应式的原理对比
Vue2中通过 Object.defineProperty 实现数据劫持，使得数据实现响应式更新。Object.defineProperty简介：Object.defineProperty() 方法会直接在一个对象上定义一个新属性，或者修改一个对象的现有属性，并返回此对象。Object.defineProperty(obj, prop, descriptor)obj：要定义属性的对象。prop：要定义或修改的属性的名称或Symbol。descriptor：要定义或修改的属性描述符。返..
2022-03-06 22:16:54
436
原创 Vue2中向页面额外添加数据和更改数组不触发响应式问题
新增属性、删除属性, 界面不会更新。当想动态的向 data 中添加数据，例如调用一个方法，向已有对象中添加一个属性，想要实现响应式，需要调用 组件实例对象身上的 $set方法，或者调用 Vue 身上的 set 方法。直接通过下标修改数组, 界面不会自动更新。1.调用组件实例对象身上的 $set方法，或者调用 Vue 身上的 set 方法。2.调用数组身上的方法进行修改// 想使用Vue身上的方法需要先引入import Vue from 'vue'// 动态更新数据--向已有对象中
2022-03-06 21:29:18
1868
原创 Vuex 无法持久化存储---借助本地存储完成用户登录
场景：用户登录需要携带 token 向服务端获取数据，但是如果将 token 存储在Vuex当中，刷新页面时 token 将被清空，导致服务器无法根据 token 返回对应的用户数据原因：Vuex是无法持久化存储的解决方法：借助 localStorage 存储 token 实现持久化存储// 在Vuex文件中// action内容：// 登录业务 async userLogin({ commit }, data) { let res = await reqLog
2022-03-05 20:51:26
660
1
原创 Vue mixin混合的使用介绍
一；定义：把各组件共用的配置（data数据，methods方法，生命周期等）提取成一个混入对象（单独书写在一个mixin.js的文件中），减少重复性代码，方便维护。二；创建mixin：创建 mixin.js文件，在里面书写各组件共用的内容（data数据，methods方法等），然后export暴露出去，让需要使用这些共用方法的组件可以 import 引入。// 在 mixin.js 文件中export const hunhe = { methods: { showName(){
2022-02-27 20:21:12
746
原创 var let const 区别
1.作用域：var声明的变量为全局变量，而 let 和 const 声明的变量具有块级作用域。2.变量提升：var 存在变量提示，而 let 和 const 不存在变量提示，即 let 和 const 必须先声明后使用。3.重复声明：var 允许变量重复声明，且后声明的会覆盖的之前声明的，而 let 和 const 是不允许变量重复声明的。4.值是否允许修改var 和 let 是允许修改其变量值的，而 const 不允许修改变量值。5.初始值设置：在变量声明时，var 和
2022-02-23 21:00:15
130
原创 JS中关于this指向的面试题
var length = 100; function fee(){ console.log(this.length); } var obj = { length:10, getLength(cb){ console.log(cb); // 内容为 fee 函数 console.log(arguments); // 为三个传递进来的实参 cb() arguments[0]() } } obj.getLength(f...
2022-02-21 21:50:36
734
原创 JS中各类数据类型转换为布尔值
转换规则是除了下面六个值被转为false，其他值都视为true。undefined null false 0 NaN ""或''（空字符串）
2022-02-20 21:32:47
813
原创 ES6中Promise使用介绍
一；Promise是一个实例化对象，想要使用Promise需要先 new 进行实例化二；Promise接收一个回调函数，回调函数中接收俩个参数，一个是 resolve，表示处理成功的结果，另一个是reject，表示失败的结果，其成功或者失败的值会被实例化对象 .then 方法处理，失败的方法也可单独被 catch()处理三；实例化Promise注：（1）.then方法可以只写第一个成功的回调，接收成功的返回结果（2）promise 的 resolve 和 reject 只会执行一个，要么
2022-02-13 22:11:18
382
原创 JS - e.target 和 e.currentTarget 的区别
e.currentTarget 指向捕获事件的对象；e.target 指向发生这个事件的对象；e.target 返回的是点击的当前元素，而 e.currentTarget 返回的是包括父元素和子元素在内的整体。
2022-02-06 14:41:46
783
原创 数据类型相关知识点
堆和栈 栈存放简单数据类型--由系统分配释放 堆存放复杂数据类型--由程序员自己分配释放 简单数据类型 null 返回的是一个空的对象 如果有个变量我们打算存储为对象，暂时没想好放啥 这个时候可以给其赋值为null 简单数据类型 string，number，boolean，undefined，null 存放在栈里面，里面直接开辟一个空间存放的是值，存储的是值本身 复杂数据类型 首先在栈里面存放地址，十六进制表示，创建的变量名指向这个地址，然后这个地址指向堆里面的值 复杂数据类
2022-02-06 14:32:15
232
原创 JS-关于作用域和变量提升
var a = 10; (function () { console.log(a); a = 5; console.log(window.a); var a = 20; console.log(a); })()// 因为函数体中 存在 var a = 20 ; 所以函数体内容等价于如下代码(function () { .
2022-02-05 15:11:20
570
原创 JS中arguments的理解
function fn(){ console.log(this.length);}var obj = { length: 5, method: function (fn) { fn(); arguments[0](); } }; obj.method(fn, 1);arguments保存的是一个数组，里面存储的是函数传递进.
2022-02-05 14:47:37
677
原创 Vue中各配置文件介绍（jsconfig.json，vue.config.js等）
一；main.js 入口文件入口文件用来注册Vue实例，路由，Vuex，全局事件总线和注册全局自定义组件参考代码如下：import Vue from 'vue'import App from './App.vue'// 引入路由import router from '@/router'// 引入全局组件--三级联动组件import TypeNav from '@/components/TypeNav'import Carousel from '@/components/Carous
2022-02-01 17:24:40
4991
2
原创 Vue项目中关于axios二次封装和发送请求的配置
1.在scr文件夹下创建api文件夹，api文件夹中专门用来书写需要向服务器发送的请求2.在api文件夹下创建requests.js文件，其中进行axios的二次封装，详细备注见代码// 对axios进行二次封装import store from '@/store'import axios from 'axios'// 1.利用axios对象方法 create 去创建一个axios实例// 2.request就是axios 只不过可以稍微配置一下let requests = axio
2022-02-01 14:36:08
1285
原创 详细介绍 如何引入Vue全局组件
1.先写好一个要设置为全局组件的组件2.在 main.js 入口文件中 通过 import 引入全局组件 注意引入的路径一定要正确3.引入之后通过 Vue.component ('TypeNav',TypeNav) 注册全局组件其中第一个参数是一个字符串 它代表着你全局注册的组件的名字，之后使用书写组件标签时就是这个名字，第二个参数是 import 引入时的名字 一般都与组件名保持一致// 引入全局组件--三级联动组件import TypeNav from '@/components/T
2022-01-30 00:25:46
6411
原创 Vue中$storer.push()的对象写法记录
this.$router.push({ name:'search', query:this.$route.query, params:this.$route.params})通过给路由设置 name 属性 可以使用对象方法同时在路由跳转时传递 query参数 和params参数
2022-01-30 00:15:44
708
原创 Vue向后端发送多字段数据的技巧记录-Object.assign()方法
场景：当前端需要一次性传递很多字段数据的时候，且这些数据都是可传可不传的，我们可以通过Object.assign()方法简化向这些字段赋值Object.assign() ES6合并对象，把后面的形参内容 合并（更新）到第一个形参中data() { return { searchParams: { category1Id: "", category2Id: "", category3Id: "", categor..
2022-01-30 00:09:38
1196
原创 Vue项目组件间通信总结
一；通过给组件绑定自定义事件实现 子向父传递参数1.首先在父组件当中 给子组件绑定自定义事件2.在子组件中，通过 this.$emit ( '自定义事件名' ， 要传递的数据) 进行子组件中数据的传递3.在父组件中的methods中书写自定义事件函数，函数中的形参用来接收子组件传递过来的数据，在函数体中进行数据的处理// 这是父组件中的子组件标签<SearchSelector @trademarkInfo="trademarkInfo" @attrInfo="attrInfo"/&
2022-01-30 00:02:41
339
原创 Vue路由的详细介绍（路由传参，跳转，守卫）
路由传参 query传参 直接在请求路径后面以键值对的形式传递参数的形式为query传参 通过$route.query读取对应参数 params传参 直接在请求路径后面接参数且需要在对应路由中使用占位符声明接收params参数 通过$route.params读取对应参数 router-link标签中 to 的对象写法 to必须为动态数据绑定 ..
2022-01-27 18:25:27
900
原创 Vue中利用事件委派+编程式导航获取三级联动相应级数的数据并进行路由跳转
利用事件委派+编程式导航实现路由的跳转与传递参数一；确认用户点击的是三级联动的哪一级以及这一级的点击内容思路：1.事件委派：给三级联动整体的父元素绑定一个点击事件，通过该事件的event.target属性可以获取到它的子元素对应问题：（1）只有点击a标签时才会进行路由跳转，怎么能确定点击的是a标签？（2）确认了点击是a标签，如何区分是一级二级还是三级的a标签问题解决：把子节点当中的a标签添加自定义属性 data-categoryName="xxx" 其余的子节点是没有的，到当前触
2022-01-27 11:01:15
660
原创 Vuex引入方法以及引入中出现的问题解决
小坑：Vuex的引入和注册不应该在main.js入口文件，而应该在vuex对应的配置文件 index.js中引入Vuex配置方法npm i vuex 下载 vuex包 与components文件夹平级，创建一个 store 文件夹，里面新建子文件 index.js import引入vuex Vue.use (vuex) 使用 Vuex 在index.js文件中配置vuex需要使用的属性，actions，mutations，state new一个Vuex的实例化对象 导出这个实例化对象
2022-01-19 14:19:56
2037
原创 Element-ui中upload上传组件
<el-upload action="http://127.0.0.1:8888/api/private/v1/upload" // action 表示图片要上传到的后台API地址(要写完整路径) :on-preview="handlePreview" // on-preview 处理图片预览的事件 :on-remove="han...
2022-01-02 16:28:47
470
原创 Element-ui中Cascader级联选择props配置项
<el-cascader v-model="addForm.goods_cat" :options="cateList" :props="cateProps" @change="handleChange" ></el-cascader> cateProps:{ expandTrigger: 'hover', label:'cat_name', value:'cat_id', .
2022-01-01 22:03:22
2875
原创 Elment-ui中实现el-steps和el-tabs步骤联动
<!-- 步骤条区域 --> <el-steps :space="200" :active="activeIndex-0" // 转换成纯数字类型 finish-status="success" align-center > <el-step title="基本信息"></el-step> <el-step title="...
2022-01-01 21:01:41
1025
空空如也
空空如也
TA创建的收藏夹 TA关注的收藏夹
TA关注的人