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

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.xsd http://www.springframework.org/schema/context http://www.springframework.org/schema/context/spring-context.xsd http://www.springframework.org/schema/aop http://www.springframework.org/schema/aop/spring-aop.xsd http://www.springframework.org/schema/tx http://www.springframework.org/schema/tx/spring-tx.xsd"> <!-- 公共配置文件，web.xml配置加载核心文件 -->
<!-- 1 加载properties文件
jdbcinfo.properties
jdbc.driverClass=com.mysql.jdbc.Driver
jdbc.jdbcUrl=jdbc:mysql://localhost:3306/bos1
jdbc.user=user_bos
jdbc.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">
<!-- 导入国际化信息文件-->
<script
src="${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标签

<ul id="tree" class="ztree"></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>

4. 使用PowerDesigner设计数据库

*PowerDesigner 的 4 种模型文件

概念数据模型(CDM)

物理数据模型(PDM)

面向对象模型(OOM)

业务程序模型(BPM)

1.创建PDM模型工作空间

点击文件建立新模型或者右键工作空间创建PDM



DBMS没有选项的话,点击右侧文件夹找安装目录下\Resource Files\DBMS ,就有选项了



2.创建表

右键PDM模型→新增→table

或拖拽右侧图形化界面的table图标



3建立外键

选择图形界面的Reference图标点击子表拖动虚线指向父表即可生成fk外键关系



双击中间的连线选择join可以编辑外键



4生成sql文件：

选择数据库→Generate Database