React Berry Dashboard - 360度回顾

方石剑
473 阅读4分钟

编码员们好!

本文旨在提供对Berry Dashboard的全面评论，这是一个开源的React Dashboard，由CodedThemes在Material-UI ，最流行的React组件库之上设计。Berry Dashboard可以在MIT许可下直接从Github下载，并可用于无限的业余和商业项目。对于新人来说，React 是最流行的JS库，用于编码由Facebook支持的用户界面。

谢谢你的阅读!- 内容由**管理员仪表板**提供。

  • 第1节 -Berry Dashboard的一般介绍
  • 第2节 -如何从源头上进行编译
  • 第3节 -Berry提供的页面和组件
  • 第4节 -全栈版本Berry React Node JS

Berry React - Login Page

#1 - Berry总体介绍

Berry是一个创造性的开源管理仪表盘模板，使用React和Material-UI库构建。它是一个完整的改变游戏规则的React仪表盘模板，具有简单和直观的响应式设计，如在视网膜屏幕或笔记本电脑上。

基于现代UI美学、丰富的UI组件集、现代工具和简单直观的代码库结构，这个免费产品可能是你下一个项目的好选择。

Berry使用了React、Material-UI库、图标、Apex图表、React-Redux、React-Router的最新依赖项。关于完整的快照，请访问Github上发布的package.json。

#2 - 从源代码编译

Berry dashboard可以直接从Github上编译和使用，没有注册锁或其他任何限制。我们所需要的是在我们的工作站中正确安装一个最小的编程工具包，所有的工具都可以在终端中访问。

  • Nodejs - 在基于Javascript的产品和工具中使用
  • Yarn - 一个用于NodeJS的流行包管理器（比NPM好）。
  • GIT - 一个用于从Github下载源代码的命令行工具
  • 一个现代编辑器--VSCode 或Atom

一旦所有的工具都启动和运行，我们就可以通过在终端输入几个命令来编译Berry。

第1步- 从公共资源库克隆资源

$ git clone https://github.com/codedthemes/berry-free-react-admin-template.git
$ cd -free-react-admin-template

第2步- 通过NPM（或Yarn）安装模块

$ npm i
// OR
$ yarn

第3步 - 开始开发(使用实时重载)

$ npm run start
// OR
$ yarn start

步骤 #4- 生产构建

$ npm run build
// OR
$ yarn build

在这一点上，我们应该看到Berry Dashboard 在浏览器中运行。

Berry React - Default Dashboard Page

#3 - 页面和组件

Berry的免费版本带有9个预置页面，即使对于商业项目来说也足够了。现有的代码库可以通过在现有的基础上添加新的组件和页面来轻松地扩展 - 提供的页面。

  • 仪表板。1页
  • 认证。登录和注册
  • 空白页。1个启动器
  • 实用页。排版、颜色、阴影和图标

Berry Dashboard - Icons Page.

Berry Dashboard - Colors Page.

Berry Components - 颜色

Berry React - Primary Colors.

Berry Components - Tabler Icons

Berry React - Tabler Icons

Berry Components - Shadows

Berry React - Shadow Components

#4 - Berry全栈版本

为了获得完整的全栈体验，Berry Dashboard可以与Node JS API后端一起使用（也是免费的）。在本节中，我们将把Berry构建为一个全栈产品，其中React界面会重定向访客用户进行认证，并在成功登录后暴露私有页面（仪表盘、UI页面、空白页面）。两个产品（前端和后端）的源代码都以MIT许可证发布在Github上。

React Node JS Berry- 产品页面（全栈版）

Berry的全栈版本应该分两步编译：后端和前端。一旦我们有了这两部分的运行，我们就可以注册新的用户，进行认证并访问私人页面。这个新版本实现了一个简单的JWT（网络令牌）认证，并预先配置了与Node JS API的通信。

编译和启动Node JS后端--开源项目

Node JS API Server - Product Logo.

步骤#1- 克隆/下载源码

$ git clone https://github.com/app-generator/api-server-nodejs.git
$ cd api-server-nodejs

第2步 - 通过NPM或Yarn安装依赖项

$ npm i
// OR
$ yarn

第3步 - 通过以下方式运行SQLite迁移TypeORM

$ yarn typeorm migration:run

步骤#4- 启动API服务器（开发模式）

$ npm run dev
// OR
$ yarn dev

API服务器将使用.env 文件中指定的PORT （默认为5000 ）启动。

编译并启动Berry React(增强版)

步骤#1- 克隆/下载源代码

$ git clone https://github.com/app-generator/react-berry-dashboard.git
$ cd react-berry-dashboard

第2步 - 通过NPM或Yarn安装依赖项

$ npm i
// OR
$ yarn

第4步 - 启动API服务器（开发模式）

$ npm run start
// OR
$ yarn start

一旦用户界面启动并运行，我们应该看到登录页面。为了通过登录，我们需要注册一个新的用户并进行认证。

Berry React Full-stack - Login Page.

通过AppSeed 和CodedThemes 的共同努力，全栈版本得到了积极的支持。欲了解更多信息或支持，请访问产品页面。React Node JS Berry。

谢谢你的阅读!更多资源，请访问。

avatar
文章
阅读
粉丝