车站物资管理系统：多权限控制、规范借还流程及前后端代码实现

前端代码（React示例） ```javascript import React, { useState, useEffect } from 'react'; function App() { const [companies, setCompanies] = useState([]); const [centers, setCenters] = useState([]); const [stations, setStations] = useState([]); const [items, setItems] = useState([]); const [selectedCompany, setSelectedCompany] = useState(''); const [selectedCenter, setSelectedCenter] = useState(''); const [selectedStation, setSelectedStation] = useState(''); const [selectedItem, setSelectedItem] = useState(''); const [borrowRecords, setBorrowRecords] = useState([]); useEffect(() => { // 模拟获取公司数据 setCompanies(['客运一公司', '客运二公司', '客运三公司']); }, []); useEffect(() => { if (selectedCompany) { // 模拟获取中心数据 setCenters(['站务一中心', '站务二中心', '站务三中心', '站务四中心', '站务五中心', '站务六中心']); } }, [selectedCompany]); useEffect(() => { if (selectedCenter) { // 模拟获取车站数据 setStations(['车站A', '车站B', '车站C']); } }, [selectedCenter]); useEffect(() => { if (selectedStation) { // 模拟获取物品数据 setItems(['物品1', '物品2', '物品3']); } }, [selectedStation]); const handleBorrow = async () => { if (selectedItem) { // 模拟借用请求 const response = await fetch('/api/borrow', { method: 'POST', headers: { 'Content-Type': 'application/json', }, body: JSON.stringify({ company: selectedCompany, center: selectedCenter, station: selectedStation, item: selectedItem, }), }); const data = await response.json(); if (data.success) { setBorrowRecords([...borrowRecords, data.record]); } } }; const handleReturn = async (record) => { // 模拟归还请求 const response = await fetch('/api/return', { method: 'POST', headers: { 'Content-Type': 'application/json', }, body: JSON.stringify({ recordId: record.id, }), }); const data = await response.json(); if (data.success) { setBorrowRecords(borrowRecords.filter(r => r.id !== record.id)); } }; return ( <div> <h1>车站物资管理系统</h1> <div> <label>选择公司:</label> <select value={selectedCompany} onChange={(e) => setSelectedCompany(e.target.value)}> <option value="">请选择</option> {companies.map(company => ( <option key={company} value={company}>{company}</option> ))} </select> </div> <div> <label>选择中心:</label> <select value={selectedCenter} onChange={(e) => setSelectedCenter(e.target.value)}> <option value="">请选择</option> {centers.map(center => ( <option key={center} value={center}>{center}</option> ))} </select> </div> <div> <label>选择车站:</label> <select value={selectedStation} onChange={(e) => setSelectedStation(e.target.value)}> <option value="">请选择</option> {stations.map(station => ( <option key={station} value={station}>{station}</option> ))} </select> </div> <div> <label>选择物品:</label> <select value={selectedItem} onChange={(e) => setSelectedItem(e.target.value)}> <option value="">请选择</option> {items.map(item => ( <option key={item} value={item}>{item}</option> ))} </select> </div> <button onClick={handleBorrow}>借用</button> <h2>借用记录</h2> <ul> {borrowRecords.map(record => ( <li key={record.id}> {record.item} - {record.station} <button onClick={() => handleReturn(record)}>归还</button> </li> ))} </ul> </div> ); } export default App; ``` 后端代码（Node.js + Express示例） ```javascript const express = require('express'); const bodyParser = require('body-parser'); const app = express(); app.use(bodyParser.json()); let items = { '客运一公司': { '站务一中心': { '车站A': { '物品1': 5, '物品2': 3, '物品3': 10 }, '车站B': { '物品1': 2, '物品2': 7, '物品3': 4 }, }, '站务二中心': { '车站C': { '物品1': 8, '物品2': 1, '物品3': 6 }, }, }, // 其他公司和中心的数据 }; let borrowRecords = []; app.post('/api/borrow', (req, res) => { const { company, center, station, item } = req.body; if (items[company][center][station][item] > 0) { items[company][center][station][item] -= 1; const record = { id: borrowRecords.length + 1, company, center, station, item }; borrowRecords.push(record); res.json({ success: true, record }); } else { res.json({ success: false, message: '库存不足' }); } }); app.post('/api/return', (req, res) => { const { recordId } = req.body; const record = borrowRecords.find(r => r.id === recordId); if (record) { items[record.company][record.center][record.station][record.item] += 1; borrowRecords = borrowRecords.filter(r => r.id !== recordId); res.json({ success: true }); } else { res.json({ success: false, message: '记录未找到' }); } }); app.listen(3000, () => { console.log('Server is running on port 3000'); }); ``` 额外需要注意的逻辑点 1. 库存实时刷新：前端需要定期从后端获取最新的库存数据，确保用户看到的库存信息是最新的。 2. 权限控制：后端需要对每个请求进行权限验证，确保只有拥有相应权限的用户才能执行操作。 3. 错误处理：前端和后端都需要对可能的错误情况进行处理，如网络错误、权限不足等，并给出友好的提示信息。 ######[AI写代码神器 | 1509点数解答 | 2025-02-20 17:35:53]