반응 재료 대시보드 - 전체 계층 구성 버전

안녕, 프로그래머들,
본고는 React Material Dashboard의 전체 창고 버전을 소개했는데 이것은Creative Tim이 정성스럽게 디자인한 고급 디자인으로 현재 여러 개의 API 백엔드 서버인 Node JS, Flask, Django에 사용할 수 있다.사용자 인터페이스는 미리 설정된 JWT 인증을 가지고 있으며 Unified API Interface 지원으로 이 제품이 여러 개의 백엔드인 노드 JS, Flask, Django(FAStapi와 Laravel 출시 예정)를 호환할 수 있습니다.

Thanks for reading! - Content provided by App Generator.

Full-stack React Material PRO - 라이브 데모

Full-stack React Material PRO - 제품 페이지

제품 특징

이 제품은 개발자가 기초 지식을 뛰어넘어 새로운 컨테이너 제품을 더욱 빨리 시작하도록 돕기 위한 것이다. 이 제품은 신분 검증을 통해 강화되었고 화소가 완벽한 사용자 인터페이스로 생산 가능한 백엔드에서 지원된다.이 전체 스택 제품의 고유한 점은 여러 서버의 JSON-API 규정 준수입니다.

Node JS API: 유형 스크립트, 유연성 지속성(SQLite, Mongo), 유형 양식, 검증

Django API: DRF, SQLite, Docker

의 JWT 인증 획득

Flask API: Flask JWT extended, SQL Alchemy, Docker

가 동력을 제공

API: FASTApi, Laravel API

기본적으로 UI는 게스트 사용자를 로그인 페이지로 리디렉션합니다.사용자가 인증을 통과하면 모든 개인 페이지가 잠금 해제됩니다.

Implemented JWT Authentication Flow: Login, Logout, Register.

제품 사용 방법

전체 스택의 React Material Dashboard는 UI가 백엔드 API 서버와 분리되고 JWT 토큰으로 보호된 요청을 사용하여 통신하는 2층 아키텍처를 사용합니다.이 전체 스태킹 제품을 사용하기 시작하는 방법은 간단한 설정을 따르는 것이 좋습니다.

1단계 - 백엔드 서버 구축 및 시작

2단계 - 사용자 인터페이스 구축 및 시작

등록 페이지

를 통해 새 사용자 만들기

개인 페이지 검증 및 액세스

기존의 코드를 바탕으로 당신의 마력을 추가합니다.

백엔드 서버 시작

앞에서 말한 바와 같이 UI는 많은 백엔드 서버와 함께 작동하도록 구성되어 있으며, 이 서버들은 공통된 API 인터페이스인 Django, Node JS, Flask를 공유한다.요청한 API 서버에 대한 액세스 권한은 라이센스(무료 또는 상업 라이센스)에 따라 부여됩니다.이 페이지에서, 우리는 Node JS API의 무료 버전 (소스 오픈 제품) 을 컴파일하고 시작할 것이다.

Step #1 - Clone the sources

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

Step #2 - Install dependencies via NPM or Yarn

$ npm i
// OR
$ yarn

Step #3 - Run the SQLite migration and create the required tables

$ yarn typeorm migration:run

Step #4 - Start the API server - development mode

$ npm dev
// OR
$ yarn dev

API에서 사용하는 API 인터페이스는 다음과 같은 방법을 공개하는 간단한 JWT 인증 레이어입니다.

사용자 API:

/api/users/register: 새 사용자 생성

/api/users/login: 기존 사용자 확인

/api/users/logout: 연결된 JWT 토큰 삭제

/api/users/checkSession: 기존 JWT 토큰의 유효성 검사

/api/users/edit - 등록 사용자

와 관련된 정보를 업데이트합니다.
이 때 백엔드 API는 & 이고 주소: http://localhost:5000에서 실행되어야 합니다. 우리는 React UI를 계속 설치하고 구축할 수 있습니다.

React UI 시작

React Material Dashboard는 소스 코드에 액세스하기 전에 라이센스를 받아야 하는 비즈니스 제품입니다.라이센스가 없는 경우 product page를 방문하여 구입하십시오.

Step #1 - Clone the project

$ git clone https://github.com/app-generator/priv-react-material-dashboard-pro.git
$ cd priv-react-material-dashboard-pro

Step #2 - Install dependencies via NPM or yarn

$ npm i
// OR
$ yarn

Step #3 - Start in development mode

$ npm run start 
// OR
$ yarn start

Template Page - Pricing cards

백엔드 통합

백엔드 API 서버 주소는 src/config/constant.js에 저장됩니다.

export const API_SERVER = "http://localhost:5000/api/";

전단api가 src/api/auth.js 에서 생성되었습니다.

const axios = Axios.create({
    baseURL: `${baseURL}/api`,
    headers: { "Content-Type": "application/json" },
});

이 때 이 간단한 full-stack 제품은 새로운 사용자를 만들고 검증할 수 있을 것이다.추가 리소스 및 지원에 대한 자세한 내용은 다음을 참조하십시오.

support를 통한 도움말 페이지

가입Discord-24/7 실시간 협조(가입자)

React Apps - 무료 및 커머셜 제품

React Bundle - 할인된 다중 제품 번들