next.js搭建博客系统-05-数据库操作

携手创作，共同成长！这是我参与「掘金日新计划 · 8 月更文挑战」的第6天，点击查看活动详情

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

<Button onClick={handleGotoEditorPage}>写文章</Button>

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

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

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

安装

yarn add @uiw/react-md-editor

引入

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 />

定义state表示编辑器的内容

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

添加change事件

<MDEditor value={content} height={1080} onChange={handleContentChange} />

  const handleContentChange = (content: any) => {
    setContent(content);
  };

添加 输入标题 组件

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

\

添加 标签选择 组件

<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>

新增 state 控制 标签

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

添加 选择 标签的 事件

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

新建 标签的 数据表

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,
    },
  });
}