Node JS API - 使用React UI。贝瑞仪表板

238 阅读3分钟

编码员们好。

本文介绍了一个用Express、MongoDB和Typescript构建的简单Node JS API服务器。该产品可用于快速启动后端服务器,也可用于教育目的。为了使这篇文章更加有用,我将提到一个开源的React仪表盘,它已经被配置为与这个Node/Express服务器一起工作。

谢谢你的阅读!- 内容由**App Generator**提供。

(已经配置好与Node JS API服务器通信)

React Berry Dashboard - Open-source full-stack seed project crafted in React and Material UI.

如何使用该代码

如前所述,产品有一个简单的代码库,任何具有基本NodeJS知识的人只需在终端窗口输入几个命令就可以编译并在本地启动服务器。下面是摘自README文件的编译命令。在输入任何命令之前,请确保你有一个合适的Node JS版本,推荐版本是12.x或以上。另一个必要条件是要有一个MongoDB服务器并运行。

步骤#1 - 克隆源码

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

第2步 - 安装依赖项

$ npm i
// OR
$ yarn 

第2步 - 启动API服务器(开发模式

$ npm dev
// OR
$ yarn dev 

一旦服务器启动并运行,我们就可以使用POSTMAN来查询API服务器并查看响应。该服务器的API定义也可以在Github上找到,在这个位置。

默认情况下,我们的服务器在端口5000 ,但我们可以在保存在项目根目录下的.env 文件中自定义该值。

API。

  • 注册 - 创建一个新的用户
  • 登录 - 对用户进行认证,成功后返回一个(JWT)令牌
  • 注销 - 终止会话
  • 检查会话 - 验证会话是否仍在活动中

注册请求

使用POSTMAN,我们可以轻松地测试API服务器。让我们创建一个新的用户。

编辑URL

http://localhost:5000/api/users/register

编辑请求正文

{
    "username":"test",
    "password":"pass", 
    "email":"test@myserver.com"
}

如果用户被成功创建,我们应该在响应字段中看到类似这样的东西。

{
    "userID": "60e7db4331173d284832a0ab",
    "msg": "The user is created"
}

Node JS API - Registration API request in POSTMAN.

很简单!以类似的方式,我们可以认证用户或检查会话是否仍然有效。

验证用户(登录

编辑URL

http://localhost:5000/api/users/login

请求正文

{
    "password":"pass", 
    "email":"test@myserver.com"
}

响应应该包括生成的JWT令牌,从这一点上,我们可以执行请求并访问API暴露的私人部分。

从这里开始要去哪里?我们可以连接一个React UI来与我们的简单API_对话_并验证用户。

React Node JS Berry

这个开源的React仪表盘是**由CodedThemes**设计的,可以从产品页面下载(没有注册锁)或直接从Github下载。

一切顺利,让我们来构建产品

步骤#1- 克隆项目

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

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

$ npm i
// OR
$ yarn

第3步 - 以开发模式开始

$ npm run start 
// OR
$ yarn start

一旦React UI启动并运行,我们就可以创建和验证用户,并获得对网站私人区域的访问。

React Node JS Berry - Login page.

React Node JS Berry - UI 图标

React Node JS Berry - UI Icons page.

谢谢你的阅读!欢迎在评论中提出AMA。