摘要：Web系统最开始是作为网页和网站载体，网页的设计从模仿纸质媒体开始，而不是从模仿桌面应用程序开始，所以在桌面应用迁移到Web在结束时，许多设计也采用了网页设计的风格。其优点是采用现有技术，开发周期短，缺点是互动性和美观性差。JavaScript尤其是jQuery在Web广泛应用于前端，jQuery例如，扩展库EasyUI广泛应用于传统桌面应用的界面设计和良好的交互性。jQuery EasyUI实现项目管理体系Web前端设计具有良好的交互性和用户友好性。 关键词：jQueryEasyUI技术；Web前端设计 EasyUI是基 于jQuery一套网页前端布局插件，模仿传统桌面程序的布局，交付良好 互性和用户友好性。 设 计 项 目 管 理 系 统Web前端 除登录界面外，还采用了时间EasyUI技术。EasyUI有20多种布局和控件，其中5种。以下是不同页面和局部设计： 1.项目管理系统总体布局 系统管理员登录后采集界面 用 了EasyUI的lay-out。如图1所示，东南方向的布局如图1所示。去掉右边的East，页面代码如下：2、项目列表 项目列表位于页面左侧（west），用 树 形 结 构（tree）如图2所示。3.子项目布局4、表格 涉及项目资金或其他适合表格的地方，EasyUI的数 据 表 格（datagrid）更美 观 实 用，而 并且可以立即添加、删除和更新数据。如图3所示。这里的数据调用采用了JSON技术，代 码 第 二 行 的url: datagrid_data1.json 可以代替为从数据表中取值的代码。 5.弹出对话框 对话框的布局如下：打开和关闭对话框JavaScript代码如下：打开和关闭对话框JavaScript代码的调用方法如下：6、结语 前端设计师来自传统的网页Web转到EasyUI方式 设计需要一些时间来学习和适应。对于没有艺术基础的程序开发人员， 可 以 用EasyUI进行Web系统 的 前端 设 计。EasyUI封装 了jQuery和CSS的很 多 细 学习和使用成本低。 参考文献 [1]汤晓 燕.基于EasyUI框架 的Web异步 树 实 现[J] .2012年6(12)计算机编程技能及维护：92-93. [2]余健，朱 三 元.基于Entity Framework和easyUI的毕业 论 文 管 理 系 统[J] .软件 工 程，2016，12(12). [3]邓海、潘智、郭志 峰.基于MVC EasyUI三层 架 构的权限管理模型 块设计与应用[J] .2017年4(2)柳钢科技:31-33 [4]朱鹏，郭亚莎.基于EasyUI框架 的Datagrid数据 呈现[J].2017年3(5)电子世界:165-166.(本文于2017年发表计算机编程技能与维护》中发表)