使用React仪表板在React中创建仪表板

Flatologic是一家提供各种框架的免费和优质仪表盘模板的公司。无论是Angular、Vue还是React，开发者都可以找到许多用户友好的预建应用程序来满足他们的需求。

与其从头开始一个项目，这大大减少了所涉及的编码量，使项目快速运行。

在本教程中，我们将重点介绍他们的免费模板，名为React Dashboard。这个模板是用React、Bootstrap、React Router、Redux和GraphQL构建的。它有一个React前端和一个Node.js后端。

验证包括在内，布局是响应式的。本教程将介绍如何在三个简单的步骤中创建一个仪表板。然后，我们将用MAMP 把它连接到一个SQL数据库，这样你就有了一些本地数据。

目标

读完本文后，读者将能够。

安装和配置React Dashboard。
设置一个React数据库表和仪表盘。
将数据库服务器连接到应用程序。

先决条件

要完成本教程，你将需要。

对React基础知识的了解。
MAMP服务器的基本知识。

让我们开始吧!

第1步：设置React仪表板项目

首先，让我们克隆React Dashboard仓库并为我们的新项目选择一个名字。这将使用以下命令来执行。

git clone -o React Dashboard -b master --single-branch https://github.com/flatlogic/React Dashboard.git <app-name>

一旦项目被克隆到我们的本地机器上，我们就可以继续安装所需的依赖项。

cd <app-name>
yarn install

在写这篇文章的时候，React Dashboard在运行yarn install时遇到了一个问题，有一个GitHub问题记录。下面是一个错误的片段。

      error /Users/..../node_modules/sqlite3: Command failed.
      Exit code: 1
      Command: node-pre-gyp install --fallback-to-build

如果你单独运行yarn 添加sqlite3 ，然后重新运行yarn install ，事情应该可以正常进行。

之后，运行yarn dev 。这将启动后端和前端服务器，它们将分别在端口5000 和3000 上访问。如果你导航到http://localhost:3000/ ，你应该看到仪表板。

react-dashboard-interface

这个项目也带有GraphQL。一旦应用程序被启动，就可以在http://localhost:5000/graphql 上访问游乐场。如果你不熟悉这项技术，不要犹豫，阅读GraphQL文档，学习如何创建查询和突变。

第2步：创建仪表盘和表格

我们有一个很好的仪表盘，但目前，它是用硬编码的值工作的。为了使它更有价值，让我们把我们的新应用程序连接到一个本地数据库。

你可以选择任何数据库，但在本教程中，我们将连接一个MySQL数据库。

为了创建一个数据库，我们将使用MAMP ，它允许我们获得Apache、Nginx、PHP和MySQL的开箱即用。

下载MAMP。安装后，启动应用程序并点击Webstart 。

mamp-interface

Webstart 标签打开MAMP 的索引页，网址是http://localhost:8888/MAMP 。

在这个页面上，你会看到很多信息，但我们关心的是在MySQL下。一旦打开，click on phpMyAdmin 。这将打开另一个标签，这个标签指向http://localhost:8888/phpMyAdmin/index.php ，在这里你将看到phpMyAdmin的界面。

得益于此，我们将能够看到、创建和处理我们未来的MySQL数据库。我们可以通过点击Databases 来创建一个数据库。然后，输入我们新数据库的名称并点击Create 。

然后我们可以创建我们的第一个表。对于我们的教程，将其命名为post，并选择五列，因为我们将有五个字段。一旦我们点击进入，我们就可以添加新的字段。

我们的字段应该是这样的。

varchar类型的ID；长度为255是我们的主键
VARCHAR类型的标题；长度为255
类型为TEXT的内容
createdAt类型为DATE
updateAt类型为DATE

下面是我们带有新字段的表的屏幕截图。

mysql-posts

添加完所有需要的信息后，点击Save 。

第3步：将本地数据库与你的应用程序连接起来

这个项目使用Sequelize，一个Node.js ORM，允许你连接到SQL数据库。在我们的数据文件夹中的src ，我们找到一个sequelize.js 文件，在那里我们可以连接我们的数据库。

我们将用Javascript连接数据库，如下图所示。

import Sequelize from "sequelize";

// Configure the connection to your local database with your DB name, username, password and the port on which your DB runs.
const sequelize = new Sequelize("test", "root", "root", {
  host: "localhost",
  port: 8889,
  dialect: "mysql",
  operatorsAliases: false,
});
export default sequelize;

然后，在同一个文件夹中，打开schema.js 文件，取消对创建帖子的突变的注释。这将使我们能够从我们的前端在数据库中创建新的帖子。

注意：再一次，如果你不熟悉突变的概念，请查看GraphQL的文档。

import {
  GraphQLSchema as Schema,
  GraphQLObjectType as ObjectType,
} from "graphql";

import me from "./queries/me";
import news from "./queries/news";
import posts from "./queries/posts";
import addPost from "./mutations/posts";

const schemaConfig = {
  query: new ObjectType({
    name: "Query",
    fields: {
      me,
      news,
      posts,
    },
  }),
};

// If you want to enable mutation, uncomment the code below
schemaConfig.mutation = new ObjectType({
  name: "Mutation",
  fields: {
    addPost,
  },
});

const schema = new Schema(schemaConfig);

export default schema;

第4步：测试应用程序

用Cmd+C 杀死服务器，然后再启动它。如果一切正常，我们应该能够创建新的帖子。

在我们的仪表板上，我们可以点击View all Posts ，然后点击Create New 。在我们输入标题和内容后，我们可以点击Save 。当我们回到仪表板页面时，我们的新帖子将出现在表格中。

post-creation

总结

在本教程中，我们学习了如何从Flatologic克隆React Dashboard模板并在本地启动它。这使我们能够快速建立并运行一个用户友好的仪表盘。

然后，我们创建了一个带有表和一些字段的MySQL数据库，并将其连接到我们的新应用程序。由于这个预制的仪表板，世界各地的开发者可以快速建立一个React应用程序。

从头开始一个项目可能会很耗时，但这些模板带有开始所需的所有功能，会让你节省时间和精力。

如何使用React仪表板在React中创建仪表板