zoukankan      html  css  js  c++  java
  • BOS项目 第1天(项目概述、PowerDesigner、svn、easyui的使用)

    BOS项目 第1

     

    项目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业务操作系统

    甲方:宅急送物流公司,软件的使用方

    乙方:用友软件,软件的开发方

     

    本项目属于宅急送公司二期改造项目

     

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

    1.2 常见的软件类型

    OA:办公自动化系统

    CRM:客户关系管理系统

    ERP:企业资源计划平台

    CMS:content Mangement System

     

    1.3 软件开发流程(瀑布模型)

    0、可行性分析

    1、需求调研分析----需求规格说明书

    2、设计阶段(概要设计、详细设计)----数据库设计、原型设计

    3、编码阶段(单元测试)

    4、测试阶段(系统测试、白盒测试、黑盒测试)

    5、上线和运维

     

    敏捷开发

     

    1.4 开发环境

     

    1.5 技术选型

     

     

    2. 搭建开发环境

    2.1 数据库环境

    第一步:创建一个数据库

     

    第二步:创建一个数据库用户

     

    第三步:为创建的用户授权

     

    第四步:使用新创建的数据库用户登录MySQL系统

     

     

    2.2 web项目环境

    第一步:创建一个动态web项目

    第二步:导入jar包(SSHspring依赖、日志、数据库驱动)

    第三步:配置web.xmlstruts2的过滤器、spring监听器、解决Hibernate延迟加载问题的过滤器、解决中文乱码的过滤器)

    第四步:创建项目目录结构

     

    第五步:在config目录中提供struts2的配置文件

    <?xml version="1.0" encoding="UTF-8"?>

    <!DOCTYPE struts PUBLIC

        "-//Apache Software Foundation//DTD Struts Configuration 2.3//EN"

        "http://struts.apache.org/dtds/struts-2.3.dtd">

    <struts>

    <constant name="struts.devMode" value="true" />

    <constant name="struts.objectFactory" value="spring"/>

    <package name="basicstruts2" extends="struts-default">

    <!-- 需要进行权限控制的页面访问 -->

    <action name="page_*_*">

    <result name="success" type="dispatcher">/WEB-INF/pages/{1}/{2}.jsp</result>

    </action>

    </package>

    </struts>

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

    <!-- 加载jdbc属性文件 -->

    <context:property-placeholder location="classpath:jdbc.properties"/>

     

    <!-- 数据源 -->

    <bean id="dataSource" class="com.mchange.v2.c3p0.ComboPooledDataSource">

    <property name="driverClass" value="${driverClass}"/>

    <property name="jdbcUrl" value="${jdbcUrl}"/>

    <property name="user" value="${user}"/>

    <property name="password" value="${password}"/>

    </bean>

    <!-- spring框架用于整合Hibernate的工厂bean -->

    <bean id="sessionFactory" class="org.springframework.orm.hibernate3.LocalSessionFactoryBean">

    <property name="dataSource" ref="dataSource"/>

    <!-- 注入Hibernate相关的属性 -->

    <property name="hibernateProperties">

    <props>

    <prop key="hibernate.dialect">org.hibernate.dialect.MySQL5Dialect</prop>

    <prop key="hibernate.show_sql">true</prop>

    <prop key="hibernate.format_sql">true</prop>

    <prop key="hibernate.hbm2ddl.auto">update</prop>

    </props>

    </property>

    <!-- 注入Hibernate的映射文件 -->

    <property name="mappingDirectoryLocations">

    <list>

    <value>classpath:com/itheima/bos/domain</value>

    </list>

    </property>

    </bean>

     

    <!-- 事务管理器 -->

    <bean id="transactionManager" class="org.springframework.orm.hibernate3.HibernateTransactionManager">

    <property name="sessionFactory" ref="sessionFactory"/>

    </bean>

     

    <!-- 组件扫描 -->

    <context:component-scan base-package="com.itheima.bos"/>

    <!-- 引入注解解析器 -->

    <context:annotation-config/>

    <!-- 事务注解 -->

    <tx:annotation-driven />

    第七步:提供项目所需的资源文件

     

    注意,web.xml中配置服务器内部转发经过struts2过滤器处理

     

    2.3 使用svn管理项目代码

    第一步:创建一个SVN仓库

     

    第二步:修改SVN的配置文件

    svnserve.conf:

     

    passwd:

     

    authz:

     

    第三步:启动SVN服务,使用批处理文件

     

    第四步:将搭建的web项目共享到SVN仓库

     

     

     

    3. 主页设计---jQuery EasyUI插件

    jQuery EasyUI目录结构:

     

     

    jsp页面中引入easyUI相关的资源文件

    <link rel="stylesheet" type="text/css" href="${pageContext.request.contextPath }/js/easyui/themes/default/easyui.css">

    <link rel="stylesheet" type="text/css" href="${pageContext.request.contextPath }/js/easyui/themes/icon.css">

    <script type="text/javascript" src="${pageContext.request.contextPath }/js/jquery-1.8.3.js"></script>

    <script type="text/javascript" src="${pageContext.request.contextPath }/js/easyui/jquery.easyui.min.js"></script>

    3.1 layout页面布局

    这个布局容器,有五个区域:北、南、东、西和中心。 他中心地区面板是必需的,但是边缘地区面板是可选的。每一个边缘地区面板可以缩放的拖动其边境, 他们也可以通过点击其收缩触发.布局可以嵌套,从而用户可以建立复杂的布局,他想要的。

    <body class="easyui-layout">

    <!-- 使用div指定区域 -->

    <div title="XX管理系统" data-options="region:'north'" style="height: 100px">北部区域</div>

    <div title="系统菜单" data-options="region:'west'" style=" 200px">西部区域</div>

    <div data-options="region:'center'">中心区域</div>

    <div data-options="region:'east'" style=" 100px">东部区域</div>

    <div data-options="region:'south'" style="height: 50px">南部区域</div>

    </body>

     

    3.2 accordion折叠面板

    <!-- 折叠面板效果 -->

    <div class="easyui-accordion" data-options="fit:true">

    <!-- 每个子div是其中的一个面板 -->

    <div title="面板一">棉衣一</div>

    <div title="面板二">test2</div>

    <div title="面板三">test3</div>

    </div>

     

    3.3 tabs选项卡面板

    <!-- 选项卡面板效果 -->

    <div class="easyui-tabs" data-options="fit:true">

    <!-- 每个子div是其中的一个面板 -->

    <div data-options="closable:true,iconCls:'icon-help'" title="面板一">棉衣一</div>

    <div title="面板二">test2</div>

    <div title="面板三">test3</div>

    </div>

     

     

    3.4 动态添加选项卡

    <a class="easyui-linkbutton" onclick="doAdd();">百度</a>

    <script type="text/javascript">

    function doAdd(){

    //动态添加一个选项卡面板

    $("#tt").tabs("add",{

    title:'这个可是动态的',

    content:'<iframe frameborder="0" width="100%" height="100%" src="page_base_staff.action"></iframe>',

    closable:true,

    iconCls:'icon-search'

    });

    }

    </script>

     

    4. ztree树形插件---jQuery插件

    目录结构:

     

    jsp页面中引入ztree相关的资源文件

    <script type="text/javascript" src="${pageContext.request.contextPath }/js/jquery-1.8.3.js"></script>

    <link rel="stylesheet" href="${pageContext.request.contextPath }/js/ztree/zTreeStyle.css" type="text/css">

    <script type="text/javascript" src="${pageContext.request.contextPath }/js/ztree/jquery.ztree.all-3.5.js"></script>

    4.1 使用标准json数据构造ztree

    <!-- 展示树形菜单 :使用标准json数据构造-->

    <ul id="ztree1" class="ztree"></ul>

    <script type="text/javascript">

    $(function(){

    //当页面加载完成后,动态创建ztree菜单

    var setting = {};//设置ztree相关的属性

    //构造json数据

    var zNodes = [

                  {name:'系统管理'},//每个json对象对应一个节点数据

                  {name:'用户管理',children:[

                                          {name:'用户添加'},

                                          {name:'用户修改'}

                                         ]},//每个json对象对应一个节点数据

                  {name:'权限管理'}//每个json对象对应一个节点数据

                  ];

    //创建ztree

    $.fn.zTree.init($("#ztree1"),setting,zNodes);

    });

    </script>

     

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

    <!-- 展示树形菜单 :使用简单json数据构造-->

    <ul id="ztree2" class="ztree"></ul>

    <script type="text/javascript">

    $(function(){

    //当页面加载完成后,动态创建ztree菜单

    var setting2 = {

    data: {

    simpleData: {

    enable: true//启用简单json数据描述节点数据

    }

    }

    };//设置ztree相关的属性

    //构造json数据

    var zNodes2 = [

                  {id:'1',pId:'0',name:'系统管理'},//每个json对象对应一个节点数据

                  {id:'2',pId:'0',name:'用户管理'},//每个json对象对应一个节点数据

                  {id:'21',pId:'2',name:'用户添加'},//每个json对象对应一个节点数据

                  {id:'22',pId:'2',name:'用户修改'},//每个json对象对应一个节点数据

                  {id:'3',pId:'0',name:'权限管理'}//每个json对象对应一个节点数据

                  ];

    //创建ztree

    $.fn.zTree.init($("#ztree2"),setting2,zNodes2);

    });

    </script>

    效果:

     

     

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

    <ul id="ztree3" class="ztree"></ul>

    <script type="text/javascript">

    $(function(){

    var setting3 = {

    data : {

    simpleData : {

    enable : true

    //启用简单json数据描述节点数据

    }

    }

    };//设置ztree相关的属性

        //发送ajax请求获取json数据构造ztree

        var url = "${pageContext.request.contextPath}/json/menu.json";

    $.post(url,{},function(data){

    //创建ztree

    $.fn.zTree.init($("#ztree3"), setting3, data);

    },'json');

    });

    </script>

    效果:

     

    4.4 ztree节点绑定事件

    <ul id="ztree3" class="ztree"></ul>

    <script type="text/javascript">

    $(function(){

    var setting3 = {

    data : {

    simpleData : {

    enable : true

    //启用简单json数据描述节点数据

    }

    },

    callback: {//绑定事件

    onClick: function(a,b,treeNode){

    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 : '<iframe frameborder="0" width="100%" height="100%" src="'+page+'"></iframe>',

    closable : true,

    iconCls : 'icon-edit'

    });

    }

    }

    }

    }

    };//设置ztree相关的属性

        //发送ajax请求获取json数据构造ztree

        var url = "${pageContext.request.contextPath}/json/menu.json";

    $.post(url,{},function(data){

    //创建ztree

    $.fn.zTree.init($("#ztree3"), setting3, data);

    },'json');

    });

    </script>

     

     

  • 相关阅读:
    比较一下ASP、ASP.net、JSP和PHP的优点和缺点
    修改MSSQLServer的登陆方式
    ASP.NET获取IP和MAC代码(C#)
    RPM 五种基本的操作方式
    飞鸽TCP/IP 10106错误解决
    修复rpm命令(不小心删了rpm命令)方法
    Asp.Net连接ACCESS数据库相对路径问题 web.config中如何使用相对路径及在类文件中调用这个相对路径
    VMware下redhat linux 9使用NAT共享主机IP上网
    Visual Studio2005 + Visual SourceSafe 2005 实现团队开发、源代码管理、版本控制
    SQL2005安装出现“性能监视器计数器要求错误”的解决方案
  • 原文地址:https://www.cnblogs.com/wujizun/p/6920860.html
Copyright © 2011-2022 走看看