JAVAEE——BOS物流項目01：學習計划、搭建環境、主頁設計(jQuery EasyUI)

 

 

1 學習計划

1、項目概述

　　項目背景介紹

2、搭建項目開發環境

　　數據庫環境

　　maven項目搭建

　　svn環境搭建

3、主頁設計（jQuery EasyUI）

　　layout頁面布局

　　accordion折疊面板

　　tabs選項卡面板

 

2 項目概述

2.1 項目背景介紹

本項目屬於物流公司的二期改造項目。物流公司存在一個一期項目（基於C/S架構），用C++開發的。

 

項目甲方：物流公司（軟件的使用方）

項目乙方：軟件公司（軟件的開發方）

 

軟件的開發周期13個月，編碼階段4個月時間，開發團隊人數20多個人。

 

 

BOS：Bussiness Operating System 業務操作系統

 

2.2 常見的軟件類型

OA:辦公自動化系統

CRM:客戶關系管理系統

ERP:綜合的企業解決方案（平台）

 

2.3 軟件的開發流程（瀑布模型）

1、需求調研分析----需求規格說明書

2、設計階段（概要設計、詳細設計）----頁面原型、數據庫設計、設計文檔

3、編碼階段

4、測試階段

5、上線和運維

 

3 搭建項目開發環境

3.1 數據庫環境

第一步：創建一個數據庫

 

 

第二步：創建一個數據庫用戶

 

 

第三步：為新用戶授權

 

 

第四步：使用新用戶登錄MySQL

 

 

3.2 maven項目環境

使用maven是依賴管理和項目構建的工具

 

 

 

3.2.1 創建父工程bos-parent

Packaging的含義

任何一個Maven項目都需要定義POM元素packaging（如果不寫則默認值為jar）。顧名思義，該元素決定了項目的打包方式。實際的情形中，如果你不聲明該元素，Maven會幫你生成一個JAR包；如果你定義該元素的值為war，那你會得到一個WAR包；如果定義其值為POM（比如是一個父模塊），那什么包都不會生成。除此之外，Maven默認還支持一些其他的流行打包格式，例如ejb3和ear。你不需要了解具體的打包細節，你所需要做的就是告訴Maven，”我是個什么類型的項目“，這就是約定優於配置的力量。

 

提供pom.xml

<project xmlns="http://maven.apache.org/POM/4.0.0" xmlns:xsi="http://www.w3.org/2001/XMLSchema-instance" xsi:schemaLocation="http://maven.apache.org/POM/4.0.0 http://maven.apache.org/xsd/maven-4.0.0.xsd">
  <modelVersion>4.0.0</modelVersion>
  <groupId>com.itheima</groupId>
  <artifactId>bos-parent</artifactId>
  <version>0.0.1-SNAPSHOT</version>
  <packaging>pom</packaging>
  <description>父工程</description>
  <!-- 通過屬性定義指定jar的版本 -->
    <properties>
        <spring.version>4.2.4.RELEASE</spring.version>
        <hibernate.version>5.0.7.Final</hibernate.version>
        <struts2.version>2.3.24</struts2.version>
        <slf4j.version>1.6.6</slf4j.version>
        <log4j.version>1.2.12</log4j.version>
        <shiro.version>1.2.3</shiro.version>
    </properties>

    <dependencies>
        <dependency>
            <groupId>org.springframework</groupId>
            <artifactId>spring-context</artifactId>
            <version>${spring.version}</version>
        </dependency>

        <dependency>
            <groupId>org.springframework</groupId>
            <artifactId>spring-context-support</artifactId>
            <version>${spring.version}</version>
        </dependency>

        <dependency>
            <groupId>org.springframework</groupId>
            <artifactId>spring-web</artifactId>
            <version>${spring.version}</version>
        </dependency>

        <dependency>
            <groupId>org.springframework</groupId>
            <artifactId>spring-orm</artifactId>
            <version>${spring.version}</version>
        </dependency>

        <dependency>
            <groupId>org.springframework</groupId>
            <artifactId>spring-beans</artifactId>
            <version>${spring.version}</version>
        </dependency>

        <dependency>
            <groupId>org.springframework</groupId>
            <artifactId>spring-core</artifactId>
            <version>${spring.version}</version>
        </dependency>

        <dependency>
            <groupId>org.aspectj</groupId>
            <artifactId>aspectjweaver</artifactId>
            <version>1.7.4</version>
        </dependency>

        <!-- struts2 begin -->
        <dependency>
            <groupId>org.apache.struts</groupId>
            <artifactId>struts2-core</artifactId>
            <version>${struts2.version}</version>
            <!-- 排除傳遞的依賴 -->
            <exclusions>
                <exclusion>
                    <artifactId>javassist</artifactId>
                    <groupId>javassist</groupId>
                </exclusion>
            </exclusions>
        </dependency>
        <dependency>
            <groupId>org.apache.struts</groupId>
            <artifactId>struts2-spring-plugin</artifactId>
            <version>${struts2.version}</version>
        </dependency>
        <dependency>
            <groupId>org.apache.struts</groupId>
            <artifactId>struts2-convention-plugin</artifactId>
            <version>${struts2.version}</version>
        </dependency>
        <!-- struts2 end -->

        <!-- hibernate begin -->
        <dependency>
            <groupId>org.hibernate</groupId>
            <artifactId>hibernate-core</artifactId>
            <version>${hibernate.version}</version>
        </dependency>
        <!-- hibernate end -->

        <!-- log start -->
        <dependency>
            <groupId>log4j</groupId>
            <artifactId>log4j</artifactId>
            <version>${log4j.version}</version>
        </dependency>

        <dependency>
            <groupId>org.slf4j</groupId>
            <artifactId>slf4j-api</artifactId>
            <version>${slf4j.version}</version>
        </dependency>

        <dependency>
            <groupId>org.slf4j</groupId>
            <artifactId>slf4j-log4j12</artifactId>
            <version>${slf4j.version}</version>
        </dependency>
        <!-- log end -->

        <dependency>
            <groupId>org.apache.poi</groupId>
            <artifactId>poi</artifactId>
            <version>3.11</version>
        </dependency>

        <dependency>
            <groupId>org.apache.cxf</groupId>
            <artifactId>cxf-rt-frontend-jaxws</artifactId>
            <version>3.0.1</version>
        </dependency>
        <dependency>
            <groupId>org.apache.cxf</groupId>
            <artifactId>cxf-rt-transports-http</artifactId>
            <version>3.0.1</version>
        </dependency>
        <dependency>
            <groupId>junit</groupId>
            <artifactId>junit</artifactId>
            <version>4.10</version>
            <scope>test</scope>
        </dependency>

        <!-- 加入servlet和jsp的依賴 -->
        <dependency>
            <groupId>javax.servlet</groupId>
            <artifactId>servlet-api</artifactId>
            <version>2.5</version>
            <scope>provided</scope>
        </dependency>
        <dependency>
            <groupId>javax.servlet</groupId>
            <artifactId>jsp-api</artifactId>
            <version>2.0</version>
            <scope>provided</scope>
        </dependency>

        <!-- 引入pinyin4J的依賴 -->
        <dependency>
            <groupId>com.belerweb</groupId>
            <artifactId>pinyin4j</artifactId>
            <version>2.5.0</version>
        </dependency>
        
        <!-- 引入json-lib的依賴 -->
        <dependency>
            <groupId>net.sf.json-lib</groupId>
            <artifactId>json-lib</artifactId>
            <version>2.4</version>
        </dependency>
        
        <!-- 引入c3p0jar包 -->
        <dependency>
            <groupId>c3p0</groupId>
            <artifactId>c3p0</artifactId>
            <version>0.9.1.2</version>
        </dependency>
        
        <!-- 引入ehcache的依賴 -->
        <dependency>
            <groupId>net.sf.ehcache</groupId>
            <artifactId>ehcache-core</artifactId>
            <version>2.6.6</version>
        </dependency>
        <!-- 引入shiro框架的依賴 -->
        <dependency>
            <groupId>org.apache.shiro</groupId>
            <artifactId>shiro-all</artifactId>
            <version>1.2.2</version>
        </dependency>
        <!-- 引入MySQL數據庫驅動依賴 -->
        <dependency>
            <groupId>mysql</groupId>
            <artifactId>mysql-connector-java</artifactId>
            <version>5.1.32</version>
        </dependency>
    </dependencies>
    <build>
        <!-- 插件 -->
        <plugins>
            <plugin>
                <groupId>org.apache.maven.plugins</groupId>
                <artifactId>maven-resources-plugin</artifactId>
                <version>2.5</version>
            </plugin>
            <plugin>
                <groupId>org.apache.maven.plugins</groupId>
                <artifactId>maven-compiler-plugin</artifactId>
                <version>2.3.2</version>
                <configuration>
                    <source>1.7</source>
                    <target>1.7</target>
                </configuration>
            </plugin>
            <!-- 引入tomcat插件 -->
            <plugin>
                <groupId>org.apache.tomcat.maven</groupId>
                <artifactId>tomcat7-maven-plugin</artifactId>
                <version>2.2</version>
                <configuration>
                    <path>/bos</path>
                    <port>8888</port>
                </configuration>
            </plugin>
        </plugins>
        <resources>
            <resource>
                <directory>src/main/java</directory>
                <includes>
                    <include>**/*.properties</include>
                    <include>**/*.xml</include>
                </includes>
                <filtering>false</filtering>
            </resource>
            <resource>
                <directory>src/main/resources</directory>
                <includes>
                    <include>**/*.properties</include>
                    <include>**/*.xml</include>
                </includes>
                <filtering>false</filtering>
            </resource>
        </resources>
    </build>
</project>

 

 

3.2.2 創建bos-utils子工程

 

 

3.2.3 創建bos-domain子工程

 jar

3.2.4 創建bos-dao子工程

 jar

3.2.5 創建bos-service子工程

 war

 

第一步：配置web.xml文件

 

<?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" 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-web</display-name>
  <welcome-file-list>
    <welcome-file>index.html</welcome-file>
    <welcome-file>index.htm</welcome-file>
    <welcome-file>index.jsp</welcome-file>
    <welcome-file>default.html</welcome-file>
    <welcome-file>default.htm</welcome-file>
    <welcome-file>default.jsp</welcome-file>
  </welcome-file-list>
  
  <!-- 配置過濾器，解決hibernate延遲加載問題 -->
  <filter>
      <filter-name>openSessionInView</filter-name>
      <filter-class>org.springframework.orm.hibernate5.support.OpenSessionInViewInterceptor</filter-class>
  </filter>
  <filter-mapping>
      <filter-name>openSessionInView</filter-name>
      <url-pattern>/*</url-pattern>
  </filter-mapping>
  
  <!-- 通過上下文參數指定spring配置文件位置 -->
  <context-param>
      <param-name>contextConfigLocation</param-name>
      <param-value>classpath:applicationContext.xml</param-value>
  </context-param>
  
  <!-- 配置spring框架的監聽器 -->
  <listener>
      <listener-class>org.springframework.web.context.ContextLoaderListener</listener-class>
  </listener>
  
  <!-- 配置struts2的過濾器 -->
  <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>
</web-app>

 

 

第二步：配置struts.xml文件

<?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="false" />
    <!-- 
        <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>

 

第三步：配置log4j.properties日志文件

### direct log messages to stdout ###
log4j.appender.stdout=org.apache.log4j.ConsoleAppender
log4j.appender.stdout.Target=System.err
log4j.appender.stdout.layout=org.apache.log4j.PatternLayout
log4j.appender.stdout.layout.ConversionPattern=%d{ABSOLUTE} %5p %c{1}:%L - %m%n

### direct messages to file mylog.log ###
log4j.appender.file=org.apache.log4j.FileAppender
log4j.appender.file.File=d:\\mylog.log
log4j.appender.file.layout=org.apache.log4j.PatternLayout
log4j.appender.file.layout.ConversionPattern=%d{ABSOLUTE} %5p %c{1}:%L - %m%n

### set log levels - for more verbose logging change 'info' to 'debug' ###
### fatal error warn info debug trace
log4j.rootLogger=debug, file

 

第四步：配置applicationContext.xml文件

<?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">
    
    <!-- 加載屬性文件 -->
    <context:property-placeholder location="classpath:db.properties"/>
                
    <!-- 配置數據源 -->
    <bean id="dataSource" class="com.mchange.v2.c3p0.ComboPooledDataSource">
        <property name="driverClass" value="${jdbc.driverClass}"/>
        <property name="jdbcUrl" value="${jdbc.jdbcUrl}"/>
        <property name="user" value="${jdbc.user}"/>
        <property name="password" value="${jdbc.password}"/>
    </bean>
    
    <!-- 配置LocalSessionFactoryBean，spring提供的用於整合hibernate的工廠bean -->
    <bean id="sessionFactory" class="org.springframework.orm.hibernate5.LocalSessionFactoryBean">
        <property name="dataSource" ref="dataSource"/>
        <!-- 注入hibernate相關的屬性配置 -->
        <property name="hibernateProperties">
            <props>
                <prop key="hibernate.dialect">org.hibernate.dialect.MySQL5Dialect</prop>
                <prop key="hibernate.hbm2ddl.auto">update</prop>
                <prop key="hibernate.show_sql">true</prop>
                <prop key="hibernate.format_sql">true</prop>
            </props>
        </property>
        <!-- 注入hibernate的映射文件 -->
        <property name="mappingLocations">
            <list>
                <value>classpath:com/itheima/bos/domain/*.xml</value>
            </list>
        </property>
    </bean>
    
    <!-- 配置事務管理器 -->
    <bean id="transactionManager" class="org.springframework.orm.hibernate5.HibernateTransactionManager">
        <property name="sessionFactory" ref="sessionFactory"/>
    </bean>
    
    <!-- 組件掃描 -->
    <context:component-scan base-package="com.itheima.bos"/>
    
    <!-- 支持spring注解 -->
    <context:annotation-config/>
    
    <tx:annotation-driven/>
</beans>

 

第五步：創建一個項目的目錄結構

 

第六步：將項目使用的資源文件復制到項目中

 

 

 

3.3 svn環境

第一步：創建一個svn數據倉庫

 

 

倉庫的目錄結構：

 

 

第二步：修改conf目錄中的配置文件

l 修改svnserve.conf文件：

[general]

anon-access = none

auth-access = write

password-db = passwd

authz-db = authz

[sasl]

l 修改passwd文件：

 

[users]

xiaohei = 123

xiaobai = 456

 

l 修改authz文件：

[aliases]

[groups]

group1 = zhangsan,lisi

 

[/]

xiaohei = rw

xiaobai = r

@group1 = r

 

第三步：啟動svn服務（創建一個bat文件，將啟動的命令寫到文件中）

 

 

 

第四步：將本地代碼共享到svn倉庫

 

 

 

 

4 主頁設計（jQuery EasyUI插件使用）

下載easyUI的開發包：

 

 

解壓zip文件：

 

 

 

將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>

 

4.1 layout頁面布局

 

<body class="easyui-layout">
    <!-- 使用div元素描述每個區域 -->
    <div style="height: 100px" data-options="region:'north'">北部區域</div>
    <div style="width: 200px" data-options="region:'west'">西部區域</div>
    <div data-options="region:'center'">中心區域</div>
    <div style="width: 100px" data-options="region:'east'">東部區域</div>
    <div style="height: 50px" data-options="region:'south'">南部區域</div>
</body>

 

 

 

效果：

 

 

 

4.2 accordion折疊面板

 

        <!-- 制作accordion折疊面板 
            fit:true----自適應(填充父容器)
        -->
        <div class="easyui-accordion" data-options="fit:true">
            <!-- 使用子div表示每個面板 -->
            <div data-options="iconCls:'icon-cut'" title="面板一">1111</div>
            <div title="面板二">2222</div>
            <div title="面板三">3333</div>
        </div>

 

效果：

 

 

 

4.3 tabs選項卡面板

        <!-- 制作一個tabs選項卡面板 -->
        <div class="easyui-tabs" data-options="fit:true">
            <!-- 使用子div表示每個面板 -->
            <div data-options="iconCls:'icon-cut'" title="面板一">1111</div>
            <div data-options="closable:true" title="面板二">2222</div>
            <div title="面板三">3333</div>
        </div>

效果：