- 博客(65)
- 收藏
- 关注
RSS订阅
原创 React v16.x 之深入理解组件生命周期
react v16.x更新了组件生命周期，将componentWillReceiveProps、componentWillMount、componentWillUpdate这三个钩子函数丢弃了，然后增加了getDerivedStateFromProps、getSnapshotBeforeUpdate。废弃原因
2021-02-01 17:09:41
293
原创 React v16.x 之深入理解Fiber
众所周知，react16版本更新后，将原来的Stack Reconciler架构重写成了Fiber Reconciler架构，从而解决了React15遗留下来的整体渲染掉帧、响应延迟缓慢的问题。这里有个优化前后的例子：[react-fiber-vs-stack-demo]...
2021-01-27 16:26:18
504
2
原创 react常见错误解决
最近在做react项目的时候遇到了几个报错，这几个报错在react项目还算常见，因此记录下来解决方法。’type’ is missing in props validation报错：type缺少props验证解决：1.查看下propTypes是否写成大写了，因为我们引入的时候是大写的，所以很多小伙伴可能直接复制过来就成大写了，也会报错哦2.新增type: PropTypes.numbe...
2019-06-18 19:28:49
24479
1
原创 从对象数组中筛选符合条件的值
const arr = [1,2,3,4,5,6,7]const list = [ {openId: 1, timelineId: 1, showNo: 1, uid: 1}, {openId: 2, timelineId: 1, showNo: 1, uid: 1}, {openId: 9, timelineId: 1, showNo: 1, uid: 1}, {openId: 4, ...
2019-05-28 10:46:22
23208
原创 vue常见错误解决
Error in render: “TypeError: Cannot read property ‘list’ of undefined”[Vue warn]: Property or method “message” is not defined on the instance but referenced during render. Make sure that this proper...
2018-06-10 10:28:40
84308
16
原创 微信小程序实现动态二维码海报生成与保存 | 高效便捷的前端方案
在微信小程序开发中,经常需要实现分享海报功能,通常包含动态二维码。本文将详细介绍如何在小程序中生成带有二维码的海报,并实现保存到手机相册的功能。qrcode-helper.ts：创建二维码的增强辅助函数，支持自定义样式和高清显示。首先,我们需要一个二维码生成的工具类。通过以上实现,我们可以在小程序中生成美观的分享海报。qrcode.js：绘制二维码。
2025-03-31 14:42:42
674
原创 【软考】程序员中级软件工程师备考分享
中级软件工程师备考分享，包含详细的备考计划、学习顺序和必考知识点。适合自学备考的考生，提供从学习资料到刷题策略的完整路径，并结合实际经验总结出高效备考方法，助力顺利通过考试。报考中级软件工程师，一年有2次考试机会，大概在5月份和11月份，报名时间在3月份和8月份。直接中国计算机技术职业资格网报名。我全程花了大概20天全天备考，直接一把过了。如果是上班族的话建议留一个月备考时间，知识点还是蛮多的。
2024-11-05 14:14:11
846
1
原创 06.【个人网站】使用Mailchimp做网站邮件订阅功能
Mailchimp 是一个强大的工具，可以帮助管理电子邮件营销，并且它提供了免费的计划和 API，适合刚起步的小企业和个人用户。即使使用免费的 Mailchimp 计划，仍然可以访问 Mailchimp 的 API，不过 API 调用会受到一定的限制。尽管 Mailchimp 的 API 是免费的，但它的使用也会受到一些限制，特别是在免费计划中。通过 Mailchimp API，可以将这些功能集成到自己的应用程序中，增强电子邮件营销的自动化和效率。创建一个 API 路由，用于处理订阅请求。
2024-09-04 15:24:29
1870
原创 05.【个人网站】基于i18n在Next项目中搭建国际化网站
在开发个人网站的时候，实现国际化几乎是必不可少的功能,今天给大家分享一下如何使用i18n在Next项目中实现国际化。
2024-09-04 15:22:07
379
原创 04.【个人网站】如何使用Vercel部署网站
Vercel 是一个前端开发平台，专注于提供简单、快速的部署和管理静态网站和前端框架应用（例如 Next.js）的服务。它通过无缝的持续集成和交付（CI/CD）流程，使开发者可以轻松地将代码从本地推送到生产环境。Vercel 是一个功能强大且易于使用的前端开发平台，特别适合需要频繁部署和更新的前端项目。通过其强大的自动化部署和全球 CDN 加速，开发者可以专注于编写代码，而无需担心部署和性能优化问题。
2024-09-04 15:16:40
1590
原创 03.【个人网站】如何做网站自定义页面 URL 映射
允许为 Notion 页面设置自定义 URL，从而提高 SEO 和用户体验。通过使用辅助函数（如），可以确保这些自定义 URL 映射的有效性，并将其应用到的网站项目中。
2024-09-04 15:12:44
448
原创 02.【个人网站】如何在Next中集成Notion数据库
通过以上步骤，可以在Next.js项目中封装Notion API请求，并使用组件来渲染Notion页面。这样不仅简化了与Notion数据库的集成，还提高了代码的可维护性。
2024-08-15 11:50:38
952
原创 01.【个人网站】如何使用Notion作为数据库进行全栈开发
使用 Notion 作为数据库进行全栈开发是一个强大的方法，可以结合 Notion 的易用性和丰富的 API 进行数据管理和展示源码：https://github.com/Jessie-jzn/Jessie-Blog.dev网站页面：https://jessie-blog.vercel.app/
2024-08-14 18:52:21
1062
原创 保姆级VuePress + Github Pages搭建博客
一直都是使用优快云写一些博文，最近突发奇想想试用下免费的Github Pages搭建一下博客，跟上大家的脚步👣，VuePress官网文档写得还算是挺全面的，但是我在进行部署的时候踩了不少坑，记录下来方便大家上手，减少踩坑。...
2022-06-11 21:48:04
2146
原创 React之事件机制源码解析
定义事件委托机制：并不是将Click事件绑定在DOM上，而是采用事件冒泡的形式冒泡到document上，然后将React事件内容封装并交真正的函数处理合成事件SyntheticEvent：冒泡到document上的事件也不是原生的浏览器事件，而是由react实现的合成事件SyntheticEvent。⚠️如果不想要事件冒泡的话应该调用event.preventDefault()方法，而不是event.stopProppagation(),event.stopProppagation()只
2021-12-26 17:27:53
998
原创 通过链表学习原型链，深入理解各种判断数据类型方法
概念由多个元素组成的列表元素存储不连续，用next指针将其连在一起。JavaScript中没有链表这个数据结构，但可以用object去模拟链表在前端常用于原型和原型链中数组vs链表数组：一块连续的内存，增删非首尾元素时往往需要移动元素，时间复杂度O(n)链表：不是连续内存，增删非首尾元素，不需要移动元素，只需要更改 next 的指向即可。时间复杂度O(1)Object实现链表代码创建链表const a = {val: 'a'}const
2021-12-22 17:29:44
859
原创 保姆级构建React+TypeScript+Webpack5项目
构建项目初始化项目mkdir react-templeatecd react-templeate npm init安装Webpacknpm i webpack webpack-cli --save-devwebpack-cli@4.9.1webpack@5.64.1配置Webpack新建webpack相关文件 |-- react-templeate | |-- package-lock.json | |-- package.json |
2021-12-22 17:28:24
1263
原创 git操作之一台mac电脑绑定两个git账号，用于工作和学习区分
1、查看已有密钥$ cd ~/.ssh$ ls可以看到有id_rsa.pub和id_rsa这1对密钥了2、生成新的密钥ssh-keygen -t rsa -f ~/.ssh/id_rsa_2 -C "yourmail@xxx.com"
2021-11-10 17:26:09
1416
原创 react实现聊天室历史消息及滚动条随着消息滑动功能
MessageBox.jsimport React, { useRef, useEffect, memo } from 'react'import PropTypes from 'prop-types'import { Spin } from 'antd'import { isEmpty } from 'lodash'import * as api from '../../api'import MessageItemBox from './MessageItemBox'import '../
2021-01-25 11:46:24
2421
4
原创 Ant Design Table组件行合并及表格头下拉筛选
最近在项目中实现了一个Table 相同数据行合并及表格头下拉筛选的需求，这类需求平时在项目中比较少遇到，操作的方法也比较麻烦，因此记录下来方便以后遇到有迹可循。实现效果合并相同行数据对dataSource数据进行处理，判断列scene字段是否有行数据相同，进行提取并添加新字段rowSpan，记录合并的行数// 合并数组单元格 createNewArr=data => {...
2020-03-29 19:01:56
4022
1
原创 ECharts在React+Antd用法及常见错误
最近项目中开始使用Echart做图表，在React+Antd中使用Echart还是遇到了很多坑，希望记录下解决办法可以帮助到大家。最终效果1、实现点击折线图上的点联动两个饼图数据2、处理Echart饼图数据为0或者是空时饼图消失问题如何在react中使用echart1、在render中添加div<div id='echartLine' style={{ width: '10...
2020-03-29 17:34:55
2518
1
原创 csdn代码不高亮问题解决
写博客的时候发现csdn的代码无法高亮了，看得贼累，很难受，去查了下这个问题，也去论坛问了客服，最后发现只需要添加下编码的语言就可以了。大部分人添加代码是这样：添加了编码语言后，注意：需要用小写博客文章：...
2019-06-10 14:39:23
546
原创 React之Ant Design基本框架搭建
import React from 'react'import { HashRouter as Router, Route } from 'react-router-dom'import { Layout } from 'antd'import PropTypes from 'prop-types'import Sider from '../components/Sider'import...
2019-06-10 14:08:45
1736
原创 Vue之keep-alive
使用场景：动态组件切换，当你选择了一篇文章，切换到 b 标签，然后再切换回 a，是不会继续展示你之前选择的文章的。这是因为你每次切换新标签的时候，Vue 都创建了一个新的 currentTabComponent 实例；当我们第一次进入列表页需要请求一下数据，当我从列表页进入详情页，详情页不缓存也需要请求下数据，然后返回列表页，这时候我们使用keep-alive来缓存组件，防止二次渲染，这样会...
2019-05-12 16:05:44
1039
原创 css 内联元素、块级元素、内联块级元素
对于display我想很多人都不陌生，然而在谈到内联元素，行内元素等词，还是会有人脑袋瓜子充满了疑问？？？我曾经自以为已经了解并懂得如何使用display，在学习vertical-align及替换元素等的时候，才深刻明白自己也就一知半解，接下来不说display各种参数的使用方法，而是谈谈display形成的各种盒模型display指定了元素的显示类型，包含两种用于指定元素怎样生成盒模型 ...
2019-04-04 22:47:35
997
原创 css line-box行框及替换元素
行框1.line-height:设置行间的距离（行高）=> 该属性会影响行框的布局。在应用到一个块级元素时，她定义了该元素中基线的最小距离而不是最大距离2.line-height与font-size的计算值之差（行间距）分为两半，分别加到一个文本行内容的顶部和底部。可以包含这些内容的最小框就是行框行间距：css没有直接设置行间距的方式，通过设置行高来间接设置行间距替换元素1....
2019-04-02 19:07:50
1307
原创 Vue之响应式原理
Vue.js是采用数据劫持结合发布者-订阅者模式的方式，通过Obeject.defineProperty()来劫持各个属性的setter、getter。在数据变动时给订阅者发送消息，触发响应的监听回调Object.defineProperty通过此函数实现双向绑定，直接在一个对象上定义一个新属性，或者修改一个对象的现有属性， 并返回这个对象。语法：Object.defineProp...
2018-11-20 23:07:00
299
原创 css实现居中
最近总是懒懒散散，每天工作忙成狗，没有时间进行总结和学习然后焦虑不安，趁着没有加班的时间将直接学习的css实现居中总结下。一直以来都懂得如何运用，但更多的是不清楚在什么情况下运用哪种，都是能够实现便完成任务了，有时候代码就变得累赘而且bug众多。...
2018-09-17 21:49:55
357
原创 使用Vue开发留言列表
Error in render: “TypeError: Cannot read property ‘list’ of undefined”Property or method “message” is not defined
2018-06-10 11:31:42
4248
3
原创 解决浏览器缓存
一直以来都习惯在URL地址跳转末尾加上时间戳，没有去思考过原因是什么，为解决后台小伙伴的疑问，去查了下才意识到这就是解决浏览器缓存的方法 作用：URL的末尾追加了时间。这就确保了请求不会在它第一次被发送后即缓存，而是会在此方法每次被调用后重新创建和重发；此URL会由于时间戳的不同而稍微有些不同。这种技巧常被用于确保到脚本的 POST每次都会实际生成新请求且 Web服务器不会尝试缓存来自服务...
2018-05-14 19:45:00
527
原创 获取明天的时间戳
最近刚做了一个H5的项目，项目需求是希望预约时间最晚为明天18点前，通过写了个简单的验证方法来执行。 var time = $("#time").val();//选择框内的值 var tomorrowd=new Date();//当前时间 var hourTime = new Date(time.replace(/\-/g, "\/"));//替换"-"为"/"的当前...
2018-05-14 19:26:58
4863
原创 ajax封装
最近做了个H5小项目，再次用到了ajax，因此将封装函数进行分享$(function(){ /** * ajax封装 * url 发送请求的地址 * data 发送到服务器的数据，数组存储，如：{"date": new Date().getTime(), "state": 1} * dataType 预期服务器返回的数据类型，常用的如：xml、h...
2018-05-14 10:55:45
882
原创 使用Vue开发数字输入框组件
最近在通过《Vue.js实战》系统学习Vue，虽然在项目中已多次使用Vue进行开发，但是对于一些非常基础性的知识点还不是很了解，因此这次通过结合数字输入框组件实战来谈谈简单的组件开发。 源代码:https://github.com/zndada/learnVue项目整体结构├── src 项目代码│ ├── common 公共js库│ │ ├── number.js 判断是...
2018-04-16 20:37:30
2170
原创 git操作
对于git的使用，我想廖雪峰老师的git教程已经写得很详细了，我这边主要是记录下几个初学者经常碰到的问题。1.创建版本库需要在空目录下执行，所以建议是新建一个文件夹进行存储使用windows系统的话，最好是整个目录不出现中文（所谓的整个目录指的是C:\Users\XXX>D:\project 这一长串都不要有）使用git init命令就创建好了版本库2.添加远程库...
2018-04-16 01:13:18
135
原创 Generator函数
1.是一个状态机，封装多个内部状态；2.执行Generator函数会返回一个遍历器对象，返回的遍历器对象，可以依次遍历Generator函数内部的每一个状态3.Generator函数特征：①function关键字与函数名之间有一个星号；②函数体内部使用yield表达式，定义不同的内部状态4.调用Generator函数，返回一个遍历器对象，代表Generator函数的内部指针。每次调用遍历器对
2018-01-10 22:06:00
230
原创 Promise
1. pending-进行中、resolved-已完成、rejected-已失败2. 注意：实例化的Promise对象会立即执行Promise.resolve() / Promise.reject()用来包装一个现有对象，将其转变为Promise对象，但Promise.resolve()会根据参数情况返回不同的Promise：参数是Promise：原样返回参数带有then方法：转换为Prom
2018-01-10 22:04:21
308
原创 ECMAScript6
最近公司用VUE做项目，使用的ECMAScript是ES6版本，相对于ES5来说，ES6还是有很多不一样的特性，通过对官网ES6的学习来进行一些对比归纳。let命令1、声明变量，类似于var。所声明的变量，只在let命令所在的代码块内有效 2、所声明的变量一定要在声明后使用，否则报错 4、如果区块中存在let和const命令，这个区块对这些命令声明的变量，从一开始就形成了封闭作用域。凡是在声明
2017-09-26 18:03:00
428
原创 CSS之动画
最近在学习饿了么vue的demo，接触到了挺多css3动画，之前有学习过，但更多是需要了就拿出来看看，直接上手用，今天来对三种动画属性进行系统学习。 css3动画主要包括Transform、Transition、Animation。区别transition：允许css的属性值在一定的时间区间内平滑地过渡。需要触发一个事件（hover事件或者click事件）才会随时间改变其css属性。anim
2017-09-15 10:19:40
1273
原创 Vue之render函数
render方法的实质就是生成template模板； 通过调用一个方法来生成，而这个方法是通过render方法的参数传递给他的； 通过这三个参数，可以生成一个完整的模板官网实例//未使用render函数Vue.component('anchored-heading', { template: '#anchored-heading-template', props: {
2017-08-09 15:56:59
2510
空空如也
空空如也
TA创建的收藏夹 TA关注的收藏夹
TA关注的人