- 博客(65)
- 资源 (1)
- 收藏
- 关注
RSS订阅
原创 Element-ui源码分析
分析Element-ui封装思想在平时写业务或者是写玩具的时候为了方便，我们会使用各种各样的组件库。虽然说基本需求看文档就可以了，但是文档中提供的方法和业务需求相比肯定是有一定差距的，这时候就需要自己封装组件了；并且，在写了一些代码后感觉，其实在不同的项目中写过功能差不多相同的代码，那为什么不封装一下方便以后、或者是其他人使用呢？写这篇博客的时候非常感谢b站up主樱满空，他的源码分析非常的清晰！可以去看看这位up主的视频讲解https://space.bilibili.com/1842032?spm_
2021-11-28 20:26:23
18363
4
原创 React + TypeScript实战（二）hooks用法
`React.FC`（可以直接写为`FC`）显式地定义了返回类型，其他方式是隐式推导的- `React.FC` 对静态属性：displayName、propTypes、defaultProps 提供了类型检查和自动补全如果没有手动为`FC`声明类型，则会报类型错误，此时我们需要手动进行类型的二次转换，比如：```ts// wrongconst Test: React.FC = () => 'hello'// correctonst Test: React.FC = ......
2022-07-20 19:36:23
1489
原创 React + TypeScript实战（一）设定事件处理函数的参数类型
首先提出需求，给input框绑定一个change事件，打印输入框中每次输入的内容。在设定参数类型的时候，首先想到的就是Event从这个报错信息来看，onChange事件需要的似乎是一个这样类型的处理函数现在先引入这意味着，我们的onChange事件是一个，它自带的event参数类型为，由于这里是一个输入框，所以应该为event设置参数为再来试试，成功获取到了输入内容！接下来给扩展一个功能，如果有很多个输入框，是否可以共用同一个onChange方法呢？......
2022-07-17 08:40:48
3807
原创 git版本控制、本地仓库、远程连接等操作分析
git是一个版本控制系统，这意味着每个人的电脑上都是一个完整的版本库，我们不再需要将代码上传至”中央服务器上“，每个人电脑里都有完整的版本库，某一个人的电脑坏掉了问题不大，从其他人那里复制一个就可以了。 注意：命令的参数，用了这个参数，表示你这台机器上所有的Git仓库都会使用这个配置，当然也可以对某个仓库指定不同的用户名和Email地址。1.2.2 初始化仓库此时文件夹内会创建一个空的仓库，并且目录下多了一个的隐藏目录，这个目录是Git来跟踪管理版本库的。命令可以让我们时刻掌握仓库当前的状态。可以
2022-07-12 21:04:24
645
1
原创 TypeScript 报错汇总
在这篇文章中将记录我遇到的ts错误，应该会持续更新。有时候从错误点入手学习似乎是一个不错的选择，所以也欢迎你私信我一些ts的问题。函数返回元组的时候，在使用的时候，元素可能是元组中的任意一个类型，比如：所以，在对返回的元组进行取值操作时，返回值内的类型顺序，可能和函数内的顺序不一致，需要多加一个条件判断：在这个报错案例中，第四行的判断也是很重要的知识点，面对联合类型传参的情况，我们常常需要通过类型判断来决定最后要执行哪个方法：二、类型 “string” 到类型 “number” 的转换可能是错误的ts(
2022-07-09 16:16:23
12268
原创 postmessage通信
在业务中，有一种开发形式为：多个子系统集成为一个父系统。每个系统之间都管理着不同的业务与逻辑，他们是互不干涉的。那么，我们如何在父系统页面中操作子系统中的内容呢？首先通过初始化两个项目。父系统端口号为3001，子系统端口号为3000。然后在父系统页面中通过一个标签，打开子系统页面：可以看到在父系统页面，成功打开了子系统页面内容。window.postMessage() 方法可以安全地实现跨源通信。通常，对于两个不同页面的脚本，只有当执行它们的页面位于具有相同的协议（通常为 https），端口号（443 为
2022-07-04 19:52:20
1875
原创 Vue3 根据用户权限设置动态菜单
在中后台管理系统中，我们知道可以有多种用户实体。以学生管理系统为例，和就是两个拥有不同职责的实体对象。当不同权限的用户登录管理系统时，他们所需要的功能也就不同。比如管理学生信息，而不仅可以管理学生，也可以处理一些老师的信息。由于职责不同，（通常来说在左侧）的用户功能菜单也就不一样。需求：不同的用户在登录后可以看到不同的菜单。在实现功能需求前首先需要明确一点，在登录页面输入账号密码进行登录后，在没有的情况下一般是跳转到首页。在这个过程中，仔细想想，常见的处理大致是：需要注意的是，登录操作是在login页面完成
2022-07-03 20:51:18
5860
原创 Nuxt.js数据预取
在Nuxt中发送请求有两种方案：前后台分离的方案 （数据到页面的过程是在浏览器完成的） 网页源代码中没有数据前台发送请求 -> 服务器处理请求 -> 前台接收到数据 -> 前台把数据渲染到页面凡是通过js的行为获取到的数据都是前后台分离的服务端渲染的方案在组件加载之前先去发起请求拿到数据，提前将数据渲染在页面，然后返回的页面中将包含数据。我们初次打开某个网站时，页面中会显示立即登录/注册的字样在成功登录后，该部分会被替换为现在的需求是，通过服务端渲染的方式将用户信息显示在页面上在用户成功登录的时候，可以将
2022-06-27 19:40:03
1497
原创 process.env.NODE_ENV
在开发的过程中，我们可能需要同时面临多种环境。比如：- 开发：API_URL =Ihttp://127.0.0.1:3000- 线上部署环境：API_URL =https://imNeko:3000这也是为什么，有时候我们在开发的时候感觉代码项目没有问题，可是部署到线上时出现了差错。...
2022-06-24 17:26:55
2975
原创 Nuxt.js spa与ssr的区别
在接触nuxt.js之前，首先需要明白两个概念：Vue开发的客户端单页面应用程序（SPA）、服务端渲染框架（SSR）传统的SPA应用是将从服务端获取，然后再客户端解析并挂载到dom身上。优点：缺点：优化：SSR：服务端渲染可以将其理解为：在node服务器中来运行Vue程序，然后在服务器中处理好页面渲染的问题，最后直接将页面html的展示传递给客户端，客户端仅仅只需要进行渲染即可；这样大大的减少了加载的时间,提高了加载的效率即：网页是通过服务端渲染生成后输出给客户端在SSR中，前端分成2部分：前端客户端、前端
2022-06-20 17:56:14
965
转载 一文读懂 TypeScript 泛型及应用
其中 `T` 代表 **Type**，在定义泛型时通常用作第一个类型变量名称。但实际上 `T` 可以用任何有效名称代替。除了 `T` 之外，以下是常见泛型变量代表的意思：- K（Key）：表示对象中的键类型；- V（Value）：表示对象中的值类型；- E（Element）：表示元素类型。...
2022-06-09 23:23:14
691
原创 【数据结构】排序和查找
排序算法稳定排序稳定与非稳定指的是：在一串数列中，…ai…aj…，ai==aj，在经过排序后，他俩的相对位置不变，则为稳定排序。插入排序将我们的整个待排序数组分成两个区域，一个叫已排序区，一个叫待排序区。已排序区在前方，待排序区在后方。每次将待排序区中的第一个元素取出来，在已排序区中进行比较，逐个交换位置，找到符合条件的位置进行放入。形象点可以理解为：一个人排队的时候一直往前拱，每次拱的时候，正前方那位向后移动一位（交换）。遇到老大哥的时候害怕了不敢继续往前了，于是就在那呆着了。举例
2022-05-31 10:18:33
403
原创 软件测试（黑盒/白盒测试/集成测试）
白盒测试覆盖语句语句覆盖让所有的语句执行即可，用图表述就是流程图中矩形表示的语句全部执行即可判定覆盖(*)让所有判定的YES/NO执行一次即可。假设有两个判定M、N，对于两者YES/NO的条件组合一共有四组，在这里M/N只需要满足YES、NO出现了一次即可，比如M–YES N–NO，那么第二组为M–NO，N–YES，此时对于M、N来说他们都进行了YES和NO的判断条件覆盖所有判定内的条件，在条件真假的情况下都执行了一次。如果有4个条件，那么4*2种情况都执行一次后完成测试。判定条件覆盖(*
2022-05-29 21:21:08
3196
原创 Oracle中的pl/sql语句详解【入门】
在SQL命令语言中增加了过程处理语句（如分支、循环等），使SQL语言具有了过程处理的能力。通过PL/SQL Developer工具创建一个新的文件时，默认会看到下面这段代码：declare --Local variable herebegin --Test statement hereend;在这段代码中，declare表示声明部分，比如变量的声明、游标的声明都可以放在这个部分，如果程序中没有使用到变量，这一部分是可以省略的。begin和end之间可以存放的相当于程序的方法体，在这个部分里
2022-05-27 13:30:30
5471
2
原创 从特效入手，深入了解CSS（四）动态侧边栏
不建议跳跃阅读！这篇文章将从头开始介绍如何实现一个特效中间偶尔会穿插一些css3或平时接触不多的css属性
2022-04-30 22:58:40
903
原创 [ C语言 ] 结构体成员定义
在结构体中，长度为0的数组不会占用存储空间，所以由于缓冲区与结构体的内存地址是连续的,在释放内存的时候,只需要一次free操作。
2022-04-29 17:31:07
3080
原创 从特效入手，深入了解CSS（三）：组合文字颜色
不建议跳跃阅读！这篇文章将从头开始介绍如何实现一个特效中间偶尔会穿插一些css3或平时接触不多的css属性首先看一看这一期的特效：HTML部分<h1 class="gradient-text">Welcome! 黑猫几绛！<h1></h1>CSS部分前面两期我们使用的是grid布局的方式让元素在页面上垂直水平居中，这一期使用flex布局：body { height: 100vh; width: 100vw; backgrou.
2022-04-18 09:45:58
735
原创 从特效入手，深入了解CSS（二）：鼠标 hover 特效
不建议跳跃阅读！这篇文章将从头开始介绍如何实现一个特效中间偶尔会穿插一些css3或平时接触不多的css属性
2022-04-17 10:29:03
3476
原创 从特效入手，深入了解CSS（一）：动态加载特效
不建议跳跃阅读！这篇文章将从头开始介绍如何实现一个特效中间偶尔会穿插一些css3或平时接触不多的css属性
2022-04-16 17:27:15
2785
原创 常用设计模式，但是有前端和JAVA分别举例说明
之前看别人封装组件的源代码时总感觉，这些代码非常的有条理、逻辑清晰，所以决定做一次设计模式的分析，分别按照前端业务与java代码来分析。
2022-04-15 20:19:52
647
原创 Fiddler工具的使用与手机app数据抓包
了解如何使用Fiddler工具抓包时，可以加深对接口的认知，而且可以拿到一些成熟的接口，方便自己写玩具的时候使用。
2022-04-15 19:21:57
6671
3
原创 第十三届蓝桥杯Web比赛模拟题
中午吃午饭的时候突然想起来最近有个蓝桥杯，于是决定看看模拟赛当作复习了。修复网站显示问题修改css引入的路径即可修复注册验证问题在写正则判断之前，需要复习一个原生的知识点：获取input框内的内容时，采用的是.value方法现在再复习一下正则的基础语法。正则表达式正则表达式是由普通字符（例如字符 a 到 z）以及特殊字符（称为"元字符"）组成的文字模式。普通字符[ABC] 匹配字符串中所有的A、B、C字符[^ABC] 匹配字符串中除了A、B、C字符以外的其他所有字符[A-Z.
2022-04-05 16:38:56
2983
原创 tsx实现适配vue3的滚动列表插件
在vue3中想使用滚动列表插件的时候发现，vue-seamless-scroll并不支持vue3版本。所以这里介绍一下适配vue3版本的滚动列表插件，采用的这位前辈的源代码，技术使用的是tsx。完整代码import { computed, CSSProperties, defineComponent, onBeforeMount, onMounted, ref, watch } from 'vue'const props = { // 是否开启自动滚动 modelValue: {
2022-03-16 15:44:33
1737
4
原创 页面侧边栏不溢出加载
首先看一下成品效果。在网页中侧边栏可以起到很好的导航效果，但是当有很多导航链接时便会产生溢出/出现滚动条。下面介绍解决办法：出现了溢出时一般采用overflow: hidden来解决，这里也是一样。在侧边栏的容器外再嵌套一层容器，外部容器设置overflow: hidden，包裹容器设置overflow-y: scroll; overflow-x: hidden;此时内部容器由于内容溢出会产生滚动条，但是会被最外层容器隐藏掉。接下来设置外部容器的宽度小于包裹容器的宽度，让鼠标事件
2022-01-15 15:43:09
412
原创 动态规划+背包问题
动态规划+背包问题题目背景背包问题往往可以抽象成：给定一组物品，每种物品都有自己的重量和价格，在限定的总重量内，我们如何选择，才能使得物品的总价格最高。背包问题这个总体概念可以划分出如0/1背包问题 、完全背包问题、多重背包问题等经典题目。0 / 1背包问题0表示背包未满，1表示已经放满，因此可以转化为拿或者不拿的问题：在容量有限的情况下，我们是否要拿起物品放入背包中，替换掉以前放入的物品，保证背包中的价值最大。题目背景[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img
2021-11-19 17:30:34
535
原创 JAVA + Socket + Swing实现QQ聊天软件
引言 当讨论到一个聊天软件是如何运行的时候，我们需要想到它的主要功能是消息传递。对于多台主机或者是一台主机上的多个客户端来说，他们实现消息传递都需要使用到服务器。当客户端A将消息发送给服务端的时候，服务端再将消息转发给客户端B。这个发送与转发的过程我们可以借助Socket来实现，为了确保端A和端B之间的通信不被端C影响，消息在传输的过程中需要确保发送和转发时都能够确认他的发送方与接收方。如果端A上需要同时和端B端C端D进行通信，我们可以为每一个新的通信开启一个新的线程，确保通信不会被主线...
2021-11-11 18:10:37
2512
3
原创 Vue3 props组件抽离
提示：文章写完后，目录可以自动生成，如何生成可参考右边的帮助文档文章目录前言 一、pandas是什么？ 二、使用步骤 1.引入库 2.读入数据 总结前言提示：这里可以添加本文要记录的大概内容：例如：随着人工智能的不断发展，机器学习这门技术也越来越重要，很多人都开启了学习机器学习，本文就介绍了机器学习的基础内容。提示：以下是本篇文章正文内容，下面案例可供参考一、pandas是什么？示例：pandas 是基于NumPy 的一种工具，该工具是为了解决数据分
2021-11-07 14:11:31
902
1
原创 拥抱Vue3 (五) 组件通信 provide与inject 附Vue3版本TodoList源代码
看完了前面四篇文章后我们就可以尝试做一下传统的TodoList案例了。接下来的内容基于你曾经写过或者听说过TodoList这个案例，如果还没有手动实现过，建议先试试在Vue2中练练手。我认为这一个案例的经典程度不亚于原生js写轮播图。创建静态样式、抽离组件等过程在这里就先跳过，这些内容和Vue2无甚差别，在文章的最后我将贴出全部代码。当写到todo-item组件中根据checkbox修改待办/完成状态时，按照传统的思路，我们会在数据的拥有者组件中放置todos数据，然后创建一个函数，将函数名传递给子
2021-10-17 12:22:07
338
原创 拥抱Vue3 (四) 计算属性与侦听属性
在Vue3中computed计算属性被抽离出去了，要用的时候按需引入，然后作为函数调用。基本的使用方法和Vue2相同，唯一不同的就是需要自己引入这一点。watch也是一样，注重了函数式编程与按需引入的特色，个人感觉逐React化，和useEffect有些类似。在情况一中你可能会问，在监视sum的时候为什么不是sum.value，在前面的专栏文章中介绍的是，通过数据.value才能拿到他所对应的值。事实上，Vue3中监视的是一个结构而不是属性的值。在写情况三之前，我们可...
2021-10-15 12:31:55
475
2
原创 拥抱Vue3 (三) ref 与 reactive以及响应式原理
一、ref 包装基本数据类型数据在第二篇文章中举例的时候，我们创建了非响应式的数据，在控制台中查看数据发现并不存在get与set方法。在查了文档后发现，Vue3中需要使用一个新的方法 `ref ` 去让数据变成响应式的。<template> <div class="main"> <h1>我叫{{name}}，我今年{{age}}了</h1> <button @click="changeInfo">修改<...
2021-10-14 17:28:06
1877
原创 拥抱Vue3 (二) setup函数
概述一、 初识setup函数组件中所用到的：数据、方法等等均要配置在setup中，这也就意味着在Vue2中写的data、methods在这里都不再推荐使用。这样的配置让对象式编程趋近于了函数式编程。<script>export default { name: 'App', // 最为原始的对象写法是这样，但是通过es6我们可以简写 // setup: function(){} setup () { // 数据 let name = '黑猫几..
2021-10-14 17:27:27
837
1
原创 拥抱Vue3 (一) main.js的变化
我们还是尝试使用Vue-cli来创建Vue3的项目，需要注意的是你的Vue-cli版本需要在@4.15.0以上才能支持Vue3项目的创建。在创建项目之前可以在cmd中输入Vue -v来查看cli的版本。创建好项目后和Vue2时候一样，首先来看看整个项目的入口文件main.js。import { createApp } from 'vue'import App from './App.vue'createApp(App).mount('#app')我们可以发现，引入的不再是Vue构造函..
2021-10-14 13:35:22
2343
原创 本地存储数据
我们在写登录页面或者是一些需要保存用户cookie的页面时，需要用到本地存储的功能。图片中介绍了本地存储中的常用方法，接下来我们可以看看在使用中可能遇到的错误。1. 当用户存储一个对象的时候，若是直接setItem('person',{age: 20, name: '黑猫几绛'})，存储在本地的数据会对该person进行一次toString，也就是说本地存储中的value为[Object Object]。因此，我们在存储对象形式的数据时，需要先通过JSON.Stringfy(Obj)将对象...
2021-10-11 17:29:54
541
原创 Vue_mixin混入与插件
引言在写代码的时候，我们常常会遇到功能大致相同的代码段。对于组件可以抽象出来调用，但是面对代码那就是cv了。比如下面这个例子，在methods方法中可以看到，两个不同组件有着完全一致的showName方法。解决办法在Vue2中官方提供了一个解决办法：Mixin混入技术。首先在App.vue的同级目录下创建mixin.jsexport const mixin = { methods: { showName: function(){ a.
2021-10-11 11:05:16
633
1
原创 Vue2自定义指令
在Vue2中创建自定义指令有两种方法：函数式创建、对象式创建。一、函数式创建<!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8"> <title>自定义指令函数式</title> <script type="text/javascript" src="../js/vue.js"></script></h
2021-10-11 09:53:17
470
原创 Vue2监测数据的原理
一、引入首先画一个简单的图。我们在写Vue的时候总会和数据打交道，将我们的目标数据写在data中，然后在template的差值表达式中通过{{xxx}}的格式可以响应式的渲染数据。当data中的数据改变时，这里橙色的线就会引起差值表达式的变化。那么问题来了，我们如何监测到data中数据的改变呢？这里就涉及到了Vue监测数据的问题。二、监测对象2.1 为什么需要监测对象首先写出需要用到的静态页面。<!DOCTYPE html><html...
2021-10-08 23:00:45
626
3
空空如也
TA创建的收藏夹 TA关注的收藏夹
TA关注的人