记录一次从零搭建Next.js最佳实践
参考文献:
如何给 Next.js 项目配置代码格式化和校验(ESLint + Prettier + husky)
【前端工程化】Nextjs 项目工程化最佳实践总结(献给 2023-1024 的礼物)
此处仅仅是我个人创建项目的一些总结,希望能给大家带来一点参考的意义与价值~
# 一、创建 Next 项目
首先,第一步需要创建一个最新版的空 next 项目。我们可以借鉴 next 官方的方法:
more...Server Actions
又是被 Next.js 新概念洗礼的一天。
我们知道,Next.js 最核心的特性便是 支持静态生成(SSG)和服务端渲染(SSG),这也就意味着我们可以以部署 Node 服务的方式,将其部署在服务器上,用请求后端接口类似的形式来请求页面文件。换句话说,我们其实可以直接把 Next.js 看成一个特殊的 Node 后端服务。
既然是在服务端进行运行,那么它在数据库的查询方式上自然和一般的 SPA 客户端进行查询有所区别。
我们先简单分析一下一般 React SPA 项目的前后端交互:
前后端分离开发,后端无论用什么语言编写,最终只需要提供一个 API Endpoint (URL) 给前端。
more...Picals后台管理系统设计文档
此处仅仅只是初步的页面逻辑构思,具体需要边落实边完善~
# 技术栈
采用 Next.js + Prisma + MySQL 全栈框架。其中使用 MySQL 是为了兼容原项目所使用的数据库。
组件库,使用 MUI。尽可能不自己封装组件,100% 使用组件库,可以封装为开源模板。
部署采用 Docker,实现服务端 Next 项目的一键集成。域名通过 CF 进行代理。
# 功能设计
后台管理系统的本职是对整个项目的数据库数据提供可视化的直观管理。
# 数据看板
数据看板使用 tremor 进行绘制,放在首页进行展示。
单纯展示总数(数据):
用户总数
插画总数
原创作品数
转载作品数
more...类
我们都知道,cpp 是一门面向对象的语言,类是 cpp 中最基本的概念之一。除了 cpp 之外,如 java、python 等语言也都有类的概念。
# 类的定义
在 cpp 中,类(Class) 是一种用户自定义的数据类型,它是对现实世界中某个事物的抽象,包括这个事物的属性和行为。类是 cpp 中的基本构造块,它是面向对象编程的基础。
一个类的特性包含三个部分:
封装(Encapsulation):将数据和操作数据的函数绑定在一起,数据被保护在类的内部,外部无法直接访问。
继承(Inheritance):一个类可以继承另一个类的属性和行为。
多态(Polymorphism):一个接口多种实现
more...认识一下PostgreSQL
最近在接触 Next.js 的时候,跟着它的新手教程一步步走。它提供了一个比较容易上手的 dashboard 实例,能够让开发者快速上手。
作为一款全栈框架,这个 demo 内部集成了 Prisma 以及传统关系型数据库 PostgreSQL。
对于这一款数据库,更多只是听闻其相较于 MySQL 更为强大,却不知强大在何处,因此进行了系统性的调研,并准备下一步对 littleSharing 重构时采用其作为 ORM 框架的映射数据库。
参考文献:
全方位对比 Postgres 和 MySQL(2023 版) - 古道轻风
MySQL 和 PostgreSQL 有何区别 - 数据库
Post
more...React中使用dnd-kit实现拖曳排序功能
由于前阵子需要在开发 Picals 的时候,需要实现一些拖动排序的功能。虽然有原生的浏览器 dragger API,不过纯靠自己手写很难实现自己想要的效果,更多的是吃力不讨好。于是我四处去调研了一些 React 中比较常用的拖曳库,最终确定了 dnd-kit 作为我实现拖曳排序的工具。
当然,使用的时候肯定免不了踩坑。这篇文章的意义就是为了记录所踩的坑,希望能够为有需要的大家提供一点帮助。
在这篇文章中,我将带着大家一起实现如下的拖曳排序的例子:
那让我们开始吧。
# 安装
安装 dnd-kit 工具库很简单,只需要输入下面的命令进行安装即可:
pnpm add @dnd-kit
more...MySQL+Typeorm级联关系的正确处理
开发环境:Nest.js + TypeORM + MySQL
这篇文章仅是由我本人的开发过程中总结出来的一些规律,希望能够给有需要的同学一些帮助。
我们都知道,在传统的关系型数据库当中,如果某个实体和某个实体之间存在一定程度上的相关性,那么必须要在对应的数据库中去配置好这一层关系,否则无法保证数据库的完整性。
现阶段总共的级联关系包括:
一对一
一对多
多对多
# 实验:nest 结合 typeorm 进行级联关系处理
# 前置任务:实体准备
在这里,一般的 typeorm 结合 nest 的配置方法暂且不详细展开。默认大家已经在 nest 中配置好了 typeorm 和 mysql
more...