全栈 Discord 克隆:Next.js 13、React、Socket.io、Prisma、Tailwind、MySQL笔记(一)
前言
阅读本文你需要有
Next.js 基础
React 基础
Prisma 基础
tailwind 基础
MySql基础
准备工作
打开网站 https://ui.shadcn.com/docs
这不是一个组件库。它是可重用组件的集合,您可以将其复制并粘贴到应用中。
打开installation 选择Next.js 也就是此页面

项目安装
npx create-next-app@latest my-app --typescript --tailwind

出现Success即为成功
npx shadcn-ui@latest init
这下就可以启动
npm run dev
开始写代码
更改下global.css,使文档的根元素都会占据视口高度的100%。确保网页在不同设备和屏幕尺寸下都能有一致的布局表现,而不会出现不必要的滚动条。
加入以下代码
//:root是css的伪类选择器 确保这些样式能够应用到整个页面中的所有元素。
html,body,:root{height:100%;}
(main)–> (routes) 是一个工作习惯
可以将routes和layout分开

Clerk权限控制
https://clerk.com/ 使用Clerk来进行权限控制
进行注册 QQ邮箱不能使用 需要使用网易邮箱

根据文档一步一步来
安装
npm install @clerk/nextjs
创建环境变量.env文件 在文件中添加内容
NEXT_PUBLIC_CLERK_PUBLISHABLE_KEY=pk_test_d29uZHJvdXMtY29uZG9yLTM0LmNsZXJrLmFjY291bnRzLmRldiQ
CLERK_SECRET_KEY=sk_test_n19eZwEzX9NUaONd3BRMhUWqKeZZn9lHxQDEY3IQ7Q
添加middleware.ts中间件
import { clerkMiddleware } from "@clerk/nextjs/server";export default clerkMiddleware();export const config = {matcher: ["/((?!.*\\..*|_next).*)", "/", "/(api|trpc)(.*)"],
};
在全局layout中使用ClerkProvider包裹
return (
<ClerkProvider>
<html lang="en">
<body className={font.className}>{children}</body>
</html>
</ClerkProvider>
);
}
创建目录结构
创建文件夹(auth),这种被小括号包裹的文件夹,这种命名约定并不会直接影响路由系统,而是用于特定的用途或者命名风格。比如说这里就是用来表示特定的文件 而不影响next路由系统
创建文件夹[[...sign-in]]与[[...sign-up]]
[[...sign-in]] 是 Next.js 中用于创建动态路由的一种特殊语法。这种语法允许你处理带有多个参数的动态路由,其中 ... 表示匹配零个或多个路径段。
最后格式是这样

并在sign-in中的page.tsx中写入内容
import { SignUp } from "@clerk/nextjs";
export default function Page() {return <SignUp />;}
在sign-un中的page.tsx中写入内容
import { SignUp } from "@clerk/nextjs";export default function Page() {return <SignUp />;}
并在.env中加入内容
NEXT_PUBLIC_CLERK_SIGN_IN_URL=/sign-in NEXT_PUBLIC_CLERK_SIGN_UP_URL=/sign-up
让我们来看看效果 localhost:3000/sign-up

接下来创建主文件夹(main)并在其中page.tsx中创建 <UserButton /> 组件https://clerk.com/docs/components/user/user-button#user-button-component
这个组件支持即时帐户切换,无需重新加载整个页面。
😬😬按钮只会在登陆后显示
// app/(main)/(routes)/page.tsx
import { UserButton } from "@clerk/nextjs";
export default function Home() {
return (
<div>
<UserButton afterSignOutUrl="/"/>
</div>
);
}
安装主题
https://ui.shadcn.com/docs/dark
安装
npm i next-themes
在components文件夹中创建文件夹providers中创建theme-provider.tsx 复制内容
"use client"import * as React from "react"import { ThemeProvider as NextThemesProvider } from "next-themes"import { type ThemeProviderProps } from "next-themes/dist/types"export function ThemeProvider({ children, ...props }: ThemeProviderProps) {return <NextThemesProvider {...props}>{children}</NextThemesProvider>}
进入全局layout文件将body中children文件包裹
import { ThemeProvider } from "@/components/providers/theme-provider";
<html lang="en" suppressHydrationWarning><body className={cn(font.className,"bg-white dark:bg-[#313338]")}><ThemeProviderattribute="class"defaultTheme="light"// forcedTheme="light"enableSystem={false}storageKey="discord-theme">{children}</ThemeProvider></body></html>
);
再搞个切换dark模式与light模式的切换按钮
在components中创建文件
// components/mode-toggle.tsx
"use client"import * as React from "react"import { Moon, Sun } from "lucide-react"import { useTheme } from "next-themes"import { Button } from "@/components/ui/button"import {DropdownMenu,DropdownMenuContent,DropdownMenuItem,DropdownMenuTrigger,} from "@/components/ui/dropdown-menu"export function ModeToggle() {const { setTheme } = useTheme()return (<DropdownMenu><DropdownMenuTrigger asChild><Button variant="outline" size="icon"><Sun className="h-[1.2rem] w-[1.2rem] rotate-0 scale-100 transition-all dark:-rotate-90 dark:scale-0" /><Moon className="absolute h-[1.2rem] w-[1.2rem] rotate-90 scale-0 transition-all dark:rotate-0 dark:scale-100" /><span className="sr-only">Toggle theme</span></Button></DropdownMenuTrigger><DropdownMenuContent align="end"><DropdownMenuItem onClick={() => setTheme("light")}>Light</DropdownMenuItem><DropdownMenuItem onClick={() => setTheme("dark")}>Dark</DropdownMenuItem><DropdownMenuItem onClick={() => setTheme("system")}>System</DropdownMenuItem></DropdownMenuContent></DropdownMenu>)}
因为没有安装dropdownmenu报错
npx shadcn-ui@latest add dropdown-menu
拿下

接下来安装prisma
npm i -D prisma
初始化
npx prisma init
相关文章:
全栈 Discord 克隆:Next.js 13、React、Socket.io、Prisma、Tailwind、MySQL笔记(一)
前言 阅读本文你需要有 Next.js 基础 React 基础 Prisma 基础 tailwind 基础 MySql基础 准备工作 打开网站 https://ui.shadcn.com/docs 这不是一个组件库。它是可重用组件的集合,您可以将其复制并粘贴到应用中。 打开installation 选择Next.js 也就是此页面…...
【Unity】制作简易计时器
一、创建计时器相关的变量 我们需要创建三个变量,分别是:计时时长、计时剩余时长、是否处于计时状态。 public float duration;//计时时长 public float remain; //计时剩余时长 public bool isCount; //是否处于计时状态 二、初始化变量 我们可以直…...
TDesign组件库日常应用的一些注意事项
【前言】Element(饿了么开源组件库)在国内使用的普及率和覆盖率高于TDesign-vue(腾讯开源组件库),这也导致日常开发遇到组件使用上的疑惑时,网上几乎搜索不到其文章解决方案,只能深挖官方文档或…...
51单片机7(点亮第一个LED)
一、LED简介 1、LED,它是一个发光二极管,它具有单向导电性,那么通过5毫安的一个电流,就可以使它发光,那么电流越大,它的发光也就越强,但是电流不能过大,过大会把这个发光二极管给烧…...
基于Vue和UCharts的前端组件化开发:实现高效、可维护的词云图与进度条组件
基于Vue和UCharts的前端组件化开发:实现高效、可维护的词云图与进度条组件 摘要 随着前端技术的迅速发展和业务场景的日益复杂,传统的整块应用开发方式已无法满足现代开发的需求。组件化开发作为一种有效的解决方案,能够将系统拆分为独立、…...
CentOS 系统监控项
在维护和优化 CentOS 系统时,实时监控硬件和资源的使用情况非常重要。为了满足工作需要,可以定时采集 CentOS 系统相关的监控数据,并将其推送到 Prometheus 进行集中监控和管理。以下是日常采集项及对应的 shell 命令,并附上每项命…...
连锁直营店小程序赋能多店如何管理
如商超便利店卖货线下场景,也有不少品牌以同城多店和多地开店经营为主,获取店铺周围客户和散流,如今线上重要性凸显,品牌电商发展是经营的重要方式之一,也是完善同城和外地客户随时便捷消费的方式之一。 多个门店管理…...
决策树算法入门到精通:全面解析与案例实现
1. 介绍决策树算法 决策树的基本概念和原理 决策树是一种基于树形结构的分类和回归方法,通过对数据集进行递归地划分,每个内部节点表示一个属性上的判断,每个叶节点代表一种类别或者数值。 决策树在机器学习中的应用场景 分类问题…...
LangChain —— 多模态大模型的 prompt template
文章目录 一、如何直接将多模态数据传输给模型二、如何使用 mutimodal prompts 一、如何直接将多模态数据传输给模型 在这里,我们演示了如何将多模式输入直接传递给模型。对于其他的支持多模态输入的模型提供者,langchain 在类中提供了内在逻辑来转化为期…...
ssh升级
文章目录 ssh升级一、解包ssh、ssl二、更新安装ssl三、手动更新手动复制库文件四、创建符号链接五、更新库路径六、验证库文件七、设置库路径环境变量八、配置、编译、安装OpenSSH:意外:缺少 zlib 的开发库解决方法: 九、刷新ssh服务、查看ss…...
51单片机10(蜂鸣器介绍)
一、蜂鸣器介绍: 1、蜂鸣器是一种一体化结构的电子讯响器,采用直流电压供电,广泛应用于电子产品中作为发声器件。蜂鸣器主要分为压电式蜂鸣器和电磁式蜂鸣器。 (1)压电式蜂鸣器,它主要由多谐的一个增胀器…...
Python爬虫:基础爬虫架构及爬取证券之星全站行情数据!
爬虫成长之路(一)里我们介绍了如何爬取证券之星网站上所有A股数据,主要涉及网页获取和页面解析的知识。爬虫成长之路(二)里我们介绍了如何获取代理IP并验证,涉及了多线程编程和数据存储的知识。此次我们将在…...
T113-i 倒车低概率性无反应,没有进入倒车视频界面
背景 硬件:T113-i + emmc 软件:uboot2018 + linux5.4 + QT应用 分支:longan 问题 T113-i系统倒车时偶发无反应,没有进入倒车视频界面。 倒车无反应问题排查 先在倒车驱动的中断检测接口里添加打印,以确定倒车无反应时系统是否检测到中断状态,如下图所示。 static int ca…...
【AI大模型】李彦宏从“卷模型”到“卷应用”的深度解析:卷用户场景卷能给用户解决什么问题
文章目录 一、理解李彦宏的发言1.1 李彦宏的核心观点1.2 背景分析 二、技术发展:从辨别式到生成式2.1 辨别式AI技术2.2 生成式AI技术2.3 技术发展的挑战 三、“卷应用”:聚焦实际应用与价值3.1 应用为王3.2 技术落地的关键 四、“卷场景”:多…...
25秋招面试算法题 (Go版本)
文章目录 科大讯飞 0713找01不能出现太多其他 科大讯飞 0713 找01 牛牛拥有一个长度为 n 的01 串,现在他想知道,对于每个字符,在它前面的最近的不同字符的下标是多少? 输入描述 本题为多组测试数据,第一行输入一个…...
在Ubuntu 14.04上安装和保护phpMyAdmin的方法
前些天发现了一个巨牛的人工智能学习网站,通俗易懂,风趣幽默,忍不住分享一下给大家。点击跳转到网站。 简介 虽然许多用户需要像 MySQL 这样的数据库管理系统的功能,但他们可能不太习惯仅通过 MySQL 提示符与系统进行交互。 ph…...
突破与创新:Vue.js 创始人 尤雨溪 2024 年度技术前瞻
本文将深入探讨以下主题的 尤雨溪 见解:Vite 5对Vue的影响、宏、vapor模式、常见误解、新特性或功能、未来版本对Option API的支持、VitePress等。 . 2.尤大的问答环节 2.1. Vite 5如何提升Vue的性能? Vite在提高性能方面的工作通常是针对Vite本身的。然…...
LeetCode 441, 57, 79
目录 441. 排列硬币题目链接标签思路代码 57. 插入区间题目链接标签思路两个区间的情况对每个区间的处理最终的处理 代码 79. 单词搜索题目链接标签原理思路代码 优化思路代码 441. 排列硬币 题目链接 441. 排列硬币 标签 数学 二分查找 思路 由于本题所返回的 答案在区间…...
【排序 - 插入排序 和 希尔排序】
插入排序(Insertion Sort)是一种简单直观的排序算法,它的工作原理是逐步构建有序序列。在排序过程中,它将未排序的元素逐个插入到已排序的部分中,从而在每次插入时扩展已排序序列的长度。 原理介绍 插入排序的基本思…...
Java使用 MyBatis-Plus 的 OR
Java使用 MyBatis-Plus 的 OR 一、前言1. 简介2. OR 查询2.1 基础 OR 查询2.2 使用 Lambda 表达式简化 二、总结 一、前言 学习使用 MyBatis-Plus 的 OR 及高级语句是提升数据库操作效率和灵活性的关键步骤。MyBatis-Plus 是 MyBatis 的增强工具包,提供了许多便捷的…...
网络编程(Modbus进阶)
思维导图 Modbus RTU(先学一点理论) 概念 Modbus RTU 是工业自动化领域 最广泛应用的串行通信协议,由 Modicon 公司(现施耐德电气)于 1979 年推出。它以 高效率、强健性、易实现的特点成为工业控制系统的通信标准。 包…...
Linux应用开发之网络套接字编程(实例篇)
服务端与客户端单连接 服务端代码 #include <sys/socket.h> #include <sys/types.h> #include <netinet/in.h> #include <stdio.h> #include <stdlib.h> #include <string.h> #include <arpa/inet.h> #include <pthread.h> …...
挑战杯推荐项目
“人工智能”创意赛 - 智能艺术创作助手:借助大模型技术,开发能根据用户输入的主题、风格等要求,生成绘画、音乐、文学作品等多种形式艺术创作灵感或初稿的应用,帮助艺术家和创意爱好者激发创意、提高创作效率。 - 个性化梦境…...
19c补丁后oracle属主变化,导致不能识别磁盘组
补丁后服务器重启,数据库再次无法启动 ORA01017: invalid username/password; logon denied Oracle 19c 在打上 19.23 或以上补丁版本后,存在与用户组权限相关的问题。具体表现为,Oracle 实例的运行用户(oracle)和集…...
使用VSCode开发Django指南
使用VSCode开发Django指南 一、概述 Django 是一个高级 Python 框架,专为快速、安全和可扩展的 Web 开发而设计。Django 包含对 URL 路由、页面模板和数据处理的丰富支持。 本文将创建一个简单的 Django 应用,其中包含三个使用通用基本模板的页面。在此…...
盘古信息PCB行业解决方案:以全域场景重构,激活智造新未来
一、破局:PCB行业的时代之问 在数字经济蓬勃发展的浪潮中,PCB(印制电路板)作为 “电子产品之母”,其重要性愈发凸显。随着 5G、人工智能等新兴技术的加速渗透,PCB行业面临着前所未有的挑战与机遇。产品迭代…...
AI Agent与Agentic AI:原理、应用、挑战与未来展望
文章目录 一、引言二、AI Agent与Agentic AI的兴起2.1 技术契机与生态成熟2.2 Agent的定义与特征2.3 Agent的发展历程 三、AI Agent的核心技术栈解密3.1 感知模块代码示例:使用Python和OpenCV进行图像识别 3.2 认知与决策模块代码示例:使用OpenAI GPT-3进…...
Day131 | 灵神 | 回溯算法 | 子集型 子集
Day131 | 灵神 | 回溯算法 | 子集型 子集 78.子集 78. 子集 - 力扣(LeetCode) 思路: 笔者写过很多次这道题了,不想写题解了,大家看灵神讲解吧 回溯算法套路①子集型回溯【基础算法精讲 14】_哔哩哔哩_bilibili 完…...
FastAPI 教程:从入门到实践
FastAPI 是一个现代、快速(高性能)的 Web 框架,用于构建 API,支持 Python 3.6。它基于标准 Python 类型提示,易于学习且功能强大。以下是一个完整的 FastAPI 入门教程,涵盖从环境搭建到创建并运行一个简单的…...
使用LangGraph和LangSmith构建多智能体人工智能系统
现在,通过组合几个较小的子智能体来创建一个强大的人工智能智能体正成为一种趋势。但这也带来了一些挑战,比如减少幻觉、管理对话流程、在测试期间留意智能体的工作方式、允许人工介入以及评估其性能。你需要进行大量的反复试验。 在这篇博客〔原作者&a…...
