Cara menggunakan React untuk membangunkan sistem pengurusan bahagian belakang yang responsif

Cara menggunakan React untuk membangunkan sistem pengurusan bahagian belakang yang responsif

Dengan perkembangan pesat Internet, semakin banyak syarikat dan organisasi memerlukan sistem pengurusan bahagian belakang yang cekap, fleksibel dan mudah diurus untuk mengendalikan operasi harian . Sebagai salah satu perpustakaan JavaScript yang paling popular pada masa ini, React menyediakan cara yang ringkas, cekap dan boleh diselenggara untuk membina antara muka pengguna. Artikel ini akan memperkenalkan cara menggunakan React untuk membangunkan sistem pengurusan bahagian belakang responsif dan memberikan contoh kod khusus.

1. Buat Projek React

Mula-mula, kita perlu memasang Node.js dan npm untuk mencipta dan mengurus projek React. Buka alat baris arahan dan laksanakan arahan berikut untuk mencipta projek React baharu:

npx create-react-app backend-system

Ini akan mencipta direktori baharu yang dipanggil backend-system dan memasang React dan kebergantungan berkaitannya secara automatik.

2. Reka letak sistem reka bentuk

Dalam sistem pengurusan bahagian belakang, biasanya terdapat bar sisi dan kawasan kandungan utama. Kita boleh menggunakan komponen React untuk membina keseluruhan reka letak.

Mula-mula, buat folder bernama Layout dalam direktori src dan buat fail Layout.js baharu di dalamnya. Dalam fail Layout.js, kita boleh mentakrifkan komponen React bernama Layout sebagai reka letak keseluruhan sistem pengurusan latar belakang.

import React from 'react';

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

export default Layout;

3. Mencipta bar sisi

Dalam komponen Layout, kita perlu mencipta bar sisi untuk memaparkan menu navigasi. Kita boleh menggunakan fungsi pemaparan senarai React untuk menjana item menu.

Dalam Layout.js, tambahkan kod berikut:

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. Buat kawasan kandungan utama

Selain bar sisi, kita juga perlu mencipta kawasan kandungan utama untuk memaparkan kandungan khusus setiap modul. Dalam komponen Layout, kita boleh menggunakan React Router untuk melaksanakan penghalaan dan pemaparan halaman.

Mula-mula, kita perlu memasang React Router:

npm install react-router-dom

Kemudian, perkenalkan React Router dalam Layout.js dan buat komponen bernama MainContent untuk memaparkan halaman kandungan tertentu.

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

const Home = () => <h1 id="首页">首页</h1>;
const Users = () => <h1 id="用户管理">用户管理</h1>;
const Orders = () => <h1 id="订单管理">订单管理</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. Reka bentuk responsif

Untuk menjadikan sistem pengurusan latar belakang mempunyai kesan paparan yang baik pada peranti yang berbeza, kita perlu menambah fungsi reka bentuk responsif. Modulariti CSS React boleh membantu kami mencapai matlamat ini.

Mula-mula, kita perlu memasang dua nama kelas perpustakaan dan bertindak balas:

npm install classnames react-responsive

Kemudian, kita boleh menggunakan kedua-dua perpustakaan ini dalam Layout.js untuk melaksanakan reka bentuk responsif.

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 id="首页">首页</h1>;
const Users = () => <h1 id="用户管理">用户管理</h1>;
const Orders = () => <h1 id="订单管理">订单管理</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;

Dalam kod di atas, kami menggunakan cangkuk useMediaQuery dalam perpustakaan responsif tindak balas untuk menentukan sama ada peranti semasa ialah peranti mudah alih. Mengikut situasi yang berbeza, kita boleh menambah nama kelas yang berbeza pada elemen susun atur untuk mencapai gaya yang berbeza.

6. Tambah gaya

Akhir sekali, kami juga perlu menambah beberapa gaya pada sistem pengurusan bahagian belakang. Kita boleh menggunakan modulariti CSS untuk mengurus dan menulis gaya. Cipta folder bernama gaya dalam direktori src dan buat fail bernama layout.module.css di dalamnya.

.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;
}

Dalam Layout.js, gunakan pendekatan modular CSS untuk memperkenalkan gaya.

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 id="首页">首页</h1>;
const Users = () => <h1 id="用户管理">用户管理</h1>;
const Orders = () => <h1 id="订单管理">订单管理</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;

Setakat ini, kami telah menyelesaikan pembangunan sistem pengurusan bahagian belakang responsif berdasarkan React. Sudah tentu, ini hanyalah contoh mudah Dalam projek sebenar, lebih banyak fungsi dan antara muka perlu dibangunkan mengikut keperluan tertentu. Saya harap artikel ini dapat membantu anda, jika anda mempunyai sebarang pertanyaan, sila berasa bebas untuk bertanya.

Atas ialah kandungan terperinci Cara menggunakan React untuk membangunkan sistem pengurusan bahagian belakang yang responsif. Untuk maklumat lanjut, sila ikut artikel berkaitan lain di laman web China PHP!