全栈 Discord 克隆:Next.js 13、React、Socket.io、Prisma、Tailwind、MySQL笔记(一)

news2024/11/15 6:51:52

前言

阅读本文你需要有

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]")}>

<ThemeProvider

attribute="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

本文来自互联网用户投稿,该文观点仅代表作者本人,不代表本站立场。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如若转载,请注明出处:http://www.coloradmin.cn/o/1926465.html

如若内容造成侵权/违法违规/事实不符,请联系多彩编程网进行投诉反馈,一经查实,立即删除!

相关文章

C字符串和内存函数介绍(三)——其他的字符串函数

在#include<string.h>的这个头文件里面&#xff0c;除了前面给大家介绍的两大类——长度固定的字符串函数和长度不固定的字符串函数。还有一些函数以其独特的用途占据一席之地。 今天要给大家介绍的是下面这三个字符串函数&#xff1a;strstr&#xff0c;strtok&#xf…

php 可逆与不可逆加密函数

https://andi.cn/page/621536.html

基于机器学习的锂离子电池容量估计(MATLAB R2021B)

锂离子电池已经广泛应用于电动汽车或混合动力汽车的能源存储装置。由于电化学成分的衰退&#xff0c;锂离子电池随着使用时间的增加&#xff0c;电池性能不断退化&#xff0c;导致电池容量和功率发生衰退。电池容量衰退的因素主要有金属锂沉积&#xff0c;活性物质分解和电解液…

周报(1)<仅供自己学习>

文章目录 一.pytorch学习1.配置GPU2.数据读取问题1&#xff08;已解决问题2&#xff08;已解决 3.卷积的学习 二.NeRF学习1.介绍部分问题1&#xff08;已解决 2.神经辐射场表示问题2&#xff08;已解决问题3&#xff08;已解决问题4&#xff08;已解决问题5&#xff1a;什么是视…

NSSCTF中24网安培训day1中web的题目

我flag呢 直接查看源代码即可CtrlU [SWPUCTF 2021 新生赛]Do_you_know_http 用Burpsuite抓包&#xff0c;之后在User-agent下面添加XFF头&#xff0c;即X-Forwarded-For:127.0.0.1 [SWPUCTF 2022 新生赛]funny_php 首先是php的弱比较&#xff0c;对于num参数&#xff0c;我们…

【ChatGPT】深入解析Prompt提示词及如何高效使用ChatGPT

一、Prompt提示词是什么&#xff1f; 1.1 Prompt的定义 Prompt是人工智能领域中的一个关键概念&#xff0c;尤其在自然语言处理&#xff08;NLP&#xff09;和生成型AI模型中。简而言之&#xff0c;prompt是一段文本或指令&#xff0c;用于引导或启动AI模型的特定响应或操作。…

在pycharm 2023.2.1中运行由R语言编写的ipynb文件

在pycharm 2023.2.1中运行由R语言编写的ipynb文件 背景与目标&#xff1a; 项目中包含由R语言编写的ipynb文件&#xff0c;希望能在pycharm中运行该ipynb文件。 最终实现情况&#xff1a; 未能直接在pycharm中运行该ipynb文件&#xff0c;但是替代的实现方法有&#xff1a;…

SuperCLUE:中文大模型基准测评2024年上半年报告

SuperCLUE是一个中文通用大模型的综合性评测基准&#xff0c;其前身是CLUE&#xff08;The Chinese Language Understanding Evaluation&#xff09;&#xff0c;自2019年成立以来&#xff0c;CLUE基准一直致力于提供科学、客观和中立的语言模型评测。SuperCLUE继承并发展了CLU…

【前端Vue3】——Vue基础知识点总结(万字总结)

&#x1f3bc;个人主页&#xff1a;【Y小夜】 &#x1f60e;作者简介&#xff1a;一位双非学校的大二学生&#xff0c;编程爱好者&#xff0c; 专注于基础和实战分享&#xff0c;欢迎私信咨询&#xff01; &#x1f386;入门知识专栏&#xff1a;&#x1f387;【MySQL&#…

24.7.14(板刷数据结构,警钟长鸣)

上周六&#xff1a; 算是暑假训练第一天&#xff0c;期末考完了真好 cf round951 div2 D cf传送门 之前用正解补过&#xff0c;又臭又长&#xff0c;写完就跑了&#xff0c;这次用哈希补一发 思路&#xff1a;目标字符…

2022睿抗CAIP-编程技能赛-本科组省赛(c++)(未完结)

RC-u1 不要浪费金币 模拟 AC: #include<iostream> #define int long long using namespace std; const int N1e35; int n,m,p[N],ans; signed main(){cin>>n>>m;for(int i1;i<n;i) cin>>p[i];int sum0;for(int i1;i<n;i){if(sump[i]<m) sump…

昇思25天学习打卡营第21天|ResNet50迁移学习

在实际应用场景中&#xff0c;由于训练数据集不足&#xff0c;所以很少有人会从头开始训练整个网络。普遍的做法是&#xff0c;在一个非常大的基础数据集上训练得到一个预训练模型&#xff0c;然后使用该模型来初始化网络的权重参数或作为固定特征提取器应用于特定的任务中。 …

STM32MP135裸机编程:BOOT跳转到APP前关闭所有中断、清除所有中断挂起标志操作方法

0 前言 一般来说&#xff0c;MCU/SOC的BOOT在跳转到APP前都需要进行环境清理的操作&#xff0c;其中必须进行的一项操作便是关闭所有中断、清除所有中断挂起标志。本文介绍基于STM32MP135裸机编程下关闭所有中断、清除所有中断挂起标志的操作方法。 1 操作方法 STM32MP135裸…

缓存与分布式锁

一、缓存 1、缓存使用 为了系统性能的提升&#xff0c;我们一般都会将部分数据放入缓存中&#xff0c;加速访问。 适合放入缓存的数据有&#xff1a; 即时性、数据一致性要求不高的&#xff1b;访问量大且更新频率不高的数据。 在开发中&#xff0c;凡是放入缓存中的数据我们都…

机器人前沿--PalmE:An Embodied Multimodal Language Model 具身多模态大(语言)模型

首先解释这篇工作名称Palm-E&#xff0c;发表时间为2023.03&#xff0c;其中的Palm是谷歌内部在2022.04开发的大语言模型&#xff0c;功能类似ChatGPT&#xff0c;只是由于各种原因没有那样火起来&#xff0c;E是Embodied的首字母&#xff0c;翻译过来就是具身多模态大语言模型…

基于5个K7的多FPGA PCIE总线架构的高性能数据预处理平台

板载FPGA实时处理器&#xff1a;XCKU060-2FFVA15172个QSFP光纤接口&#xff0c;最大支持10Gbps/lane板载DMA控制器&#xff0c;能实现双向DMA高速传输支持x8 PCIE主机接口&#xff0c;系统带宽5GByte/s1个R45自适应千兆以太网口1个FMC子卡扩展接口 基于PCIE总线架构的高性能数据…

c++包管理器

conan conan search&#xff0c;查看网络库 conan profile detect&#xff0c;生成缓存信息conan new cmake_exe/cmake_lib&#xff0c;创建cmakelists.txtconan install .&#xff0c;执行Conanfile.txt中的配置&#xff0c;生成相关的bat文件 项目中配置Conanfile.txt(或者…

【学习笔记】无人机(UAV)在3GPP系统中的增强支持(十一)-无人机服务可用性用例需求

引言 本文是3GPP TR 22.829 V17.1.0技术报告&#xff0c;专注于无人机&#xff08;UAV&#xff09;在3GPP系统中的增强支持。文章提出了多个无人机应用场景&#xff0c;分析了相应的能力要求&#xff0c;并建议了新的服务级别要求和关键性能指标&#xff08;KPIs&#xff09;。…

口袋算法的示例

原理 口袋算法是感知器(Perceptron)算法的一种改进。感知器算法是一种线性分类算法,但在训练数据不是线性可分的情况下,它可能无法收敛,即无法找到一个线性分类器来正确分类所有的训练样本。为了解决这个问题,口袋算法引入了一个"口袋"(Pocket),用来存储迄…

Redis② —— Redis线程模型

1. Redis是单线程吗&#xff1f; 指 接受客户请求 --> 解析请求 --> 进行数据读写操作 --> 发送数据给客户端 这个过程由一个主线程完成redis程序并不是单线程的&#xff0c;在启动时会启动后台进程 2.6之前启动两个后台线程&#xff0c;分别处理关闭文件、AOF刷盘4.…