java-WEB模块物流项目一.docx

BOS物流管理系统 第一天 搭建环境 内容安排：1、 运行项目，分析功能 结构Struts2 通配符映射，将所有页面放在WEB-INF下 2、 项目改造为maven结构 项目使用 STS 3、 jQuery EasyUI 框架 常用各个布局插件 、Ztree菜单技术 学习目标：maven 、svn 、eclipse 工具、 掌握前端开发框架EasyUI 1. BOS项目概述 1.1. 项目背景什么是BOS？ (Business Operation System) ，各个软件最核心业务系统 用友软件公司 为宅急送公司 开发ERP系统 - 核心系统 BOS一期工程 C/S结构 ，二期工程B/S 结构 传统项目分类 ： OA 自动化办公系统 、CRM 客户关系管理系统、 ERP 综合管理平台 1.2. 项目开发任务 项目完整开发流程： 需求分析 （需求分析文档） - 系统设计 （页面原型设计 jquery easyui 、 数据库设计 PowerDesigner ） - 编码 - 测试 - 集成部署和运维 BOS系统非常庞大，十几天学习哪些功能 涉及三大核心业务模块 ： 基础设置模块、 取派模块、中转模块 基础设置模块： 管理物流信息基础元素信息 （快递员、配送区域、配送时间、排班 ）取派模块： 客户要进行快递，系统进行业务受理、系统分单到快递员、快递员取件、打包、计费中转模块： 管理货物在配送路程中间数据 路由模块： 管理车辆和线路财务模块： 计费PDA模块： 管理快递员无线电通信报表模块： 生成统计数据 用户权限管理： 通用权限管理系统 Apache Shiro 1.3. 项目开发平台和技术 新建一个Maven工程 mavenbos1.4. 导入原型页面配置说明 pom.xml 导入 参照下发pom.xml 文档!目录结构说明css 样式表文件 images 系统需要图片js 存放 js 脚本 Jquery easyui(页面设计) ztree(树形菜单)json 临时数据 菜单页面设计 扩展名称.json系统所有页面原型页面存放WEB-INF 下 浏览器不可以直接访问! 通过action 访问对应页面 采用通配符 打开struts.xml lib 删除导入项目需要配置文件 导入: src/java/resource action 请求资源路径 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. accordion插件，实现折叠菜单 以及和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" 提供idbody 提供 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. layout插件，完成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: datagrid 1: 静态html生成datagrid (json) 2: js 完成datagrid 数据显示!