day49_BOS项目_01

微信扫一扫,分享到朋友圈

day49_BOS项目_01
  • 项目12天安排:
    • 1-2天:项目概述、搭建开发环境、主页设计、持久层和表现层设计
    • 3-6天:项目业务开发(取派员、区域、分区、定区、业务受理)
      –> 整个项目分为基础设置、取派、中转、路由、报表
    • 7-8天:权限控制、权限管理
      –> apache shiro
    • 9-11天:工作流开发
      –> activiti
    • 12天:总结
  • 今天内容安排:
    • 1、项目概述(背景介绍、常见软件类型、软件开发流程(瀑布模型))
    • 2、搭建开发(数据库、web项目、SVN管理项目)
    • 3、主页设计(jQuery的插件easyUI)
    • 4、UML工具使用PowerDesigner

1、项目概述

1.1、项目背景介绍

  • BOS –> Bussiness Operating System 业务操作系统

    • 甲方:宅急送物流公司,软件的使用方
    • 乙方:用友软件,软件的开发方
  • 本项目属于宅急送公司二期改造项目。

  • ERP–> Enterprise Resource Planning 企业资源计划,如下图所示:

  • 项目的团队人数20多个人,项目开发周期1年多(13个月),编码阶段4个月。

1.2、常见的软件类型

  • OA:Office Automation办公自动化系统
  • CRM:Customer Relationship Management客户关系管理系统
  • ERP:Enterprise Resource Planning企业资源计划平台(物资流、人力流、财务流、信息流)
  • CMS:Content Mangement System内容管理系统

1.3、软件开发流程

  • 本案例使用:瀑布模型,该模型适用于规模小、周期短的项目。
    • 0、可行性分析
    • 1、需求调研分析 –> 需求规格说明书
    • 2、设计阶段(概要设计、详细设计) –> 数据库设计、原型设计
    • 3、编码阶段(单元测试)
    • 4、测试阶段(系统测试、性能测试、白盒测试(需要检查代码,懂技术)、黑盒测试(不懂技术))
    • 5、上线和运维
  • 敏捷开发 –> 思想:分阶段,分模块

1.4、开发环境

  • 如下图所示:

1.5、技术选型

  • 如下图所示:
  • Webservice和Hession都属于远程调用技术。二者区别如下:
    • Webservice,传输的数据格式是xml格式,数据冗余比较多,网络传输比较大的话,会成为性能的瓶颈。
    • Hession,传输的数据格式是二进制格式,传输效率更高。

2、搭建开发环境

2.1、数据库环境

  • 第一步:创建一个数据库
    mysql -uroot -proot
  • 第二步:创建一个数据库用户
    create database bos19;
  • 第三步:为创建的用户授权
    grant all on bos19.* to heize;
  • 第四步:使用新创建的数据库用户登录MySQL系统,并查看数据库
    mysql -uheize -p1234
    show databases;

2.2、web项目环境

  • 第一步:使用ecplise,创建一个动态web项目,将Dynamic web module version 设置为2.5,创建完成后修改jdk版本为jdk1.8。
    • 方法:选中项目右键 –> Bulid Path –> Configure Bulid Path… –> Libraries –> JRE System Library [J2SE-1.5] –> Remove,然后再 Add Library… –> JRE System Library –> Next –> Workspace default JRE (jdk1.8.0_161)
    • 由于 EAR Libraries 是一个空的库,没有什么用,所以我们把它也Remove掉。
  • 第二步:导入jar包
    • Struts 11个jar + 1个整合Springj的jar = 12个
    • Spring 10个jar + 5个依赖jar = 15 个
    • Hibernate 1个Hibernate3的jar + 6个必须jar + 1个jpa的jar + 1个slf4j-log4j12-1.7.2.jar = 9个
    • 1个数据库驱动jar
    • 共计37个jar
    • 干掉重复的低版本的jar
  • 第三步:配置web.xml(配置struts2的过滤器、配置spring的监听器、配置解决Hibernate延迟加载问题的过滤器、配置解决中文乱码的过滤器)

示例代码如下:


    bos19

    
    
        characterEncodingFilter
        org.springframework.web.filter.CharacterEncodingFilter
        
            encoding
            UTF-8
        
        <!--        
        
            forceEncoding
            true
         
        -->
        
    
    
        characterEncodingFilter
        /*
    

    
    
        openSession
        org.springframework.orm.hibernate3.support.OpenSessionInViewFilter
    
    
        openSession
        /*
    

    
    
        contextConfigLocation
        classpath:applicationContext.xml
    

    
    
        org.springframework.web.context.ContextLoaderListener
    

    
    
        struts2
        org.apache.struts2.dispatcher.ng.filter.StrutsPrepareAndExecuteFilter
    
    
        struts2
        /*
    

    
        index.html
        index.htm
        index.jsp
        default.html
        default.htm
        default.jsp
    

  • 第四步:创建项目目录结构
    如下图所示:
  • 第五步:在config目录下提供struts2的配置文件struts.xml和日志配置文件log4j.properties

示例代码如下:



    
    
    
    

    
        
        
            /WEB-INF/pages/{1}/{2}.jsp
        
    

  • 第六步:在config目录下提供spring的配置文件applicationContext.xml

示例代码如下:




    
    
    
    
        
        
        
        
    

    
    
        
        
        
        
            
                org.hibernate.dialect.MySQL5Dialect
                true
                true
                update
            
        
        
        
            
                classpath:com/itheima/bos/domain
            
        
    

    
    
        
    

    
    
    
    

    
    

  • 第七步:提供项目所需的资源文件,如下图所示:
    • `注意1` :如果所需的资源文件图标上有红色的叉,说明需要引入外部jar包servlet-api.jar和jsp-api.jar。
    • `注意2` :由于本系统的很多页面使用了`标签`,属于服务器内部转发,会跳转到WEB-INF目录下对应的页面,而该目录下的页面是受保护的,所以web.xml中需要配置服务器内部转发也要经过struts2过滤器处理后才能跳转,否则的话服务器会报404错误,配置如下图所示:

2.3、使用svn管理项目代码

  • 第一步:创建一个SVN仓库,在bos目录下右键 –> TortoiseSVN –> Create repository here
  • 第二步:修改SVN的配置文件,如下图所示:
    svnserve.conf
    passwd
    authz
  • 第三步:启动SVN服务
    • 法一:我们将启动SVN服务的操作注册成操作系统的“服务”,我们的电脑开机时SVN服务器就启动了。
    • 法二:使用批处理文件。(本案例我们采用法二)
    • `注意` :我们启动的是多仓库。
    • 批处理文件创建好后,我们双击运行该文件即可启动svn服务。
  • 第四步:eclipse上安装svn插件
  • 第五步:将搭建的web项目共享到SVN仓库
    • 首先新建资源库位置,如下图所示:

      其余步骤参考如下链接:

      https://www.cnblogs.com/chenmingjun/p/9513143.html#_label0

      右键项目 –> Team –> Share Project…

      点击SVN –> Next –> 创建新的资源库位置 –> Next –> svn://localhost:3690/bos/code –> Next

      再次确认下,没问题,点击Next –> 第一次使用默认注释即可 –> Finish –> Yes –> 切换到提交视图,即已经纳入到svn的版本控制了,但是还没有真正上传。

      在提交视图下,右键项目 –> 提交(C)

      稍等一会儿,代码提交至svn仓库界面如下:

      然后,我们切换至SVN资源库视图进行查看,如下图所示:

3、主页设计 –> jQuery EasyUI 插件

  • jQuery EasyUI的目录结构,如下图所示:
  • 在jsp页面中引入jQuery EasyUI相关的资源文件

示例代码如下:

    
    
    
    

3.1、layout 布局

详解如下:

    通过 $.fn.layout.defaults 重写默认的 defaults。
    这个布局(layout)是有五个区域(北区 north、南区 south、东区 east、西区 west 和中区center)的容器。
    中间的区域面板是必需的,边缘区域面板是可选的。每个边缘区域面板可通过拖拽边框调整尺寸,也可以通过点击折叠触发器来折叠面板。
    布局(layout)可以嵌套,因此用户可建立复杂的布局。

示例代码如下:

    
    
北部区域
西部区域
中心区域
东部区域
南部区域

效果如下图所示:

3.2、accordion 折叠面板

详解如下:

    通过 $.fn.accordion.defaults 重写默认的 defaults。
    折叠面板(accordion)允许您提供多个面板(panel),同时显示一个或多个面板(panel)。
    每个面板(panel)都有展开和折叠的内建支持。点击面板(panel)头部可展开或折叠面板(panel)主体。
    面板(panel)内容可通过 ajax 指定 'href' 属性来加载。用户可定义被选中的面板(panel)。如果为指定,则默认选中第一个面板(panel)。

示例代码如下:

      
    
北部区域
棉衣一
test2
test3
中心区域
东部区域
南部区域

效果如下图所示:

3.3、tabs 标签页/选项卡面板

详解如下:

    通过 $.fn.tabs.defaults 重写默认的 defaults。
    选项卡显示一组面板。它一次只显示一个选项卡面板。
    每个选项卡面板都有标题和一些迷你按钮工具,包括关闭按钮和其他自定义按钮。

示例代码如下:

    
    
北部区域
棉衣一
test2
test3
棉衣一
test2
test3
东部区域
南部区域

效果如下图所示:

3.4、动态添加选项卡面板

示例代码如下:

    
    
北部区域
百度 function doAdd() { // 动态添加一个选项卡面板 $("#tt").tabs("add", { title:'这个可是动态添加的', content:'', closable:true, iconCls:'icon-search' }); }
test2
test3
棉衣一
test2
test3
东部区域
南部区域

效果如下图所示:

4、ztree 树形插件 –> jQuery 插件

  • 主要用于制作系统菜单。
  • ztree的目录结构:
  • 在jsp页面中引入ztree相关的资源文件

示例代码如下:

    
    

4.1、使用标准json数据构造ztree

示例代码如下:

    $(function() { // 当页面加载完成后,动态创建ztree菜单 // 设置ztree相关的属性,该属性中不用写数据,因为我们使用标准json数据构造 var setting = {}; // 构造json数据 var zNodes = [ // 每个json对象对应一个节点数据 {name : '系统管理'}, // 每个json对象对应一个节点数据 {name : '用户管理', children : [{name : '用户添加'}, {name : '用户修改'}]}, // 每个json对象对应一个节点数据 {name : '权限管理'} ]; // 创建ztree $.fn.zTree.init($("#ztree1"), setting, zNodes); });

    效果如下图所示:

    4.2、使用简单json数据构造ztree(建议使用)

    由于使用标准json数据构造ztree,代码的层级结构太深,不利于阅读,所以使用简单json数据构造ztree。

    示例代码如下:

      $(function() { // 当页面加载完成后,动态创建ztree菜单 // 设置ztree相关的属性 var setting2 = { data : { simpleData : { // 启用简单json数据描述节点数据 enable : true } } }; // 构造json数据 var zNodes2 = [ // 每个json对象对应一个节点数据 {id : '1', pId : '0', name : '系统管理'}, // 每个json对象对应一个节点数据 {id : '2', pId : '0', name : '用户管理'}, {id : '21', pId : '2', name : '用户添加'}, {id : '22', pId : '2', name : '用户修改'}, // 每个json对象对应一个节点数据 {id : '3', pId : '0', name : '权限管理'} ]; // 创建ztree $.fn.zTree.init($("#ztree2"), setting2, zNodes2); });

      效果如下图所示:

      4.3、发送ajax请求获取菜单数据构造ztree

      示例代码如下:

        $(function() { // 设置ztree相关的属性 var setting3 = { data : { simpleData : { // 启用简单json数据描述节点数据 enable : true } } }; // 发送ajax请求获取json数据构造ztree var url = "${pageContext.request.contextPath}/json/menu.json"; $.post(url, {}, function(data) { // 创建ztree $.fn.zTree.init($("#ztree3"), setting3, data); }, 'json'); });

        效果如下图所示:

        4.4、为ztree节点绑定事件

        示例代码如下:

          $(function() { // 设置ztree相关的属性 var setting4 = { data : { simpleData : { // 启用简单json数据描述节点数据 enable : true } }, // 绑定事件 callback: { onClick: function(event, treeId, treeNode) { // alert(treeNode); // alert(treeNode.page); var page = treeNode.page; if (page != undefined) { // 判断当前选型卡是否已经打开 var e = $("#tt").tabs("exists", treeNode.name); if (e) { // 当前选型卡已经打开,就选中它 $("#tt").tabs("select", treeNode.name); } else { // 当前选型卡没有打开,需要动态添加一个选项卡面板 $("#tt").tabs("add", { title: treeNode.name, content:'', closable:true, iconCls:'icon-edit' }); } } } } }; // 发送ajax请求获取json数据构造ztree var url = "${pageContext.request.contextPath}/json/menu.json"; $.post(url, {}, function(data) { // 创建ztree $.fn.zTree.init($("#ztree4"), setting4, data); }, 'json'); });

          效果如下图所示:

          5、UML工具 –> PowerDesiger 的使用

          示例图片:

          iOS Native混编Flutter交互实践

          上一篇

          Clean architecture for Android with Kotlin: a pragmatic approach for starters

          下一篇

          你也可能喜欢

          day49_BOS项目_01

          长按储存图像,分享给朋友