- 博客(89)
- 收藏
- 关注
RSS订阅原创 TypeScript实战使用技巧分享
主要目的是分享我使用TS的方式或者习惯，以及怎么在项目中更好的使用它，而不是对TS这门语言的学习。并非说需要大家都去这样写，每个人有自己的编码风格。因为按照我的经历，我当时学习TS是没有太多理解上的问题的，更多的疑惑是怎么在项目中使用它，使用后到底带来哪些好处。这次技术分享仅仅从我个人的观点出发，分享一下我使用TS的习惯或者经验，希望多少能对大家有些帮助
2024-03-27 16:44:02
1140
原创 在 Next 14 的 appRouter 模式中接入 React-Redux
我们可以在全局layout里面注册Provider， 这样能保证我们的所有的客户端组件都能使用Reduxreturn ({children}
2023-11-27 16:07:46
921
2
原创 使用 typescript + express 创建 NodeJs 后端服务
*注意：**这里需要注意，我们自定义的错误处理 handler 需要放在其他的中间件和路由后面（You define error-handling middleware last, after other app.use() and routes calls;的描述，express 是自带错误处理的逻辑的。描述：如果我们用 async 和 await 去拦截代码错误，需要使用 try catch 去拦截错误，每个接口都这样去做太麻烦了，因此使用。本身的错误处理加上第三方库。等依赖，来写业务代码了。
2023-11-15 15:16:15
465
原创 自己封装 vue3+ts 组件库并且发布到 NPM
因为我们如果直接在 vue 组件的 style 标签里面写的样式，这些 css 代码是会被 vue 打包的，最终会变成类名假属性的选择器，因此不生效，解决方案就是用单独的 css 文件去写，然后其他项目在用的时候直接引入这个 css 文件即可。使用命令直接打包，然后打包的文件会存放在 dist 目录，由于我们已经在 package.json 里面配置了 files 属性只想了 dist 目录，因此我么只需要使用。我们简单的封装一个自己的组件和对应的一些方法，我的做法是直接在项目的根目录下面创建。
2023-09-14 14:36:08
629
原创 unocss 的使用
进行配置，这要能得到更好的 IDE 支持和其他集成。配置，如果使用通过属性来添加样式类名的功能就需要将。同样支持主题系统，我们可以在配置中通过配置。下面分别详细介绍这些配置的功能和配置方法。的核心之一，在这里我们可以选择是否使用。本身的配置，以及我们还可以自定义自己的。官网有介绍并推荐使用专用的位于根目录的。配置项不只是配置颜色，还可以配置断点（进行了详细的介绍，这里只记录要点。的主题配置是有类似的地方的。的插件，然后将，该插件传递给。自己的 rules，就需要在。但是这样配置有个缺点：不够灵活，
2023-07-12 11:24:59
1903
原创 Webpack 学习笔记
入口：入口起点(entry point) 指示 webpack 应该使用哪个模块，来作为构建其内部 依赖图(dependency graph) 的开始。进入入口起点后，webpack 会找出有哪些模块和库是入口起点（直接和间接）依赖的。输出：output 属性告诉 webpack 在哪里输出它所创建的 bundle，以及如何命名这些文件。Loader：webpack 只能理解 JavaScript 和 JSON 文件，这是 webpack 开箱可用的自带能力。
2023-06-07 15:57:46
728
原创 Vue3封装ant-design-vue表格
该文仅仅用来记录自己使用Vue3基于ant-design-vue开发的时候对Table组建的二次封装，因为在vue中，组件不能像react中那样作为一种JS数据类型随意传递，需要使用slot，因此个人认为不够灵活，但是为了解决这个问题就是用插槽对ant-design-vue的Table做了二次封装，封装后使用非常灵活：
2023-05-26 14:27:53
1774
原创 WebRTC学习
除了交换关于媒体的信息 (上面提到的 Offer / Answer 和 SDP ) 中，对等体必须交换关于网络连接的信息。这被称为 ICE 候选者，并详细说明了对等体能够直接或通过 TURN 服务器进行通信的可用方法。通常，每个对点将优先提出最佳的 ICE 候选，逐次尝试到不佳的候选中。理想情况下，候选地址是 UDP(因为速度更快，媒体流能够相对容易地从中断恢复 )，但 ICE 标准也允许 TCP 候选。WebRTC 连接信令交换过程介绍请查看 MDN 官方文档。
2023-04-28 17:19:52
1032
1
原创 React+Typescript+Electron 开发跨平台桌面应用教程
electron 是跨平台桌面应用开发工具，electron 的工作原理大致就是使用 V8 引擎运行 web 应用，于浏览器运行 web 应用的区别就是 electron 支持所有的 NodeJs 的 api（能力），我们可以使用 electron 调用很多浏览器无法调用的操作系统的能力，比如操作文件系统等等。
2023-04-03 15:13:59
1925
原创 NextJs 学习笔记
之前使用过 Nuxt3 基于前端框架 Vue3 来开发网站，因为 Nuxt3 很多地方借鉴了基于 React 的 SSR 框架 Next，因此最近抽时间开始学习一下 Next 这个框架。如果想用 typescript 开发则可以在上面的命令后面加上选项。Next 框架的页面开发语法是 React，关于 React 有关用法这里不在赘述。和 Nuxt 一样（准确地讲应该是 Nuxt 和 Next 类似，毕竟 Next 前辈，是 Nuxt 的借鉴对象），在项目根目录下有 pages 目录，这个目录的文件系统路
2022-12-07 13:53:01
838
原创 JS执行上下文与闭包的理解
所谓的执行上下文，其实就是代码运行的环境，JS 执行上下文分为全局执行上下文，函数执行上下文以及 eval 执行上下文。
2022-11-07 15:43:16
269
原创 react和vue3使用hook对比
既然hook这么好用，当然有时候需要自己根据自己的业务需求来封装自己的hook来时先代码复用，这点我认为vue和react差距不大，都很好用。hook的本质就是函数，普通函数不同的是hook的具有状态的，hook函数内部是可以调用其他的hook的import {import {} , });}这样useLoading这个hook的简单封装就已经完成了，可以看到。在这个hook中我们也使用了useStore这个外部hook和toRefconst {直接在组件中引入并且使用即可。
2022-09-20 15:20:19
1779
原创 react路由根据用户角色设置权限校验
做前端项目的时候，我们经常会有这样的情况：一个系统会有多种权限不同的角色，每个角色都有自己能访问的模块角色间能访问的模块（页面）并不完全相同，因此我们经常会有根据不同的角色管理不同的给=每个路由不同的访问权限的需求。...
2022-08-29 09:39:02
3082
原创 vue3问题记录(持续更新)
在没有使用的组件中，props的定义和之前是一样的，反之props需要通过defineProps来定义，并且可以通过也可以给每个props定义类型，这个和之前vue2的写法相同但是如果我们的类型是通过interface去定义的，上面的方法是无法去实现类型定义的，我们通过给defineProps传递泛型参数的方式来定义props的类型这种方法的弊端是无法给props设置默认值，如果需要定义默认值则需要用到...
2022-08-26 17:26:17
1542
原创 electron+vue3 实战
创建后使用为工程添加插件然后项目基础搭建完成进程: electron 程序运行由两个进程来控制主进程(main)和渲染进程(render)Preload 脚本官方解释：预加载（preload）脚本包含了那些执行于渲染器进程中，且先于网页内容开始加载的代码 。 这些脚本虽运行于渲染器的环境中，却因能访问 Node.js API 而拥有了更多的权限。预加载脚本可以在 BrowserWindow 构造方法中的 webPreferences 选项里被附加到主进程。我的理解：由于 electron 的主进程可以
2022-07-06 10:06:49
4018
2
原创 React.lazy 按需引入资源
Vue 中路由可以使用回调的方法动态按需加载，如下：这样在运行的时候加载页面不会全部加载而是根据路由按需加载，这样对首页加载速度的优化有很大的帮助。那么在 React 中，从 react 的官方文档中我们也找到了 react 提供的解决方案。按照 React 官方文档：React.lazy 接受一个函数，这个函数需要动态调用 import()。它必须返回一个 Promise，该 Promise 需要 resolve 一个 default export 的 React 组件。然后应在 Suspense
2022-06-20 20:12:40
410
原创 基于 Mui 封装常用 React 组件
Mui 是基于的设计风格开发的基于框架的 UI 框架，之前的名称为。Mui 提供了非常强大的主题解决方案，使用提供的方法可以自定义配置生成主题:生成的主题数据只需要传给暴露的组件即可，之后，组建的所有后代的 Mui 组件都会使用到该主题：动态切换主题动态切换主题只需要生成主题数据传递给组件即可。Mui 提供了一些自定义样式的 Api，下面记录一些常用的是 Mui 暴露的一个 api，我们可以使用该 api 对 Mui 甚至 React 其他组件进行样式改造，比如对 Mui 的 TableRow 组件进
2022-06-20 18:13:30
3448
2
原创 pkg打包node工程（express）
如果报错找不到 bin就在 package.json 中添加“bin”: “./bin/www”,注意需要在 package.json 中配置 pkg 需要打包的静态文件目录配置静态文件目录后在使用这些目录的时候就要注意路径的问题了
2022-06-16 11:43:05
1352
原创 简单手写debounce防抖函数和throttle节流函数
function debounce(cb, timeout = 300) { // 闭包一个上次触发时间 let lastEmitTime; return function () { // 每次调用更新上次触发时间 lastEmitTime = new Date().valueOf(); setTimeout(() => { // 设置的timeout时间过后去比较最后一次调用时间是否已经是超过了设置的timeout 超过了就调用callback
2022-05-27 15:21:04
203
原创 Vue使用Iconfont图标库
Vue使用Iconfont图标库创建vue项目先基于Vue脚手架vue-cli搭建Vue2.x项目vue create icontest安装依赖并运行// 安装yarn (npm install)// 运行yarn serve (npm run serve)创建iconfont项目仓库正在iconfont官网找到资源管理下拉菜单的我的项目选项，进去后点击加号创建项目创建好项目后就可以尝试添加图标到项目引入到前端项目在刚刚创建好的vue项目中的/src/assets目录下
2022-04-24 20:33:03
1480
2
原创 leaflet地图在React中的使用
leaflet地图在React中的使用关于Leafletleaflet是一款开源且易用于web开发的地图库。它拥有大多数开发者所需要的所有地图功能。，之前使用基本是在vue中使用，踩在巨人的肩膀上使用别人基于**leaflet二次封装过的vue-leaflet**，该插件封装使用起来非常简单，直接参考 官方文档 和教程使用即可。React中使用显然react中是不可以使用vue-leaflet插件去绘制地图的，这是我们就是要直接去啃leaflet这个骨头leaftlet官网https://lea
2022-04-21 16:55:34
3148
原创 React.forwardRef传递泛型参数
React.forwardRef传递泛型参数使用React函数组件开发的过程中会遇到父组件调用子组件的方法或者属性的场景，首次先说怎么通过React.forwardRef来将子组件的属性或者方法暴露给父组件使用forwardRef暴露组建的方法和属性子组件import { Box, Typography } from "@mui/material";import { forwardRef, useImperativeHandle } from "react";interface Locat
2022-04-15 16:02:27
3294
3
原创 处理前后端枚举变量不同的需求场景（Map的应用）
处理前后端枚举变量不同的需求场景（Map的应用）需求描述现在后端有个任务以及任务状态的概念，前端需要做展示，后端的状态有八种，但是前端需要整合为五种，也就意味着后端返回的某些状态前端需要整合为一个状态，这时我们前后端的枚举变量就不能一样了，前端需要做特殊处理方法目前想到的比较易于逻辑和代码易读性的就是用Map这种数据类型生成服务端的status到前端的status的映射，然后每次判断用map.get方法去获取后端status在前端所对应的status关系后端枚举变量export enum Ser
2022-04-13 14:01:42
967
原创 使用debounce在react函数组件中做防抖
使用debounce在react函数组件中做防抖背景在项目中有这样的常见需求： 提供一个搜索输入框，输入框需要响应用户的输入并且不需要用户点击搜索按钮直接发起搜索。思路1. 普通实现其实这样的需求很常见，也并不难，第一反应就是监听用户输入，只要用户有输入操作立即拿到用户输入的数据直接发起搜索查询优点：响应迅速，并且确实可以达到需求的效果。缺点：发送多洗无效请求，浪费服务器的性能资源，增加服务器负担。2. 防抖函数使用防抖函数（debounce或者lodash.debounc
2022-03-16 14:55:22
2216
原创 使用memo，useMemo，useCallback进行性能优化
使用memo，useMemo，useCallback进行性能优化根据React官网介绍，我们可以通过memo，useMemo以及useCallback组合使用进行React的性能优化，当然了官方也指出这是非必需的，并且后期react的更新迭代可能会在框架内部去处理性能和缓存的问题，但是就目前而言，如有遇到性能问题还是需要我们自行借助React提供的api去解决的。场景在实际项目中，有遇到一个包含多种不同表单类型表单域组件的组件，我们使用formik做表单数据的收集与验证，页面大概长这样：这个页面是
2022-03-10 11:22:00
924
原创 React使用formik+yup创建表单
React使用formik+yup创建表单简述在React中，react提供了ref来让我们获取react元素对应的真实的dom元素，利用这个特性我们确实可以获取表单域所对应的值import React, { Fragment, useRef, useState } from "react";export default function A() { const inputRef = useRef<any>(); const [value, setValue] = useSt
2022-02-28 13:27:48
1068
原创 使用`NodeJS`在前端项目中动态添加参数
使用NodeJS在项目中动态添加参数需求在页面中显示代码的构建（打包）时间解决思路首先定义一个文件build_time.js改文件可以是空文件，然后在创建一个js文件generateBuildTime.js,然后在该文件中写入代码动态添加参数，然后把需要生成的代码内容添加到该文件const fs = require("fs");let text = `export default ${new Date().valueOf()}`;fs.writeFile("./src/utils/build
2022-01-13 11:53:03
1060
原创 React使用TypeScript和Less
React使用TypeScript和less创建应用yarn create react-app react-ts --template typescript创建好了之后需要使用less，则需要噢诶之less（使用craco）yarn add @craco/craco然后安装craco-lessyarn add craco less然后在package.json中修改命令 "start": "craco start", "build": "craco build", "test"
2022-01-07 14:38:52
562
1
原创 Vue自定义插件以及指令
Vue自定义插件以及指令Vue提供了强大的插件注入功能来增强vue定义// myPlugin.tsimport moment from "moment";import { PluginObject } from "vue/types/umd";export const myPlugin: PluginObject<any> = { install(vue, options) { console.log(vue, options) // Vue构造函数 “MY_PLU
2022-01-06 13:57:16
940
原创 react + typescript + materialUI（Mui）系统基础搭建
react + typescript + materialUI（Mui）系统基础搭建首先根据 React with TypeScript and Less 这篇教程的介绍搭建基于TypeScript+Less的React项目然后安装react需要用到的库react-router-dom和react-reduxyarn add react-router-domyarn add react-redux技术选型框架： React + reatc-router + react-redux编程语言：
2022-01-05 09:19:01
3637
原创 12_Java 抽象类和抽象方法
Java 抽象类在面向对象概念中，所有对象都是通过类来描绘（实例化）的，但并非所有类都可以用来实例化对象的。类似于 TypeScript，java 中有抽象类概念。抽象类不能实例化为对象，但是类的其他功能依然在。由于抽象类不能被实例化为对象，因此抽象类只能被继承然后使用。定义抽象类在 java 中同样使用abstract class来定义抽象类。抽象方法abstract 关键字除了定义抽象类还可以定义抽象方法，声明抽象方法必须满足一下要求：抽象方法的定义不需要方法体。抽象类可以包含抽象方
2021-10-18 11:03:34
92
原创 11_Java 方法的重写和重载
Java 方法的重写和重载其实在之前的有些例子中我们已经见过了方法的重写和重载，这里做个简单的总结：重写（Override）重写是指子类对父类中可访问的方法的实现过程进行重写，返回值和形参以及修饰符都不能变。重写的意义在于子类可以根据需要定义特定于自己的行为。也就是说子类可以根据自己的需要实现父类的方法。重写方法不能抛出新的检查异常或者声明更加宽泛的异常。//父类Personpublic class Person { public String name; public Str
2021-10-14 14:57:26
155
原创 10_Java 继承
Java 继承继承是所有面向对象语言的基石。继承就是子类继承父类的特征和行为，使得子类的实例具有父类的实例域和方法，或者子类继承父类的方法，使得子类具有父类相同的行为（实际上子类除了能继承父类的属性和方法，还可以对方法进行重写）。类继承格式和 JavaScript 一样，类通过关键字 extends 继承，语法如下：class Child extends Father {}继承的特性继承很重要的一点作用就是解决代码复用问题，提高代码的复用性和可维护性。特性：子类拥有父类的feipriv
2021-10-14 14:56:23
203
原创 09_Java流(Stream)、文件(File)和IO
Java流(Stream)、文件(File)和IOjava核心库（java.io）包含了很多操作输入输出需要的类。所有的流类代表了输入源和输出目标。java.io核心库中的流支持很多格式，比如：基本类型、对象、本地化字符集等等。一个流可以理解为一个数据的序列。输入流表示从一个源（流源，数据源）读取数据，输出流表示像一个目标写数据。java.io核心库提供了强大而灵活的支持，使其更加广泛的应用到文件传输和网络编程中。读取控制台输入控制台输入由System.in来完成，为了获取一个绑定到控制台的字符
2021-10-14 14:55:26
75
原创 08_Java方法
Java 方法方法其实就是函数，就是将一段代码语句组合在一起实现一个功能，这样使得程序变得简短而清晰，有利于维护，可以提高程序的开发效率，提高代码的重用性和可读性。方法的定义语法：修饰符 返回值类型 方法名(参数类型 参数名){ 方法体 return 返回值}修饰符 可选，告诉编译器如何调用这个方法。返回值类型 类似于 TypeScript，void 表示没有返回值，其他的对应方法的返回值的类型。方法名 方法的实际名称。参数类型和参数名 类似于 TypeScript 中的形参。
2021-10-14 14:54:49
77
原创 07_Java 数组
数组是每一门编程语言中都很重要的一种数据类型（数据结构）。java 中提供的数组这种数据结构用来存储**固定个数的一个或多个相同类型**的元素。数组的声明数组声明有两种方法public class ArrTest { public static void main(String[] args) { int[] arr; }}这里 int 指定了数组只能存储 int 类型的数据。 2.public class ArrTest { public s.
2021-10-14 14:54:12
71
空空如也
空空如也
TA创建的收藏夹 TA关注的收藏夹
TA关注的人