11.11

B/S结构用户界面设计

 

【实验编号】

10003809548j 　　Web界面设计

【实验学时】

8学时

【实验环境】

l 所需硬件环境为微机；

l 所需软件环境为dreamweaver

【实验内容】

做了一个mes系统的业务流程，从一开始的生产流程交接到一些生产过程中的数据交互再到数据上报等等。

 

【关键步骤】

1. 用户权限和认证

设置用户认证：如果系统需要用户登录，配置用户认证机制，如JWT（JSON Web Tokens）。

权限管理：根据用户角色配置权限，控制不同用户对系统功能的访问。

2. 生产计划管理

领取生产计划：生产主管或指定人员从系统中领取生产计划，了解具体要求。

确认计划可行性：检查生产计划的可行性，包括资源可用性和时间安排。

分配生产任务：将生产计划分解为具体任务，并分配给相应的车间、班组和个人。

3. 生产准备

模具出库：根据生产计划领取模具，并记录相关信息。

设备检查：确保生产设备处于良好状态，并进行必要的预热和调试。

人员安排：根据生产任务的复杂度和时间要求，合理安排生产人员。

4. 生产执行

启动生产：按照生产计划开始生产，并记录每批产品的生产信息。

生产监控：定期检查产品质量，监控生产进度，确保按时完成任务。

异常处理：在生产过程中发现任何异常情况时，立即停止生产并报告，待问题解决后再继续生产。

5. 生产报告和审核

编制生产报告：生产结束后，编制详细的生产报告，包括生产数量、模具使用次数等。

提交生产报告：将生产报告提交给生产主管或相关部门进行审核。

审核报告：审核生产报告，确认数据的准确性和完整性，并提供反馈

 

【程序运行截图】

1. 初始界面

 

 

1. 生产计划认领

 

 

1. 生成准备

 

 

1. 设备监控

 

1. 信息上报/交接审核

 

 

【实验体会】

在本次实验中，我深刻体会到了在大型或中型项目中状态管理的重要性。随着应用规模的增长，组件间的状态共享和维护变得越来越复杂。Vuex作为一个集中式存储管理应用所有组件状态的库，提供了一种清晰、可预测的方式来管理状态。我学习了Vuex的三个核心概念：state、mutations和actions。State用于存储数据，mutations用于同步地修改状态，而actions则用于处理异步操作。这种分离使得状态的变化更加可追踪，也使得调试和测试变得更加容易。我使用Vuex来控制侧边栏的显示和隐藏。通过定义一个全局的状态isSidebarOpen和一个mutationtoggleSidebar，我能够在任何组件中轻松地控制侧边栏的状态，而不仅仅是在侧边栏组件内部。我学会了如何使用路由元信息和路由守卫来根据当前路由动态调整应用的状态。这在处理基于不同视图的状态变化时非常有用，例如，根据用户所在的页面显示或隐藏侧边栏。Vuex极大地简化了组件间的通信。我不再需要通过父子组件传递大量的props或使用事件来通知子组件状态的变化。只需从Vuex store中读取或更新状态即可。使用Vuex也让我更深入地了解了如何调试Vue应用。通过查看mutation的历史记录，我可以轻松地追踪状态的变化，并找出可能的问题所在