So verwenden Sie React, um ein reaktionsfähiges Backend-Managementsystem zu entwickeln

So verwenden Sie React, um ein reaktionsfähiges Backend-Managementsystem zu entwickeln

Mit der rasanten Entwicklung des Internets benötigen immer mehr Unternehmen und Organisationen ein effizientes, flexibles und einfach zu verwaltendes Backend-Managementsystem, um den täglichen Betrieb abzuwickeln . . Als eine der derzeit beliebtesten JavaScript-Bibliotheken bietet React eine übersichtliche, effiziente und wartbare Möglichkeit, Benutzeroberflächen zu erstellen. In diesem Artikel wird erläutert, wie Sie mit React ein reaktionsfähiges Backend-Managementsystem entwickeln, und es werden konkrete Codebeispiele aufgeführt.

1. React-Projekt erstellen

Zuerst müssen wir Node.js und npm installieren, um React-Projekte zu erstellen und zu verwalten. Öffnen Sie das Befehlszeilentool und führen Sie den folgenden Befehl aus, um ein neues React-Projekt zu erstellen:

npx create-react-app backend-system

Dadurch wird ein neues Verzeichnis namens backend-system erstellt und React und die zugehörigen Abhängigkeiten automatisch installiert.

2. Designsystem-Layout

In einem Backend-Managementsystem gibt es normalerweise eine Seitenleiste und einen Hauptinhaltsbereich. Wir können React-Komponenten verwenden, um das gesamte Layout zu erstellen.

Erstellen Sie zunächst einen Ordner mit dem Namen Layout im Verzeichnis src und erstellen Sie darin eine neue Datei Layout.js. In der Datei Layout.js können wir eine React-Komponente namens Layout als Layout des gesamten Hintergrundverwaltungssystems definieren.

import React from 'react';

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

export default Layout;

3. Eine Seitenleiste erstellen

In der Layout-Komponente müssen wir eine Seitenleiste erstellen, um das Navigationsmenü anzuzeigen. Wir können die Listenrendering-Funktion von React verwenden, um Menüelemente zu generieren.

Fügen Sie in Layout.js den folgenden Code hinzu:

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. Erstellen Sie den Hauptinhaltsbereich

Zusätzlich zur Seitenleiste müssen wir auch einen Hauptinhaltsbereich erstellen, um den spezifischen Inhalt jedes Moduls anzuzeigen. In der Layout-Komponente können wir React Router verwenden, um Seitenrouting und -rendering zu implementieren.

Zuerst müssen wir React Router installieren:

npm install react-router-dom

Dann führen wir React Router in Layout.js ein und erstellen eine Komponente namens MainContent, um die spezifische Inhaltsseite zu rendern.

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. Responsives Design

Damit das Hintergrundverwaltungssystem auf verschiedenen Geräten gute Anzeigeeffekte erzielt, müssen wir die Funktion des responsiven Designs hinzufügen. Die CSS-Modularität von React kann uns dabei helfen, dieses Ziel zu erreichen.

Zuerst müssen wir die beiden Bibliotheken „classnames“ und „react-responsive“ installieren:

npm install classnames react-responsive

Dann können wir diese beiden Bibliotheken in Layout.js verwenden, um responsives Design zu implementieren.

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;

Im obigen Code verwenden wir den useMediaQuery-Hook in der React-Responsive-Bibliothek, um zu bestimmen, ob das aktuelle Gerät ein mobiles Gerät ist. Je nach Situation können wir Layoutelementen unterschiedliche Klassennamen hinzufügen, um unterschiedliche Stile zu erzielen.

6. Stile hinzufügen

Schließlich müssen wir auch einige Stile zum Backend-Verwaltungssystem hinzufügen. Wir können die CSS-Modularität nutzen, um Stile zu verwalten und zu schreiben. Erstellen Sie im Verzeichnis src einen Ordner mit dem Namen „styles“ und darin eine Datei mit dem Namen „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;
}

In Layout.js verwenden Sie den modularen CSS-Ansatz, um Stile einzuführen.

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;

Bisher haben wir die Entwicklung eines responsiven Backend-Managementsystems auf Basis von React abgeschlossen. Dies ist natürlich nur ein einfaches Beispiel. In tatsächlichen Projekten müssen weitere Funktionen und Schnittstellen entsprechend den spezifischen Anforderungen entwickelt werden. Ich hoffe, dieser Artikel kann Ihnen helfen. Wenn Sie Fragen haben, können Sie diese gerne stellen.

Das obige ist der detaillierte Inhalt vonSo verwenden Sie React, um ein reaktionsfähiges Backend-Managementsystem zu entwickeln. Für weitere Informationen folgen Sie bitte anderen verwandten Artikeln auf der PHP chinesischen Website!