- 博客(153)
- 资源 (1)
- 收藏
- 关注
RSS订阅
原创 在Vue+Element中，Select选项值动态从后台接口获取的实现方法
HTML部分<el-form ref="form" :model="form" label-width="82px"> <el-form-item label="选择媒体："> <el-select v-model="value" placeholder="请选择媒体"> <el-option ...
2019-09-24 17:53:25
83600
29
原创 css新手引导实现方式总结
新手引导功能一般都是用一个半透明的黑色进行遮罩，蒙层上方对界面进行高亮，旁边配以弹窗进行讲解，样式如下但是由于交互不同，实现方案也不一样，下面就针对不用的交互，总结了不同的实现方法（下文描述时以上面的图片为例）
2023-05-11 13:29:59
1856
4
原创 http请求头中的Content-Type到底有什么用？
目录前言：一、简介 二、语法格式 Content-Type即内容类型，用于定义网络文件的类型和网页的编码，浏览器会根据Content-Type指定的编码方式来读取请求或返回结果中的内容，如网页、图片、文件等。如： 三、常用类型application/octet-stream......
2022-06-29 16:48:53
2234
原创 如何相对于兄弟元素实现垂直居中
之前遇到的垂直居中大部分都是相对于父元素居中，方法也很多，如flex、margin、absolute等等，之前也总结过了，这里就不多赘述，但是这次的需求是相对于兄弟元素实现垂直居中，还是花费了一些时间才解决的（也可能是由于思维定势，一时半会没想起来）一、需求效果可以看到右侧的按钮，是相对于左侧的文字内容垂直居中的，而且内容的行数可能是一行或者两行二、方法尝试（使用flex）在父元素上加上： display: flex; align-items: center;.
2022-05-11 16:59:39
917
原创 在nodejs项目中引入babel，支持使用import和export
前言由于nodejs环境采用的是CommonJS的模块化规范，使用require引入模块，module.exports导出模块，但使用有点不习惯，所以引入babel转义支持，通过babel进行编译，支持impirt和export以及一些es6、es7的新语法。一、安装npm --save-dev install babel-cli二、创建.babelrc文件在根目录下创建.babelrc文件{ "presets": [ "es2015", ".
2022-03-21 16:03:21
2512
原创 创建第一个nodejs服务并连接数据库
一、初始化安装nodejs步骤可自行百度哈，这是前提！1、创建一个空文件夹，比初始化项目npm init // 初始化项目2、安装expressnpm install express --save此时我们就有了下面的文件：3、创建目录4、启动第一个服务器...
2022-03-18 10:21:21
1753
1
原创 移动端页面如何兼容iphone底部的安全区域
正常情况下，当页面充满屏幕时，部分iphone底部黑条会遮挡页面内容，但是在安卓手机上又不会存在这个问题，如下图：但是其实我们想要实现的效果是这样的，不想让它遮挡内容：这个要怎么兼容呢？在样式中加入padding-bottom: constant(safe-area-inset-bottom);padding-bottom: env(safe-area-inset-bottom);...
2022-03-18 10:12:50
1918
2
原创 npm install报代理或网络问题
今天在项目中用npm install安装依赖时，遇到了一个这样的问题npm ERR! code ENOTFOUNDnpm ERR! errno ENOTFOUNDnpm ERR! network request to http://registry.cnpmjs.org/axios failed, reason: getaddrinfo ENOTFOUND registry.cnpmjs.orgnpm ERR! network This is a problem related to netwo
2022-02-11 21:25:23
7012
2
原创 charles修改接口入参或返回结果的4种方法
一、 map Local 1.作用将匹配的url映射到本地文件2.适用场景（1）需要不断修改接口返回结果来测试各种case（2）请求的某返回结果后端不好模拟时等3.步骤（1）将请求的响应结果保存：在请求处右键点击save Response，将原有报文保存到本地（2）将请求映射到该文件：在请求处右键点击 Map local将请求映射到自己本地文件（3）根据需求情况，修改本地文件并保存，当重新请求该接口时，就会看到返回结果已经改成我们映射到本地...
2021-11-16 16:05:07
14526
原创 快速搭建 Vite + Vue3 + TypeScript 项目
一、确保安装node.js且版本 >= 12.0.0node -v二、使用 Vite 初始化项目使用 NPMnpm init @vitejs/app使用 Yarnyarn create @vitejs/app然后根据终端提示，设置相关配置：1、项目名称2、
2021-07-13 16:28:49
617
原创 提交代码时出现does not match your user account怎么办？
一、问题有时候git push的时候会遇到如下情况：主要内容就是：xxx does not match your user account.the following user name and email address is currently registered就是说账户信息不匹配，此时只需要重新绑定一下账户名和邮箱就可以了二、解决办法git config --global user.name "Your Name"git config --global user.em.
2021-07-01 15:37:02
4534
原创 call、bind、apply的简易实现
前言：这三个都是函数的api，用于改变this的指向，使一个对象能调用另一个不属于自己的方法，核心思想就是通过改变方法中数据的this指向，借用别人的方法。一、call通过隐式绑定的方法实现，因为执行obj1.getName.myCall(obj)，则myCall中的this就是指向obj1.getName的，再将方法添加到想使用的对象上即可。Function.prototype.myCall = function (context = window, ...args) { i.
2021-05-23 12:25:55
296
原创 js滑动后吸顶实现
效果：法一：addEventListener监听滚动，当滚动上去的高度scrollTop 大于 吸顶部分距离页面顶部的距离offsetTop时，添加一个类，类里边用fixed布局，top设置成0；当又滚动下来，在将该类名移除即可，代码如下：<!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8"> <meta http-equiv="X-UA-Compatibl.
2021-05-20 23:09:57
1776
1
原创 vue怎么在子组件中修改父组件传的参数？
实现效果：父组件的一个按钮控制子组件显示，子组件内部有一个按钮，控制自己隐藏，效果如下：法一：子组件中通过$emit一个事件告诉父组件要修改的值，然后在父组件里修改show的值，子组件的值就会自动更新了父组件：<template> <div> <input type="button" value="我是父组件中的按钮" @click="show">
2021-05-19 17:56:29
1842
2
原创 一个css样式优先级问题引起的思考......
一、遇到的问题首先问题是这样的，问背景色是什么？.box { background: red;}.box: first-child { background: yellow;}我的第一直觉认为，应该是yellow，因为red是类选择器和yellow是伪类选择器优先级一样，那么后边写的就会覆盖前边写的吧实际结果也是yellow优先级高，但是：当我把他们交换顺序，改成下面这种时：.box: first-child { background: yello
2021-05-18 14:56:06
267
原创 flex布局之多行多列
1、三行三列，边距都是20px，每个box宽高都是200px使用flex布局，给外层盒子宽高都设置成640px(200*3+20*2)，在使用align-content: space-between和justify-content: space-between即可，代码如下：<style> *{ padding:0; margin: 0; } html,body{ width: 100%; height: 100%; } .box{
2021-05-17 11:40:19
11291
原创 自己实现一个简易版Array.from
用途：Array.from 方法从一个类似数组或可迭代对象创建一个新的，浅拷贝的数组实例。 ——MDN详见Array.from()使用语法：Array.from(arrayLike[, mapFn[, thisArg]])代码：function myArrayFrom() { let arrayLike = arguments[0]; // 判断第一个参数是不是空 if (arrayLike == null) { throw new Type...
2021-05-14 11:00:02
417
原创 js实现数组转树形数据
题目要求：将如下数组转化成树形结构：const nodes = [ { id: 3, name: '节点C', parentId: 1 }, { id: 6, name: '节点F', parentId: 3 }, { id: 0, name: 'root', parentId: null }, { id: 1, name: '节点A', parentId: 0 }, { id: 8, name: '节点H', parentId: 4 }, { id: 4, name: '
2021-05-13 17:42:17
8900
5
原创 前端面经之快手
1、跨域及解决方案我就说了jsonp和cors2、原型相关知识function Foo() { Foo.a = function() { console.log(1) } this.a = function() { console.log(2) }}Foo.prototype.a = function() { console.log(3)}Foo.a = function() { console.log(4
2021-05-13 10:32:34
307
2
原创 Object.assign()的简单实现
一、Object.assign()介绍1.定义：Object.assign()方法用于将所有可枚举属性的值从一个或多个源对象分配到目标对象。它将返回目标对象。 ——MDN2.语法Object.assign(target, ...sources)target：目标对象sources：源对象，可以任意多个返回值：一定是对象二、原理及实现1.分析特点：（1）第一个参数不能是null或undefined（不太清楚为什么）（2）返回值一定是对象，所以不管...
2021-05-12 16:13:26
362
原创 前端面经二之伴鱼
1、事件循环console.log(1)setTimeout(() => { console.log(2) Promise.resolve().then((data) => { console.log(3) })})new Promise((resolve) => { resolve() console.log(4)}).then(() => { console.log(5) setTimeout(() => {
2021-05-12 10:32:57
333
原创 前端面经一之美团
前言：昨天面了某团一面，题目都是基础题，比较简单，但是我答得并不好，感觉还是理解的不够透彻，答案都说的不对，还在一本正经的解释...现在想想，面试小姐姐没笑话死我，哎。下面是问到的一些题目。1、盒模型问题（1）问： 标准盒模型下红色区域有多宽？<div style="width:100px;background:red;padding:10px;height:100px"></div>我当时说的100px，只知道content的宽应该是100px，但是实.
2021-05-11 11:20:43
1099
5
原创 自己实现简易版promise的all、race、allSettled和any
补充知识：promise一共有三个状态：pending、rejected、fulfilled 只有异步操作的结果，可以决定当前是哪一种状态，任何其他操作都无法改变这个状态 一旦状态改变，就不会再变，Promise对象的状态改变，只有两种可能：从pending变为fulfilled和从pending变为rejected一、promise.all特点：参数是可迭代对象（Iterator），里边的每一项都是promise实例（如果不是，就会先调用下面讲到的Promise.resolve方法，将参
2021-05-08 15:44:22
369
原创 二叉树的前序、中序、后序遍历方式
一、二叉树二叉树（binary tree）是指树中节点的度不大于2的有序树，其节点有左右子树之分。满二叉树：如果一棵二叉树只有度为0的节点和度为2的节点，并且度为0的节点在同一层上，则这棵二叉树为满二叉树。完全二叉树：叶子节点只能出现在最下层和次下层，且最下层的叶子节点集中在树的左部。二、二叉树的生成function NodeTree (value) { this.value = value; this.left = null; this.right = n
2021-04-27 11:09:14
331
原创 css动画实例——时钟
最近在学习css的动画属性，所以做了个小练习，用css动画实现了一个表盘时钟，效果如下：可能不是很准，仅供参考~项目源码：见https://github.com/dingzhenyue/css-clock
2021-04-19 17:32:01
365
原创 输入url到页面加载全过程总结
前言：这个问题可以说是面试必问的问题了，而且涉及的知识点有好几个，如html解析、渲染、DNS解析等，也有很多延伸的问题，之前面试的时候，我只是简单的背了背答题流程，详细的并不是很了解，所以决定总结一下。一、主要过程输入地址，回车 浏览器解析URL，解析出域名host DNS域名解析：浏览器将域名转换成服务器ip地址，通过IP地址与服务器建立TCP连接（三次握手） 客户端向服务端发送HTTP请求，如果服务器返回以 301 之类的重定向，浏览器根据相应头中的 location 再次发送请.
2021-04-19 15:23:02
1104
原创 判断回文链表之leetcode234题
法一：转数组后遍历将链表转化成数组后遍历判断，此时遍历只需要遍历数组的前半部分，或者使用双指针法，代码如下：时间复杂度：O(n)，空间复杂度O(n)/** * Definition for singly-linked list. * function ListNode(val, next) { * this.val = (val===undefined ? 0 : val) * this.next = (next===undefined ? null : next)..
2021-04-19 11:43:43
235
原创 五种常用排序算法总结
常用的排序算法有如下六种：一、冒泡排序1、原理每次从前往后遍历整个数组，每一项与其后一项进行对比，若符合要求（从大到小或从小到大），就交换位置。一遍循环结束后，最大（小）的值就会被排在数组结尾，即每次循环能排好一位，所以要遍历n遍，才能把整个数组排好。2、特点实现简单，效率低，排序是稳定的。3、算法复杂度时间复杂度O(n^2)，时间复杂度O(1)4、代码实现function bubbleSort (array) { for (let i = 0; i .
2021-04-13 15:42:09
4554
原创 leetcode160题：相交链表
题目描述：法一：双循环暴力法思路：直接嵌套循环，找到相同的节点即返回，效率低复杂度：时间复杂度O(n^2)，空间复杂度O(1)代码实现：/** * Definition for singly-linked list. * function ListNode(val) { * this.val = val; * this.next = null; * } *//** * @param {ListNode} headA * @param {ListN
2021-04-13 12:11:08
202
原创 前端码农babel入门学习
一、babel是什么Babel官网上是这样说的：Babel 是一个通用的多用途 JavaScript 编译器。通过 Babel 你可以使用（并创建）下一代的 JavaScript，以及下一代的 JavaScript 工具。作为一种语言，JavaScript 在不断发展，新的标准／提案和新的特性层出不穷。 在得到广泛普及之前，Babel 能够让你提前（甚至数年）使用它们。Babel 把用最新标准编写的 JavaScript 代码向下编译成可以在今天随处可用的版本。 这一过程叫做“源码到源码”编译，
2021-04-08 15:49:52
1088
原创 nodejs-archiver实现批量压缩文件夹
文件夹结构：代码：test.js/* * @Description: * @Author: dzy * @Date: 2021-02-26 17:18:58 * @LastEditTime: 2021-02-26 19:34:09 * @LastEditors: dzy * @Reference: */var fs = require('fs');var archiver = require('archiver');// var path = __dirname;
2021-03-01 11:01:56
2030
2
原创 链表操作中的值传递和地址传递
今天刷题时，遇到一个问题，链表不都是地址传递，当赋值不是节点时，是值传递，验证如下：1、地址传递function ListNode(val) { this.val = val; this.next = null;}let a = new ListNode(1);let b = a; // 引用赋值console.log(a,b);b.next = new ListNode(2);b = b.next; //节点，引用赋值console.log(a,b);
2021-02-24 11:58:49
1586
GIF Brewery 3.app.zip
2021-04-16
空空如也
TA创建的收藏夹 TA关注的收藏夹
TA关注的人