Redux in React 学习笔记
官方文档，视频教程 What is Redux?IntroRedux 是一种 JS 状态管理库，可用于任何 JS 应用程序，包括 React。Redux 提供单一的状态存储，可在整个应用程序中共享，方便跨组件共享数据。 在Redux中，状态存储在一个称为Store的对象中，并且只能通过Action来修改。Reducer函数用于处理Action，并返回新的状态对象。 它类似于 Context 概念，但 Context 并不像 Redux 那样提供状态管理和更新机制，你需要自己实现逻辑来修改 Context 中的数据。Redux 和 Context 是两种不同的技术，用于解决不同的问题，在一些小型应用或者组件层次较浅的应用中，使用 Context 可能会更加简单和方便。但在复杂应用中，Redux 的状态管理机制能够让你更方便地组织和管理应用的状态，也更容易调试和维护。 WorkflowRedux中的数据流是单向的，从View（视图）到Action（动作）再到Reducer（处理器）再到Store（存储器），最终再次返回到View中。当一个Action被触发后，它会被传递到Reducer ...
开发个人主页Portfolio网站记录
我在 Youtube 上找 React 项目开发教程时意外看到 Portfolio 这个概念，它是用来展示自己技能和作品的地方，可以在求职过程中向潜在雇主展示自己的能力和经验。开发这样一个项目能够让我每天保持敲代码和 Coming up with new idea 的习惯，感觉每天会很充实。在此我将记录搭建过程中的点点滴滴。 Harris Wong's Portfoliohttps://harriswong.top 技术点 将会在此记录一些不错的、我不会但最后解决了的技术点。 将用户键入文本传入邮件应用里时不显示回车在URL里，文本内容需要编码才能显示回车和空格等效果，在本项目里，我使用的是 encodeURIComponent() 方法。 具体如下，我将 textarea 里获取到的文本内容进行编码 const changeBody = (event) => setBody(encodeURIComponent(event.target.value)); 回到顶部按钮的逻辑实现123456789101112131415161718192021222324252627 ...
JavaScript基础笔记
我很早学过，只是当时没有系统记录笔记，导致过一段时就容易忘记很多东西。本笔记主要参考JavaScript 基础-千古前端图文教程，mdn web docs - JavaScript Web 前端有三层： HTML：从语义的角度，描述页面结构 CSS：从审美的角度，描述样式（美化页面） JavaScript（简称 JS）：从交互的角度，描述行为（实现业务逻辑和页面控制） DateDate() constructorThe Date() constructor can create a Date instance or return a string representing the current time. const date1 = new Date() getFullYear()The getFullYear() method returns the year of the specified date according to local time. 12const birthday = new Date('August 9, 2000 00:00:00 ...
CSS学习笔记
我很早学过，只是当时没有系统记录笔记，导致过一段时就容易忘记很多东西。本笔记主要参考 CSS 基础&进阶-千古前端图文教程，W3C School - CSS，MDN web docs - CSS Selectors 选择器Basic selectorsUniversal selectorSyntax: * Type selectorSyntax: elementname Class selectorSyntax: .classname ID selectorSyntax: #idname Attribute selectorSyntax: [attr]、[attr=value]、[attr~=value]、[attr|=value]、[attr^=value]、[attr$=value]、[attr*=value] Grouping selectorsSelector listSyntax: A, B Child combinatorSyntax: A > B General sibling combinatorSyntax: A ~ B Adjacent sibli ...
HTML学习笔记
我很早学过，只是当时没有系统记录笔记，导致过一段时就容易忘记很多东西。本笔记参考了HTML-千古前端图文教程和w3school - HTML Tags<a>Attributestarget _self: the current browsing context. (Default) _blank: usually a new tab, but users can configure browsers to open a new window instead. _parent: the parent browsing context of the current one. If no parent, behaves as _self. _top: the topmost browsing context (the "highest" context that's an ancestor of the current one). If no ancestors, behaves as _self. 使用 target="_blank ...
React学习笔记
我看的是 Learn React - Scrimba，Advanced React - Scrimba。 React 入门Intro 介绍CDN、导包CDN： 123456789<script crossorigin src="https://unpkg.com/react@17/umd/react.development.js"/><script crossorigin src="https://unpkg.com/react-dom@17/umd/react-dom.development.js"></script><script src="https://unpkg.com/babel-standalone@6/babel.min.js"></script> 导包，无需使用 CDN： 12import React from "react";import ReactDOM from "react-dom"; ...
Spring Boot + JWT + Vue 实现前后端分离登录认证
参考 B 站楠哥教你学 Java的30 分钟学会 Spring Boot + JWT + Vue视频 JWT 介绍什么是 JWT？JSON Web Token，通过数字签名的方式，以 JSON 对象为载体，在不同的服务终端之间安全的传输信息。 JWT 有什么用？JWT 最常见的场景就是授权认证，一旦用户登录，后续每个请求都将包含 JWT，系统在每次处理用户请求的之前，都要先进行 JWT 安全校验，通过之后再进行处理。 JWT 的组成JWT 由 3 部分组成，用.拼接 1eyJhbGciOiJIUzI1NiIsInR5cCI6IkpXVCJ9.eyJ1c2VybmFtZSI6IlRvbSIsInJvbGUiOiJhZG1pbiIsInN1YiI6ImFkbWluLXRlc3QiLCJleHAiOjE2MjMyMjM2NzUsImp0aSI6ImQ2MTJjZjcxLWI5ZmUtNGMwNy04MzQwLTViOWViZmMyNjExNyJ9.FOS9Y7rYNdc2AOidnSPrgg2XTYePU0yGZ598h2gtabE 这三部分分别是： Header 1234{ ...
什么是前后端分离？
前后端分离就是将⼀个应⽤的前端代码和后端代码分开写，为什么要这样做？ 如果不使⽤前后端分离的⽅式，会有哪些问题？ 传统的 Java Web 开发中，前端使⽤ JSP 开发，JSP 不是由后端开发者来独⽴完成的。 前端 👉 HTML 静态⻚⾯ ---> 后端 👉 JSP 这种开发⽅式效率极低，可以使⽤前后端分离的⽅式进⾏开发，就可以完美地解决这⼀问题。 前端只需要独⽴编写客户端代码，后端也只需要独⽴编写服务端代码提供数据接⼝即可。 前端通过 Ajax 请求来访问后端的数据接⼝，将 Model 展示到 View 中即可。 前后端开发者只需要提前约定好接⼝⽂档（URL、参数、数据类型...），然后分别独⽴开发即可，前端 可以造假数据进⾏测试，完全不需要依赖于后端，最后完成前后端集成即可，真正实现了前后端应⽤的 解耦合，极⼤地提升了开发效率。 单体 👉 前端应⽤ + 后端应⽤ 前端应⽤：负责数据展示和⽤户交互。 后端应⽤：负责提供数据处理接⼝。 前端 HTML 👉 Ajax 👉 RESTful 后端数据接⼝。 传统的单体应⽤ 前后端分离的结构 前后端分离就是将⼀个单体应 ...
Butterfly主题侧边小组件——土味情话
前言：逛了逛Eurkon的博客，看着那微博热搜侧边栏突然灵机一动，本想整一个随机笑话侧边小组件，奈何找免费 API 时先看到了土味情话，不错，很符合我的胃口，于是有了以下教程 预览效果 教程 新建<BlogRoot>\themes\butterfly\source\js\custom\cheesy_pick-up_lines.js 1234567891011121314151617function cheesy_pick_up_lines() { let html = ""; for (let i = 0; i < 3; i++) { fetch("https://api.vvhan.com/api/love") .then((data) => data.text()) .then((data) => { html += ...
网页广告多，太多干扰内容怎么办？
本篇适合使用 Cent浏览器 的小伙伴 有时候搜索一些问题，很多点进去的网站都看起来眼花缭乱，关键是里面穿插着各种小广告，二维码，跳转链接，但你又不是站长，也没有办法去改别人的网站，那怎么办呢？ 友友们可能会想到可以安装去除广告的插件，说到这我分享一篇我看过的文章：Heomagic 08 | Chrome 网页去广告插件推荐，大家有兴趣可以试试该文章推荐的插件。如果友友们有更好用的插件麻烦留言告诉俺。 本篇就说说我最近发现的小妙招，话说某天我突然在 Cent 浏览器设置中看到了样式文件按钮，于是象征性的写了一些 CSS 代码并把文件上传进去，发现果然能控制网页的样式，我猜这个设置的最初目的是想让有能力的人自定义更改一些常用页面的外观，比如给搜索页面换个自己喜欢的背景什么的。但这些我都不感冒，我只想通过 CSS 代码去掉一些常用网页的广告，说白了就是利用类名或 ID 定位到组件，再写个 display: none;就完事。 代码示例： 123<Custom > { display: none;} 如果对 CSS 不了解，建议稍微学一下噢~ 优点： ...
Vue前端开发笔记
根据 B 站黑马程序员视频所撰写的笔记 Vue 基础 JavaScript 框架 简化 Dom 操作 响应式数据驱动 提示：以下代码都要导入 Vue.js 文件 12<!-- 开发环境版本，包含了有帮助的命令行警告 --><script src="https://unpkg.com/vue/dist/vue.js"></script> el: 挂载点Vue 会管理 el 选项命中的元素及其内部的后代元素，建议使 id 选择器，可以使用其他双标签，但不能使用 html 和 body data: 数据对象123456789<div id="app">{{message}}</div><script> var app = new Vue({ el: "#app", data: { message: "Harris", }, ...
那些实用且易忘的CSS小技巧
去年跟着 B 站 Pink 老师学过 CSS 基本语法，但平时美化博客时还是会遇到一些 CSS 相关问题，所以再此记录下。 🔥 让 a 标签铺满整个 div 有时候希望点击 div 同时跳转到对应链接，奈何 a 的大小取决于文本大小，但可使用以下方法来铺满整个父盒子，前提是 div 里只有 a 标签一个内容。 123a { display: block;} 文字颜色渐变background: -webkit-linear-gradient(...)为文本元素提供渐变背景。 webkit-text-fill-color: transparent使用透明颜色填充文本。 webkit-background-clip: text用文本剪辑背景，用渐变背景作为颜色填充文本。 12345.custom { background-image: linear-gradient(45deg, #8a7cfb 50%, #633e9c); background-clip: text; color: transparent;} 🔥 毛玻璃特效12 ...
