一日一技：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..
更多
再重写blog，以及新手建站教程
起因 前段时间收到nuxt的推送，说nuxt3 beta可以用了，我便打算用nuxt3+vue3重新写这个博客。进行得很顺利，但是我尝试nuxt generate时却收到报错说nuxt3目前暂不支持generate静态站点:不支持static 但我重写的心已经有了，无法阻止，遂再次用nuxt2写了一遍，等后面nuxt3能生成静态站点再重写吧(已完成)。这次删除评论，后台等功能，3天时间基本就写完，现在博客特别简单，年纪大了，还是喜欢简单点。之前花时间整那么多花里胡哨没卵用的东西，属实中二 教程 如果你是编程新手，以下步骤可以教你做一个和本站一样的博客，不需要花钱，甚至不需要电脑，但需要有一定的动手能力，英文阅读or翻译工具。我下面用小号做样例。 账号以及环境准备 连接互联网的手机或者电脑，最好可以科学上..
更多
使用Nuxtjs+cloudflare page部署高可用的半静态博客
船新版本请看这里：https://blog.halberd.cn/articles/6562 想法 某次逛v2ex看到cloudflare page这个东西，cloudflare我还是知道的，毕竟用梯子经常被查DNS 。摸鱼无聊便进去瞅了瞅，和vercel差不多。但是cloudflare的速度还是很好的，于是我就抱着试试的想法开始重写了。 vue有Nutxjs这个框架，专为静态打包设计，可以把一些静态的代码打包成固定的html，对我来说唯一的好处就是SEO，搜索引擎搜不到的网站没有灵魂! 操作 进度比想象中快，差不多一个星期就把整个项目迁移到nuxt了，踩的坑其实不多，就是nuxt自带的dev server实在太慢了。 代码部分无法细说，这里介绍如何做一个和本站一样的博客 fork 项目 克隆项目代码:..
更多