从0到1 | Change The World

一个新时代的开端

在经过了许多摧残（版本不同，中国用不了，原来是免费的现在要收费了）之后，我下定决心直接开始从头上线一个网站，一定在一个月之内完成（我的数据库免费试用只有一个月…）没错！我要一步一步记录下我的全部思路，直到我完成这个project，我打算使用Next.js开发，然后部署到vercel上，数据库和网页制作则是这次的学习重点。

少时须知凌云志，曾许人间第一流。

环境配置

安装Nextjs

在命令行中输入命令npx create-next-app@latest 名字，之后的选项自行填写完成。

（现在最新的Nextjs安装的是React19，可能会产生一些依赖问题，如果没有必要使用，则回退到React18即可）
新建public文件夹

用于存放公共的图片，字体等资源
安装shadcn

shdcn是一个UI库，可以帮助我们加速开发，输入命令

npx shadcn@latest init
新建components文件夹

用于存放公共的组件之类
调整globals.css文件

我们在代码中添加部分代码，用于保证例如h-full生效

(现在好像不需要也可以了)
1
2
3
4
5
html,
body,
:root {
height: 100%;
}
6.（如果需要）调整.eslintrc.json

npm install --save-dev eslint-config-prettier

然后文件中
1
2
3
4
5
6
7
{
"extends": ["next", "prettier"],
"rules": {
"react/no-unescaped-entities": "off",
"@next/next/no-page-custom-font": "off"
}
}
具体请查看Nextjs文档：https://nextjs.org/docs/basic-features/eslint#disabling-rules，

QAQ取消ESlint无聊的警告信息和any,var检查
1
2
3
4
5
"rules": {
"@typescript-eslint/no-unused-vars": "off",
"@typescript-eslint/no-explicit-any": "off",
"no-var": "off"
}

基本配置

在layout.tsx文件中可以调整一下标题和描述以及favicon等基本信息。

在根目录下新建一个config文件夹，创建一个site.ts文件

export const siteConfig = {
  name: "你好,明天",
  description: "每个平凡不起眼的日常都是接连不断产生的奇迹",
};

返回layout.tsx文件，调整配置

export const metadata: Metadata = {
  title: {
    default: siteConfig.name,
    template: `%s | ${siteConfig.name}`
  },
  description: siteConfig.description,
  icons: [
    {
      url: "/logo.svg",
      href: "/logo.svg",
    }
  ]
};

（PS：这里有个小知识）在 Next.js 中，url 属性可以直接使用 / 前缀，表示从项目的 public 目录根路径加载资源。

开发初始页面

因为要制作响应式的网站，所以需要关注和了解如何使用tailwindcss中配置好的属性。

对于屏幕大小，Tailwind CSS 提供了以下断点：

sm:：小屏幕（640px及以上）
md:：中等屏幕（768px及以上）
lg:：大屏幕（1024px及以上）
xl:：超大屏幕（1280px及以上）
2xl:：超超大屏幕（1536px及以上）

使用这些前缀可以针对不同屏幕大小应用样式，比如 md:bg-blue-500 表示在中等屏幕及以上时背景色为蓝色。

如何引入字体

下面是一个简单的例子

import localFont from "next/font/local";
import { cn } from "@/lib/utils";

const headingFont = localFont({
  src: "../public/fonts/GeistMonoVF.woff",
});

<p className={cn("text-lg text-neutral-700 pb-1 font-semibold",
          headingFont.className
        )}>
          Taskify
        </p>

如何使用布局和页面

在app路由下的文件夹会被作为路由

其中，layout.tsx作为布局使用，而page.tsx作为页面使用

下面给出一个简单的案例

const HomeLayout = ({
  children
} : {children : React.ReactNode}) => {
  return (
    <div className="h-full bg-neutral-800">
      <SnowFallLayout />
      <Navbar />
      <main >
        {children}
      </main>
      <Footer />
    </div>
  );
};

如何连接腾讯云数据库

使用.env文件和dotenv包来存储和加载环境变量，可以保护敏感信息

安装dotenv包npm install dotenv

在根目录下创建.env存储环境变量

DB_HOST=""
DB_PORT=""
DB_USER=""
DB_PASSWORD=""
DB_NAME=""

在根目录下创建db.js文件

import mysql from 'mysql2';
import dotenv from 'dotenv';

dotenv.config();

const connection = mysql.createConnection({
  host: process.env.DB_HOST, // 使用公共主机名
  port: process.env.DB_PORT, // 端口号
  user: process.env.DB_USER,
  password: process.env.DB_PASSWORD,
  database: process.env.DB_NAME,
});


connection.connect((err) => {
  if (err) {
    console.error('Database connection failed: ' + err.stack);
    return;
  }
  console.log('Connected to database.');
});

export default connection;

之后直接引入使用即可，下面给出一个简单的例子

import db from "../../../db.js";

db.query('SELECT * FROM table_name', (err, results) => {
    if (err) throw err;
    console.log(results);
  });

（注意，这个例子使用的是腾讯云，记得开放外网地址端口，登录腾讯云的DMS操作系统，建立好自己的数据库，之后再连接）

移动端处理方式

众所周知，在电脑上有hover的操作，而手机上没有，所以会造成许多尴尬的情况。这个时候我们就需要对的移动端进行特殊处理

const [isMobile, setIsMobile] = useState(false);

  useEffect(() => {
    const handleResize = () => {
      setIsMobile(window.innerWidth < 768);
    };
    handleResize(); // 初始化检查
    window.addEventListener('resize', handleResize);
    return () => window.removeEventListener('resize', handleResize);
  }, []);

使用如上代码，对用户的屏幕大小进行判断，从而得到isMobile的属性值来使用

数据库的进一步操作

前面我们已经成功地连接上了数据库，为了更好地处理需求，我们需要进一步改进使用方法。

（让我们看看聪明的AI大人是怎么说的）

创建线程池的作用

线程池是一个预先创建的连接或线程集合，用于管理和复用资源。创建线程池的主要作用包括：

提高性能：
- 线程池允许应用程序重用已创建的连接，而不必在每次数据库请求时都建立新连接。这显著减少了连接建立和销毁的开销。
资源管理：
- 通过限制同时活动的连接数量，线程池可以帮助管理数据库资源，防止因连接数过多而导致的资源耗尽。
提高响应速度：
- 由于线程池中的连接已被创建并保持活动状态，应用程序可以更快地响应请求，因为它不需要等待连接的建立。
避免连接泄漏：
- 使用连接池可以有效减少连接未关闭或连接泄漏的问题，因为连接池会管理连接的生命周期。

何时创建线程池

你应该在以下情况下考虑创建线程池：

高并发场景：
- 当你的应用需要处理大量并发请求时，使用线程池可以帮助更好地管理数据库连接。
频繁的数据库操作：
- 如果应用程序频繁地进行数据库操作（如 Web 应用），使用连接池会显著提高性能。
应用的可扩展性：
- 如果你预见到应用需要扩展到更多用户或请求，使用线程池将使系统更具可扩展性和灵活性。
长期运行的应用：
- 对于需要长时间运行的服务（如 REST API 或微服务），线程池是理想的选择，因为它可以有效管理资源并减少开销。

示例：使用连接池

（因为我突然发现还得使用例如Express服务器来处理，所以暂时这个看起来更复杂的线程池就先放一放先吧。。我已经昏头了——不对啊，我都用Nextjs了我为什么还要用express）

学习中ing

useFormState 是一个用于管理表单状态的 React Hook，通常与 Server Actions 一起使用，以处理和跟踪表单数据的变化

Suspense 是一个强大的工具，可以使异步加载变得更加优雅。它能够帮助开发者管理加载状态，并在用户等待数据时提供即时反馈。

使用prisma

经过文档阅读和参考，暂定使用prisma进行数据管理使用（下面这些去看官方文档好些）

npm install prisma --save-dev

npx prisma

npx prisma init

在schema.prisma文件中放入

generator client {
  provider = "prisma-client-js"
}

datasource db {
  provider = "mysql"
  url      = env("DATABASE_URL")
}

在lib文件夹中创建db.ts

import { PrismaClient } from "@prisma/client";

declare global {
  var prisma: PrismaClient | undefined;
};

export const db = globalThis.prisma || new PrismaClient();

if(process.env.NODE_ENV !== "production") globalThis.prisma = db;
//这里和官方文档不一样，佬说因为Nextjs的热加载，所以这样写

之后在schema.prisma文件中创建数据model（这里前面还可以创建其它文件存放sql语句以及推送sql语句转换成model，具体请查看官方文档）

打开控制台输入npm install @prisma/client

输入npx prisma generate

再npx prisma db push

可以使用npx prisma studio打开一个可视化数据库界面

……自己看文档吧，太复杂了hh

如何上传到github

（初始化仓库等内容略）

默认情况下会使用直接HTTPS连接

如果直接上传成功了，那…挺好的。

如果 HTTPS 连接不稳定，你可以考虑使用 SSH 方式连接 GitHub。以下是转换为 SSH 的步骤：

生成 SSH 密钥（如果你还没有，这里请注意，ssh密钥可以有好几个，也可以全部仓库都使用一个，我是全部仓库都使用一个，如果你为了安全性考虑可以生成多个qaq虽然不太可能有风险就是了）：

1	ssh-keygen -t rsa -b 4096 -C "your_email@example.com"

按照提示生成密钥，通常会保存在 ~/.ssh/id_rsa。

1. 启动 SSH Agent

在 Windows PowerShell 中，运行以下命令来启动 SSH agent：

1	Start-Service ssh-agent

如果你在运行此命令时遇到 “unable to start ssh-agent service, error : 1058” 错误，可能是因为 SSH agent 服务未启用。你可以按照以下步骤启用它：

启用 SSH Agent 服务：
1. 按 Win + R 键，输入 services.msc，然后按 Enter。
2. 在服务窗口中，找到 OpenSSH Authentication Agent（或类似名称）。
3. 右键点击它，选择属性。
4. 将 启动类型 更改为自动，然后点击启动按钮。
5. 点击确定保存更改。

2. 添加 SSH 密钥

SSH agent 启动后，可以使用以下命令添加你的 SSH 密钥：

1	ssh-add C:\Users\wood\.ssh\id_rsa

如果你没有收到错误提示，则表示密钥已成功添加。

3. 确认 SSH 密钥已添加

可以使用以下命令查看已添加的 SSH 密钥：

1	ssh-add -l

4.将公钥添加到 GitHub

登录你的 GitHub 账户。
前往 Settings（设置）> SSH and GPG keys。
点击 New SSH key。
在 Title 中输入一个描述（例如 “My Laptop SSH Key”），然后在 Key 部分粘贴你复制的公钥。（这里的公钥在C:\Users\wood\.ssh\id_rsa，也可能叫pub）
点击 Add SSH key 保存。

5. 更新远程仓库 URL（如有必要）

默认使用的是HTTPS的地址，需要更改到github仓库那里找到SSH地址，然后按下面的示例更新即可

如果你还没有更新 GitHub 远程仓库的 URL，可以运行：

1	git remote set-url origin git@github.com:Wood1208/Trello-clone.git

6. 尝试推送代码

这里一般使用添加修改

git add .

使用提交你的commit信息

1	git commit -m ""

最后，尝试再次推送你的代码：

1	git push -u origin main