BOS物流管理系统第一天搭建环境内容安排：1、运行项目，分析功能结构Struts2 通配符映射，将所有页面放在WEB-INF下2、项目改造为maven结构项目使用STS3、jQuery EasyUI 框架常用各个布局插件、Ztree菜单技术学习目标：maven 、svn 、eclipse 工具、掌握前端开发框架EasyUI1.BOS项目概述1.1.项目背景什么是BOS？(Business Operation System) ，各个软件最核心业务系统用友软件公司为宅急送公司开发ERP系统---- 核心系统BOS一期工程C/S结构，二期工程B/S 结构传统项目分类：OA 自动化办公系统、CRM 客户关系管理系统、ERP 综合管理平台1.2.项目开发任务项目完整开发流程：需求分析（需求分析文档）----- 系统设计（页面原型设计jquery easyui 、数据库设计PowerDesigner ）------ 编码----- 测试----- 集成部署和运维BOS系统非常庞大，十几天学习哪些功能涉及三大核心业务模块：基础设置模块、取派模块、中转模块基础设置模块：管理物流信息基础元素信息（快递员、配送区域、配送时间、排班…）取派模块：客户要进行快递，系统进行业务受理、系统分单到快递员、快递员取件、打包、计费中转模块：管理货物在配送路程中间数据路由模块：管理车辆和线路财务模块：计费PDA模块：管理快递员无线电通信报表模块：生成统计数据用户权限管理：通用权限管理系统Apache Shiro1.3.项目开发平台和技术新建一个Maven工程mavenbos1.4.导入原型页面配置说明pom.xml 导入参照下发pom.xml 文档!目录结构说明css 样式表文件images 系统需要图片js 存放js 脚本Jquery easyui(页面设计) ztree(树形菜单)json 临时数据菜单页面设计扩展名称.json系统所有页面原型页面存放WEB-INF 下浏览器不可以直接访问! 通过action 访问对应页面采用通配符打开struts.xmllib 删除导入项目需要配置文件导入: src/java/resourceaction 请求资源路径page_*_* 没有class 默认执行ActionSupport (默认的结果集SUCCESS) 转发!使用该配置后续的自定义拦截器可以对action 有效从而实现对静态页面实现权限控制... web.xml 配置1: spring容器配置文件加载2: 前端控制器配置1.5.pom.xml 配置参照资源包下发ppm.xml说明: 后续的dao 实现我们采用spring-data 实现crud 操作!测试访问主页!1.6.前端框架之easyui学习(掌握)引入jquery easyui 完成页面原型布局设置! 打开下发的easyui 资源包解压demo 案例演示代码(学习指导)locale 国际化脚本(中文)plugings easyui页面需要依赖脚本插件src 源码themes 主题样式(css 文件)easyloader.js 插件加载器easyui所有插件由该脚本驱动加载jquery.easyui.min.js 相同于easyloader.js+所有插件(推荐导入该脚本即可) jquery-1.8.0.js必须导入bos系统页面导入的easyui 脚本说明工程导入四个即可jquery +eazyui.min.js +themes+国际化文件!easyui 学习之页面原型设计一layout 学习!layou1.jsp页面导入2个css+3个js 完成参照文档布局打开文档手册学习easyui 布局样式!layout 组件north south east west center data-options="key:value"1.7.a ccordion插件，实现折叠菜单以及和layout 整合参照文档(easyui)案例为主学习西部设置效果1.8.ztree 菜单制作(菜单制作说明) ztree解压目录优异的功能灵活配置api 文档查询使用css 样式文件demo 例子js ztree依赖脚本bos系统引入Ztree树形菜单说明导入ztree 脚本1 js :2:css 样式3: 案例演示树形菜单学习: layout2.jsp 引入ztree脚本打开文档案例制作属性菜单提供两种方式standardData 学习!树形菜单! 需要ul 标签! 提供class 样式="ztree" 提供id body 提供ul标签即可参照脚本: 导入相关ztree 相关脚本simpleData.html 学习简单树的学习效果:脚本相关脚本说明<!-- jquery --><script type="text/javascript"src="${pageContext.request.contextPath }/js/jquery-1.8.3.js"></script><!-- jquery easyui --><script type="text/javascript"src="${pageContext.request.contextPath }/js/easyui/jquery.easyui.min.js"></script><!-- easyui 国际化js --><script type="text/javascript"src="${pageContext.request.contextPath }/js/easyui/locale/easyui-lang-zh_CN.js"></script> <!-- 主题css样式--><link rel="stylesheet" type="text/css"href="${pageContext.request.contextPath }/js/easyui/themes/default/easyui.css" /><!-- 图标css --><link rel="stylesheet" type="text/css"href="${pageContext.request.contextPath }/js/easyui/themes/icon.css" />1.9.l ayout插件，完成bos主页布局引入树形菜单和Layout 布局的编写!1.10.jquery + ztree 插件制作bos系统菜单西部整合according需要提供ul 标签可以将菜单制作内容引入到外部文件xxx.json引入项目json 文件通过ajax 请求获取系统菜单的生成1: 页面加载立刻发送ajax 请求json 文件2: 获取文件信息文件内容就是zNodes数据如果数据来自外部文件按照标准写法key:value 需要添加引号3: 效果: 菜单数据来自外部文件!1.11.tabs插件，实现选项卡菜单1.12.ztree和tabs选项卡合并(点击菜单生成选项卡) 导入相关脚本ztree_according.jsp 页面折叠选项卡第一个引入ul标签完成属性菜单1: 查询ztree文档添加点击事件根据文档查询setting 添加点击事件2: 查询easyui -tabs 里面add方法添加一个选项卡!目标选项卡添加id 被jquery 选择center区域添加tabs选项卡样式点击事件中添加选项卡add 填充父容器js 点击事件判断选项卡是否存在如果不存在新建一个tabs最终判断点击菜单是否含有Page 属性iframe 内嵌页面布局1.13.datagrid数据表格插件(重点)Datagrid数据表格，是jquery easyui 功能最强大，最重要的一个插件，简化开发数据表格：数据列表显示、分页、排序、编辑需要table 提供thead tbody tfoot1.14.案例一：datagrid加载HTML静态数据1: 编写一个表格提供thead tbody 标签还需要给th 添加field属性pagination: true 显示分页栏rownumbers :true 显示行号checkbox:true 出现列中显示复选框添加工具栏toolBars 需要提供一个div a 标签就是按钮!需要编写js 完成工具栏的加载1.15.案例二：datagrid 加载json远程数据当前文件jsp 同级目录提供一个data.json 文件json [{},{},{},{}]对象数据key 一定要和每一个表头field: 属性值要一致{id:xxx,name:xxx,sex:xxx,age:xxx} 格式测试!1.16.案例三：使用Javascript编写datagrid 页面提供带有id class table 标签即可参照文档提供table 标签即可纯js 完成!效果!作业:1: 项目bos导入(maven 安装ok pom.xml 导入知道为什么所有业务页面存放在WEB-INF 下)2: 原型设计layout 布局according 下拉菜单tabs选项卡ztree (独立框架掌握)standardDataSimple.html(children) / simpleData.html (id pId) ztree 点击添加选项卡整合(iframe) 掌握3: datagrid1: 静态html生成datagrid (json)2: js 完成datagrid 数据显示!。