使用 NestJS 构建快速且可定制的管理面板。

所有描述的步骤都在这个repo中。

简介

NestJS是一个用于构建高效、可扩展的 Node.js 服务器端应用程序的框架。使用nestjsx/crud，我们可以在此框架上快速轻松地添加 CRUD 功能。

在本文中，我们将准备一个简单的job-posting应用程序。我们还将使用refine框架来构建管理面板。该项目将包含两部分：api 和 admin。

NestJS Rest Api

要开始使用 NestJS，您应该安装 node（>= 10.13.0，v13 除外）和npm。

创建项目文件夹



mkdir job-posting-app
cd job-posting-app

使用Nest CLI设置新项目非常简单。安装 npm 后，您可以在 OS 终端中使用以下命令创建一个新的 Nest 项目：



npm i -g @nestjs/cli
nest new api

TypeORM无疑是 Node.js 世界中最为成熟的 ORM。由于它采用 TypeScript 编写，因此与 Nest 框架配合得非常好。我选择了 MySQL 作为数据库。TypeORM 支持多种数据库（MySQL、MariaDB、Postgres 等）。

要开始使用这个库，我们必须安装所有必需的依赖项：



npm install --save @nestjs/typeorm @nestjs/config typeorm mysql2

创建一个.env.example文件。在这里我们将保存数据库信息。
为 MySQL创建并配置docker-compose文件。
为迁移创建一个ormconfig.ts文件。
将以下脚本添加到package.json迁移文件中。```bash

“typeorm”：“ts-node -r tsconfig-paths/register ./node_modules/typeorm/cli.js”，
“db:migration:generate”：“npm 运行 typeorm --migration:generate”，
“db:migration:run”：“npm 运行 typeorm --migration:run”，
“db:migration:revert”：“npm 运行 typeorm --migration:revert”，
“db:refresh”：“npm 运行 typeorm schema:drop && npm 运行 db:migration:run”

- Import the `TypeOrmModule` into the `app.module.ts`

**Install nestjsx-crud**
I used [nestjsx-crud](https://github.com/nestjsx/crud) library because it makes crud functions easier.

```bash


npm i @nestjsx/crud @nestjsx/crud-typeorm class-transformer class-validator

由于创建实体控制器和服务的步骤很长，我就不一步步解释了。您可以查看代码库来了解更多细节。

它使用 nestjsx/crud 自动创建这些端点。

现在让我们完善管理面板。使用Superplate，我们可以快速创建一个refine项目。



npx superplate-cli admin

答案如下：



✔ Select your project type › refine
✔ What will be the name of your app · admin
✔ Do you want to customize theme?: · less
✔ Data Provider: · nestjsx-crud-data-provider
✔ Auth Provider: · none
✔ Do you want to add an example page? · example-resource
✔ Do you want to customize layout? · custom-layout
✔ i18n - Internationalization: · no



cd admin
npm run dev

Refine 的示例应用程序将欢迎您的到来。

在admin/src/App.tsx中更改 api url



const API_URL = "http://localhost:3000";

让我们在 refine 中添加列表页面作为companiescrud 端点。

/admin/src/pages/companies/list.tsx



import {
  List,
  Table,
  TextField,
  useTable,
  IResourceComponentsProps,
  getDefaultSortOrder,
  Space,
  EditButton,
  DeleteButton,
  TagField,
  ShowButton,
} from "@pankod/refine";
import { ICompany } from "interfaces";

export const CompanyList: React.FC<IResourceComponentsProps> = () => {
  const { tableProps, sorter } = useTable<ICompany>({
    initialSorter: [
      {
        field: "id",
        order: "desc",
      },
    ],
  });

  return (
    <List>
      <Table {...tableProps} rowKey="id">
        <Table.Column
          dataIndex="id"
          key="id"
          title="ID"
          render={(value) => <TextField value={value} />}
          defaultSortOrder={getDefaultSortOrder("id", sorter)}
          sorter
        />
        <Table.Column
          dataIndex="name"
          key="name"
          title="Name"
          render={(value) => <TextField value={value} />}
          defaultSortOrder={getDefaultSortOrder("name", sorter)}
          sorter
        />
        <Table.Column
          dataIndex="location"
          key="location"
          title="Location"
          render={(value) => <TextField value={value} />}
          defaultSortOrder={getDefaultSortOrder("location", sorter)}
          sorter
        />
        <Table.Column
          dataIndex="isActive"
          key="isActive"
          title="Is Active"
          render={(value) => <TagField value={value} />}
          defaultSortOrder={getDefaultSortOrder("status", sorter)}
          sorter
        />
        <Table.Column<ICompany>
          title="Actions"
          dataIndex="actions"
          render={(_, record) => (
            <Space>
              <EditButton hideText size="small" recordItemId={record.id} />
              <ShowButton hideText size="small" recordItemId={record.id} />
              <DeleteButton hideText size="small" recordItemId={record.id} />
            </Space>
          )}
        />
      </Table>
    </List>
  );
};

类似地，让我们在 pages 文件夹下添加创建、编辑和作业 crud 页面。

接下来，我们在<Refine>（App.tsx）中定义资源：



      <Refine
           dataProvider={dataProvider}
           ...
            resources={[
                {
                   name: "companies",
                   list: CompanyList,
                   create: CompanyCreate,
                   edit: CompanyEdit,
                   show: CompanyShow,
                },
                {
                   name: "jobs",
                   list: JobList,
                   create: JobCreate,
                   edit: JobEdit,
                   show: CompanyShow,
                },
           ]}
    />

文章来源：https://dev.to/refine/build-fast-and-customized-admin-panel-with-nestjs-291