//classDiagram
// class Bancai {
// Integer id
// Caizhi caizhi
// Mupi mupi1
// Mupi mupi2
// Double houdu
// Kucun kucun
// }
//
// class Caizhi {
// String name
// List~Bancai~ bancai
// }
//
// class Mupi {
// String name
// Boolean you
// List~Bancai~ bancaisForMupi1
// List~Bancai~ bancaisForMupi2
// }
//
// class Chanpin {
// String bianhao
// List~Chanpin_zujian~ chanpin_zujian
// List~Dingdan_chanpin~ dingdan_chanpin
// }
//
// class Zujian {
// String name
// List~Chanpin_zujian~ chanping_zujian
// }
//
// class Chanpin_zujian {
// Bancai bancai
// Double one_howmany
// Double zujianshu
// }
//
// class Dingdan {
// String number
// Date xiadan
// Date jiaohuo
// List~Dingdan_chanpin~ dingdan_chanpin
// }
//
// class Dingdan_chanpin {
// Integer shuliang
// }
//
// class Kucun {
// Integer shuliang
// Dingdan reservedOrder
// }
//
// class Jinhuo {
// Integer shuliang
// Date date
// }
//
// class User {
// String name
// String andy
// String pass
// int role
// }
//
// Bancai "1"
-- "1" Caizhi
// Bancai "1"
-- "1" Mupi : mupi1
// Bancai "1"
-- "1" Mupi : mupi2
// Bancai "1"
-- "1" Kucun
// Caizhi "1"
-- "*" Bancai
// Mupi "1"
-- "*" Bancai : mupi1
// Mupi "1"
-- "*" Bancai : mupi2
// Chanpin "1"
-- "*" Chanpin_zujian
// Chanpin "1"
-- "*" Dingdan_chanpin
// Zujian "1"
-- "*" Chanpin_zujian
// Chanpin_zujian "1"
-- "1" Bancai
// Dingdan "1"
-- "*" Dingdan_chanpin
// Dingdan_chanpin "1"
-- "1" Chanpin
// Kucun "0..1"
-- "1" Dingdan : reservedOrder
// Jinhuo "1"
-- "1" Dingdan_bancai
// Jinhuo "1"
-- "1" User
function resolveDataReferences
(data) {
// 获取 data 对象的所有顶层键
const keys
= Object.keys
(data);
// 遍历每个顶层键（如 users, posts 等）
for
(const key of keys) {
const entities
= data[key];
// 遍历该顶层键下的每个实体（如每个 user 或 post）
for
(const entity of entities) {
// 遍历实体的每个属性
for
(const attribute in entity) {
if
(entity?.hasOwnProperty
(attribute)) {
var trpe
=attribute?.replace
(/\d/g, '');
// 确保属性属于当前实体
if
(Array.isArray
(entity[attribute])) {
if
(data[trpe]
==null){
trpe+
="s"
}
// 如果属性是一个数组，则将数组中的每个 ID 替换为对应的实际对象
entity[attribute]
= entity[attribute].map
(item
=>
data[trpe ]?.find
(updateItem
=> updateItem.id
=== item.id) || item
);
} else if
(typeof entity[attribute]
=== "object" && entity[attribute] !
== null) {
// 如果属性是一个对象，则将其替换为对应的实际对象
entity[attribute]
= data[trpe + "s"]?.find
(updateItem
=> updateItem.id
=== entity[attribute].id);
}
}
}
}
}
console.log
(data)
return data;
}
/**
* 数据管理器类，负责与后端API通信并管理数据
*/
class DataManager {
constructor
(baseUrl) {
this.baseUrl
= baseUrl;
this.data
= {
bancais: [],
dingdans: [],
mupis: [],
chanpins: [],
kucuns: [],
dingdan_bancais:[],
chanpin_zujians: [],
zujians: [],
caizhis: [],
dingdan_chanpins: [],
users: [],
jinhuos: []
};
this.isSyncing
= false;
this.lastSync
= null;
this.callbacks
= {
all: [],
bancais: [],
dingdan: [],
mupi: [],
chanpin: [],
kucun: [],
chanpin_zujian: [],
dingdan_bancai:[],
zujian: [],
caizhi: [],
dingdan_chanpin: [],
user: [],
jinhuo: []
};
this.syncQueue
= Promise.resolve
();
}
/**
* 获取所有数据
* @returns {Promise<boolean>} 是否成功
*/
async fetchAll
() {
console.log
(this)
try {
const response
= await fetch
(`${this.baseUrl}/app/all`);
if
(!response.ok) th
row new Error
('Network response was not ok');
const result
= await response.json
();
if
(result.status !
== 200) th
row new Error
(result.text || 'API error');
const resolvedData
= resolveDataReferences
(result.data);
// 更新本地数据
Object.keys
(this.data).forEach
(key
=> {
if
(resolvedData[key]) {
this.data[key]
= resolvedData[key];
}
});
this.lastSync
= new Date
();
// 关键改进：数据更新后触发刷新回调
this.triggerCallbacks
('refresh', 'all', this.data);
return true;
} catch
(error) {
console.error
('Fetch error:', error);
// 触发错误回调
this.triggerCallbacks
('fetch_error', 'all', { error });
return false;
}
}
/**
* 注册回调函数
* @param {string} entity
- 实体类型（如'bancai'）或'all'表示全局回调
* @param {Function} callback
- 回调函数，参数为
(operation, data)
*/
registerCallback
(entity, callback) {
if
(!this.callbacks[entity]) {
this.callbacks[entity]
= [];
}
this.callbacks[entity].push
(callback);
}
/**
* 移除回调函数
* @param {string} entity
- 实体类型单数性质
* @param {Function} callback
- 要移除的回调函数
*/
unregisterCallback
(entity, callback) {
if
(!this.callbacks[entity]) return;
const index
= this.callbacks[entity].indexOf
(callback);
if
(index !
== -1) {
this.callbacks[entity].splice
(index, 1);
}
}
/**
* 触发回调
* @param {string} operation
- 操作类型（'add', 'update', 'delete'）
* @param {string} entity
- 实体类型单数性质
* @param {Object} data
- 相关数据
*/
triggerCallbacks
(operation, entity, data) {
// 触发全局回调
this.callbacks.all.forEach
(cb
=> cb
(operation, entity, data));
// 触发特定实体回调
if
(this.callbacks[entity]) {
this.callbacks[entity].forEach
(cb
=> cb
(operation, data));
}
}
/**
* 执行CRUD操作并触发回调
*/
async crudOperation
(operation, entity, data) {
try {
const response
= await fetch
(`${this.baseUrl}/app/${operation}/${entity}`, {
method: 'POST',
headers: {'Content
-Type': 'application/json'},
body: JSON.stringify
(data)
});
if
(!response.ok) th
row new Error
('Network response was not ok');
const result
= await response.json
();
if
(result.status !
== 200) th
row new Error
(result.text || 'API error');
// 自动同步数据
this.syncData
();
// 触发操作成功的回调
this.triggerCallbacks
(operation, entity, data);
return result;
} catch
(error) {
console.error
('CRUD error:', error);
// 触发操作失败的回调
this.triggerCallbacks
(`${operation}_error`, entity, {
data,
error: error.message
});
th
row error;
}
}
/**
* 执行CRUD操作
* @param {string} operation
- 'add', 'delete', 'update'
* @param {string} entity
- 实体名称单数性质（小写）
* @param {Object} data
- 要发送的数据 后端要求数据格式为{属性: "值", 关联对象: {id:0}, 关联对象集: [{id:0}]}
* @returns {Promise<Object>} 响应结果
*/
async crudOperation
(operation, entity, data) {
try {
const response
= await fetch
(`${this.baseUrl}/app/${operation}/${entity}`, {
method: 'POST',
headers: {'Content
-Type': 'application/json'},
body: JSON.stringify
(data)
});
if
(!response.ok) th
row new Error
('Network response was not ok');
const result
= await response.json
();
if
(result.status !
== 200) th
row new Error
(result.text || 'API error');
// 自动同步数据
this.syncQueue
= this.syncQueue.then
(async
()
=> {
await this.syncData
();
// 同步完成后触发操作回调
this.triggerCallbacks
(operation, entity, data);
});
return result;
} catch
(error) {
console.error
('CRUD error:', error);
// 触发操作失败的回调
this.triggerCallbacks
(`${operation}_error`, entity, {
data,
error: error.message
});
th
row error;
}
}
/**
* 自动同步数据（防止频繁请求）
*/
async syncData
() {
if
(this.isSyncing) {
this.pendingSync
= true;
return;
}
this.isSyncing
= true;
try {
await this.fetchAll
();
} catch
(error) {
console.error
('Sync failed:', error);
} finally {
this.isSyncing
= false;
// 处理等待中的同步请求
if
(this.pendingSync) {
this.pendingSync
= false;
setTimeout
(()
=> this.syncData
(), 1000);
}
}
}
/**
* 添加实体
* @param {string} entity
- 实体名称单数性质
* @param {Object} data
- 实体数据
*/
async addEntity
(entity, data) {
return this.crudOperation
('add', entity, data);
}
/**
* 更新实体
* @param {string} entity
- 实体名称单数性质
* @param {Object} data
- 实体数据（必须包含id）
*/
async updateEntity
(entity, data) {
return this.crudOperation
('update', entity, data);
}
/**
* 删除实体
* @param {string} entity
- 实体名称单数性质
* @param {number} id
- 实体ID
*/
async deleteEntity
(entity, id) {
return this.crudOperation
('delete', entity, {id});
}
/**
* 新增方法：手动触发数据刷新
*/
async refreshData
() {
return this.syncQueue
= this.syncQueue.then
(()
=> this.syncData
());
}
}
export { DataManager };
// 创建单例实例
//const dataManager
= new DataManager
('http://127.0.0.1:8080/KuCun2');
//// 初始化时获取所有数据
//dataManager.fetchAll
().then
(()
=> {
// console.log
('Initial data loaded');
//});
// 导出数据对象，外部可以直接访问 data.bancais, data.dingdans 等
//export const data
= dataManager.data;
//// 导出操作方法
//export const addEntity
= dataManager.addEntity.bind
(dataManager);
//export const updateEntity
= dataManager.updateEntity.bind
(dataManager);
//export const deleteEntity
= dataManager.deleteEntity.bind
(dataManager);
//export const fetchAll
= dataManager.fetchAll.bind
(dataManager);<!DOCTYPE html>
<html lang
="zh
-CN">
<head>
<meta charset
="UTF
-8">
<meta name
="viewport" content
="width
=device
-width, initial
-scale
=1.0">
<title>板材库存查询系统</title>
<!
-- 引入外部CSS
-->
<link rel
="stylesheet" href
="../css/dingdan.css">
<!
-- 引入jQuery
-->
<script src
="https://code.jquery.com/jquery
-3.6.0.min.js"></script>
<!
-- 引入Bootstrap
-->
<link href
="../js/bootstrap
-5.3.0
-alpha1
-dist/css/bootstrap.min.css" rel
="stylesheet">
<script src
="../js/bootstrap
-5.3.0
-alpha1
-dist/umd/popper.min.js"></script>
<script src
="../js/bootstrap
-5.3.0
-alpha1
-dist/js/bootstrap.min.js"></script>
<!
-- 引入Bootstrap Icons
-->
<link rel
="stylesheet" href
="../js/bootstrap
-icons
-1.8.1/bootstrap
-icons.css">
<!
-- 引入主JS文件
-->
<script src
="../js/main.js"></script>
</head>
<body>
<div class
="container py
-4">
<!
-- 标题部分
-->
<div class
="text
-center mb
-4">
<h1 class
="text
-primary"><i class
="bi bi
-boxes"></i> 板材库存管理系统</h1>
<p class
="text
-muted">查询订单、产品、板材及库存信息</p>
</div>
<!
-- 统计卡片
-->
<div class
="
row mb
-4">
<div class
="col
-md
-3">
<div class
="card stats
-card border
-primary">
<div class
="card
-body">
<h5 class
="card
-title">订单总数</h5>
<p class
="card
-text fs
-3 text
-primary" id
="orderCount">0</p>
</div>
</div>
</div>
<div class
="col
-md
-3">
<div class
="card stats
-card border
-info">
<div class
="card
-body">
<h5 class
="card
-title">产品种类</h5>
<p class
="card
-text fs
-3 text
-info" id
="productCount">0</p>
</div>
</div>
</div>
<div class
="col
-md
-3">
<div class
="card stats
-card border
-success">
<div class
="card
-body">
<h5 class
="card
-title">板材库存</h5>
<p class
="card
-text fs
-3 text
-success" id
="materialCount">0</p>
</div>
</div>
</div>
<div class
="col
-md
-3">
<div class
="card stats
-card border
-warning">
<div class
="card
-body">
<h5 class
="card
-title">库存总量</h5>
<p class
="card
-text fs
-3 text
-warning" id
="totalStock">0</p>
</div>
</div>
</div>
</div>
<!
-- 搜索区域
-->
<div class
="card search
-section mb
-4">
<div class
="card
-header">
<h5 class
="mb
-0"><i class
="bi bi
-search me
-2"></i>高级搜索</h5>
</div>
<div class
="card
-body">
<div class
="
row g
-3">
<!
-- 订单搜索
-->
<div class
="col
-md
-4">
<div class
="search
-control">
<i class
="bi bi
-clipboard
-search search
-icon"></i>
<input type
="text" class
="form
-control with
-icon" id
="orderSearch" placeholder
="搜索订单号..." aria
-label
="订单号搜索">
</div>
</div>
<!
-- 产品搜索
-->
<div class
="col
-md
-4">
<div class
="search
-control">
<i class
="bi bi
-grid search
-icon"></i>
<input type
="text" class
="form
-control with
-icon" id
="productSearch" placeholder
="搜索产品编号..." aria
-label
="产品编号搜索">
</div>
</div>
<!
-- 板材搜索
-->
<div class
="col
-md
-4">
<div class
="search
-control">
<i class
="bi bi
-box search
-icon"></i>
<input type
="text" class
="form
-control with
-icon" id
="materialSearch" placeholder
="搜索板材ID或材质..." aria
-label
="板材搜索">
</div>
</div>
<!
-- 木皮搜索
-->
<div class
="col
-md
-4">
<div class
="search
-control">
<i class
="bi bi
-tree search
-icon"></i>
<input type
="text" class
="form
-control with
-icon" id
="woodSearch" placeholder
="搜索木皮名称..." aria
-label
="木皮搜索">
</div>
</div>
<!
-- 厚度搜索
-->
<div class
="col
-md
-4">
<div class
="search
-control">
<i class
="bi bi
-ar
rows
-vertical search
-icon"></i>
<input type
="number" class
="form
-control with
-icon" id
="thicknessSearch" placeholder
="厚度
(mm)" min
="0" step
="0.1">
</div>
</div>
<!
-- 库存范围搜索
-->
<div class
="col
-md
-4">
<div class
="input
-group">
<span class
="input
-group
-text"><i class
="bi bi
-box"></i></span>
<input type
="number" class
="form
-control" id
="minStock" placeholder
="最小库存" min
="0">
<input type
="number" class
="form
-control" id
="maxStock" placeholder
="最大库存" min
="0">
<button class
="btn btn
-primary" type
="button" id
="stockStatusBtn">
<i class
="bi bi
-search"></i>
</button>
</div>
</div>
</div>
</div>
</div>
<!
-- 结果区域
-->
<div class
="card">
<div class
="card
-header d
-flex justify
-content
-between align
-items
-center">
<h5 class
="mb
-0"><i class
="bi bi
-table me
-2"></i>查询结果</h5>
<div class
="text
-secondary">
<span id
="resultCount">0</span> 条记录
<span class
="ms
-2"><i class
="bi bi
-info
-circle"></i> <small>实时数据更新时间: <span id
="lastUpdate">
--:
--:
--</span></small></span>
</div>
</div>
<div class
="card
-body result
-section">
<div class
="table
-responsive">
<table class
="table table
-hover" id
="resultsTable">
<thead class
="table
-light sticky
-top">
<tr>
<th data
-sortable>订单号 <span class
="sort
-indicator"></span></th>
<th data
-sortable>产品信息 <span class
="sort
-indicator"></span></th>
<th data
-sortable>产品数量 <span class
="sort
-indicator"></span></th>
<th data
-sortable>组件 <span class
="sort
-indicator"></span></th>
<th data
-sortable>板材 <span class
="sort
-indicator"></span></th>
<th data
-sortable>单件用量 <span class
="sort
-indicator"></span></th>
<th data
-sortable>订单用量 <span class
="sort
-indicator"></span></th>
<th data
-sortable>库存数量 <span class
="sort
-indicator"></span></th>
<th>操作</th>
</tr>
</thead>
<tbody id
="resultBody">
<!
-- 数据加载中
-->
<tr id
="loading
Row">
<td colspan
="9" class
="text
-center py
-5">
<div class
="d
-flex align
-items
-center justify
-content
-center">
<div class
="spinner
-border text
-primary" role
="status">
<span class
="visually
-hidden">加载中...</span>
</div>
<div class
="ms
-3">正在加载数据，请稍候...</div>
</div>
</td>
</tr>
</tbody>
</table>
</div>
<!
-- 空结果提示
-->
<div id
="noResults" class
="no
-results text
-center py
-5" style
="display: none;">
<div>
<i class
="bi bi
-inboxes text
-muted" style
="font
-size: 3rem;"></i>
<h4 class
="mt
-3 text
-muted">没有找到匹配的记录</h4>
<p class
="text
-muted">请尝试调整您的搜索条件</p>
</div>
</div>
</div>
</div>
</div>
<!
-- 引入订单JS
-->
<script src
="../js/test.js"></script>
</body>
</html>
实现页面功能，DataManager.js已经在父级页面加载过了，直接到父级
调用， 业务基本逻辑 一个订单有很多产品不同数量，每个产品可以再很多订单中，一个产品有很多组件，一个组件可以在很多产品中，因为每个组件因为在不同的产品中有不同的生产工艺，所以使用不同的板材和板材能生产组件数量，每个板材有不同的材质和两面木皮，木皮表面可能有油漆， 订购时可能直接购入板材，也可能按订单和产品订购板材，也用可能按订单产品组件订购板材，每次采购不标准，一个订单可能订购几次，用户有姓名 账号 密码 权限， 一个记录进货和消耗，查看的时候会查看订单下有多少板材可用
本文探讨了在PHP编程中使用while循环遍历数据库查询结果时遇到的常见错误，并提供了有效的解决策略，帮助开发者高效定位和修复问题。
扫一扫
1155
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
