NextJS 介绍

Next.js 是一个用于构建 React 应用程序的 React 框架。它的目标是使 React 应用的开发变得更简单、更灵活。下面是一些 Next.js 的关键特性：

服务器渲染 (SSR): Next.js 支持服务器渲染，这意味着页面可以在服务器上生成，然后再发送到浏览器，有助于提高应用程序的性能和搜索引擎优化（SEO）。

静态生成 (Static Generation): 除了服务器渲染外，Next.js 还支持静态生成，可以在构建时预先生成页面，然后将它们作为静态文件提供，这对于构建性能高效的静态网站非常有用。

自动代码拆分 (Automatic Code Splitting): Next.js 会自动将应用程序的代码拆分成小块，只加载当前页面所需的代码，提高加载速度。

热模块替换 (Hot Module Replacement): 在开发模式下，Next.js 支持热模块替换，允许在运行时更新代码，无需重新加载整个页面。

项目介绍

使用 Next.js+React，实现一个 SSR 服务器渲染的博客项目

环境搭建

技术选型

1. Next.js
2. Mysql
3. React
4. Ant Design
5. typeorm

创建项目

1. 首先在 github 上创建一个项目仓库，比如：nextjs-blog
2. 将 nextjs-blog 仓库使用 git 拉取到本地 git clone xxx.nextjs-blog.git
3. 然后进入项目目录 cd nestjs-blog
4. 接着使用 next.js 提供的脚手架创建项目，这里我们使用 typescript 开发，所以使用 typescript 的模板 yarn create next-app —typescript

配置 eslint

1.安装 lint

pnpm i eslint -D -w

2.初始化

npx eslint --init

3.手动安装其他包

pnpm i -D -w typesript @typescript-eslint/eslint-plugin@latest @typescript-eslint/parser@latest

4.修改 eslint 配置

{
  "env": {
    "browser": true,
    "es2021": true,
    "node": true,
    "jest": true
  },
  "extends": [
    "eslint:recommended",
    "plugin:@typescript-eslint/recommended",
    "prettier",
    "plugin:prettier/recommended"
  ],
  "parser": "@typescript-eslint/parser",
  "parserOptions": {
    "ecmaVersion": "latest",
    "sourceType": "module"
  },
  "plugins": ["@typescript-eslint", "prettier"],
  "rules": {
    "prettier/prettier": "error",
    "no-case-declarations": "off",
    "no-constant-condition": "off",
    "@typescript-eslint/ban-ts-comment": "off",
    "@typescript-eslint/no-unused-vars": "off",
    "@typescript-eslint/no-var-requires": "off",
    "no-unused-vars": "off"
  }
}

5.安装 ts lint

pnpm i -D -w @typescript-eslint/eslint-plugin

配置 prettier

1.安装 prettier

pnpm i -D -w prettier

2.新建.pretterrc.json

{
  "printWidth": 80,
  "tabWidth": 2,
  "useTabs": true,
  "singleQuote": true,
  "semi": true,
  "trailingComma": "none",
  "bracketSpacing": true
}

3.将 pretter 集成到 eslint 中

 pnpm i -D -w eslint-config-prettier eslint-plugin-prettier

4.在 scripts 中增加 lint 命令

"lint": "eslint --ext .ts,.jsx,.tsx --fix --quiet ./packages"

5.安装 eslint pretter 两个 vscode 插件

6.在 vscode settings 中设置 format:pretter 和 on save

检查 commit

1.安装 husky

pnpm i -D -w husky

2.初始化 husky

npx husky install

3.将 lint 增加到 husky 中

npx husky add .husky/pre-commit "pnpm lint "

在 commit 的时候会执行 pnpm lint

检查 commit msg

1.安装包

pnpm i -D -w commitlint @commitlint/cli @commitlint/config-conventional

2.新建.commitlintrc.js

module.exports = {
    extends: ['@commitlint/config-conventional']
};

3.集成到 husky 中

在终端执行下面命令

npx husky add .husky/commit-msg "npx --no-install commitlint -e $HUSKY_GIT_PARAMS"

TypeScript 配置

在根目录新建 tsconfig.json

{
  "compileOnSave": true,
  "include": ["./packages/**/*"],
  "compilerOptions": {
    "target": "ESNext",
    "useDefineForClassFields": true,
    "module": "ESNext",
    "lib": ["ESNext", "DOM"],
    "moduleResolution": "Node",
    "strict": true,
    "sourceMap": true,
    "resolveJsonModule": true,
    "isolatedModules": true,
    "esModuleInterop": true,
    "noEmit": true,
    "noUnusedLocals": false,
    "noUnusedParameters": false,
    "noImplicitReturns": false,
    "skipLibCheck": true,
    "baseUrl": "./packages",
    "paths": {
      "hostConfig": ["./react-dom/src/hostConfig.ts"]
    }
  }
}

这样，我们的项目开发环境就配置好了。

Next.js 路由介绍

看下面这张图：

从上图可以看到

在 pages 目录下来创建文件夹，文件夹的名称就代表路由。俗称约定式路由。现在很多框架都支持约定式路由，比如 Umi 框架。

普通路由

1.比如 pages/index.js，那么这个的路由就是 根路由

2.比如在 pages 下面新建 blog 文件夹，在 blog 文件夹下面新建 index.js，那此时这个文件对应的页面利用就是/blog

嵌套路由

1.在 pages 目录下新建 blog 目录，在 blog 目录下新建 first-post.js，注意此时不是 index.js，那此时的文件夹是嵌套的，那么对应的路由也是嵌套的，路由也是根据嵌套的文件夹的名称而来，所以这个 first-post.js 文件页面对应的路由就是/blog/first-post

动态路由

动态路由在实际业务中非常常见，接下来看下 next.js 中提供的动态路由。

1.在 pages 目录下新建 blog 文件夹，在文件夹下 新建 id.js，这个 id 就表示是动态路由，那展现的路由就是这个样子 /blog/:id ,这个里面的 :id 可以换成任意的路由，例如 /blog/1 ， /blog/2

2.第二种是动态路由在中间，在 pages 目录下新建 id 文件夹，在 id 文件夹下面 创建 setting.js， 那此时的动态路由就是 /:id/setting， :id 就是动态，例如 /1/setting， /2/setting

3.第三种动态路由是 任意匹配的路由，在 pages 目录下新建 post 文件夹，在 post 文件夹下面新建…all.js，此时这个 …all 表现的动态路由就是 /post/ ，这个 就代表任意路由，丽日： /post/2020/id/title

实现 Layout 布局

我们开始实现整体页面的布局。这里来讲解如何实现 Layout 布局，采用上中下的布局。

上中下的布局就是：上方 就是 导航区域，中间是内容区域，下方是 底部区域。

整个系统使用 Antd Design UI 组件库。

我们先安装下 antd design

pnpm install antd

Layout

1. 首先在根目录创建 components 文件夹，这里来放 各个组件。在 compoents 文件夹 新建 layout 文件夹，在 layout 文件夹新建 index.tsx。

mkdir components
cd components
mkdir layout
touch index.tsx

2.在 compoents 文件夹 新建 Navbar 文件夹，在 Navbar 文件夹新建 index.tsx，同时创建 index.module.scss

cd components
mkdir Navbar
cd Navbar
touch index.tsx
touch index.module.scss

3.在 compoents 文件夹 新建 Footer 文件夹，在 Footer 文件夹新建 index.tsx，同时创建 index.module.scss

cd components
mkdir Footer
cd Footer
touch index.tsx
touch index.module.scss

这样先把 Layout，Navbar, Footer 的架子 搭建起来。

然后开始写 Layout 的布局

在 layout/index.tsx 中写入, 中间的内容区域，由 props 的 children 来填充，这样的话 ，就实现了 上中下的布局

import type { NextPage } from 'next';
import Navbar from 'components/Navbar';
import Footer from 'components/Footer';
const Layout: NextPage = ({ children }) => {
  return (
    <div>
      <Navbar />
      <main>{children}</main>
      <Footer />
    </div>
  );
};
export default Layout;

写好上面代码以后，需要再入口文件引入 layout

import Layout from 'components/layout';
import { NextPage } from 'next';
return (
  <Layout>
    <Component />
  </Layout>
);

Navbar

接下来 来开发 上部导航区域

先看下要实现的效果图，如下：这里采用 flex 布局

1. 先把博客系统的名称写下,在 Navbar/index.tsx 文件下

<div className={styles.navbar}>
  <section className={styles.logoArea}>BLOG</section>
</div>

2.然后开始写标签，这几个标签，采用配置的方式，这里我们再 Navbar 文件夹下新建 config.ts 来 存放 这几个导航数据

interfacee NavProps {
    label: string;
    value: string;
}
export const navs: NavProps[] = [
    {
      label: '首页',
      value: '/',
    },
    {
      label: '咨询',
      value: '/info',
    },
    {
      label: '标签',
      value: '/tag',
    },
  ];

3.在 Navbar/index.tsx 拿到 config 中的导航数据，然后遍历渲染出来。

同时引入 next 提供的 link，来进行路由跳转

import Link from 'next/link';
import { navs } from './config';
<section className={styles.linkArea}>
  {navs?.map((nav) => (
    <Link key={nav?.label} href={nav?.value}>
      <a className={pathname === nav?.value ? styles.active : ''}>{nav?.label}</a>
    </Link>
  ))}
</section>;

4.最后再添加两个 写文章 和登录的按钮

<section className={styles.operationArea}>
  <Button onClick={handleGotoEditorPage}>写文章</Button>
  <Button type="primary" onClick={handleLogin}>
    登录
  </Button>
</section>

5.最后整体的样式文件如下：

.navbar {
  height: 60px;
  background-color: #fff;
  border-bottom: 1px solid #f1f1f1;
  display: flex;
  align-items: center;
  justify-content: center;
  .logoArea {
    font-size: 30px;
    font-weight: bolder;
    margin-right: 60px;
  }
  .linkArea {
    a {
      font-size: 18px;
      padding: 0 20px;
      color: #515767;
    }
    .active {
      color: #1e80ff;
    }
  }
  .operationArea {
    margin-left: 150px;
    button {
      margin-right: 20px;
    }
  }
}

这样 导航部分的 初始页面就完成了。

Footer

接下来简单写下 Footer 部分

在 components/Footer/index.tsx 中写入如下代码：

import type { NextPage } from 'next';
import styles from './index.module.scss';
const Footer: NextPage = () => {
  return (
    <div className={styles.footer}>
      <p>博客系统</p>
    </div>
  );
};
export default Footer;

样式文件代码：

.footer {
  text-align: center;
  color: #72777b;
  padding: 20px;
}

这样简单的 footer 部分就完成了

最后看下 这样写下来的效果

登录模块

接下来我们要开发登录模块的开发，首先看下效果图：

登录弹窗

1.首先在 components 创建 Login 文件夹，在 Login 文件夹创建 index.tsx 文件和 index.modules.scss

cd components
mkdir Login
cd Login
touch index.tsx
touch index.module.scss

2.在 Navbar 组件中的 登录按钮 添加点击事件

<Button type="primary" onClick={handleLogin}>
  登录
</Button>

3.定义一个 state 来控制 登录弹窗 是否显示。

const [isShowLogin, setIsShowLogin] = useState(false);

4.将 isShowLogin 当做 props 传入 登录组件

<Login isShowLogin={isShowLogin} />

5.接下来开发登录弹窗的布局代码

return isShow ? (
  <div className={styles.loginArea}>
    <div className={styles.loginBox}>
      <div className={styles.loginTitle}>
        <div>手机号登录</div>
        <div className={styles.close} onClick={handleClose}>
          x
        </div>
      </div>
      <input
        name="phone"
        type="text"
        placeholder="请输入手机号"
        value={form.phone}
        onChange={handleFormChange}
      />
      <div className={styles.verifyCodeArea}>
        <input
          name="verify"
          type="text"
          placeholder="请输入验证码"
          value={form.verify}
          onChange={handleFormChange}
        />
        <span className={styles.verifyCode} onClick={handleGetVerifyCode}>
          {isShowVerifyCode ? <CountDown time={10} onEnd={handleCountDownEnd} /> : '获取验证码'}
        </span>
      </div>
      <div className={styles.loginBtn} onClick={handleLogin}>
        登录
      </div>
      <div className={styles.otherLogin} onClick={handleOAuthGithub}>
        使用 Github 登录
      </div>
      <div className={styles.loginPrivacy}>
        注册登录即表示同意
        <a href="https://moco.imooc.com/privacy.html" target="_blank" rel="noreferrer">
          隐私政策
        </a>
      </div>
    </div>
  </div>
) : null;

6.对应的样式代码如下：

.loginArea {
  position: fixed;
  top: 0;
  left: 0;
  z-index: 1000;
  width: 100vw;
  height: 100vh;
  background-color: rgb(0 0 0 / 30%);
  .loginBox {
    width: 320px;
    height: 320px;
    background-color: #fff;
    position: relative;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    padding: 20px;
    input {
      width: 100%;
      height: 37px;
      margin-bottom: 10px;
      padding: 10px;
      border-radius: 5px;
      border: 1px solid #888;
      outline: none;
    }
    input:focus {
      border: 1px solid #1e80ff;
    }
    .verifyCodeArea {
      position: relative;
      cursor: pointer;
      .verifyCode {
        color: #1e80ff;
        position: absolute;
        right: 20px;
        top: 8px;
        font-size: 14px;
      }
    }
  }
  .loginTitle {
    font-size: 20px;
    font-weight: bold;
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin-bottom: 20px;
    .close {
      color: #888;
      cursor: pointer;
    }
  }
  .loginBtn {
    height: 40px;
    line-height: 40px;
    border-radius: 5px;
    margin-top: 15px;
    background-color: #007fff;
    color: #fff;
    text-align: center;
    cursor: pointer;
  }
  .otherLogin {
    margin-top: 15px;
    font-size: 14px;
    color: #1e80ff;
    cursor: pointer;
  }
  .loginPrivacy {
    margin-top: 10px;
    color: #333;
    font-size: 14px;
    a {
      color: #1e80ff;
    }
  }
}

接下来 编写 点击逻辑

1.首先 当点击关闭的时候，把弹窗关闭

使用 props 中的 onClose 方法，onClose 方法在父组件 Navbar 通过 isShowLogin 控制隐藏

// Login/index.tsx
const { onClose } = props;
const handleClose = () => {
  onClose && onClose();
};

在入口引入

<Login isShow={isShowLogin} onClose={handleClose} />;
const handleClose = () => {
  setIsShowLogin(false);
};

接下来开始编写 获取验证码的 逻辑

获取验证码 需要提前编写一个倒计时的组件

接下来开始编写 倒计时组件

cd components
mkdir CountDown
cd CountDown
touch index.tsx
touch index.module.scss

在 index.tsx 中编写如下代码：

思路是: 提供一个 time，表示倒计时的时间。提供一个 onEnd 回调函数，表示当倒计时结束的时候，进行一些回调处理。

这里需要注意下, 当 time 时间为 0 的时候，需要主动 调 一些 onEnd，表示结束。

import { useState, useEffect } from 'react';
import styles from './index.module.scss';
interface IProps {
  time: number;
  onEnd: Function;
}
const CountDown = (props: IProps) => {
  const { time, onEnd } = props;
  const [count, setCount] = useState(time || 60);
  useEffect(() => {
    const id = setInterval(() => {
      setCount((count) => {
        if (count === 0) {
          clearInterval(id);
          onEnd && onEnd();
          return count;
        }
        return count - 1;
      });
    }, 1000);
    return () => {
      clearInterval(id);
    };
  }, [time, onEnd]);
  return <div className={styles.countDown}>{count}</div>;
};
export default CountDown;

这样完成了倒计时组件的开发。接着编写获取验证码的逻辑。

1.首先 通过 isShowVerifyCode 控制 显示 验证码文字 还是倒计时

<span className={styles.verifyCode} onClick={handleGetVerifyCode}>
  {isShowVerifyCode ? <CountDown time={10} onEnd={handleCountDownEnd} /> : '获取验证码'}
</span>

2.接着当点击 获取验证码的时候，校验一下 手机号是否输入， 如果手机号没有输入，提示用户输入手机号

<span className={styles.verifyCode} onClick={handleGetVerifyCode}>
  获取验证码
</span>;
const handleGetVerifyCode = () => {
  if (!form?.phone) {
    message.warning('请输入手机号');
    return;
  }
};

3.如果 手机号输入，则开始 调 获取验证码的接口

const handleGetVerifyCode = () => {
  if (!form?.phone) {
    message.warning('请输入手机号');
    return;
  }
  request
    .post('/api/user/sendVerifyCode', {
      to: form?.phone,
      templateId: 1,
    })
    .then((res: any) => {
      if (res?.code === 0) {
        setIsShowVerifyCode(true);
      } else {
        message.error(res?.msg || '未知错误');
      }
    });
};

获取验证码

接下来开始编辑 获取 验证码 接口的逻辑

这里采用 云 的 验证码接口

1.根据 云的 接入文档，拼成 url

const session: ISession = req.session;
const { to = '', templateId = '1' } = req.body;
const AppId = 'xxx'; // 接入自己的AppId
const AccountId = 'xxx'; // 接入自己的AccountId
const AuthToken = 'xxx'; // 接入自己的AuthToken
const NowDate = format(new Date(), 'yyyyMMddHHmmss');
const SigParameter = md5(`${AccountId}${AuthToken}${NowDate}`);
const Authorization = encode(`${AccountId}:${NowDate}`);
const verifyCode = Math.floor(Math.random() * (9999 - 1000)) + 1000;
const expireMinute = '5';
const url = `https://xxx.com:8883/2013-12-26/Accounts/${AccountId}/SMS/TemplateSMS?sig=${SigParameter}`;

2.使用 request 调用接口，参数 to 代表手机号，templateId 代表是 通过手机号进行登录，appId 和 datas 按文档传入

const response = await request.post(
  url,
  {
    to,
    templateId,
    appId: AppId,
    datas: [verifyCode, expireMinute],
  },
  {
    headers: {
      Authorization,
    },
  },
);

3.获取 response，根据 response 进行处理。当接口调用成功的时候，将验证码保存到 session 中，同时返回 200 状态码和成功的数据，当失败的时候，返回失败的原因

const { statusCode, templateSMS, statusMsg } = response as any;
if (statusCode === '000000') {
  session.verifyCode = verifyCode;
  await session.save();
  res.status(200).json({
    code: 0,
    msg: statusMsg,
    data: {
      templateSMS,
    },
  });
} else {
  res.status(200).json({
    code: statusCode,
    msg: statusMsg,
  });
}

4.当验证码调成功的时候，显示 倒计时

request
  .post('/api/user/sendVerifyCode', {
    to: form?.phone,
    templateId: 1,
  })
  .then((res: any) => {
    if (res?.code === 0) {
      setIsShowVerifyCode(true);
    } else {
      message.error(res?.msg || '未知错误');
    }
  });

效果如下：

开始倒计时，并成功收到验证码

登录逻辑

当成功获取验证码，然后开始进行登录

在用户输入手机号和验证码，点击登录按钮的时候，去调用登录的接口

接口为：/api/user/login

传入表单数据，当成功的时候 将 用户的信息 存入到 store 中，并且调用 onClose 将弹窗关闭

const handleLogin = () => {
  request
    .post('/api/user/login', {
      ...form,
      identity_type: 'phone',
    })
    .then((res: any) => {
      if (res?.code === 0) {
        // 登录成功
        store.user.setUserInfo(res?.data);
        onClose && onClose();
      } else {
        message.error(res?.msg || '未知错误');
      }
    });
};

接下来开始编写 登录接口的逻辑

1.首先从 session 中获取验证码

const session: ISession = req.session;

2.从 body 中获取传入的验证码

const { phone = '', verify = '', identity_type = 'phone' } = req.body;

3.比较两个验证码是否相等，如果不相等，则返回 验证码错误

4.如果两个验证码相等，则去用户表中查找，判断用户是否存在，如果用户不存在，则表示注册，如果存在，则表示登录。

// 验证码正确，在 user_auths 表中查找 identity_type 是否有记录
const userAuth = await userAuthRepo.findOne(
  {
    identity_type,
    identifier: phone,
  },
  {
    relations: ['user'],
  },
);

5.当用户存在的时候，从数据库中读取除用户信息，存入 session 和 cookie 中，并将用户信息返回

// 已存在的用户
const user = userAuth.user;
const { id, nickname, avatar } = user;
session.userId = id;
session.nickname = nickname;
session.avatar = avatar;
await session.save();
setCookie(cookies, { id, nickname, avatar });
res?.status(200).json({
  code: 0,
  msg: '登录成功',
  data: {
    userId: id,
    nickname,
    avatar,
  },
});

6.当用户不存在的时候，将输入的信息 存入到数据库，session 和 cookie 中，表示用户注册，返回用户信息

// 新用户，自动注册
const user = new User();
user.nickname = `用户_${Math.floor(Math.random() * 10000)}`;
user.avatar = '/images/avatar.jpg';
user.job = '暂无';
user.introduce = '暂无';
const userAuth = new UserAuth();
userAuth.identifier = phone;
userAuth.identity_type = identity_type;
userAuth.credential = session.verifyCode;
userAuth.user = user;
const resUserAuth = await userAuthRepo.save(userAuth);
const {
  user: { id, nickname, avatar },
} = resUserAuth;
session.userId = id;
session.nickname = nickname;
session.avatar = avatar;
await session.save();
setCookie(cookies, { id, nickname, avatar });
res?.status(200).json({
  code: 0,
  msg: '登录成功',
  data: {
    userId: id,
    nickname,
    avatar,
  },
});

点击登录，即可登录成功。

数据库操作

我们这里使用 typeorm 数据库

首先在根目录创建 db 文件夹，在 db 文件建创建 entity 文件夹，entity 存放各个模块的表模型

在 db 文件夹创建 index.ts，用来导出各个模块的表模型

新建 db/entity/user.ts

1.Entity 指定数据库中的哪个数据表，这里指定 users 数据表

import { Entity, BaseEntity, PrimaryGeneratedColumn, Column } from 'typeorm';
@Entity({ name: 'users' })
export class User extends BaseEntity {
  @PrimaryGeneratedColumn()
  readonly id!: number;
  @Column()
  nickname!: string;
  @Column()
  avatar!: string;
  @Column()
  job!: string;
  @Column()
  introduce!: string;
}

2.使用 typeorm 链接 mysql

3.从 typeorm 引入

import { Connection, getConnection, createConnection } from 'typeorm';

4.引入数据表

import { User, UserAuth, Article, Comment, Tag } from './entity/index';

5.链接 mysql 数据库

import 'reflect-metadata';
import { Connection, getConnection, createConnection } from 'typeorm';
import { User, UserAuth, Article, Comment, Tag } from './entity/index';
const host = process.env.DATABASE_HOST;
const port = Number(process.env.DATABASE_PORT);
const username = process.env.DATABASE_USERNAME;
const password = process.env.DATABASE_PASSWORD;
const database = process.env.DATABASE_NAME;
let connectionReadyPromise: Promise<Connection> | null = null;
console.log('username', username)
export const prepareConnection = () => {
  if (!connectionReadyPromise) {
    connectionReadyPromise = (async () => {
      try {
        const staleConnection = getConnection();
        await staleConnection.close();
      } catch (error) {
        console.log(error);
      }
      const connection = await createConnection({
        type: 'mysql',
        host,
        port,
        username,
        password,
        database,
        entities: [User, UserAuth, Article, Comment, Tag],
        synchronize: false,
        logging: true,
      },6.
      return connection;
    })();
  }
  return connectionReadyPromise;
};

6.在接口侧 引入数据库

import { prepareConnection } from 'db/index';
const db = await prepareConnection();

7.引入数据表，使用 db 获取 指定的数据表，userAuthRepo 来操作 mysql

import { User, UserAuth } from 'db/entity/index';
const db = await prepareConnection();
const userAuthRepo = db.getRepository(UserAuth);

8.从 users 表查询数据

const userAuth = await userAuthRepo.findOne(
  {
    identity_type,
    identifier: phone,
  },
  {
    relations: ['user'],
  },
);

9.如果 userAuth 有数据，则表示登录，没有数据则表示注册

10.如果是登录，从 user 中获取当前用户的信息，将这些信息一方面存入 session，一方面存入 cookie，最后返回 200 状态码，同时将用户信息返回

11.如果是注册，将这些输入的用户信息，存入 users 表中，同时将这些信息存入到 session 和 cookie 中，同时返回 200 状态码和这些用户信息

if (userAuth) {
  // 已存在的用户
  const user = userAuth.user;
  const { id, nickname, avatar } = user;
  session.userId = id;
  session.nickname = nickname;
  session.avatar = avatar;
  await session.save();
  setCookie(cookies, { id, nickname, avatar });
  res?.status(200).json({
    code: 0,
    msg: '登录成功',
    data: {
      userId: id,
      nickname,
      avatar,
    },
  });
} else {
  // 新用户，自动注册
  const user = new User();
  user.nickname = `用户_${Math.floor(Math.random() * 10000)}`;
  user.avatar = '/images/avatar.jpg';
  user.job = '暂无';
  user.introduce = '暂无';
  const userAuth = new UserAuth();
  userAuth.identifier = phone;
  userAuth.identity_type = identity_type;
  userAuth.credential = session.verifyCode;
  userAuth.user = user;
  const resUserAuth = await userAuthRepo.save(userAuth);
  const {
    user: { id, nickname, avatar },
  } = resUserAuth;
  session.userId = id;
  session.nickname = nickname;
  session.avatar = avatar;
  await session.save();
  setCookie(cookies, { id, nickname, avatar });
  res?.status(200).json({
    code: 0,
    msg: '登录成功',
    data: {
      userId: id,
      nickname,
      avatar,
    },
  });
}

发布文章

1.当点击 写文章的时候，先判断用户是否登录，如果没有登录，则提示用户先登录，如果已经登录，则跳到新建文章页面

<Button onClick={handleGotoEditorPage}>写文章</Button>;
const handleGotoEditorPage = () => {
  if (userId) {
    push('/editor/new');
  } else {
    message.warning('请先登录');
  }
};

2.在 pages 目录下创建 editor/new.tsx，表示 新建文章的页面

3.首先编写 markdown 编辑器，这里使用 开源的一款 markdown 编辑器，@uiw/react-md-editor

安装

yarn add @uiw/react-md-editor

4.引入编辑器

const MDEditor = dynamic(() => import('@uiw/react-md-editor'), { ssr: false });
import '@uiw/react-md-editor/markdown-editor.css';
import '@uiw/react-markdown-preview/markdown.css';
<MDEditor />;

5.定义 state 表示编辑器的内容

const [content, setContent] = useState('');
<MDEditor value={content} height={1080} />;

6.添加 change 事件

<MDEditor value={content} height={1080} onChange={handleContentChange} />;
const handleContentChange = (content: any) => {
  setContent(content);
};

7.添加 输入标题 组件

const [title, setTitle] = useState('');
const handleTitleChange = (event: ChangeEvent<HTMLInputElement>) => {
  setTitle(event?.target?.value);
};
<Input
  className={styles.title}
  placeholder="请输入文章标题"
  value={title}
  onChange={handleTitleChange}
/>;

8.添加 标签选择 组件

<Select
  className={styles.tag}
  mode="multiple"
  allowClear
  placeholder="请选择标签"
  onChange={handleSelectTag}
>
  {allTags?.map((tag: any) => (
    <Select.Option key={tag?.id} value={tag?.id}>
      {tag?.title}
    </Select.Option>
  ))}
</Select>

9.新增 state 控制 标签

const [allTags, setAllTags] = useState([]);

10.添加 选择 标签的 事件

const handleSelectTag = (value: []) => {
  setTagIds(value);
};

11.新建 标签的 数据表

import { Entity, BaseEntity, PrimaryGeneratedColumn, Column, ManyToMany, JoinTable } from 'typeorm';
import { User } from './user';
import { Article } from './article';
@Entity({ name: 'tags' })
export class Tag extends BaseEntity {
  @PrimaryGeneratedColumn()
  readonly id!: number;
  @Column()
  title!: string;
  @Column()
  icon!: string;
  @Column()
  follow_count!: number;
  @Column()
  article_count!: number;
  @ManyToMany(() => User, {
    cascade: true,
  })
  @JoinTable({
    name: 'tags_users_rel',
    joinColumn: {
      name: 'tag_id',
    },
    inverseJoinColumn: {
      name: 'user_id',
    },
  })
  users!: User[];
  @ManyToMany(() => Article, (article) => article.tags)
  @JoinTable({
    name: 'articles_tags_rel',
    joinColumn: {
      name: 'tag_id',
    },
    inverseJoinColumn: {
      name: 'article_id',
    },
  })
  articles!: Article[];
}

新增 获取所有标签的接口，新建 api/tag/get.ts

1.从 session 中获取用户信息

2.从 tag 表 查询 所有 标签数据

3.关联 users 表，根据 users 表，查询所有标签，返回 allTags

4.关联 User 表，根据当前登录用户的信息，查询该用户 关注的标签，返回 followTags

import { NextApiRequest, NextApiResponse } from 'next';
import { withIronSessionApiRoute } from 'iron-session/next';
import { ironOptions } from 'config/index';
import { ISession } from 'pages/api/index';
import { prepareConnection } from 'db/index';
import { Tag } from 'db/entity/index';
export default withIronSessionApiRoute(get, ironOptions);
async function get(req: NextApiRequest, res: NextApiResponse) {
  const session: ISession = req.session;
  const { userId = 0 } = session;
  const db = await prepareConnection();
  const tagRepo = db.getRepository(Tag);
  const followTags = await tagRepo.find({
    relations: ['users'],
    where: (qb: any) => {
      qb.where('user_id = :id', {
        id: Number(userId),
      });
    },
  });
  const allTags = await tagRepo.find({
    relations: ['users'],
  });
  res?.status(200)?.json({
    code: 0,
    msg: '',
    data: {
      followTags,
      allTags,
    },
  });
}

5.在 editor/new.tsx 中 调 获取 标签的接口拿到标签数据

useEffect(() => {
  request.get('/api/tag/get').then((res: any) => {
    if (res?.code === 0) {
      setAllTags(res?.data?.allTags || []);
    }
  });
}, []);

最后渲染 所有标签

<Select
  className={styles.tag}
  mode="multiple"
  allowClear
  placeholder="请选择标签"
  onChange={handleSelectTag}
>
  {allTags?.map((tag: any) => (
    <Select.Option key={tag?.id} value={tag?.id}>
      {tag?.title}
    </Select.Option>
  ))}
</Select>

这样页面就出来了，也获取到了 markdown，标签，标题的数据

发布文章

1.先判断是否输入标题，如果没有输入标题，就提示用户输入标题

2.然后调 发布文章的接口，参数就是 标题，markdown 数据，标签

3.当接口调取成功的时候，提示发布成功，并跳到用户中心 的页面

4.当接口调取失败的时候，提示发布失败

const handlePublish = () => {
  if (!title) {
    message.warning('请输入文章标题');
    return;
  }
  request
    .post('/api/article/publish', {
      title,
      content,
      tagIds,
    })
    .then((res: any) => {
      if (res?.code === 0) {
        userId ? push(`/user/${userId}`) : push('/');
        message.success('发布成功');
      } else {
        message.error(res?.msg || '发布失败');
      }
    });
};

现在写下 发布文章的接口

新建 api/artice/publish.ts

1.引入数据库和 user, tag, article 三张数据表

import { prepareConnection } from 'db/index';
import { User, Article, Tag } from 'db/entity/index';

2.链接三个数据表

const db = await prepareConnection();
const userRepo = db.getRepository(User);
const articleRepo = db.getRepository(Article);
const tagRepo = db.getRepository(Tag);

3.从 req.body 中获取传入的参数

const { title = '', content = '', tagIds = [] } = req.body;

4.从 session 中获取用户信息

const session: ISession = req.session;

5.根据 session 从 user 表中查询当前用户信息

const user = await userRepo.findOne({
  id: session.userId,
});

6.根据传入的标签，获取所有的标签

const tags = await tagRepo.find({
  where: tagIds?.map((tagId: number) => ({ id: tagId })),
});

7.将传入的数据 存入到 article 表中, 如果有用户信息，将用户信息也存入表，并且标签数量增加

const article = new Article();
article.title = title;
article.content = content;
article.create_time = new Date();
article.update_time = new Date();
article.is_delete = 0;
article.views = 0;
if (user) {
  article.user = user;
}
if (tags) {
  const newTags = tags?.map((tag) => {
    tag.article_count = tag?.article_count + 1;
    return tag;
  });
  article.tags = newTags;
}
const resArticle = await articleRepo.save(article);
if (resArticle) {
  res.status(200).json({ data: resArticle, code: 0, msg: '发布成功' });
} else {
  res.status(200).json({ ...EXCEPTION_ARTICLE.PUBLISH_FAILED });
}

这样就完成了文章发布

SSR原理

服务端渲染react代码页面

首先创建 ssr-react目录，进入ssr-react目录，初始化一个npm项目

mkdir ssr-react
cd ssr-react
npm init -y

在根目录创建src文件夹，在src文件夹下创建server.js
采用node的一个框架 express来写。

首先安装express

yarn add express

接下来 用express写一个最简单的服务

const express = require('express');
const app = express();
const port = process.env.port || 3000;
app.get('*', (req, res) => {
    res.writeHead(200,{
        'content-type': 'text/html;charset=utf8'
    })
    res.end('你好ssr')
})
app.listen(port, () => {
    console.log('http://localhost:3000')
})

写完以后运行 node src/server.js就能在http://localhost:3000 看到 页面上的输入

因为要做服务端渲染，要在server.js中引入React等前端的包，也就是import，但是 node不认识 import
这个时候我们使用webpack来让node认识import

在根目录创建config文件夹，在config文件夹创建webpack.server.js

const path = require('path')
const webpackExternals = require('webpack-node-externals')
module.exports = {
    target: 'node',
    mode: process.env.NODE_ENV === 'production' ? 'production': 'development',
    entry: path.resolve(__dirname,'../src/server.js'),
    output: {
        path: path.resolve(__dirname,'../dist'),
        filename: 'bundle_server.js'
    },
    module: {
        rules: [
            {
                test: /\.js$/,
                loader: 'babel-loader',
                exclude: '/node_modules/'
            }
        ]
    },
    externals: [webpackExternals()] // 不会把node_module中的源码打包
}

这里同时使用了webpack-node-externals这个插件，这个插件功能是 在webpack打包的时候，不打包node_modules里面的源码。

为了在node中适配react和ES6的高级语法，我们需要使用babel来编译，安装babel插件

yarn add @babel/core @babel/preset-env "@babel/preset-react babel-loader

同时在根目录创建.babelrc文件

{
    "presets": [
        "@babel/preset-react",
        "@babel/preset-env"
    ]
}

接着编写下scripts命令

"scripts": {
    "webpack:server": "webpack --config ./config/webpack.server.js --watch",
    "webpack:start": "nodemon --watch dist --exec node dist/bundle_server.js",
    "dev": "npm-run-all --parallel webpack:*"
  },

1.webpack:server 这个命令来打包 入口文件 server.js
2.webpack:start 这个命令来监听打包后的 bundle_server.js
3.dev 这个命令，使用npm-run-all第三方库 来监听所有的命令

接下来开始，写react组件，在node中进行渲染

首先在src目录下创建Home和Person两个组件

// src/pages/Home.js
import React from 'react';
const Home = () => {
    return <div>home</div>
}
export default Home;

// src/pages/Person.js
import React from 'react';
const Person = () => {
    return <div>Person</div>
}
export default Person;

然后开始编写路由，对应的查找这两个组件
在pages目录下创建routes.js文件

import React from 'react';
import { Routes, Route, Link } from 'react-router-dom'
import Home from './pages/Home';
import Person from './pages/Person';
const RoutesList = () => {
    return (
        <div>
            <ul>
                <li>
                    <Link to='/'>首页</Link>
                </li>
                <li>
                    <Link to='/person'>个人中心</Link>
                </li>
            </ul>
            <Routes>
                <Route exact path='/' element={<Home />} />
                <Route exact path='/person' element={<Person />} />
            </Routes>
        </div>
    )
}
export default RoutesList;

最后在server.js中编写 react代码，能够让react代码在node中渲染

1.react-dom库中有个server库，就是react-dom/server，来专门在node中渲染react
2.在react-router-dom下也有个server库，就是react-router-dom/server，来渲染react路由

首先引入这两个库，以及路由文件

import React from 'react';
import ReactDOMServer from 'react-dom/server';
import { StaticRouter } from 'react-router-dom/server'
import Routes from './routes'

然后通过ReactDOMServer中的renderToString来渲染react代码，而路由文件使用StaticRouter进行包裹，
代码如下：

const content = ReactDOMServer.renderToString(
        <StaticRouter location={req.url}>
            <Routes />
        </StaticRouter>
    )

最后将 content 写成 html的格式，进行输出

const html = `
        <html>
            <head></head>
            <body>
                <div id="root">${content}</div>
            </body>
        </html>
    `
    res.writeHead(200,{
        'content-type': 'text/html;charset=utf8'
    })
    res.end(html)

看下现在的效果
当切换的首页的路由时：

当切换到个人中心的路由时：

前端注水：

比如在 Home 组件中 添加一个点击事件

import React from 'react';
const Home = () => {
    const handleClick = () => {
        console.log('click')
    }
    return <div>home
        <button onClick={handleClick}>点击</button>
    </div>
}
export default Home;