搜索
BOS物流管理系统第一天搭建环境内容安排：1、运行项目，分析功能结构Struts2通配符映射，将所有页面放在WEB-INF下2、项目改造为maven结构项目使用STS3、jQueryEasyUI框架常用各个布局插件、Ztree菜单技术学习目标：maven、svn、eclipse工具、掌握前端开发框架EasyUI1.BOS项目概述1.1.项目背景什么是BOS？(BusinessOperationSystem)，各个软件最核心业务系统用友软件公司为宅急送公司开发ERP系统----核心系统BOS一期工程C/S结构，二期工程B/S结构传统项目分类：OA自动化办公系统、CRM客户关系管理系统、ERP综合管理平台1.2.项目开发任务项目完整开发流程：需求分析（需求分析文档）-----系统设计（页面原型设计jqueryeasyui、数据库设计PowerDesigner）------编码-----测试-----集成部署和运维BOS系统非常庞大，十几天学习哪些功能涉及三大核心业务模块：基础设置模块、取派模块、中转模块基础设置模块：管理物流信息基础元素信息（快递员、配送区域、配送时间、排班…）取派模块：客户要进行快递，系统进行业务受理、系统分单到快递员、快递员取件、打包、计费中转模块：管理货物在配送路程中间数据路由模块：管理车辆和线路财务模块：计费PDA模块：管理快递员无线电通信报表模块：生成统计数据用户权限管理：通用权限管理系统ApacheShiro1.3.项目开发平台和技术新建一个Maven工程mavenbos1.4.导入原型页面配置说明pom.xml导入参照下发pom.xml文档!目录结构说明css样式表文件images系统需要图片js存放js脚本Jqueryeasyui(页面设计)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学习(掌握)引入jqueryeasyui完成页面原型布局设置!打开下发的easyui资源包解压demo案例演示代码(学习指导)locale国际化脚本(中文)plugingseasyui页面需要依赖脚本插件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组件northsoutheastwestcenterdata-options=key:value1.7.accordion插件，实现折叠菜单以及和layout整合参照文档(easyui)案例为主学习西部设置效果1.8.ztree菜单制作(菜单制作说明)ztree解压目录优异的功能灵活配置api文档查询使用css样式文件demo例子jsztree依赖脚本bos系统引入Ztree树形菜单说明导入ztree脚本1js:2:css样式3:案例演示树形菜单学习:layout2.jsp引入ztree脚本打开文档案例制作属性菜单提供两种方式standardData学习!树形菜单!需要ul标签!提供class样式=ztree提供idbody提供ul标签即可参照脚本:导入相关ztree相关脚本simpleData.html学习简单树的学习效果:脚本相关脚本说明!--jquery--scripttype=text/javascriptsrc=${pageContext.request.contextPath}/js/jquery-1.8.3.js/script!--jqueryeasyui--scripttype=text/javascriptsrc=${pageContext.request.contextPath}/js/easyui/jquery.easyui.min.js/script!--easyui国际化js--scripttype=text/javascriptsrc=${pageContext.request.contextPath}/js/easyui/locale/easyui-lang-zh_CN.js/script!--主题css样式--linkrel=stylesheettype=text/csshref=${pageContext.request.contextPath}/js/easyui/themes/default/easyui.css/!--图标css--linkrel=stylesheettype=text/csshref=${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数据表格，是jqueryeasyui功能最强大，最重要的一个插件，简化开发数据表格：数据列表显示、分页、排序、编辑需要table提供theadtbodytfoot1.14.案例一：datagrid加载HTML静态数据1:编写一个表格提供theadtbody标签还需要给th添加field属性pagination:true显示分页栏rownumbers:true显示行号checkbox:true出现列中显示复选框添加工具栏toolBars需要提供一个diva标签就是按钮!需要编写js完成工具栏的加载1.15.案例二：datagrid加载json远程数据当前文件jsp同级目录提供一个data.json文件json[{},{},{},{}]对象数据key一定要和每一个表头field:属性值要一致{id:xxx,name:xxx,sex:xxx,age:xxx}格式测试!1.16.案例三：使用Javascript编写datagrid页面提供带有idclasstable标签即可参照文档提供table标签即可纯js完成!效果!作业:1:项目bos导入(maven安装okpom.xml导入知道为什么所有业务页面存放在WEB-INF下)2:原型设计layout布局according下拉菜单tabs选项卡ztree(独立框架掌握)standardDataSimple.html(children)/simpleData.html(idpId)ztree点击添加选项卡整合(iframe)掌握3:datagrid1:静态html生成datagrid(json)2:js完成datagrid数据显示!