------------------------ DataManager
.js
------------------------
/**
* 数据管理器类，负责与后端API通信并管理数据
*/
class DataManager {
constructor
(baseUrl
) {
this
.baseUrl = baseUrl;
this
.data = {
bancais: [],
dingdans: [],
mupis: [],
chanpins: [],
kucuns: [],
dingdan_chanpin_zujians: [],
chanpin_zujians: [],
zujians: [],
caizhis: [],
dingdan_chanpins: [],
users: []
};
this
.isSyncing = false;
this
.lastSync = null;
}
/**
* 获取所有数据
* @returns {Promise<boolean>} 是否成功
*/
async fetchAll
() {
try {
const response = await fetch
(`
${this
.baseUrl}/app/all`
);
if
(!response
.ok
) throw new Error
('Network response was not ok'
);
const result = await response
.json
();
if
(result
.status !== 200
) throw new Error
(result
.text || 'API error'
);
// 更新本地数据
Object
.keys
(this
.data
).forEach
(key => {
if
(result
.data[key]
) {
this
.data[key] = result
.data[key];
}
}
);
this
.lastSync = new Date
();
return true;
} catch
(error
) {
console
.error
('Fetch error:', error
);
return false;
}
}
/**
* 执行CRUD操作
* @param {string} operation
- 'add', 'delete', 'update'
* @param {string} entity
- 实体名称（小写）
* @param {Object} data
- 要发送的数据
* @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
) throw new Error
('Network response was not ok'
);
const result = await response
.json
();
if
(result
.status !== 200
) throw new Error
(result
.text || 'API error'
);
// 自动
同步数据
this
.syncData
();
return result;
} catch
(error
) {
console
.error
('CRUD error:', error
);
throw error;
}
}
/**
* 自动
同步数据（防止频繁请求）
*/
async syncData
() {
if
(this
.isSyncing
) return;
// 距离上次
同步超过5秒才执行新
同步
if
(this
.lastSync && new Date
() - this
.lastSync < 5000
) {
setTimeout
(() => this
.syncData
(), 5000
- (new Date
() - this
.lastSync
));
return;
}
this
.isSyncing = true;
try {
await this
.fetchAll
();
} finally {
this
.isSyncing = false;
}
}
/**
* 添加实体
* @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}
);
}
}
// 创建单例实例
const dataManager = new DataManager
('http://your
-backend
-url
.com'
);
// 初始化时获取所有数据
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
);
------------------------ bancai
.js
------------------------
$(document
).ready
(function
() {
const
modal = new bootstrap
.Modal('#bancai
Modal'
);
let url={
bancis:"
../bancai/all",//全部板材
caizhi:"
../bancai/caizhis",//材质列表
mupi:"
../bancai/mupis",//木皮列表
detete:"
../bancai/delete/{id}",//板材删除
addbancai:"
../bancai/add"//板材添加
}
let currentMode = 'view'; // 'view', 'edit' 或 'add'
let bancaiData = []; // 存储当前板材数据
let caizhiList = []; // 存储材质列表
let mupiList = []; // 存储木皮列表
// 初始化函数
async function initialize
() {
console
.log
("111111111"
)
await fetchCaizhiOptions
();
await fetchMupiOptions
();
loadBancaiData
();
}
// 获取材质选项
function fetchCaizhiOptions
() {
console
.log
(url
)
return https
(url
.caizhi,null, function
(data
) {
caizhiList = data;
updateSelectOptions
('#caizhiSelect', data
);
}
);
}
// 获取木皮选项
function fetchMupiOptions
() {
return https
(url
.mupi,null, function
(data
) {
for
(var i in data
) {
mupiList[i]=data[i]
mupiList[i]
.name=data[i]
.you?data[i]
.name
+"
(油漆
)":data[i]
.name
}
// mupiList = data;
updateSelectOptions
('#mupi1Select', mupiList
);
updateSelectOptions
('#mupi2Select', mupiList
);
}
);
}
// 更新下拉框选项
function updateSelectOptions
(selector, data
) {
console
.log
(data
)
$(selector
).empty
();
data
.forEach
(item => {
$(selector
).append
(`<option value="
${item
.id}">
${item
.name}</option>`
);
}
);
}
// 加载板材数据
function loadBancaiData
() {
https
(url
.bancis,null, function
(data
) {
bancaiData = data;
renderBancaiTable
(data
);
}
);
}
// 渲染板材表格
function renderBancaiTable
(data
) {
const
$tbody =
$('#bancaiTable tbody'
);
$tbody
.empty
();
console
.log
(data
)
data
.forEach
(bancai => {
const caizhiName = bancai
.caizhi?
.name || '未知';
const mupi1Name = bancai
.mupi1?
.name || '未知';
const mupi2Name = bancai
.mupi2?
.name || '未知';
const row = `
<tr data
-id="
${bancai
.id}">
<td>
${bancai
.id}</td>
<td>
${caizhiName}</td>
<td>
${mupi1Name}
${bancai
.mupi1
.you?'
(油漆
)':""}</td>
<td>
${mupi2Name}
${bancai
.mupi2
.you?'
(油漆
)':""}</td>
<td>
${bancai
.houdu}</td>
<td>
<button class="btn btn
-sm btn
-info view
-btn">查看</button>
<button class="btn btn
-sm btn
-warning edit
-btn">编辑</button>
<button class="btn btn
-sm btn
-danger delete
-btn">删除</button>
</td>
</tr>
`;
$tbody
.append
(row
);
}
);
// 绑定行按钮事件
bindTableEvents
();
}
// 绑定表格事件
function bindTableEvents
() {
// 查看按钮
$('
.view
-btn'
).click
(function
() {
const id =
$(this
).closest
('tr'
).data
('id'
);
open
ModalForBancai
(id, 'view'
);
}
);
// 编辑按钮
$('
.edit
-btn'
).click
(function
() {
const id =
$(this
).closest
('tr'
).data
('id'
);
open
ModalForBancai
(id, 'edit'
);
}
);
// 删除按钮
$('
.delete
-btn'
).click
(function
() {
const id =
$(this
).closest
('tr'
).data
('id'
);
deleteBancai
(id
);
}
);
}
// 添加板材按钮点击事件
$('#addBancaiBtn'
).click
(function
() {
// 清空表单
$('#bancaiForm'
)[0]
.reset
();
$('#
modalTitle'
).text
('添加新板材'
);
currentMode = 'add';
// 启用表单
enableForm
(true
);
modal.show
();
}
);
// 打开弹窗显示板材数据
function open
ModalForBancai
(id, mode
) {
const bancai = bancaiData
.find
(b => b
.id === id
);
if
(!bancai
) return;
currentMode = mode;
// 填充表单
$('#bancaiId'
).val
(bancai
.id
);
$('#caizhiSelect'
).val
(bancai
.caizhi
.id
);
$('#mupi1Select'
).val
(bancai
.mupi1
.id
);
$('#mupi2Select'
).val
(bancai
.mupi2
.id
);
$('#houdu'
).val
(bancai
.houdu
);
//
设置标题
$('#
modalTitle'
).text
(mode === 'view' ? '板材详情' : '编辑板材'
);
//
设置表单状态
enableForm
(mode === 'edit'
);
modal.show
();
}
// 启用/禁用表单
function enableForm
(enable
) {
$('#caizhiSelect'
).prop
('disabled', !enable
);
$('#mupi1Select'
).prop
('disabled', !enable
);
$('#mupi2Select'
).prop
('disabled', !enable
);
$('#houdu'
).prop
('disabled', !enable
);
$('#saveBtn'
).toggle
(enable
);
}
// 保存按钮点击事件
$('#saveBtn'
).click
(function
() {
const formData = {
id:
$('#bancaiId'
).val
(),
caizhiId: parseInt
($('#caizhiSelect'
).val
()),
mupi1Id: parseInt
($('#mupi1Select'
).val
()),
mupi2Id: parseInt
($('#mupi2Select'
).val
()),
houdu: parseFloat
($('#houdu'
).val
())
};
const method = currentMode === 'add' ? 'POST' : 'PUT';
const url = currentMode === 'add' ? '/api/bancai' : `/api/bancai/
${formData
.id}`;
$.ajax
({
url: url,
method: method,
contentType: 'application/json',
data: JSON
.stringify
(formData
),
success: function
() {
loadBancaiData
();
modal.hide
();
},
error: function
() {
alert
('操作失败，请重试'
);
}
}
);
}
);
// 删除板材
function deleteBancai
(id
) {
if
(!confirm
('确定要删除此板材吗?'
)) return;
$.ajax
({
url: `
${url
.detete}/
${id}`,
method: 'DELETE',
success: function
() {
loadBancaiData
();
}
}
);
}
// 初始化应用
initialize
();
}
);
------------------------ bancai
.html
------------------------
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF
-8">
<meta name="viewport" content="width=device
-width, initial
-scale=1
.0">
<title>板材数据管理</title>
<!
-- 引入 Bootstrap CSS
-->
<link href="https://cdn
.jsdelivr
.net/npm/bootstrap@5
.3
.0/dist/css/bootstrap
.min
.css" rel="stylesheet">
<!
-- 引入 jQuery
-->
<script src="https://code
.jquery
.com/jquery
-3
.6
.0
.min
.js"></script>
</head>
<body>
<div class="container mt
-4">
<h1 class="mb
-4">板材数据管理</h1>
<button class="btn btn
-primary" id="addBancaiBtn">添加新板材</button>
<table class="table table
-striped mt
-3" id="bancaiTable">
<thead>
<tr>
<th>ID</th>
<th>材质</th>
<th>木皮1</th>
<th>木皮2</th>
<th>厚度</th>
<th>操作</th>
</tr>
</thead>
<tbody>
<!
-- 数据将通过 AJAX 加载
-->
</tbody>
</table>
</div>
<!
-- 查看/编辑弹窗
-->
<div class="
modal fade" id="bancai
Modal" tabindex="
-1" aria
-hidden="true">
<div class="
modal-dialog
modal-lg">
<div class="
modal-content">
<div class="
modal-header">
<h5 class="
modal-title" id="
modalTitle">板材详情</h5>
<button type="button" class="btn
-close" data
-bs
-dismiss="
modal" aria
-label="Close"></button>
</div>
<div class="
modal-body">
<form id="bancaiForm">
<input type="hidden" id="bancaiId">
<div class="mb
-3">
<label class="form
-label">材质</label>
<select class="form
-select" id="caizhiSelect" name="caizhi"></select>
</div>
<div class="mb
-3">
<label class="form
-label">木皮1</label>
<select class="form
-select" id="mupi1Select" name="mupi1"></select>
</div>
<div class="mb
-3">
<label class="form
-label">木皮2</label>
<select class="form
-select" id="mupi2Select" name="mupi2"></select>
</div>
<div class="mb
-3">
<label class="form
-label">厚度</label>
<input type="number" step="0
.01" class="form
-control" id="houdu" name="houdu">
</div>
</form>
</div>
<div class="
modal-footer">
<button type="button" class="btn btn
-secondary" data
-bs
-dismiss="
modal">关闭</button>
<button type="button" class="btn btn
-primary" id="saveBtn">保存</button>
</div>
</div>
</div>
</div>
<!
-- 引入 Bootstrap JS
-->
<script src="https://cdn
.jsdelivr
.net/npm/bootstrap@5
.3
.0/dist/js/bootstrap
.bundle
.min
.js"></script>
<script src="
../js/jsyilai
.js"></script>
<script>
</script>
</body>
</html>
改造Bancai
.js 从DataManager
.js拿数据渲染html，再加入搜索框
本文介绍了一个用于编辑和提交用户需求的功能实现方案，包括前端页面布局、模态框设计及其实现逻辑，如添加和更新操作的具体实现。
扫一扫
1050
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
