React를 사용하여 반응형 백엔드 관리 시스템을 개발하는 방법

React를 사용하여 반응형 백엔드 관리 시스템을 개발하는 방법

인터넷의 급속한 발전으로 인해 점점 더 많은 회사와 조직에서 일상적인 작업을 처리하기 위해 효율적이고 유연하며 관리하기 쉬운 백엔드 관리 시스템이 필요합니다. . 현재 가장 인기 있는 JavaScript 라이브러리 중 하나인 React는 사용자 인터페이스를 구축하는 간결하고 효율적이며 유지 관리 가능한 방법을 제공합니다. 이 기사에서는 React를 사용하여 반응형 백엔드 관리 시스템을 개발하는 방법을 소개하고 구체적인 코드 예제를 제공합니다.

1. Create React 프로젝트

먼저 React 프로젝트를 생성하고 관리하기 위해서는 Node.js와 npm을 설치해야 합니다. 명령줄 도구를 열고 다음 명령을 실행하여 새 React 프로젝트를 만듭니다.

npx create-react-app backend-system

이렇게 하면 backend-system이라는 새 디렉터리가 생성되고 React 및 관련 종속 항목이 자동으로 설치됩니다.

2. 디자인 시스템 레이아웃

백엔드 관리 시스템에는 일반적으로 사이드바와 메인 콘텐츠 영역이 있습니다. React 구성요소를 사용하여 전체 레이아웃을 구축할 수 있습니다.

먼저 src 디렉터리에 Layout이라는 폴더를 만들고 그 안에 새 Layout.js 파일을 만듭니다. Layout.js 파일에서 전체 배경 관리 시스템의 레이아웃으로 Layout이라는 React 구성 요소를 정의할 수 있습니다.

import React from 'react';

const Layout = () => {
  return (
    <div className="layout">
      <div className="sidebar">
        {/* 侧边栏的内容 */}
      </div>
      <div className="content">
        {/* 主要内容区域的内容 */}
      </div>
    </div>
  );
}

export default Layout;

3. 사이드바 생성

레이아웃 구성요소에서 탐색 메뉴를 표시하기 위한 사이드바를 생성해야 합니다. React의 목록 렌더링 기능을 사용하여 메뉴 항목을 생성할 수 있습니다.

Layout.js에서 다음 코드를 추가하세요.

import React from 'react';

const Layout = () => {
  const menuItems = [
    { title: '首页', path: '/' },
    { title: '用户管理', path: '/users' },
    { title: '订单管理', path: '/orders' },
    // 其他菜单项
  ];

  return (
    <div className="layout">
      <div className="sidebar">
        <ul>
          {menuItems.map((item, index) => (
            <li key={index}>
              <a href={item.path}>{item.title}</a>
            </li>
          ))}
        </ul>
      </div>
      <div className="content">
        {/* 主要内容区域的内容 */}
      </div>
    </div>
  );
}

export default Layout;

4. 기본 콘텐츠 영역 만들기

사이드바 외에도 각 모듈의 특정 콘텐츠를 표시하기 위한 기본 콘텐츠 영역도 만들어야 합니다. 레이아웃 구성 요소에서는 React Router를 사용하여 페이지 라우팅 및 렌더링을 구현할 수 있습니다.

먼저 React Router를 설치해야 합니다:

npm install react-router-dom

그런 다음 Layout.js에 React Router를 도입하고 MainContent라는 구성 요소를 만들어 특정 콘텐츠 페이지를 렌더링합니다.

import React from 'react';
import { BrowserRouter as Router, Route, Switch } from 'react-router-dom';

const Home = () => <h1>首页</h1>;
const Users = () => <h1>用户管理</h1>;
const Orders = () => <h1>订单管理</h1>;
// 其他页面组件

const MainContent = () => {
  return (
    <Switch>
      <Route exact path="/" component={Home} />
      <Route path="/users" component={Users} />
      <Route path="/orders" component={Orders} />
      // 其他路由规则
    </Switch>
  );
}

const Layout = () => {
  const menuItems = [
    { title: '首页', path: '/' },
    { title: '用户管理', path: '/users' },
    { title: '订单管理', path: '/orders' },
    // 其他菜单项
  ];

  return (
    <Router>
      <div className="layout">
        <div className="sidebar">
          <ul>
            {menuItems.map((item, index) => (
              <li key={index}>
                <a href={item.path}>{item.title}</a>
              </li>
            ))}
          </ul>
        </div>
        <div className="content">
          <MainContent />
        </div>
      </div>
    </Router>
  );
}

export default Layout;

5. 반응형 디자인

배경 관리 시스템이 다양한 기기에서 좋은 디스플레이 효과를 가지게 하려면 반응형 디자인 기능을 추가해야 합니다. React의 CSS 모듈성은 우리가 이 목표를 달성하는 데 도움이 될 수 있습니다.

먼저 클래스 이름과 반응형이라는 두 라이브러리를 설치해야 합니다.

npm install classnames react-responsive

그런 다음 Layout.js에서 이 두 라이브러리를 사용하여 반응형 디자인을 구현할 수 있습니다.

import React from 'react';
import { BrowserRouter as Router, Route, Switch } from 'react-router-dom';
import { useMediaQuery } from 'react-responsive';
import classNames from 'classnames';

const Home = () => <h1>首页</h1>;
const Users = () => <h1>用户管理</h1>;
const Orders = () => <h1>订单管理</h1>;
// 其他页面组件

const MainContent = () => {
  return (
    <Switch>
      <Route exact path="/" component={Home} />
      <Route path="/users" component={Users} />
      <Route path="/orders" component={Orders} />
      // 其他路由规则
    </Switch>
  );
}

const Layout = () => {
  const menuItems = [
    { title: '首页', path: '/' },
    { title: '用户管理', path: '/users' },
    { title: '订单管理', path: '/orders' },
    // 其他菜单项
  ];

  const isMobile = useMediaQuery({ maxWidth: 767 });

  return (
    <Router>
      <div className={classNames('layout', { 'mobile': isMobile })}>
        <div className="sidebar">
          <ul>
            {menuItems.map((item, index) => (
              <li key={index}>
                <a href={item.path}>{item.title}</a>
              </li>
            ))}
          </ul>
        </div>
        <div className="content">
          <MainContent />
        </div>
      </div>
    </Router>
  );
}

export default Layout;

위 코드에서는 반응형 라이브러리의 useMediaQuery 후크를 사용하여 현재 장치가 모바일 장치인지 확인합니다. 다양한 상황에 따라 레이아웃 요소에 다양한 클래스 이름을 추가하여 다양한 스타일을 구현할 수 있습니다.

6. 스타일 추가

마지막으로 백엔드 관리 시스템에도 몇 가지 스타일을 추가해야 합니다. CSS 모듈성을 사용하여 스타일을 관리하고 작성할 수 있습니다. src 디렉터리에 styles라는 폴더를 만들고 그 안에layout.module.css라는 파일을 만듭니다.

.layout {
  display: flex;
  height: 100vh;
}

.sidebar {
  width: 240px;
  background: #f0f0f0;
  padding: 20px;
}

.content {
  flex: 1;
  padding: 20px;
}

.mobile .sidebar {
  display: none;
}

.mobile .content {
  width: 100%;
}

ul {
  list-style: none;
  padding: 0;
}

li {
  margin-bottom: 10px;
}

a {
  text-decoration: none;
  color: #333;
}

a:hover {
  color: #ff6600;
}

Layout.js에서는 CSS 모듈식 접근 방식을 사용하여 스타일을 도입합니다.

import React from 'react';
import { BrowserRouter as Router, Route, Switch } from 'react-router-dom';
import { useMediaQuery } from 'react-responsive';
import classNames from 'classnames';
import styles from './styles/layout.module.css';

const Home = () => <h1>首页</h1>;
const Users = () => <h1>用户管理</h1>;
const Orders = () => <h1>订单管理</h1>;
// 其他页面组件

const MainContent = () => {
  return (
    <Switch>
      <Route exact path="/" component={Home} />
      <Route path="/users" component={Users} />
      <Route path="/orders" component={Orders} />
      // 其他路由规则
    </Switch>
  );
}

const Layout = () => {
  const menuItems = [
    { title: '首页', path: '/' },
    { title: '用户管理', path: '/users' },
    { title: '订单管理', path: '/orders' },
    // 其他菜单项
  ];

  const isMobile = useMediaQuery({ maxWidth: 767 });

  return (
    <Router>
      <div className={classNames(styles.layout, { [styles.mobile]: isMobile })}>
        <div className={styles.sidebar}>
          <ul>
            {menuItems.map((item, index) => (
              <li key={index}>
                <a href={item.path}>{item.title}</a>
              </li>
            ))}
          </ul>
        </div>
        <div className={styles.content}>
          <MainContent />
        </div>
      </div>
    </Router>
  );
}

export default Layout;

지금까지 React 기반의 반응형 백엔드 관리 시스템 개발을 완료했습니다. 물론 이는 단순한 예일 뿐이며 실제 프로젝트에서는 특정 요구에 따라 더 많은 기능과 인터페이스를 개발해야 합니다. 이 글이 도움이 되었으면 좋겠고, 궁금하신 점이 있으시면 언제든지 문의해주세요.

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