Next.js与Typeorm打造属于自己的博客系统：从初始化项目开始

2023-09-09 11:51:16

前言

大家好，我是前端小白。最近，我使用Next.js和Typeorm完成了我的第一个全栈项目——博客系统。这是一个非常有趣且有意义的经历，让我学到了很多东西。在本文中，我将分享我在做项目的过程中学习到的一些知识点，以及遇到的那些奇奇怪怪的Bug。

如果你也对全栈开发感兴趣，或者想使用Next.js和Typeorm来构建自己的项目，那么本文非常适合你。我会详细介绍每个步骤，并提供一些有用的建议。

初始化项目

1. 安装必要的依赖项

首先，我们需要安装必要的依赖项。

npm install create-next-app

npm install next

npm install -D typescript

npm install -D @types/react

npm install -D @types/node

npm install -D eslint

npm install -D prettier

2. 创建Next.js项目

接下来，我们使用create-next-app命令来创建Next.js项目。

npx create-next-app blog-system --typescript

3. 安装Typeorm

在项目根目录下，运行以下命令来安装Typeorm。

npm install typeorm

4. 创建数据库

接下来，我们需要创建一个数据库。我使用的是MySQL，但你也可以使用其他数据库。

在你的终端中，运行以下命令来创建一个名为“blog_system”的数据库。

mysql -u root -p

CREATE DATABASE blog_system;

5. 配置Typeorm

在项目根目录下，创建一个名为“ormconfig.json”的文件，并添加以下内容：

{
  "type": "mysql",
  "host": "localhost",
  "port": 3306,
  "username": "root",
  "password": "",
  "database": "blog_system",
  "synchronize": true,
  "logging": false
}

6. 创建实体类

在项目根目录下，创建一个名为“src/entity/Post.ts”的文件，并添加以下内容：

import { Entity, PrimaryGeneratedColumn, Column } from "typeorm";

@Entity()
export class Post {
  @PrimaryGeneratedColumn()
  id: number;

  @Column()
  title: string;

  @Column()
  content: string;
}