- 博客(117)
- 收藏
- 关注
RSS订阅原创 25.Hybrid+安卓项目调试方法
本文总结了在 Hybrid 项目中进行调试的常见方式，覆盖前端 H5 调试、Android 原生调试、JSBridge 通信调试等场景，适用于项目开发期、联调期和线上问题排查。
2025-06-20 17:06:59
333
原创 24. 开发者常用工具：抓包，弱网模拟，元素检查
本文介绍浏览器开发者工具中三个常用功能：抓包并导入 Postman、模拟弱网环境、检查页面元素与样式。5. 接口会自动转换为 Postman 请求，可在 Headers、Query Params、Body 等部分进一步编辑与测试。弱网模拟可用于测试页面在 3G、慢速 4G 网络下的加载体验，尤其适用于移动端性能优化、懒加载验证等场景。通过 Elements 面板可以查看页面的 DOM 结构与 CSS 应用情况，适用于样式调试、结构分析。• 与 Postman 配合：可快速导入真实请求，进行接口测试与调试。
2025-06-20 11:47:11
319
原创 23.ssr和csr的对比？如何依赖node.js实现
• 企业一旦技术选型 React，全套都会用：Next.js（前端）、React Native（App）、React Admin（后台）、Storybook（组件库）Vue 默认是 CSR，但 Nuxt.js 提供了 SSR、SSG 能力，只是社区不太强调“CSR/SSR”这套说法而已。你刚才问的：Node.js SSR 请求内网、速度快、安全性高，Next.js 社区教程多、官方维护强，非常适合落地。其实 Vue.js 也有 SSR 和 CSR，只是默认用的是 CSR，不强调 SSR 而已。
2025-06-19 20:10:00
975
原创 22.react和next.js、SSR与CSR的比较
React 是造车的零件，Next.js 是组装好的一辆车，还能让它跑得更快、更容易维护、更适合上线。// SSR 页面（默认行为） - app/page.tsx。• 更自由，需要你自己配置很多东西（如路由、打包、部署）• 默认 CSR，不适合 SEO 要求高的站点。• 基于 React，提供「约定式」结构和功能。2. 下载 JS、React 渲染页面。2. 服务端生成 HTML（含内容）• 更适合企业级、内容型网站、电商等。3. 浏览器收到渲染好的页面。// 纯 React 页面。
2025-06-19 19:27:16
344
原创 21.什么是JSBridge（1）
JSBridge 是 Android 官方 WebView 提供的 addJavascriptInterface() 能力 + 项目方（或三方库）封装的桥梁通信协议。核心类/方法：webView.addJavascriptInterface(JavaObject, “bridgeName”)这段代码：• 把你提供的 JavaObject 中所有用 @JavascriptInterface 注解的方法暴露给 JS。• JS 页面中就能通过 window.bridgeName.methodName(…) 调
2025-06-18 16:41:31
597
原创 20.jsBridge多页面交互与原生事件监听冲突问题
用 JSBridge.openNewHybridPage() 是多 WebView 容器跳转，需要你手动管理每个 WebView 的事件监听与状态清理，否则就会出现“回到上一页还在监听”的 Bug。JSBridge 打开页面方式和 Vue router.push 打开页面方式之间，在WebView 生命周期管理和事件监听行为上的差异，这是核心本质。在不离开当前页面的情况下，通过前端框架（Vue/React）动态切换页面视图，让用户感觉像在换页面，实则是在同一个页面内加载不同组件。
2025-06-18 11:50:12
422
原创 19.vue.js的style的lang=scss、less（2）
lang=“scss” 或 lang=“less” 是告诉 Vue 编译器：“我这段样式不是普通 CSS，而是 SCSS / LESS，需要先预处理。lang=“scss” 是用 Vue 来启用这些功能，适合中大型项目、组件库开发、多人协作。CSS 预处理器（SCSS、LESS）= 写 CSS 更像写程序，可维护、可复用、更高级。预处理器（如 SCSS、LESS）就是为了提升开发效率、模块化能力和可维护性而诞生的。普通 CSS 能写样式没错，但在真实项目中，CSS 的管理、复用、维护能力非常弱。
2025-06-14 20:01:51
1164
原创 18.vue.js的scoped样式隔离？原理和使用？（1）
✅ 一句话理解：什么是 scoped在 Vue 单文件组件 (.vue) 中使用 scoped，可以让这个组件的 CSS 只影响自己，不影响外部，也不被外部影响。这段样式只会应用于当前组件的 .title，不会影响页面中其他 .title。
2025-06-14 19:59:14
559
原创 17.vue.js响应式和dom更新
/ 还是旧的 “hello”// ✅ DOM 已更新。你提到的这个问题非常专业，而且直击 Vue 的响应性本质 —— 响应是“实时”的，但 DOM 更新却不是立即同步的。“一轮”指的是 JavaScript 的同步任务阶段，Vue 会在这轮执行完、进入微任务队列后，再统一刷新 DOM。下面我来系统地解释这个核心概念，让你彻底明白为什么 Vue 页面响应是“四时的”，而 DOM 更新“不是实时的”。响应式数据更新是同步的（你写完马上变了），而 DOM 更新是异步的（你看见的页面还没变）。
2025-06-14 19:32:28
705
原创 16.vue.js watch()和watchEffect()的对比？（追踪依赖）（3）
✔️ 上面 watchEffect 会根据你运行时访问的路径自动收集依赖，比如你只有在 a.value > 5 的时候才访问 b.value，Vue 也能动态追踪到这个路径。Vue 文档中关于 watch vs watchEffect 的依赖追踪时机差异 的描述，非常关键，下面我帮你深度解析这个区别。👉 因为 watch 是在副作用函数运行前就决定监听哪些依赖的（即你指定的 a），它不会在副作用执行时追踪新的依赖。✔️ 这里你只监听了 a，即使你在回调中用了 b，b 的变化不会触发 watch 再次执行。
2025-06-14 19:19:49
901
原创 15.vue.js的watch（）和watchEffect（）（2）
onInvalidate 就是 watchEffect 中的“清理钩子”，你可以在里面取消或废弃上一次副作用，保证只有最新的数据才会被应用，从而完美避免异步请求中的竞态问题。这也是绝对正确的，而且是使用 watchEffect + async 的 常见陷阱，所以我才强调 onInvalidate。你可能会先收到第2次请求的结果，然后第1次的结果又晚到了，把数据“写回去了”。老的 fetch 请求即使返回，它的结果也会被忽略。多个异步请求先后发出，但后发的请求先返回，结果被先发的旧数据覆盖了。
2025-06-14 18:55:27
1020
原创 14.vue.js的watch（）的注意事项（1）
只监听state ，监听不到id的变化吗？A：Vue 3 中确实有一套跟 “深层 / 浅层” 有关的工具，它们用来控制 响应式系统的行为，而不是直接控制 watch 的深度监听。因为 state 本身（这个对象的引用）没变，只是它里面的属性变了。当你用 watch() 监听一个对象时，Vue 默认只监听它的“引用变化”，不会深层追踪子属性的变化。• 当你知道你不需要监听内部属性，比如只监听 API 结果是否更新，不关心结果结构。这 只能监听整个 state 对象的引用是否变化，而不是它内部某个属性的变化。
2025-06-14 18:07:28
1010
原创 13.react与next.js的特性和原理
• 底层原理：基于 Node.js，将 .js/.ts 文件导出为 handler，部署到 Vercel 等平台时作为无服务器函数（serverless function）运行。React 专注于构建组件，而 Next.js 是基于 React 的全栈框架，提供了页面路由、服务端渲染和全栈能力，让你能快速开发现代 Web 应用。• 场景：无需独立后端服务器，直接在 /app/api 或 /pages/api 下创建后端接口，如登录、数据库操作等。
2025-06-11 08:58:07
481
原创 12.vite，webpack构建工具
• 也就是说你跑 npm run dev 的时候，Next.js 内部自动帮你起了一个 Webpack-based dev server，你看不到 vite.config.js，但能跑，是因为 Next 帮你封装好了。构建后，最终可能只生成一两个 JavaScript 文件，一个 CSS 文件，压缩优化过的图片，整体体积很小，加载很快，用户体验更好。这些文件是高度优化的，体积更小，性能更好。简单说，构建（英文叫 build），就是把你写的前端代码，经过一系列处理，变成浏览器能高效运行的最终文件。
2025-06-06 14:19:06
615
原创 11. vue pinia 和react redux、jotai对比
我用编号和清晰的文字帮你对比介绍 Vue 的 Pinia，和 React 的 Redux、Jotai，分中英文简要介绍、特性、底层原理、使用场景。这样看起来更简洁明了。• 中文：Pinia 是 Vue 3 官方推荐的状态管理库，比 Vuex 更简洁和模块化。• 中文：Jotai 是一个基于原子状态概念的极简灵活状态管理库，专为 React 设计。• 中文：Redux 是一个可预测的状态容器，广泛用于 React 中管理复杂状态。• 模块化设计，支持多个 store，状态、getter、action 分明。
2025-06-05 15:15:04
675
原创 9.axios底层原理，和promise的对比（2）
可以的，小T很肯定地告诉你：你完全可以直接使用 Promise 来发 HTTP 请求，比如用原生 fetch + Promise 就可以实现网络请求功能👇。Axios 所有操作都是 Promise 化的，便于使用 async/await，也方便链式 .then() 调用。你可以把 Axios 理解为在 Promise 的基础上，做了很多贴心的“增强封装”，避免你自己重复造轮子，比如。你可以把 Axios 理解为在 Promise 的基础上，做了很多贴心的“增强封装”，避免你自己重复造轮子，比如。
2025-06-05 11:03:52
929
原创 10.vue.js中封装axioa（3）
Vue 项目中如何封装和使用 Axios 的完整结构与示例，项目结构目录（含 Axios 封装）├── src/│ ├── api/ # 所有 API 接口文件│ │ └── user.js # 示例：用户相关接口│ ├── utils/ # 工具函数│ │ └── request.js # Axios 封装文件。
2025-06-05 10:52:28
390
原创 8.axios Http网络请求库（1）
一句话总结Axios 是一个基于 Promise 的 HTTP 客户端，用于浏览器和 Node.js，帮助你轻松发送请求、接收响应。📌 Axios 是什么？Axios 是一个 轻量级的 HTTP 请求库，支持浏览器和 Node.js 环境。它封装了 XMLHttpRequest（浏览器）和 http 模块（Node.js），让我们用更简单、统一的方式进行网络通信。✨ 有什么特性？• 支持 Promise API（可用 async/await）• 自动转换 JSON 数据。
2025-06-05 10:49:12
955
原创 7.Demo Js执行同步任务，微任务，宏任务的顺序（3）
l一个包含 同步任务、微任务（Promise）、宏任务（setTimeout） 的例子，lJS 是怎么调度这些任务的。• await Promise.resolve() 会暂停 test() 剩下的部分，把后面的逻辑变成微任务。console.log(‘同步任务 1’);console.log(‘同步任务 2’);console.log(‘同步任务 3’);console.log(‘宏任务 1’);console.log(‘微任务 1’);console.log(‘微任务 2’);
2025-06-04 17:28:38
194
原创 6.promise在哪个线程执行？（2）
真正的“异步”工作（比如请求、定时器、文件读写）由浏览器或 Node 的后台线程/模块处理完成，完成后通过事件队列再通知主线程执行后续逻辑**。答案是：JavaScript 引擎（如 V8）+ 执行环境（如浏览器、Node.js）共同实现了事件循环机制，包括微任务队列的调度。微任务队列（Microtask Queue）：是一个专门用于存放**“Promise 的回调函数”**等细粒度任务的小任务队列。• Promise.then() 里的任务进了微任务队列。
2025-06-04 17:25:11
627
原创 5.Promise，async，await概念（1）
JS 引擎不会同步执行 .then() 的函数，而是将其放入微任务队列（microtask queue），等当前任务执行完后再运行。一个包含 同步任务、微任务（Promise）、宏任务（setTimeout） 的例子，JS 是怎么调度这些任务的。• await Promise.resolve() 会暂停 test() 剩下的部分，把后面的逻辑变成微任务。注册微任务 Promise.then(…
2025-06-04 17:17:14
776
原创 4.vue.js特性和原理
你可以把它理解成一个“中间人”，任何对原对象的读写，都要先经过这个中间人审查、加工、甚至阻止。Vue 将模板编译为 render 函数，生成虚拟 DOM（VNode），通过 Diff 算法对比新旧 VNode，最终只更新实际变更的 DOM 部分。Vue 构建工具（如 Vite）会将 .vue 文件编译成 JS 模块，分别处理模板（转成 render 函数）、逻辑代码和样式，实现模块化开发。Vue 核心库专注视图层，其他功能（如状态管理、路由）以独立库形式提供，按需组合，支持从轻量应用到大型项目的逐步扩展。
2025-06-04 10:13:32
542
原创 3. 简述node.js特性与底层原理
• 代码：lib/module.js、lib/internal/modules、src/module_wrap.cc。• C++ 层绑定：src/node_file.cc、src/fs_event_wrap.cc。• C++ 层绑定：src/stream_base.cc、src/tcp_wrap.cc。• libuv 层：deps/uv/src/unix/fs.c / fs-poll.c。• 核心文件：src/node.cc、src/env.cc。负责调度异步任务（定时器、I/O、Promise 等）。
2025-06-03 10:16:30
1164
原创 2.从0开始搭建vue项目（node.js，vue3，Ts，ES6）
开发中还会用到很多工具库，axios、vue-router、vant 等依赖，都是运行时需要的工具库，由 npm 统一管理。因为开发阶段你写的很多东西（比如 TypeScript、Vue 组件）浏览器不认识，得先通过 Node.js 环境来“预处理”、打包、转译。• 需要 浏览器或 Node.js 支持 ES6，或者通过构建工具（如 Vite）转译成老版本 JS（比如 ES5）才能运行。• 内置 npm（包管理器），让你方便安装和管理各种依赖（例如 axios、vue）。
2025-05-30 10:50:27
1124
原创 1.什么是node.js、npm、vue
一、Node.js 是什么？😺 定义：Node.js 是一个基于 Chrome V8 引擎的 JavaScript 运行时环境，让你可以在浏览器之外运行 JavaScript 代码，主要用于服务端开发。😺从计算机底层说：什么是“运行环境”？“运行环境” = 能接收你写的高级语言代码，并把它翻译成 CPU 能执行的机器指令，然后 管理运行所需的一切资源（内存、I/O、线程等） 的一套系统。😺😺Node.js 是如何做到“运行 JS 代码”的？
2025-05-29 23:20:54
2292
1
原创 （3）数组模拟环形队列
数组模拟环形队列对前面的数组模拟队列的优化，充分利用数组. 因此将数组看做是一个环形的。(通过取模的方式来实现即可)分析说明：尾索引的下一个为头索引时表示队列满，即将队列容量空出一个作为约定,这个在做判断队列满的时候需要注意 (rear + 1) % maxSize == frontrear == front [空]分析示意图代码实现import java.util.Scanner;public class CircleDemo { public static void ma
2022-05-10 17:13:58
428
原创 (2) 数组实现队列
队列队列是一个有序列表，可以用数组或是链表来实现。遵循先入先出的原则。即：先存入队列的数据，要先取出。后存入的要后取出示意图：(使用数组模拟队列示意图)数组模拟队列思路1.队列本身是有序列表，若使用数组的结构来存储队列的数据，则队列数组的声明如下图：其中 maxSize 是该队列的最大容量。2.因为队列的输出、输入是分别从前后端来处理，因此需要两个变量 front 及 rear 分别记录队列前后端的下标，front 会随着数据输出而改变，而 rear 则是随着数据输入而改变，如图所示:3
2022-05-09 18:00:21
572
原创 （1）线性结构和非线性结构+稀疏数组
文章目录一、线性结构和非线性结构线性结构非线性结构二、稀疏数组 sparsearray一、线性结构和非线性结构数据结构包括：线性结构和非线性结构。线性结构线性结构作为最常用的数据结构，其特点是数据元素之间存在一对一的线性关系线性结构有两种不同的存储结构，即顺序存储结构(数组)和链式存储结构(链表)。顺序存储的线性表称为顺序表，顺序表中的存储元素是连续的链式存储的线性表称为链表，链表中的存储元素不一定是连续的，元素节点中存放数据元素以及相邻元素的地址信息线性结构常见的有：数组、队列、
2022-05-08 00:42:58
584
原创 为什么重写equals方法，还必须要重写hashcode方法
原因：1.为了提高效率采取重写hashcode方法，先进行hashcode比较，如果不同，那么就没必要在进行equals的比较了，这样就大大减少了equals比较的次数，这对比需要比较的数量很大的效率提高是很明显的，一个很好的例子就是在集合中的使用。我们都知道java中的List集合是有序的，因此是可以重复的，而set集合是无序的，因此是不能重复的，那么怎么能保证不能被放入重复的元素呢，但靠equals方法一样比较的话，如果原来集合中以后又10000个元素了，那么放入10001个元素，难道要将前面的所
2022-04-26 23:25:47
18750
3
原创 JWT鉴权
文章目录一、什么是JWT二、JWT能做什么三、JWT介绍以及和传统Session的区别1)基于传统的Session认证2)基于JWT认证四、JWT的构成和认证流程五、JWT的优缺点一、什么是JWTJSON Web Token (JWT) is an open standard (RFC 7519) that defines a compact and self-contained way for securely transmitting information between parties as a
2022-04-25 23:04:25
2105
原创 死锁问题（产生条件、解决问题）
什么是死锁？所谓死锁，是指多个进程在运行过程中因争夺资源而造成的一种僵局，当进程处于这种僵持状态时，若无外力作用，它们都将无法再向前推进。 因此我们举个例子来描述，如果此时有一个线程A，按照先锁a再获得锁b的的顺序获得锁，而在此同时又有另外一个线程B，按照先锁b再锁a的顺序获得锁。则会陷入死锁产生死锁的原因？可归结为如下两点：a. 竞争资源系统中的资源可以分为两类：1.可剥夺资源，是指某进程在获得这类资源后，该资源可以再被其他进程或系统剥夺，CPU和主存均属于可剥夺性资源；2.另一类资源是不可
2022-04-25 10:40:42
915
原创 处理高并发问题思路
文章目录1.先考虑一个最简单的系统架构2.系统集群化部署3.数据库分库分表 + 读写分离4.缓存集群引入5.引入消息中间件集群结语1.先考虑一个最简单的系统架构假设刚刚开始你的系统就部署在一台机器上，背后就连接了一台数据库，数据库部署在一台服务器上。我们甚至可以再现实点，给个例子，你的系统部署的机器是4核8G，数据库服务器是16核32G。此时假设你的系统用户量总共就10万，用户量很少，日活用户按照不同系统的场景有区别，我们取一个较为客观的比例，10%吧，每天活跃的用户就1万。按照28法则，每天高峰
2022-04-21 16:52:16
1029
1
原创 Java常见异常
遇到过异常吗，如何处理？在Java中，可以按照如下三个步骤处理异常：捕获异常 try将业务代码包裹在try块内部，当业务代码中发生任何异常时，系统都会为此异常创建一个异常对象。创建异常对象之后，JVM会在try块之后寻找可以处理它的catch块，并将异常对象交给这个catch块处理。处理异常 catch在catch块中处理异常时，应该先记录日志，便于以后追溯这个异常。然后根据异常的类型、结合当前的业务情况，进行相应的处理。比如，给变量赋予一个默认值、直接返回空值、向外抛出一个新的业务异常交给调用者
2022-04-21 16:16:26
178
原创 Spring 中的 bean 为什么默认单例？
文章目录单例bean与原型bean的区别单例bean的优势单例bean的劣势Spring提供了5种scope分别是singleton、prototype、request、session、global session。今天要介绍的是这五种中的前两种，也是Spring最初提供的bean scope singleton 和 prototype。官方文档：https://docs.spring.io/spring/docs/3.0.0.M3/reference/html/ch04s04.html单例bea
2022-04-21 16:06:35
230
原创 springboot启动失败：APPLICATION FAILED TO START
启动mian遇到APPLICATION FAILED TO START问题：如下图@SpringbootApplication注解包含的内容，可以扫描包中的类、自动配置等等。所以在包中没有数据源或者url，会显示启动失败APPLICATION FAILED TO STARTDescription:** Failed to configure a DataSource: ‘url’ attribute** is not specified and no embedded datasource co
2022-04-17 22:39:40
1886
原创 Redis
redisredis是什么？Remote Dictionary Server(Redis): key-value的存储系统，非关系数据库意大利: Salvatore Sanfilippo ANSI C 语言， 基于内存、分布式、可持久化的键值对数据仓库。redis的特点 支持持久化->内存–>磁盘 开源BSD协议，高性能key-value Redis实现单线程(目前版本) 五大类型:string, list,set,hash,zset 性能极高- 读速度 1100
2022-04-15 18:36:05
742
原创 springboot优雅的解决异常问题（demo）
需求：主要处理用户登录异常用户名不存在用户名密码不为空自定义异常/** * 定义系统异常 */public class AeipfException extends RuntimeException{ public AeipfException(String message) { super(message); }}/** * 用户名、密码不能为空 */public class AccountNotNulException extends A
2022-04-15 17:44:42
402
原创 什么是ORM框架?
ORM概念什么是“持久化”即把数据（如内存中的对象）保存的磁盘的某一文件中。常用的ORM半自动框架如Mybatis，全自动ORM框架JPA。JPA详解什么是持久层持久层（Persistence Layer）,即实现数据持久化应用领域的一个逻辑层面，将数据使用者和数据实体相关联。持久化过程把数据永久载入数据库在载入磁盘中比如下面的代码，Springboot中的jpa框架添加居民信息residentsDao.save（residents)相当于把新创建的residents居民对象添加到数
2022-04-15 12:25:10
6669
原创 构造简易版hashmap（acm模式）
import java.util.Scanner;public class Test3 { static class hashmap{ private int key; private String value; private String[] arr = new String[10]; int count; public hashmap() { } public void put(int key, Strin
2022-04-14 20:56:39
304
空空如也
空空如也
TA创建的收藏夹 TA关注的收藏夹
TA关注的人