웹 프론트엔드 JS 튜토리얼 React Family Bucket을 사용하여 백엔드 관리 시스템을 구축하는 방법

React Family Bucket을 사용하여 백엔드 관리 시스템을 구축하는 방법

Apr 16, 2018 am 10:24 AM
react 무대 뒤에서 짓다

이번에는 React Family Bucket용 백엔드 관리 시스템을 구축하는 방법과 React Family Bucket용 백엔드 관리 시스템 구축 시 주의사항에 대해 알려드리겠습니다. 실제 사례를 살펴보겠습니다.

소개

학생 시절에는 특정 지식 포인트를 습득하기 위해 끊임없이 연습하고 요약을 했습니다. 직장에 들어간 후에도 마찬가지이지 않나요? 사업을 한다는 것은 운동을 하는 것과 같습니다. 수업이 끝난 후 적절하게 요약하면 확실히 레벨이 더 빨리 향상될 것입니다. 회사는 React+node 기술 스택을 채택했기 때문에 일상 업무에서 접하는 비즈니스와 연구에서 접하는 흥미로운 사항을 향후 데모로 추상화하여 작은 ReactSPA 프로젝트를 완료할 계획입니다. 현재 이 프로젝트는 단지 프로토타입일 뿐이며, 결과는 다음과 같습니다. 이 기사를 바탕으로 React Family Bucket을 사용하여 백엔드 관리 시스템을 구축하는 새로운 기사를 작성했습니다. (참고: 프로젝트는 수시로 업데이트되므로 기사가 바로 업데이트되지 않을 수 있으므로 실제 프로젝트가 우선합니다)

실제로 이 인터페이스 스타일은 백엔드 관리 시스템 인터페이스로 사용될 수 있을 뿐만 아니라 프로젝트를 표시할 수 있는 아름다운 블로그로 수정될 수도 있습니다. 프로젝트 주소는 여기입니다(로컬러닝이 더 좋습니다). 좋은 의견이 있으시면 이슈나 PR을 제출해 주세요.

프로젝트의 초기 구조와 구조적 이유는 위에 나열되어 있습니다. ts는 시간이 지남에 따라 도입될 것이므로 프로젝트 구조는 필연적으로 변경되지만 이 기본 프로토타입을 기반으로 확실히 확장될 것입니다.

디렉토리 구조는 아래에 설명되어 있습니다

  1. 프로젝트는 처음에 Facebook에서 공식적으로 제공하는 React 스캐폴딩이자 업계 최고의 React 애플리케이션 개발 도구 중 하나인 create-react-app으로 초기화되었습니다.

  2. middleware 디렉토리는 당연히 People's log 미들웨어로 가져올 수 있습니다.

  3. 컨테이너와 컴포넌트는 모두 반응 컴포넌트를 저장합니다. 차이점은 홈페이지 스타일과 관련된 컴포넌트가 컨테이너에 배치되는 한, 기능과 관련된 모듈(예: 제가 구현한 테이블 컴포넌트), 팝업 입력 상자 그룹 등)은 구성 요소에 배치되어야 합니다.

  4. 일부 일반적인 프런트 엔드 구성은 호출 시 참조할 필요가 없도록 전역(브라우저)에 저장하는 것이 가장 좋습니다.

  5. Ajax 모듈을 직접 구현해야 하는 이유는 도메인 간 코르 및 기타 요구 사항이 필요한 경우 여러 Ajax 요청을 맞춤 설정해야 하기 때문입니다(가져오기를 사용하면 가져오기가 더 많아집니다). 앞으로 더욱 강력해질 것입니다)

기술 스택 관련

사용되는 기술 스택은 많지만 능숙하지 못해서 대부분 API를 확인하면서 사용하기 때문에 관련 기술 스택을 사용하여 해결한 몇 가지 사항만 나열합니다.

웹팩(2.6)

①주문형 로드:

babel-plugin-import는 요청 시 구성 요소 코드와 스타일을 로드하기 위한 babel 플러그인(원리)입니다. config/webpack.config.dev.js 파일을 다음과 같이 수정하세요.

{
 test: /\.(js|jsx)$/,
 include: paths.appSrc,
 loader: 'babel',
 query: {
   plugins: [
    ['import', [{ libraryName: "antd", style: 'css' }]],
   ],
  cacheDirectory: true
 }
},
로그인 후 복사

② 덜 매력적이다:

먼저 less-loader를 도입하여 less 스타일을 로드하고 config/webpack.config.dev.js 파일 config/webpack.config.dev.js 文件

loaders: [
 {
  exclude: [
   /\.html$/,
   /\.(js|jsx)$/,
+   /\.less$/,
   /\.css$/,
   /\.json$/,
   /\.svg$/
  ],
  loader: 'url',
 },
...
 // Process JS with Babel.
 {
  test: /\.(js|jsx)$/,
  include: paths.appSrc,
  loader: 'babel',
  query: {
   plugins: [
-    ['import', [{ libraryName: "antd", style: 'css' }]],
+    ['import', [{ libraryName: "antd", style: true }]], // 加载 less 文件
   ],
  },
...
+ // 解析 less 文件,并加入变量覆盖配置
+ {
+  test: /\.less$/,
+  loader: 'style!css!postcss!less?{modifyVars:{"@primary-color":"#1DA57A"}}'
+ },
]
로그인 후 복사

这里利用了 less-loader 的 modifyVars 来进行主题配置, 变量和其他配置方式可以参考 配置主题 文档。

③一键发布到gh-pages:

用到了gh-pages,使用 npm run deploy 一键发布到自己的gh-pages上,姑且把gh-pages当成生产环境吧,所以在修改config/webpack.config.dev.js

 resolve: {
  fallback: paths.nodePaths,
  alias: {
   'react-native': 'react-native-web',
   components: path.resolve(dirname, '..') + '/src/common/components',
   container: path.resolve(dirname, '..') + '/src/common/container',
   images: path.resolve(dirname, '..') + '/src/common/images',
   pages: path.resolve(dirname, '..') + '/src/common/pages',
   utils: path.resolve(dirname, '..') + '/src/common/utils',
   data: path.resolve(dirname, '..') + '/src/server/data',
  }
 },
로그인 후 복사
을 수정하세요. 여기서는 Less-loader의 수정 변수를 사용하여 테마를 구성합니다. 변수 및 기타 구성 방법은 테마 구성 문서를 참조하세요.

③한 번의 클릭으로 gh-pages에 게시:

gh-pages를 사용하면 npm run 배포를 사용하여 한 번의 클릭으로 자신의 gh-pages에 게시할 수 있습니다. gh-pages를 프로덕션 환경으로 취급하여 config/webpack.config.dev.js 를 수정하겠습니다. > 파일인 경우 config/webpack.config.prod.js에도 동일하게 수정해야 합니다.

ps: 이런 식으로 gh-pages에 올렸는데 프로젝트의 gh-pages 표시 주소가 여기에 있습니다. gh-pages에 표시된 이미지는 분명히 로컬 이미지보다 몇 픽셀 더 큽니다. 저를 깨우쳐 주시기 바랍니다.

React Family Bucket을 사용하여 백엔드 관리 시스템을 구축하는 방법 ④참조경로 약어 :

<route>
  <route></route>
  <route></route>
</route>
로그인 후 복사
로그인 후 복사

참조 경로의 약어를 구성한 후 등 어디서든지 이렇게 인용할 수 있습니다.

🎜🎜 🎜antd(2.10)🎜🎜

antd是(蚂蚁金服体验技术部)经过大量的项目实践和总结,沉淀出的一个中台设计语言 Ant Design,使用者包括蚂蚁金服、阿里巴巴、口碑、美团、滴滴等一系列知名公司,而且我从他们的设计理念也学到了很多关于UI、UX的知识。

该项目采用的是antd最新的版本2.10.0,由于2.x的版本和1.x的版本还是相差蛮大的,之前参考的项目(基于1.x)改起来太费劲,所以在组件那块就干脆自己重新封装了一遍。这部分知识点我建议还是看文档,文档解决不了扒扒源码。

react-router(4.x)

react-router 4.x和2.x的差异又是特别的大,召唤文档,网上基本上都还是2.x的教程,看过文档之后,反正简而言之其就是要让使用者更容易上手。印象最深的是以前嵌套路由写法在4.x中写到同层了。如下示例他们的效果是相同的。

2.x:

<route>
  <route></route>
  <route></route>
</route>
로그인 후 복사
로그인 후 복사

4.x:

<route></route>
<route></route>
<route></route>
로그인 후 복사

还有更多的特性和API的出现,期待有更好的分析文章的出现,有机会我也会来总结下react-router(4.x)和(2.x)的差异。

fetch

先推荐这篇文章《传统Ajax已死,Fetch永生》,再推荐API;

fetch是个好东西,好在简单,除了promise最基本的用法,还能这样写

fetch(url).then(response => response.json())
 .then(data => console.log(data))
 .catch(e => console.log("Oops, error", e))
로그인 후 복사
try {
 let response = await fetch(url);
 let data = await response.json();
 console.log(data);
} catch(e) {
 console.log("Oops, error", e);
}
로그인 후 복사

但是其简洁的特点是为了让我们可以自定义其扩展,还是其本身就还不完善呢?我在调用JSONP的请求时,发现用fetch掉不同,后来在文档上才发现其不支持JSONP的调用,所幸社区还是很给力的找到了fetch-jsonp这个模块,实现了对百度音乐接口的JSONP调用。fetch-jsonp使用也和fetch类似,代码如下

fetchJsonp(url,{method: 'GET'})
  .then((res) =>res.json())
  .then((data) => {})
로그인 후 복사

redux

使用了redux也已经有段时日了,我对redux的定义就是更好的管理组件的状态,没有redux的时候就像现在这个应用一样,逻辑少状态变化也还不太复杂,但是一旦逻辑复杂起来,各种组件状态、界面耦合起来,就容易出岔子,那redux就是为了解决这个而生的,让我们可以更多地关注UI层,而降低对状态的关注。之前也写了些redux的文章,纸上得来终觉浅,绝知此事要躬行。

--------------------------更新---------------------------

已经在项目中加入了redux技术栈。

项目的一些待扩展计划

封装组件

不管组件封装得好不好,个人感觉其是提高水平很高效的方法,多练,继续封装出各式各样的功能组件。

typescript

公司大概会在6月份开始,新的项目就要采用ts开发了,所以我也到时会在该项目中引人ts的语法,我现在的感觉是使用ts后,前后端对接会更加轻松,不会有一些类型不匹配的低级错误,而且antd貌似和ts也能兼容得蛮好。

测试框架

这部分其实我还是没什么经验的,先写上吧,有机会会拿这个项目开刀,并写心得。

相信看了本文案例你已经掌握了方法,更多精彩请关注php中文网其它相关文章!

推荐阅读:



위 내용은 React Family Bucket을 사용하여 백엔드 관리 시스템을 구축하는 방법의 상세 내용입니다. 자세한 내용은 PHP 중국어 웹사이트의 기타 관련 기사를 참조하세요!

본 웹사이트의 성명
본 글의 내용은 네티즌들의 자발적인 기여로 작성되었으며, 저작권은 원저작자에게 있습니다. 본 사이트는 이에 상응하는 법적 책임을 지지 않습니다. 표절이나 침해가 의심되는 콘텐츠를 발견한 경우 admin@php.cn으로 문의하세요.

핫 AI 도구

Undresser.AI Undress

Undresser.AI Undress

사실적인 누드 사진을 만들기 위한 AI 기반 앱

AI Clothes Remover

AI Clothes Remover

사진에서 옷을 제거하는 온라인 AI 도구입니다.

Undress AI Tool

Undress AI Tool

무료로 이미지를 벗다

Clothoff.io

Clothoff.io

AI 옷 제거제

Video Face Swap

Video Face Swap

완전히 무료인 AI 얼굴 교환 도구를 사용하여 모든 비디오의 얼굴을 쉽게 바꾸세요!

뜨거운 도구

메모장++7.3.1

메모장++7.3.1

사용하기 쉬운 무료 코드 편집기

SublimeText3 중국어 버전

SublimeText3 중국어 버전

중국어 버전, 사용하기 매우 쉽습니다.

스튜디오 13.0.1 보내기

스튜디오 13.0.1 보내기

강력한 PHP 통합 개발 환경

드림위버 CS6

드림위버 CS6

시각적 웹 개발 도구

SublimeText3 Mac 버전

SublimeText3 Mac 버전

신 수준의 코드 편집 소프트웨어(SublimeText3)

Discuz 백그라운드 로그인 문제 해결 방법 공개 Discuz 백그라운드 로그인 문제 해결 방법 공개 Mar 03, 2024 am 08:57 AM

Discuz 백그라운드 로그인 문제에 대한 해결책이 공개되었습니다. 인터넷의 급속한 발전으로 인해 웹 사이트 구축이 점점 보편화되고 있으며 일반적으로 사용되는 포럼 웹 사이트 구축 시스템으로 Discuz가 선호되고 있습니다. 많은 웹마스터. 그러나 강력한 기능으로 인해 Discuz를 사용할 때 백그라운드 로그인 문제와 같은 몇 가지 문제가 발생할 수 있습니다. 오늘은 Discuz 백그라운드 로그인 문제에 대한 해결책을 공개하고 구체적인 코드 예시를 제공하여 도움이 필요한 분들에게 도움이 되기를 바라겠습니다.

React 프론트엔드와 백엔드 분리 가이드: 프론트엔드와 백엔드의 분리 및 독립적 배포를 달성하는 방법 React 프론트엔드와 백엔드 분리 가이드: 프론트엔드와 백엔드의 분리 및 독립적 배포를 달성하는 방법 Sep 28, 2023 am 10:48 AM

React 프론트엔드와 백엔드 분리 가이드: 프론트엔드와 백엔드 분리 및 독립적 배포를 달성하는 방법, 구체적인 코드 예제가 필요합니다. 오늘날의 웹 개발 환경에서는 프론트엔드와 백엔드 분리가 추세가 되었습니다. . 프런트엔드 코드와 백엔드 코드를 분리함으로써 개발 작업을 보다 유연하고 효율적으로 수행하고 팀 협업을 촉진할 수 있습니다. 이 기사에서는 React를 사용하여 프런트엔드와 백엔드 분리를 달성하고 이를 통해 디커플링 및 독립적 배포 목표를 달성하는 방법을 소개합니다. 먼저 프론트엔드와 백엔드 분리가 무엇인지 이해해야 합니다. 전통적인 웹 개발 모델에서는 프런트엔드와 백엔드가 결합되어 있습니다.

React와 RabbitMQ를 사용하여 안정적인 메시징 앱을 구축하는 방법 React와 RabbitMQ를 사용하여 안정적인 메시징 앱을 구축하는 방법 Sep 28, 2023 pm 08:24 PM

React 및 RabbitMQ를 사용하여 안정적인 메시징 애플리케이션을 구축하는 방법 소개: 최신 애플리케이션은 실시간 업데이트 및 데이터 동기화와 같은 기능을 달성하기 위해 안정적인 메시징을 지원해야 합니다. React는 사용자 인터페이스 구축을 위한 인기 있는 JavaScript 라이브러리인 반면 RabbitMQ는 안정적인 메시징 미들웨어입니다. 이 기사에서는 React와 RabbitMQ를 결합하여 안정적인 메시징 애플리케이션을 구축하는 방법을 소개하고 구체적인 코드 예제를 제공합니다. RabbitMQ 개요:

React Router 사용자 가이드: 프런트엔드 라우팅 제어 구현 방법 React Router 사용자 가이드: 프런트엔드 라우팅 제어 구현 방법 Sep 29, 2023 pm 05:45 PM

ReactRouter 사용자 가이드: 프런트엔드 라우팅 제어 구현 방법 단일 페이지 애플리케이션의 인기로 인해 프런트엔드 라우팅은 무시할 수 없는 중요한 부분이 되었습니다. React 생태계에서 가장 널리 사용되는 라우팅 라이브러리인 ReactRouter는 풍부한 기능과 사용하기 쉬운 API를 제공하여 프런트 엔드 라우팅 구현을 매우 간단하고 유연하게 만듭니다. 이 기사에서는 ReactRouter를 사용하는 방법을 소개하고 몇 가지 구체적인 코드 예제를 제공합니다. ReactRouter를 먼저 설치하려면 다음이 필요합니다.

WordPress 백엔드 잘못된 코드가 걱정되나요? 다음 솔루션을 사용해 보세요 WordPress 백엔드 잘못된 코드가 걱정되나요? 다음 솔루션을 사용해 보세요 Mar 05, 2024 pm 09:27 PM

WordPress 백엔드 잘못된 코드가 걱정되나요? 이러한 솔루션을 사용해 보십시오. 웹 사이트 구축에 WordPress가 널리 적용되면서 많은 사용자가 WordPress 백엔드에서 잘못된 코드 문제에 직면할 수 있습니다. 이러한 종류의 문제로 인해 배경 관리 인터페이스에 잘못된 문자가 표시되어 사용자에게 큰 문제를 야기합니다. 이 문서에서는 사용자가 WordPress 백엔드에서 잘못된 문자 문제를 해결하는 데 도움이 되는 몇 가지 일반적인 솔루션을 소개합니다. wp-config.php 파일을 수정하고 wp-config를 엽니다.

PHP, Vue 및 React: 가장 적합한 프런트엔드 프레임워크를 선택하는 방법은 무엇입니까? PHP, Vue 및 React: 가장 적합한 프런트엔드 프레임워크를 선택하는 방법은 무엇입니까? Mar 15, 2024 pm 05:48 PM

PHP, Vue 및 React: 가장 적합한 프런트엔드 프레임워크를 선택하는 방법은 무엇입니까? 인터넷 기술이 지속적으로 발전함에 따라 프런트엔드 프레임워크는 웹 개발에서 중요한 역할을 합니다. PHP, Vue, React는 세 가지 대표적인 프론트엔드 프레임워크로 각각 고유한 특성과 장점을 가지고 있습니다. 사용할 프런트 엔드 프레임워크를 선택할 때 개발자는 프로젝트 요구 사항, 팀 기술 및 개인 선호도를 기반으로 정보를 바탕으로 결정을 내려야 합니다. 이 글에서는 세 가지 프론트엔드 프레임워크인 PHP, Vue, React의 특징과 용도를 비교해보겠습니다.

Java 프레임워크와 프런트엔드 React 프레임워크의 통합 Java 프레임워크와 프런트엔드 React 프레임워크의 통합 Jun 01, 2024 pm 03:16 PM

Java 프레임워크와 React 프레임워크의 통합: 단계: 백엔드 Java 프레임워크를 설정합니다. 프로젝트 구조를 만듭니다. 빌드 도구를 구성합니다. React 애플리케이션을 만듭니다. REST API 엔드포인트를 작성합니다. 통신 메커니즘을 구성합니다. 실제 사례(SpringBoot+React): Java 코드: RESTfulAPI 컨트롤러를 정의합니다. React 코드: API에서 반환된 데이터를 가져오고 표시합니다.

Mistlock Kingdom의 야생에서도 건물을 지을 수 있나요? Mistlock Kingdom의 야생에서도 건물을 지을 수 있나요? Mar 07, 2024 pm 08:28 PM

플레이어는 Mistlock 왕국에서 플레이할 때 건물을 짓기 위해 다양한 재료를 수집할 수 있습니다. 많은 플레이어가 야생에서 건물을 지을 수 있는지 알고 싶어합니다. Mistlock 왕국에서는 건물이 제단 범위 내에 있어야 합니다. . Mistlock Kingdom에서는 야생에 건물을 지을 수 있나요? 답변: 아니요. 1. 미스트락 왕국의 야생 지역에는 건물을 지을 수 없습니다. 2. 건물은 제단의 범위 내에서 건축되어야 한다. 3. 플레이어 스스로 Spirit Fire Altar를 설치할 수 있지만, 범위를 벗어나면 건물을 지을 수 없습니다. 4. 산에 직접 구멍을 파서 집으로 삼을 수도 있어 건축자재를 소모할 필요가 없습니다. 5. 플레이어가 직접 지은 건물에는 편안함 메커니즘이 있습니다. 즉, 인테리어가 좋을수록 편안함이 높아집니다. 6. 높은 편안함은 플레이어에게 다음과 같은 속성 보너스를 제공합니다.

See all articles