框架 day47 BOS项目练习1（项目概述,环境,页面[easyUI,Ztree],数据库PowerDesigner）

来源：互联网发布：网络安全保密责任书编辑：程序博客网时间：2024/05/22 07:55

1. 项目概述

1.1 项目背景介绍

BOS（Bussiness Operating System）-----业务操作系统

本项目物流BOS项目分为基础设置、取派、中转、路由、报表部分

1.2 常见的软件项目类型

OA：办公自动化系统

CRM：客户关系管理系统

ERP：企业资源计划平台

CMS：内容管理系统

BBS:论坛系统

1.3 项目开发流程（瀑布模型）

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

2、设计阶段（概要设计、详细设计）------数据库设计文档、原型

3、编码阶段（单元测试）

4、测试阶段（集成测试、系统测试）

5、上线与运维

1.4 本项目开发的功能

三个业务功能模块

*基础数据模块

*取派模块

*中转流程管理

两个系统功能模块

*用户管理

*权限管理

1.5 开发环境

1.6 技术选型

OCUpload一键上传插件、pinyin4j

2. 搭建项目开发环境

2.1 数据库环境

第一步：创建一个数据库

CREATE DATABASE bos1 CHARACTER SET utf8

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

CREATE USER 'user_bos' IDENTIFIED BY "123"

第三步：为用户授权

GRANT ALL ON bos1.* TO "user_bos"

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

2.2 Web项目环境

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

第二步：导入jar包（SSH、数据库驱动、日志）

第三步：配置web.xml（struts2过滤器、spring监听器、解决hibernate延迟加载的过滤器、解决中文乱码的过滤器）

<?xml version="1.0" encoding="UTF-8"?><web-app xmlns:xsi="http://www.w3.org/2001/XMLSchema-instance" xmlns="http://java.sun.com/xml/ns/javaee" xmlns:web="http://java.sun.com/xml/ns/javaee/web-app_2_5.xsd" xsi:schemaLocation="http://java.sun.com/xml/ns/javaee http://java.sun.com/xml/ns/javaee/web-app_2_5.xsd" version="2.5">  <display-name>BOS</display-name><!-- 中文乱码问题解决过滤器 -->  <filter>  <filter-name>characterFilter</filter-name>  <filter-class>  org.springframework.web.filter.CharacterEncodingFilter  </filter-class>  <!-- 提供初始化参数 -->  <init-param>  <param-name>encoding</param-name>  <param-value>UTF-8</param-value>  </init-param>  </filter>  <filter-mapping>  <filter-name>characterFilter</filter-name>  <url-pattern>/*</url-pattern>  </filter-mapping>    <!-- spring提供的解决hibernate延迟加载问题的过滤器 -->  <filter>  <filter-name>openSessionInView</filter-name>  <filter-class>org.springframework.orm.hibernate3.support.OpenSessionInViewFilter</filter-class>  </filter>  <filter-mapping>  <filter-name>openSessionInView</filter-name>  <url-pattern>/*</url-pattern>  </filter-mapping>    <!-- spring        * 设置初始化参数，确定spring配置文件位置      * 使用监听器去加载配置文件，并将spring容器存放到ServletContext作用域  -->    <context-param>    <param-name>contextConfigLocation</param-name>    <param-value>classpath:applicationContext.xml</param-value>  </context-param><!-- spring监听器，加载xml文件 -->  <listener>    <listener-class>org.springframework.web.context.ContextLoaderListener</listener-class>  </listener><!-- struts        * 配置struts2前端控制器，服务器在启动时，初始化init(FilerConfig)将自动调用      * struts在初始化方法中，将自动的加载 classpath:struts.xml 文件  (src/config 两个源码目录都表示 类路径 classpath)  -->   <filter>    <filter-name>struts2</filter-name>    <filter-class>org.apache.struts2.dispatcher.ng.filter.StrutsPrepareAndExecuteFilter</filter-class>  </filter>  <filter-mapping>    <filter-name>struts2</filter-name>    <url-pattern>/*</url-pattern>    <dispatcher>REQUEST</dispatcher>    <dispatcher>FORWARD</dispatcher>  </filter-mapping>  <welcome-file-list>    <welcome-file>index.jsp</welcome-file>  </welcome-file-list>  </web-app>

第四步：配置struts.xml，将WEB-INF下的jsp页面访问映射为Action访问路径

<?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 type="dispatcher">/WEB-INF/pages/{1}/{2}.jsp</result></action></package></struts>

第五步：配置spring 配置文件applicationContext.xml

数据源、LocalSessionFactoryBean、事务管理器、组件扫描、支持注解配置

<?xml version="1.0" encoding="UTF-8"?><beans xmlns="http://www.springframework.org/schema/beans"xmlns:xsi="http://www.w3.org/2001/XMLSchema-instance"xmlns:context="http://www.springframework.org/schema/context"xmlns:aop="http://www.springframework.org/schema/aop"xmlns:tx="http://www.springframework.org/schema/tx"xsi:schemaLocation="http://www.springframework.org/schema/beans http://www.springframework.org/schema/beans/spring-beans.xsdhttp://www.springframework.org/schema/contexthttp://www.springframework.org/schema/context/spring-context.xsdhttp://www.springframework.org/schema/aophttp://www.springframework.org/schema/aop/spring-aop.xsdhttp://www.springframework.org/schema/tx http://www.springframework.org/schema/tx/spring-tx.xsd"><!-- 公共配置文件，web.xml配置加载核心文件 -->  <!-- 1 加载properties文件 jdbcinfo.propertiesjdbc.driverClass=com.mysql.jdbc.Driverjdbc.jdbcUrl=jdbc:mysql://localhost:3306/bos1jdbc.user=user_bosjdbc.password=123-->  <context:property-placeholder location="classpath:jdbcinfo.properties"/>  <!-- 2数据源 --><bean id="dataSource"  class="com.mchange.v2.c3p0.ComboPooledDataSource" >    <property name="driverClass" value="${jdbc.driverClass}"></property>      <property name="jdbcUrl" value="${jdbc.jdbcUrl}"></property>      <property name="user" value="${jdbc.user}"></property>      <property name="password" value="${jdbc.password}"></property> </bean><!-- 3 配置hibernate SessionFactory -->  <bean id="sessionFactory" class="org.springframework.orm.hibernate3.LocalSessionFactoryBean">      <!-- 3.1 配置数据源           * <property name="属性名" ref="另一个bean引用">              name 必须是对象的setter方法推断获得，setDataSource(...)， 去掉set DataSource ，首字母小写  dataSource          * ref 其他bean引用 <bean id=""> 可以任意，一般情况与上面属性名称相同。      -->      <property name="dataSource" ref="dataSource"></property>      <!-- 3.2 配置hibernate其他属性           * 在hibernate.cfg.xml 配置文件 “hibernate.dialect” 和 “dialect” 等效的          * 在spring配置文件中，必须使用“hibernate.dialect”      -->     <!-- 2.2 其他属性设置 -->     <property name="hibernateProperties">          <props>              <!-- 方言 -->              <prop key="hibernate.dialect">org.hibernate.dialect.MySQL5Dialect</prop>              <!-- 显示sql语句 -->              <prop key="hibernate.show_sql">true</prop>              <!-- 格式化sql语句 -->              <prop key="hibernate.format_sql">true</prop>             <prop key="hibernate.hbm2ddl.auto">update</prop>         </props>      </property>      <!-- 3.3 加载映射文件              mappingResources 加载资源，从src获取,必须确定指定的资源              mappingLocations 建议“classpath:” 可以通配符【】                  classpath:com/itheima/*/User.hbm.xml ，目录任意                  classpath:com/itheima/domain/*.hbm.xml， 文件名任意              mappingDirectoryLocations 设置目录                  classpath:com/itheima/domain/              mappingJarLocations 从jar获得配置文     -->      <property name="mappingDirectoryLocations" value="classpath:cn/feibai/bos/domain"></property></bean><!-- 4 事务管理 -->  <!-- 4.1 事务管理器，spring事务必须在事务管理器平台上工作       * 在hibernate中事务需要session，session是从sessionFactory中获取的。  -->  <bean id="txManager" class="org.springframework.orm.hibernate3.HibernateTransactionManager">      <property name="sessionFactory" ref="sessionFactory"></property>  </bean> <!-- 组件扫描 --><context:component-scan base-package="cn.feibai.bos"/><!-- 引入注解解析器 --><context:annotation-config/><!-- 事务注解支持 --><tx:annotation-driven transaction-manager="transactionManager"/></beans>

3. 主页设计(easyUI)

在项目中引入JQuery Easy UI

<!-- 导入jquery核心类库 --><script type="text/javascript"src="${pageContext.request.contextPath }/js/jquery-1.8.3.js"></script><!-- 导入easyui类库 --><script type="text/javascript"src="${pageContext.request.contextPath }/js/easyui/jquery.easyui.min.js"></script><!--   导入默认主题CSS文件--><link id="easyuiTheme" 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"><!-- 导入国际化信息文件--><scriptsrc="${pageContext.request.contextPath }/js/easyui/locale/easyui-lang-zh_CN.js"type="text/javascript"></script>

3.1 Layout使用---页面布局

*layout控件用于布局可以对 div标签使用或者body使用
*布局后内容分为东西南北中五个部分，只有center区域是必须的

<%@ page language="java" contentType="text/html; charset=UTF-8" pageEncoding="UTF-8"%>  <!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">  <html>  <head>  <meta http-equiv="Content-Type" content="text/html; charset=UTF-8">  <title>layout页面布局控件使用</title>  <!-- 引入easyui相关资源文件 -->  <!-- 导入jquery核心类库 -->  <script type="text/javascript"      src="${pageContext.request.contextPath }/js/jquery-1.8.3.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">  <link rel="stylesheet" type="text/css"      href="${pageContext.request.contextPath }/js/easyui/ext/portal.css">   <link rel="stylesheet" type="text/css"      href="${pageContext.request.contextPath }/css/default.css">  <!-- 导入easyui类库 -->             <script type="text/javascript"      src="${pageContext.request.contextPath }/js/easyui/jquery.easyui.min.js"></script>  <script type="text/javascript"      src="${pageContext.request.contextPath }/js/easyui/ext/jquery.portal.js"></script>  <script type="text/javascript"      src="${pageContext.request.contextPath }/js/easyui/ext/jquery.cookie.js"></script>  <!-- 导入国际化信息文件 -->      <script      src="${pageContext.request.contextPath }/js/easyui/locale/easyui-lang-zh_CN.js"      type="text/javascript"></script>  </head>  <body class="easyui-layout">      <!-- 每个div是一个区域 -->      <div title="XXX系统" data-options="region:'north'" style="height: 100px">北部区域</div>      <div title="系统菜单" data-options="region:'west'" style="width: 200px">西部区域</div>      <div data-options="region:'center'" >中部区域</div>      <div data-options="region:'east'" style="width: 100px">东部区域</div>      <div data-options="region:'south'" style="height: 50px">南部区域</div>  </body>  </html>

3.2 Accordion----折叠面板

*fit:true 属性可以让accordion 的div的大小，占满父类容器
*为每个折叠面板设置title属性指定显示标题
*iconCls 可以显示面板标题左侧的图标

<body class="easyui-layout"><!-- 每个div是一个区域 --><div title="XXX系统" data-options="region:'north'" style="height: 100px">北部区域</div><div title="系统菜单" data-options="region:'west'" style="width: 200px"><!-- 西部区域内:折叠面板 --><div id="aa" class="easyui-accordion" data-options="fit:true">  <!-- 每个子div是一个面板 -->     <div title="Title1" data-options="iconCls:'icon-save'" >     内容一      </div>       <div title="Title2" data-options="iconCls:'icon-reload'" >     内容二         </div>       <div title="Title3">      内容三       </div>   </div>  </div><div data-options="region:'center'" >中部区域</div><div data-options="region:'east'" style="width: 100px">东部区域</div><div data-options="region:'south'" style="height: 50px">南部区域</div></body>

3.3 Tabs----选项卡面板

*通过设置closeable属性可以关闭选项卡
*fit:true 使选项卡适应父容器大小

3.4 动态添加选项卡

*判断选项卡是否存在:$('#tt').tabs("exists","新选项卡面板")
*选中选项卡:$('#tt').tabs("select","新选项卡面板")
*添加选项卡:$('#tt').tabs('add',{选项卡属性:选项卡值});

*把一个jsp页面设置成选项卡新增选项卡内容:
src="page_admin_role"→<action name="page_*_*">
content:'<iframe src="page_admin_role" frameborder="0" width="100%" height="100%"></iframe>'

<body class="easyui-layout"><!-- 每个div是一个区域 --><div title="XXX系统" data-options="region:'north'" style="height: 100px">北部区域</div><div title="系统菜单" data-options="region:'west'" style="width: 200px"><!-- 折叠面板 --><div id="aa" class="easyui-accordion" data-options="fit:true">  <!-- 每个子div是一个面板 -->     <div title="Title1" data-options="iconCls:'icon-save'" >     <!-- 动态增加选项卡按钮 -->    <a id="btn" href="#" class="easyui-linkbutton" data-options="iconCls:'icon-add'">增加选项卡</a>     <!-- 给按钮添加点击事件 -->    <script type="text/javascript">    $(function(){    $("#btn").click(function(){    //判断当前选项卡是否已经打开    if($('#tt').tabs("exists","新选项卡面板")){    //选中    $('#tt').tabs("select","新选项卡面板");    }else{    // 添加一个选中状态的选项卡面板    $('#tt').tabs('add',{    title: '新选项卡面板',    selected: true,    closable:true,    content:'<iframe src="page_admin_role" frameborder="0" width="100%" height="100%"></iframe>'    });    }    });    });    </script>    </div>       <div title="Title2" data-options="iconCls:'icon-reload'" >     内容二         </div>       <div title="Title3">      内容三     </div>   </div>  </div><div data-options="region:'center'" ><!--中部区域内 选项卡  --><div id="tt" class="easyui-tabs" data-options="fit:true">       <div title="选项卡1" data-options="closable:true">           tab1        </div>       <div title="选项卡2" data-options="closable:true" >           tab2        </div>       <div title="选项卡3" data-options="iconCls:'icon-reload',closable:true">           tab3        </div>   </div></div><div data-options="region:'east'" style="width: 100px">东部区域</div><div data-options="region:'south'" style="height: 50px">南部区域</div></body>

3.5 Ztree插件使用

官网：ztree.me

目录结构

引入ztree

<!-- 先引入 jquery的 js --><script type="text/javascript" src="${pageContext.request.contextPath }/js/jquery-1.8.3.js“/><!-- 引入ztree  --><script type="text/javascript" src="${pageContext.request.contextPath }/js/ztree/jquery.ztree.all-3.5.js“/><!– 引入ztree样式文件--><link rel="stylesheet" type="text/css" href="${pageContext.request.contextPath }/js/ztree/zTreeStyle.css"/>

步骤:

1.在显示树的地方写ul标签

2.设置参数

var setting = {属性:值};

3.设置节点数据

var treeNodes = [{},{}..];

4.初始化树

$.fn.zTree.init($("#tree"), setting, treeNodes);

3.5.1 使用标准(StandardData)json数据构造ztree

<!-- 导入ztree样式文件 --><link rel="stylesheet" href="${pageContext.request.contextPath }/js/ztree/zTreeStyle.css" type="text/css"><!-- 导入ztree js文件 --><script type="text/javascript" src="${pageContext.request.contextPath }/js/ztree/jquery.ztree.all-3.5.js"></script>...    <!-- 内容二内:点击加载ztree 在显示树的地方写ul标签-->     <ul id="tree" class="ztree"></ul>    <!-- 通过js编写setting对象--> <script type="text/javascript">$(function(){//使用StandardData构造Ztree//1.设置参数var setting = {};//2.设置节点数据var treeNodes = [    {"name":"菜单一"},    {"name":"菜单二","children":[{"name":"二级菜单"}]}    ];//3.初始化树$.fn.zTree.init($("#tree"), setting, treeNodes); }); </script>             </div>       <div title="Title3">      内容三     </div>   </div>  </div>

3.5.2 使用简单(SimpleData)json数据构造ztree

区别:

1.data的simpleData参数设置为,enable: true 不使用json嵌套格式

2.节点数据不同: id 为本节点id / pId为父节点id / "pId"="0" 为根节点

    <div title="Title3">      <!-- 内容三内:点击加载ztree 在显示树的地方写ul标签-->     <ul id="tree2" class="ztree"></ul>    <!-- 通过js编写setting对象--> <script type="text/javascript">$(function(){//使用SimpleData构造Ztree//1.设置参数,enable: true 不使用json嵌套格式var setting = {data: {simpleData: {enable: true,idKey: "id",pIdKey: "pId",rootPId: 0,}}};//2.设置节点数据var treeNodes = [    {"id":"1","pId":"0","name":"菜单1"},    {"id":"2","pId":"0","name":"菜单2"},    {"id":"3","pId":"2","name":"2级菜单3"}];//3.初始化树$.fn.zTree.init($("#tree2"), setting, treeNodes); }); </script>    </div>

3.5.3 使用ajax加载远程json数据

*点击节点事件的回调Function 参数说明
event:标准的 js event 对象
treeId:对应 zTree 的 treeId
treeNode:被点击的节点 JSON 数据对象

    <div title="Title4">      <!-- 内容四内:点击加载ztree 在显示树的地方写ul标签-->     <ul id="tree3" class="ztree"></ul>    <!-- 通过js编写setting对象--> <script type="text/javascript">$(function(){//使用ajax加载宣城json数据//1.设置点击事件的回调函数var setting = {data: {simpleData: {enable: true}},callback: {onClick:function(event,treeId,treeNode){//判断当前点击的选项page属性是否存在是否存在//例(有page):{ "id":"11", "pId":"0", "name":"基础数据"},//例(无page):{ "id":"112", "pId":"11", "name":"取派员设置",  "page":"page_base_staff.action"},if(treeNode.page!=undefined){//有page就添加到右边的选项卡    //判断当前选项卡是否已经打开存在    if($('#tt').tabs("exists",treeNode.name)){    //选中    $('#tt').tabs("select",treeNode.name);    }else{    // 添加一个选中状态的选项卡面板    $('#tt').tabs('add',{    title:treeNode.name,    closable:true,    content:'<iframe src="'+treeNode.page+'" frameborder="0" width="100%" height="100%"></iframe>'    });    }}}}};//ajax请求var url="${pageContext.request.contextPath }/json/menu.json";$.post(url,{},function(data){//返回值data为节点数据直接初始化$.fn.zTree.init($("#tree3"), setting,data); }); }); </script>    </div>   </div>  </div>