day01_Web开发

主要讲解四点:

1、物流项目整体分析(背景、业务场景、开发环境、技术) (了解)

2、STS(Spring Tool Suite)、java开发工具、maven集成配置、Hbuilder页面开发 (掌握)

3、项目版本控制,Git(本地版本库、在线版本库使用)(了解,项目开发中掌握)

4、后台界面开发框架jQuery Easyui框架、Ztree树形菜单技术(掌握)

day01_Web开发_02

一、内容概述

1、物流项目整体分析(背景、业务场景、开发环境、技术) (了解)

2、STS(Spring Tool Suite)、java开发工具、maven集成配置、Hbuilder页面开发 (掌握)

3、导入项目,对项目进行版本控制 Git(本地版本库、在线版本库使用) (先熟悉,项目开发中掌握)

4、后台界面开发框架jQuery Easyui 框架、Ztree树形菜单技术 (掌握)

二、BOS系统背景和核心业务

1、宅急送 http://www.zjs.com.cn/

2、速运新BOS系统软件需求规格说明书.pdf

3、BOS后台管理系统,七个部分:

基础设置(物流业务管理 元数据):取派标准、取派时间、车辆、快递员、区域

取派:下单、取件、配送

中转:中转点、出入库

路由:运输线路、交通工具

PDA:快递员无线通讯设备 通讯功能

财务:快递员费用统计、计算等

管理报表需求:物流业务数据产生报表

三、项目开发知识简介

1、项目系统原型 C/S B/S

2、项目种类 OA、CRM、ERP(SAP Oracle EBS)(用友,金蝶)、BOS

3、软件开发流程

需求调研分析、设计(概要设计、详细设计) 编码 测试 QA质量管理 实施和运维

瀑布/敏捷

4、项目生态(分布式)

day01_Web开发_03

5、重点:BOS核心物流业务系统、前端:客户操作、CRM:客户信息管理

四、开发环境和开发技术

1、开发环境:

day01_Web开发_04

2、使用技术

day01_Web开发_05

前后端技术

Server端 Struts2 spring sprign data +jpa+hibernate

说明:springdata 整合jpa接口

后台页面 Jquery Easyui

前端页面 Bootstrap angularjs

Excel解析 poi

远程调用webservice 基于RestFul风格的CXF

短信平台 邮件平台

Redis ActiveMQ消息队列

ElasticSearch Spring Data 操作ElasticSearch服务器

定时调度 Quartz

在线HTML编辑 kindEditor使用

权限管理 Apache Shrio

五、开发工具下载安装

1、STS网址:http://spring.io/tools/sts

2、Hbuilder网址:http://www.dcloud.io/

后台程序开发,使用工具 STS , spring 提供免费 eclipse 插件 ,对 spring 配置支持非常好。

前台程序开发,使用工具 Hbuilder,基于 eclipse 进行定制开发,主要前端和移动端开发。

 MyEclipse 收费 Eclipse 插件 ,内部集成 JRE 环境 ,不需要配置本地 JDK、JRE。

 STS 没有集成 JRE ,安装使用 STS 使用与本机 JRE 匹配版本。

IntelliJ IDEA 使用风格和 Eclipse 有些区别,主要流行互联网公司。

六、STS与maven集成

1、maven环境配置

第一步、解压apache-maven-3.1.1-bin.zip到磁盘目录,比如D:/;

第二步、在maven解压目录下建立目录repository

第三步、修改conf/settings.xml

<localRepository>D:\apache-maven-3.1.1\repository</localRepository>

第四步、将repository.zip中所有内容解压到D:\apache-maven-3.1.1\repository

2、STS关联maven

1)源码和javadoc自动关联

         day01_Web开发_06

2)配置本地maven,加载到本地仓库

day01_Web开发_07

3)配置settings.xml

day01_Web开发_08

4)打开maven仓库管理视图

day01_Web开发_09

七、导入项目实现STS与Hbuilder同步开发

1、同步开发:STS写后台代码,Hbuilder开发前端代码

2、BOS后台系统、CRM系统、BOS前端系统都会使用maven管理,相同依赖,使用maven继承机制。

3、common_parent 公共父项目,packaging 为 pom

bos_management 后台管理系统项目, packaging为war

oracle驱动包 手动导入

八、Git工具和TortoiseGit工具

1、Git下载地址:https://git-scm.com/download/win下载安装,配置环境变量

day01_Web开发_10

安装包里仅有64位安装包

检查环境变量path

git --version 看是否安装成功

day01_Web开发_11

2、TortoiseGit网址:https://tortoisegit.org/download/ 右键目录出现图标,则安装成功

day01_Web开发_12

九、Git和SVN版本控制区别

day01_Web开发_13

SVN与Git的区别:

  1. Git是分布式的,SVN不是

    分布式的好处是:每个客户端克隆了中央仓库后,就像一个新的"中央仓库"

    Git github 码云 代码放到这些网上

2、Git有本地仓库,SVN没有,本地库的好处有哪些呢:

    1)断网提交

    2)跟踪版本,查找历史记录

    3)本地回滚

  1. Git基本使用操作

    1.(实际有专人在linux下建立)d盘建立 temp/repository目录,将这个目录作为中央仓库

    两种方法

    1、执行git init

    2、图形工具

    day01_Web开发_14

    day01_Web开发_15

    直接将版本控制源文件建到此文件夹下 选Cancel

    生成隐藏.git文件夹

  2. 建立模拟用户目录,git clone克隆中央仓库

    在d:\temp下建立user1 user2 模拟两个用户

    user1目录里 clone

    day01_Web开发_16

    建立itcast.txt文件,提交commit到本地仓库,并push到中央仓库

    新建立的文件要add添加到版本控制

    (新建的文件要放在.git下面,要不然右键没有add)

    day01_Web开发_17

    day01_Web开发_18

    day01_Web开发_19

    Commit提交文件到本地仓库

    第一次使用git提交会报错

    day01_Web开发_20

    需要设置用户名和邮箱

    day01_Web开发_21

    将本地仓库push到远程仓库

    选择文件夹push

    day01_Web开发_22

    Master是仓库主线代号,origin是远程仓库代号

    错误:需要远程仓库设置参数

    day01_Web开发_23

    需要在原始仓库(中央)执行

    day01_Web开发_24

    在user2目录里执行git clone 查看user1修改

     

    十一、Git冲突解决

    解决冲突

    先让user1提交, 先pull,再push

    必须先commit到本地仓库才能pull

    冲突产生

    day01_Web开发_25

     

    day01_Web开发_26

    生成3个文件

    day01_Web开发_27

    保存时 标记冲突解决

    day01_Web开发_28

    再次提交

    实际工作中 解决冲突找相关开发人员商量处理

    先拉后推

    十二、基于码云在线版本控制

    1. github网址: https://github.com/
    2. 码云网址: http://git.oschina.net/

    day01_Web开发_29

  3. 用户注册
  4. 登陆后创建一个git项目

    day01_Web开发_30

    day01_Web开发_31

    将其它开发者加入到项目中

    day01_Web开发_32

    将码云上新建的项目克隆到本地

    day01_Web开发_33

    第一次clone要用户密码 输入的是邮箱号 和密码

    将两个项目移动到新的文件夹下bos_teach

    把target目录忽略掉 提交

    将本地代码通过在线仓库进行版本控制

    day01_Web开发_34

  5. 管理系统布局分析和jqueryeasyui下载分析

    day01_Web开发_35

    portal 企业门户

    1. 管理系统布局分析

    day01_Web开发_36

    正文内容两种实现方案

    使用ajax加载内容,很难实现独立刷新

    嵌入iframe,实现独立刷新 tab选项卡

    1. Jqueryeasyui下载分析

    day01_Web开发_37

    day01_Web开发_38

     

  6. easyui页面布局layout的使用

    用Hbuilder在webapp下建一个easyuidemo文件夹

    新建1.html 导入文件此ide 会有提示的

    day01_Web开发_39

    day01_Web开发_40

    写div*5 自动生成5个div 快速开发 (输完后按tab键)

    十五、easyui折叠面板accordion使用

  7. 对折叠面板区域div 设置class="easyui-accordian"

    2、在区域添加多个div 每个div就是一个面板(每个面板一定设置title属性,即可以写在外面也可以写在option里)

    3、(overflow为原始属性)设置面板属性fit为true,自适应父容器大小

    day01_Web开发_41

  8. easyui选项卡面板tabs使用
  9. 对选项卡面板区域div设置 class="easyui-tabs"
  10. 对选项卡面板区域添加多个div,每个div就是一个选项卡(每个面板一定设置title)
  11. fit设为true 自适应父容器大小
  12. 设置选项卡closable为true, 添加可关闭

    day01_Web开发_42

  13. 通过超链接,点击后添加选项卡

    语法:页面对象.easyui插件(方法名,参数);

    day01_Web开发_43

    使用jquery语法,为超链接增加一个事件

    day01_Web开发_44

    (注意格式,需要加逗号)

    页面选项卡面版的代码

    day01_Web开发_45

     

    十七、ztree基于简单json数据制作树形菜单

    使用zTree

  14. 下载zTree 解压

    day01_Web开发_46

    all 所有功能= core + excheck勾选 + exedit编辑 +exhide隐藏

  15. 在页面中引入ztree

    day01_Web开发_47

  16. 通过ztree写树型菜单

    标准json数据

    day01_Web开发_48

    简单json数据

    day01_Web开发_49

    第一步:在页面显示菜单位置,添加<ul>

    day01_Web开发_50

    第二步: js三步 (启用simpleData)

    day01_Web开发_51

    第三步:zNodes数据

    day01_Web开发_52

    第四步: 生成树形菜单 三个参数

    day01_Web开发_53

     

    十八、树形菜单交互选项卡效果实现

    ztree自带url不适合

    添加page属性

    day01_Web开发_54

    写回调函数(注意大写*****)

    day01_Web开发_55

    回调

    day01_Web开发_56