vue3用于管理axios异步请求一致性的功能函数
发现问题在前端开发中,有一个很常见的问题:如何在多次请求中,正确地处理响应数据和原始请求保持一致。 说起来有点拗口,我这里直接用一个简洁明了的例子来讲解。假如要写一个可分页的表格页面,它的原始代码如下: <script lang="ts" setup> const rows = ref<{id: number, name: string, age: number}[]>([]) const currentPage = ref(1) const total = ref(0) const getList = (page) => { axios.get(`/api/list?page=${page}`) .then(res => { rows.val..
更多Nuxt3创建SSE server以及client的简明教程
SSE(server-sent events)是什么MDN上有关于SSE的介绍,可以把SSE理解为单向的WebSocket。普通请求 + WebSocket + SSE联手一起完善了浏览器网络请求体系。它们的区别如下: 普通请求(GET,POST,PUT等等):浏览器--->服务器,单向非持续数据流。 WebSocket:浏览器<--->服务器,双向持续数据流。 SSE:浏览器<---服务器,单向持续数据流。 SSE的表现形式上和WebSocket差不多,依旧由浏览器主动发起请求,但是服务端不会立即返回,而是保持长连接,伺机返回数据,相应的,浏览器端则需要监听事件。 场景解析知道了SSE能实现什么功能,你可能已经跃跃欲试了,但是SSE的使用场景是什么呢?为什么不直接使用WebS..
更多一日一技:next.js如何正确处理跨域问题?
我以前一直使用Vue来写前端。去年下半年接手了一个基于React + Next.js的项目,于是顺带学习了一下Next.js。由于Next.js的特点,这个项目的前后端是放在一起的。一开始没什么问题,看了半天文档就上手了。上周我们需要在另一个网页项目中,调用这个项目的后端接口,于是就需要处理跨域请求的问题。但我发现按照网上的方法,跨域问题依然存在。这个问题浪费了我不少时间,好在最后终于找到了原因。记录在这里,免得大家跟我一样踩坑。为了复现这个问题,我们先来创建一个Next.js项目。执行代码创建代码脚手架:1npx create-next-app test_cors使用TypeScript,其他选项选择默认,如下图所示:命令执行完成以后,会生成一个test_cors文件夹,在文件夹中创建文件pages/a..
更多树莓派监控摄像头制作
前段时间买了台小主机,替换树莓派做云盘/下载器,也安装了jellyfin和aria2等其他自建服务,性能比树莓派强很多。于是树莓派又吃灰了,这次用它做个监控摄像头。 外观 外观 演示 制作 制作过程我没有记录下来,需要的物品如下: 树莓派 x1 树莓派专用摄像头 x1 MG995舵机(180度) x2 雪糕棍若干 热熔胶枪+热熔胶棒 5v电源+杜邦线若干 用外接电源给两个舵机供电,需要注意的是外接电源和树莓派必须共地,否则PWM不会起作用。两个舵机的信号线接树莓派gpio的第16和18个针。 代码 详细代码在Github仓库。前端用的react,后端是fasta..
更多终极白嫖:使用免费MongoDB显示浏览量
最近又研究研究了vercel,看到了database,发现vercel可以直接整合各大数据库,其中MongoDB有免费够用的方案,于是我试了试,用数据库存储博客浏览量。 初始化 首先注册一个免费的MongoDB账号(无需绑卡,他真的,我哭死),免费版512 MB容量,普通使用绰绰有余,虽然是共享内存,但实测速度并不慢。 然后在vercel上一键整合到nuxt3-blog项目,控制界面就可以看到MONGODB_URI环境变量了: MONGODB_URI 实在太方便啦,关键还免费。OK,现在非代码部分已经over了,下面是喜闻乐见的Talk is cheap,show me the code环节。分两部分: 功能代码:数据库增删改查 API代码:前端调用 功能代码 这里省略创建并缓存数据库连接的代码,我参..
更多浅谈搭建平台-画布篇
搭建平台本身也是一款软件,它更注重于“复用与组合”,而非实际的业务逻辑。前言近些年搭建平台变得很是流行,它提供了一种全新的开发方式,同时大幅降低了使用者的门槛,解决了企业的两大痛点:开发效率与人员转型。搭建平台由编辑器(画布+设置器)和生成器组成,本文将重点介绍画布,分为架构设计与画布设计两个章节来展开。正文什么是搭建平台在介绍搭建平台之前,有一个无法绕过的主题,那就是 NCLC(No Code & Low Code)。NCLC 作为建站产品背后的核心概念,推动了一波又一波的技术浪潮。近些年围绕 NCLC 踊跃出了不同形态的产品,如项目管理 Meego、低代码系统 Retool、在线文档 Notion 等,甚至还有人将 NCLC 细分为了 12 个发展赛道。 image 图片来源:https:..
更多dark mode实现——全站暗黑模式切换
水一篇文章,全站默认/暗黑模式切换的一种实现方式。 color 暗黑模式下,给<html>设置一个class:dark-mode,切换到默认模式就删除该class。 写一个mixin: @mixin dark-mode() { @at-root html.dark-mode & { @content; } } 使用方式如下: h2 { color: black; svg { fill: black; } @include dark-mode { color: white; svg { fill: white; } } } background 在layout里加一个空的div,动画长宽分别是2倍的浏览..
更多web开发调试:打断点
打断点是debug的手段之一,在各类开发语言中都有应用。本篇文章将介绍web前端开发中,断点的几种操作。 讲解 参考自javascript.info 浏览器/vscode断点调试有如下操作:5种操作 可以本地新建一个html文件,写一些测试代码,拖拽到浏览器中,打开开发者工具中的源代码栏,打断点一一验证下面的操作: Resume: 继续执行,热键F8 继续执行被中断的javascript。除非遇到断点,否则不会再次中断。 Step:执行下一个命令,热键F9 执行下一个javascript语句,按一次F9就会执行一条语句,通常用于一小段代码,逐行调试。 Step Over:执行下一个命令,但是不会进入到函数内,热键F10 和Step的效果类似,但是当语句是一个函数时(非内置函数,例如aler..
更多使用serverless function上传图片
代码 最近试了试vercel的serverless function,用它实现上传图片到sm.ms图床,选择sm.ms的原因是它原生支持api上传,但不能跨域,所以serverless function的作用是代理api请求,绕过跨域。 serverless function的使用方式很简单,只需在项目根目录下新建一个/api文件夹,在里面写httpHandler就行了,支持多种语言,我这里还是使用Nodejs。创建/api/smms/upload.ts文件如下: import fs from "fs"; import axios from "axios"; import FormData from "form-data"; import multiparty from "multiparty"; imp..
更多nuxt3使用笔记
:) 没记错的话,这是第5次重写blog,没有其他的点子,只好拿博客开刀了呀 差不多花了一周时间,大部分时间用在实践typescript和组织代码逻辑。相比于vue2SFC一把梭,vue3提供更灵活的代码书写方式,我也是偶然从一个视频里了解到vue3的理念: vue3解读 一些想法 前段日子我忽然想:热衷于写博客网站,但却没有值得写的博客文章,那还有何意义呢?以后学习知识,可以不妨考虑一下——学到何种程度,值得记下来吗。无论是有用亦或是有趣,如果不值得,那是否还有必要去学? 本文就作为我第一篇值得写的文章。 学习笔记 也可以是typescript + vue3 + n..
更多