杰~JIE-CSDN博客

原创跨域问题浅析

在W3C的定义中，源是由协议主机(IP 地址或者域名)和端口三者确定。如果两个 URL 的协议主机(IP 地址或者域名)和端口都一样的话，那么这两个 URL 就是同源的。

2024-02-14 18:31:27 946

原创 Jenkins 安装 NodeJS 插件后无法识别Node环境：env node No such file or directory

目前，通过替换Jenkins Docker的镜像可以避免`env node No such file or directory`问题。但是为什么`jenkinsci/blueocean`会出现这个问题，我并没有定位到。期待大佬们的解惑。

2023-10-16 17:06:33 1125

原创发现问题：edge浏览器的效率模式会导致setTimeout/setInterval变慢

当edge浏览器启用效率模式后，setTimeout/setInterval运行一段时间后，执行间隔会变慢。

2023-07-29 14:01:16 521

原创问题解决：vscode 提示【Cannot find module ‘vue’. Did you mean to set the ‘moduleResolution’ option to ‘node’

创建Vue3的项目后，vscode红色波浪线提示【Cannot find module ‘vue’. Did you mean to set the ‘moduleResolution’ option to ‘node’, or to add aliases to the ‘paths’ option?抱着试一试的心态，我查看了自己vscode的版本为16.0.0，最新版本为18.0.0。于是我下载了最新的vscode安装包，更新vscode后果然提示语没有了。然而，上面的方法并不能解决我的问题。

2023-07-13 07:18:44 4905 6

原创《前端与SEO》—— 第六章：前端开发人员的一些SEO优化方法

前端开发人员开发之余，顺手做一些SEO优化，是很划算的一笔"买卖"。可以通过以下方式进行SEO优化:1.设置合理的 title、keywords、description;2.a 标签优化;3.屏蔽不需要被抓取的网页;4.保持简单的网址结构;5.图片相关优化;6.无障碍优化;7.分页优化等

2023-06-16 20:53:02 1271

原创《前端与SEO》—— 第五章：SPA与SSR 对 SEO 的影响

由于 SPA页面在客户端渲染的机制，导致搜索引擎无法很好的解析页面信息，从而导致 SEO 工作无法展开。尽管Google等部分搜索引擎会对SPA进行虚拟渲染再解析，但是并不是所有的搜索引擎都会这样做。好在 SSR模式能很好的兼顾到 SEO。当然，并不是所有的网站开发都要摒弃SPA转而使用SSR。两者各有利弊，根据实际情况决定即可。

2023-06-16 20:46:52 1007

原创《前端与SEO》—— 第四章：meta 与 SEO

编写过HTML文档的朋友对一定不陌生，有一项非常重要的作用就是声明当前网页（即，HTML 文档）的基础信息。这些基础信息有个专业术语，叫“元数据（Metadata）”。元数据是 SEO 一个非常重要的工具。搜索引擎就是通过这些元数据来认识网页的。

2023-06-16 20:45:52 1688

原创《前端与SEO》—— 第三章：robots.txt

robots.txt 文件是网站对搜索引擎抓取工具的抓取行为的一种规则声明。robots.txt 文件中写明了什么搜索引擎抓取工具可以做什么事。它就类似于学校的学生行为规范。

2023-06-16 14:34:28 1257

原创《前端与SEO》—— 第二章：站点地图（sitemap）

顾名思义，sitemap就是网站的地图。这张“地图”描述的是网站中各个网页、图片、视频或其他文件的有关信息,甚至还可以说明这些内容之间的关系。sitemap以文件的形式存放在域名根路径下。，这张“地图”并不是给用户看的，而是专为设计的。搜索引擎会让抓取工具爬取sitemap文件，以便更高效的收录网站的网址。

2023-06-16 14:27:22 2668

原创《前端与SEO》—— 第一章：什么是 SEO

搜索引擎优化指的是——优化网站，让网站能更快、更好的被搜索引擎收录且尽可能让搜索引擎优先展示网站，从而增加网站的访问量。可以通过两个方向让网址更容易被搜索引擎收录：其一，如何让网站被快速抓取；其二，如何通过网站的其中一个页面引导爬虫收录网站的全部网址。

2023-06-16 14:25:39 1911 3

原创浅谈api回传信息数据格式

API 是前后端数据沟通的重要途径。固定统一的API 回传数据的格式对开发人员甚至项目组都极其重要，可以有效的减少无意义的沟通和错误。

2023-02-16 20:30:00 626 1

原创根据 Jupyter-lab 源码实现 notebook（.ipynb）在页面中的渲染

在页面中通过JavaScript实现notebook渲染，且基本保证与Japyterlab渲染效果一致

2023-02-13 14:51:04 1869 2

原创《CSS新世界》读书笔记

《CSS新世界》读书笔记。

2023-01-04 10:56:19 2422

原创 CSS 中的 white-space 渲染模型

在编写 HTML 时，我们经常会通过换行来使代码易于阅读。但是如果我们文本进行换行，就会导致页面中多出一个空格。如：在文本中间插入换行符在文本中间插入换行符另外，我们在编写文本时，如果在文本中间插入一个空，在页面中就会多出一个空格。但是如果连续插入多个空格，在页面上最终显示出来的确只有一个空格。如：练习空格在页面上显示时只会显示一个

2022-09-13 20:15:46 370

原创随记：git 常用指令(三)

阅前悉知本文仅是个人在使用git的一些技巧及常用指令笔记！本系列文章目录随记：git 常用指令（一）随记：git 常用指令（二）git commit --amendgit revertgit reset --soft 撤销最新一次commit

2022-05-30 11:29:37 317 1

原创 Vue 三种强制刷新方法的机制、使用场景、开销说明

Vue 三种强制刷新方法的机制、使用场景、开销说明。本文章将会告诉你 $forceUpdate 正确的使用时机；key 属性为什么能实现组件强制刷新。

2022-05-04 17:23:44 14642 3

原创解决“图片因为CSS样式缩放导致变糊问题”

对于图片的放大缩小，我们都会自然而然的认为：图片放大，会变得模糊，图片变小会变得较为清晰。放大，会把瑕疵更明显的暴露出来；缩小，可以让瑕疵难以发觉。这是生活中的自然现象。但是，这个现象放到网页上的图片就“变了味”。

2021-12-12 19:29:09 10590 3

原创 koa2 实现 Http 请求代理

koa2 实现 Http 请求代理可以借助 Express 中间件《http-proxy-middleware》。但是，单单通过《http-proxy-middleware》中间件还不能完全实现 koa 的HTTP请求代理功能，还需要配合中间件《koa2-connect》。

2021-10-16 20:25:19 1914

原创通过 Vue.extend() 创建可指令调用的 messageBox 弹窗组件源码

本文是《通过 Vue.extend() 创建可指令调用的组件——MessageBox 弹框》的扩展。关于Vue.extend()的用法以及 messageBox 弹窗实现的思路，可查看前文。

2021-09-27 16:13:46 558 1

原创通过 Vue.extend() 创建可指令调用的组件——MessageBox 弹框

使用过 element-ui 的朋友，应该都用过 MessageBox 弹框组件。MessageBox 弹框只需要一条JS代码就可以调用使用，非常方便。那这是怎么实现的呢？我们也来搞一个这样的组件。

2021-09-27 16:12:08 3357

原创 JavaScript 错误处理

JavaScript 错误处理错误处理对于今天复杂的 Web 应用程序开发而言至关重要。不能提前预测到可能发生的错误，不能提前采取恢复策略，可能导致较差的用户体验，最终引发用户不满。多数浏览器默认情况下都不会想用户报告错误，因此在开发和调试期间需要启用浏览器的错误报告功能。然而，在投入运行的产品代码中，则不应该再有诸如此类的错误报告。摘自——《JavaScript 高级程序设计语言（第 3 版）》正如上面所说，JavaScript 错误处理的最终目的是——防止 JavaScript 错误的产生影响

2021-09-23 10:24:41 737

原创字体图标浅析——什么是字体图标？如何生成？怎么使用？

什么是字体图标？字体图标字体-Font字体的工作原理是是什么？字体图标的优缺点？怎么生成字体图标？怎么使用字体图标？本文将为你一一解答。

2021-08-01 09:31:30 9706 4

原创 element-ui el-table 动态新增 el-table-column，表格闪现问题的分析与解决

element-ui el-table 动态新增 el-table-column，表格闪现问题的分析与解决在做动态增加删除 el-table 的列，遇到 column 显示隐藏会造成 el-table 闪烁情况：效果如下：代码如下：<template> <div> <el-select v-model="select"> <el-option label="显示列3" :value="true"></el-opt

2021-07-15 17:27:20 8726 3

原创你真的了解 Vue Key 吗？概述 Vue Key，以及如何合理的使用 Vue Key

关于 key 的使用，最常用的场景就是 v-for了。每当我们要在页面中添加一个v-for，Vue 都会强烈建议我们给生成的列表子项设置key。但是，在实际的使用中，大家很可能对于 key 的使用并不正确。我们平常的用法哪里猜错了呢？到底该怎么正确使用key?

2021-07-03 09:21:14 1491 1

原创密码输入框组件的实现

一般情况下，如果要实现密码输入框，采用浏览器原生的密码输入框是很好的选择。比如登录界面,使用浏览器原生的密码输入框，用户就可以使用浏览器自身的‘’记住密码“功能，不用每次登录都需要手动输入账号密码。但是呢！有某些情况下，只需要密码框的密码显示/隐藏功能。如果使用浏览器原生的密码框，“记住密码”功能的弹窗，就会造成很大的不便。所以，在这种情况下，就需要模拟实现密码框的功能了。密码框的功能解析在实现密码框之前，首先要了解密码框的功能。密码框的功能有：文本输入功能密码显示隐藏功能文本输入功能首先

2021-05-03 17:47:34 3052

原创 Vue 3 迁移策略笔记—— 第31节：scoped styles 的变化

前言本笔记主要基于官方文档《0023-scoped-styles-changes.md》汇总而来。如有理解出入，请以官方文档为主。建议您以官方文档为主，本文为辅。这样您可以“以自己为主”审视的阅读，从而不被我的观点带偏。一个改变：深度选择器在Vue3.中，Vue 2.x 的深度选择器 >>>、/deep/已经被弃用了。::v-deep 作为组合器的写法同样被弃用。<style scoped>/* 以下三种写法被弃用 */.a >>> .b {

2021-04-25 16:24:51 789

原创 Vue 3 迁移策略笔记—— 第30节：新增功能——Teleport

前言本笔记主要基于官方文档《Vue 3 教程-Teleort》汇总而来。如有理解出入，请以官方文档为主。建议您以官方文档为主，本文为辅。这样您可以“以自己为主”审视的阅读，从而不被我的观点带偏。什么是 Teleport ?Teleport 是 Vue 3.x 新增自定义元素，借助 Teleport 可以控制 Teleport 内部的内容挂载到具体的元素中。场景模拟我们先看这样的一个场景在一个多层嵌套的组件中，我们构建了一个模态框。我们想要这个模态框相对于最顶层的元素显示，该怎么做呢？

2021-04-18 16:52:12 407

原创浅谈 API 回传数据格式

API 是前后端数据沟通的重要途径。API 回传数据的格式对前端来说，有着极其重要的作用。在用户跟网站交互过程中，前端充当的是“翻译官”的重要角色。前端需要把后端告诉给用户的“信息”，准确的、浅显易懂的转述给用户。前端要想准确、浅显的向用户转述，首先要做的就是“听懂”后端说的“信息”。前端要想精准掌握这些“信息”，就必须和后端约定好一套 API 回传数据的格式。后端根据这套格式表诉他的“信息”，前端根据这套格式解读接收到的“信息”。大家都根据这套“回传数据格式”来工作，是确保“前后端通讯”畅通的前提.

2021-03-24 15:13:34 2590

原创原生JS实现页面平滑滚动

前言页面平滑滚动是网页一种常见的效果。那如何用原生的JS实现这也效果呢？原理平滑滚动的原理其实很简单。无非就是让页面一种肉眼可见的速度从当前位置滚动到指定位置。故而，要实现平滑滚动效果，我们就要知道“起始位置”、“结束位置”以及“如何让页面从一个点到另一个点”。获取起始位置和终点位置想要获取起始位置和终点位置，那就必须确定参考点。在网页中，常用的参考点是页面左上角。（注意，我这里所要实现...

2021-01-27 15:41:05 16102 1

原创 Vue 3 迁移策略笔记—— 第3节：Attribute Coercion Behavior （属性强制行为）

前言本笔记主要基于官方文档《迁移策略——attribute 强制行为》汇总而来。如有理解出入，请以官方文档为主。知识储备：HTML 属性内容属性与IDL属性的区别布尔属性与枚举属性的区别如果对上面知识点不了解，可先查看一下文章做初步了解：《IDL 属性与内容属性、布尔值属性与枚举属性傻傻分不清楚？》《MDN: Web 开发技术>HTML（超文本标记语言）>HTML 属性参考》当然，本笔记做了初步说明。概述删除枚举属性的内部概念，并将枚举属性视为普通的非布尔属

2021-01-27 15:40:14 2607

原创 Vue 3 迁移策略笔记—— 第4节：$attrs 包括class&style

前言本笔记主要基于官方文档《迁移策略——$attrs包括class&style》汇总而来。如有理解出入，请以官方文档为主。概述Vue 3.x 中， $attrs将包含传递给组件的所有属性，包括class和styleVue 2.x 的$attrs在 Vue 2.x 中，关于父组件使用子组件有这样一个原则：默认情况下父作用域的不被认作 props 的 attribute 绑定 (attribute bindings) 将会“回退”且作为普通的 HTML attribute 应用在子组件

2021-01-27 15:40:05 4949

原创 Vue 3 迁移策略笔记—— 第5节：移除 $children

前言本笔记主要基于官方文档《[迁移策略——移除 $children》汇总而来。如有理解出入，请以官方文档为主。概述在 Vue 3.x 中，将移除且不再支持 $children 。Vue 2.x 中的 $children官方描述：vm.$children类型：Array<Vue instance>只读详细：当前实例的直接子组件。**需要注意 $children 并不保证顺序，也不是响应式的。**如果你发现自己正在尝试使用 $children 来进行数据绑定，考

2021-01-27 15:39:58 4078 2

原创 Vue 3 迁移策略笔记—— 第6节：自定义指令

前言本笔记主要基于官方文档《迁移策略——自定义指令》汇总而来。如有理解出入，请以官方文档为主。概述为了更好的与组件生命周期保持一致，Vue 3.x 对自定义指令的钩子函数进行了重命名。Vue 2.x 自定义指令的声明周期bind——指令绑定到元素时触发，只触发一次；inserted——绑定元素被插入父DOM时触发update——当元素更新而子元素还没有更新时触发；componentUpdated——组件和子组件更新完成后触发；unbind——接触绑定时触发，只触发一次；Vue 3

2021-01-27 15:39:51 2565

原创 Vue 3 迁移策略笔记—— 第7节：自定义元素交互

前言本笔记主要基于官方文档《迁移策略—— 自定义元素交互》汇总而来。如有理解出入，请以官方文档为主。概述自定义元素（Vue 之外）白名单变为在模板编译期间执行；而且白名单应该通过编译器option配置而不是通过运行时的config来配置；Vue 2.x is 的用法，现只在 Vue 保留标签component中有效。新增v-is来实现在普通的 HTML 元素渲染组件添加 Vue 外的自定义元素如果我们想要将 Vue 外部定义的自定义元素(例如使用 Web 组件 API)添加到 Vue

2021-01-27 15:39:44 3592

原创 Vue 3 迁移策略笔记—— 第8节：Data 选项

前言本笔记主要基于官方文档《迁移策略—— Data 选项》汇总而来。如有理解出入，请以官方文档为主。概述data选项的不再接受 JS 对象，只接受函数形式的声明。当合并来自 mixin 或 extend 的多个 data 返回值时，data现在变为浅拷贝形式(只合并根级属性)。Vue 2.x data Option 的声明在 Vue 2.x ，声明data有两种方式：对象形式（常用于 Vue 根实例）const app = new Vue({ data: { ap

2021-01-27 15:39:38 2355 1

原创 Vue 3 迁移策略笔记—— 第9节：新增 emits 选项

前言本笔记主要基于官方文档《迁移策略—— emits 选项》汇总而来。如有理解出入，请以官方文档为主。概述Vue 3.x 新增了一个emits 组件选项，用来定义组件可以向父组件 emit 的事件。其类似于 props。Vue 2.x 的 emit在 Vue 2.x , 我们可以定义组件接收的props，但是我们不能声明组件可以emit哪些event。<template> <div> <p>{{ text }}</p> &l

2021-01-27 15:39:24 2913

原创 Vue 3 迁移策略笔记—— 第10节：事件 API

前言本笔记主要基于官方文档《迁移策略—— 事件 API》汇总而来。如有理解出入，请以官方文档为主。知识储备4个事件 API:Vue 3.x 的 emitsOption概述Vue 3.x 移除了$on、$off和$once这三个事件相关的API。在 Vue 3.x 中，不再支持事件发射器接口(the event emitter interface).Vue 2.x 的四个 Events APIVue 2.x 可以通过 event emitter(事件发射器) api 强制附加事件触发

2021-01-27 15:39:18 2409

原创 Vue 3 迁移策略笔记—— 第11节：移除过滤器

前言本笔记主要基于官方文档《迁移策略—— 过滤器》汇总而来。如有理解出入，请以官方文档为主。概述Vue 3.x 将移除且不再支持 filters。Vue 2.x 的 filters在 Vue 2.x 中，我们可以借助filters来处理通用文本格式。如下：<template> <h1>Bank Account Balance</h1> <p>{{ accountBalance | currencyUSD }}</p>&l

2021-01-27 15:39:12 2346 1

原创 Vue 3 迁移策略笔记—— 第12节：片段

前言本笔记主要基于官方文档《迁移策略—— 片段》汇总而来。如有理解出入，请以官方文档为主。概述Vue 3.x 支持组件内多个根节点，也就是片段！Vue 2.x 组件写法在 Vue 2.x，组件不支持多根节点。所以，组件的写法只能如下：<template> <div> <header>...</header> <main>...</main> <footer>...</foot

2021-01-27 15:39:06 2047

原创 Vue 3 迁移策略笔记—— 第14节：全局 API

前言本笔记主要基于官方文档《迁移策略—— 全局 API》汇总而来。如有理解出入，请以官方文档为主。概述新增一个新的 API createApp，调用其返回一个 app 实例。createApp返回的实例之间相互独立。Vue 2.x 全局 api 的举例Vue 2.x 拥有许多全局 api 和全局配置。在全局范围内，这些 API 和配置改变了 Vue 的行为。例如，创建一个全局组件：Vue.component('button-counter', { data: () =>

2021-01-27 15:38:53 2624

Gluttonous_Snake.zip

基于HTML+CSS+JS 实现贪吃蛇游戏！刚开始是学习前端那会，在熟悉 HTML+CSS+JS 后，我开始尝试去做贪吃蛇游戏。没想到在一顿瞎搞后还真搞出来了一个简陋版的贪吃蛇。哈哈！因为这是我刚开始学习前端的时候做的，所以代码有点简陋，甚至可能存在不合理的地方。大家看的时候须得留心。

2020-10-26

GDP(1960-2018).json

本资源采集的自1960年到2018年期间，各个国家每一年的GDP数据。并且，每一年的GDP,都做了排序，由高到低。

2020-06-02

lazyLoadDemo.zip

使用本资源，请结合文章《Vue Webpack 打包优化——路由懒加载（按需加载）原理讲解及使用方法说明》来使用。文章路径：https://blog.csdn.net/weixin_44869002/article/details/106288371

2020-05-27

select.zip

使用inpu和ul去模拟实现模块以及搜索记录显示下拉框。因为，使用原生的`select`有着诸多不便

2020-05-05

CSS_Modules_Demo.zip

CSS Modules 在Vue上运用的Demo。请结合博文来查看。博文链接：https://blog.csdn.net/weixin_44869002/article/details/105806021

2020-04-28

Chrome DevTools.docx

Chrome DevTools（Chrome 开发者工具）是内嵌在 Chrome 浏览器里的一组用于网页制作和调试的工具。官网还推荐一款叫做 Chrome 金丝雀版本（Chrome Canary）的 Chrome 浏览器，从这里你可以获得最新版本的 DevTools。为什么 Google 称之为金丝雀呢，因为金丝雀早期在矿井中被用来预警，而该版本的 Chrome 一定程度上也能起到该作用。不用担心 Chrome Canary 会覆盖原本的 Chrome，从 Logo 就可以看出这是两个软件。本文的实操性很强，建议大家在阅读时进行尝试，以加深印象。另外，需要注意一下的是，本文不是对 DevTo

2019-10-25

flexBoxLayout.zip

本资源时关于CSS 弹性盒子布局的练习代码，可参考、可二次开发编辑练习。 CSS 弹性盒子布局是 CSS 的模块之一，定义了一种针对用户界面设计而优化的 CSS 盒子模型。在弹性布局模型中，弹性容器的子元素可以在任何方向上排布，也可以“弹性伸缩”其尺寸，既可以增加尺寸以填满未使用的空间，也可以收缩尺寸以避免父元素溢出。子元素的水平对齐和垂直对齐都能很方便的进行操控。

2019-10-24

有谁知道，axios get 可以设置request主体吗？

2021-07-14

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

TA关注的人