A股上市公司传智教育(股票代码 003032)旗下技术交流社区北京昌平校区

 找回密码
 加入黑马

QQ登录

只需一步,快速开始

© 厦门校区 黑马粉丝团   /  2018-8-1 19:10  /  4195 人查看  /  30 人回复  /   0 人收藏 转载请遵从CC协议 禁止商业使用本文

同学们,今天是bos物流项目第二天,主要内容就是easyUI的使用以及oracleXE的安装

今日需要掌握的有:
  • 熟悉easyUI上课案例,不需要背诵,学会查api
  • 安装好oracleXE,并保证PLSQL Developer正常使用
  • 编写spring配置文件,完成实体类的自动建表

请同学们按照如上要求,总结你今日所学


30 个回复

倒序浏览
easyui:
        1)layout页面布局
                1.class="easyui-layout" 设置页面布局可作用在<body>或<div>
                2.region="center"(声明位置)
        2)accordion折叠面板
                1.class="easyui-accordion"
                2.title=""每个面板都要有一个title名称
        3)tabs选项卡(设置fit:true,适应选项卡父容量的大小)
                1.class="easyui-tabs"
                2.title=""每个选项卡都要有一个title名称
                3.选项卡设置closable:true,设置关闭选项卡
                4.添加选项卡的add方法(语法:页面对象.easyui插件(方法名,参数))
        4)ztree(json)将当前点击的节点id作文父节点id向下查询,获取子节点.
        简单json:({id:1,pId:0,name:"")javabean
        赋值json:([{},{}}]...)
                1.在页面引入ztree
                2.<ul>标签中设置class="easyui-ztree"
                3.通过ztree设置,开启简单数据格式支持:        enable:true
                4.实现树形菜单与选项卡的切换
                        ztree树形菜单自定义添加page,为每个树形节点添加一个点击事件
                        callback:{
                onClick:function(){
                     //添加选项卡
                }
                        }
                       
                treeNode当前点击的树形结构的对象
        5)选项卡菜单
                1.菜单初始化是隐藏的,在模块外定义
                2.class="easyui-menu"
        6)下拉菜单
                1.class="easyui-menubutton"
        7)easyui的api完成消息窗口
                $.messager.窗口名称

点评

6666  发表于 2019-7-3 10:45
回复 使用道具 举报
许剑鸿   bosDay02

今天还是没有代码

1.看视频看视频中老师介绍easyUI并看他敲代码,掌握如何自己通过查看api使用easyUI
2.安装oracleXE至本地,能正常使用PLsqlDeveloper
3.导入实体类及配置文件,根据自己具体要求更改,启动项目,完成自动建表

点评

666666  发表于 2019-7-4 00:21
回复 使用道具 举报
万冕

easyUI比较有规范性,样式代码都是class="easyui-xxx(menu,menubutton等)"

先拿到要操作的对象,然后在点上方法
$("#xxx").xxx({


})


PLsql之前有用过,非常的顺手,没有啥不适的地方

spring的自动创建表,最关键的就是需要配置
<property name="packagesToScan" value="com.itheima.domain" />
<property name="generateDdl" value="true" />
回复 使用道具 举报
王刘锁
在要运行的项目的pom.xml文件中集成Tomcat7,重建本地仓库索引才能在项目上右

键添加组件的时候找到本地仓库的组件
oracle安装完成后的默认端口是8080,这和Tomcat冲突,因此要在项目集成Tomcat

的时候改变端口号为8081,
回复 使用道具 举报
张裕
jQuery EasyUI是一组基于jQuery的UI插件集合体,而jQuery EasyUI的目标就是帮助web开发者更轻松的打造出功能                丰富并且美观的UI界面
maven项目的自动建表 需要注意端口号占用的问题 BindException
配置文件数据库修改 核对 已经扫描注解包的位置 运行服务器时应出现 not found table xxx
说明注解扫描生效 同时自动建表语句也会生效 可在plSQL中刷新tables并查看
回复 使用道具 举报
杜石苇
熟悉easyUI上课案例,不需要背诵,学会查api
easyUI就是用jquery底层来制作的简易页面ui
页面布置分东西南北中
用easyUI配合ztree设置菜单和各个点击事件 隐藏显示菜单  


安装好oracleXE,并保证PLSQL Developer正常使用

直接本机安装oracleXE  设置环境变量 创建bos用户


编写spring配置文件,完成实体类的自动建表

首先复制实体类到java文件夹下

父项目配置好pom.xml里面需要的各个依赖 有spring beans、core、expression  aop  测试集成 整合持久层框架 hibernate、jpa
配置 web.xml  spring监听器
配置 applicationContext.xml  配置c3p0连接池
run as     maven build tomcat:run
回复 使用道具 举报
陈强
BOS项目-day02
安装oracle服务器:
        Readme.txt中配置文件在PLSQP developer中,第二个配置属性必须配置成环境变量.
        --- TNS_ADMIN
        --- H:\Develop\instantclient_12_1\network\ADMIN
由于端口占用,所以要对Tomcat的端口进行重新的配置.
搭建项目持久层架构:
        ---对pom.xml进行配置,整合spring和JPA,并对web.xml进行配置监听器
---完成逆向生成数据库表,注意检查包扫描的路径是否与实体包的名字是否一致
回复 使用道具 举报
总结
张述明
今天的内容主要有两块,一个是easyui的使用,另一个是orcle的下载配置,项目模块分析等

easyui
使用easyui要导五个包
jquery核心类库,easyui类库,主题css,图标css,国际化信息文件

easyui的布局
布局的话,可以在div或者body 添加class="easyui-layout"
region用来布局区域  东西南北中

西部折叠面板
也是对折叠区域的div进行设置 class="easy-accordion"
添加title属性  设置面板属性  fit为true,自适应容器大小

中 选项卡面板tabs
div 设置class="easy-tabs"
添加title属性  设置面板属性  fit为true,自适应容器大小
设置closable为true  可关闭按钮
通过超链接,点击后,已添加新的选项卡

使用 ztree
下载  ztree插件包
导两个包  
<script src="../js/ztree/jquery.ztree.all-3.5.js"
type="text/javascript" charset="utf-8"></script>
  <link rel="stylesheet" type="text/css" href="../js/ztree/zTreeStyle.css"/>

通过json简单数据只用菜单
在每个节点 添加id和pid name
id表示当前节点编号
pid表示父节点
name 控制现实的值

在页面的菜单部分 添加<ul>设置 class="ztree"
开启简单json数据简单格式支持
编写树形菜单数据
生成树形菜单


ztree和选项卡结合
自定义已添加page
添加点击事件
页面对象.easyui样式(方法,参数


选项卡菜单的强化
1.easyui提供menu菜单
2.在选项卡右键显示菜单  
用e.preventdefault();来阻止浏览器默认的菜单显示
图标样式可以使用iconCls 来指定  所有有icon.css的文件控制

下拉菜单menubutton的使用
设置属性  class="easyui-menubutton"
编写子菜单属性
设置下拉菜单超链接menu属性  指向下拉菜单div的id  来把这两个相关联


模块需求分析
区域  分区 定区

区域最大 分区最小用来定位


实体类和表  映射的关系


archive  基础档案
subarchive 子档案

courier 快递员
standard 收派标准
vehicle 车辆
area 区域
fixearea 定区
subArea 分区
takeTime  收派时间





回复 使用道具 举报
张育辉

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

一) jQuery EasyUI是一组基于jQuery的UI插件集合体,而jQuery EasyUI的目标就是帮助web开发者更轻松的打造出功能丰富并且美观的UI界面。开发者不需要编写复杂的javascript,也不需要对css样式有深入的了解,开发者需要了解的只有一些简单的html标签。
二)后台布局,上北下南,左西右东 ,
这个布局容器,有五个区域:北、南、东、西和中心。 他中心地区面板是必需的, 但是边缘地区面板是可选的。每一个边缘地区面板可以缩放的拖动其边境, 他们也可以通过点击其收缩触发.布局可以嵌套,从而用户可以建立复杂的布局,他想要的
三)西部区域折叠面板 accordion
1、对折叠面板区域 div 设置 class="easyui-accordion"
2、在区域添加多个 div, 每个 div 就是一个面板 (每个面板一定设置 title 属性)
3、设置面板属性 fit 为 true,自适应父容器大小
四)中心区域选项卡面板 tabs
1、  对选项卡面板区域 div 设置 class="easyui-tabs"
2、  对选项卡面板区域添加多个 div,每个 div 就是一个选项卡(每个面板一定设置 title)
3、  设置面板 fit 为 true ,自适应父容器大小
4、  设置选项卡 closable 为 true ,添加可关闭按钮
回复 使用道具 举报
林荣彬
       JQuery EasyUI的目录结构:
EasyUI是依赖JQuery的相关JS
demo--框架使用案例
locale--国际化
plugins--框架包含控件包
src--框架包含源码
themes--样式css文件和加载器


后台管理系统界面的布局:
注意事项:
1:设置通用属性class="easyUI-layout" 设置页面布局的话,可以作用在<body>或<div>上
2.声明布局位置:在data-options="region:'设置东西南北中'"


主页的架构:--导入5个JS包
--主页布局方案:Layout  tital属性是指定这个区域的标题
--折叠面板:
        作用在<div>设置class="easyUI-accordion"
        title=""每一个折叠面板必须设置title属性   
        设置面板属性"fit:true",自动适应父容器的大小.
--选项卡面板:
        作用在<div>设置class="easyUI-tabs"   
        每个div就是一个选项卡 所以title=""每一个折叠面板必须设置title属性
        设置面板属性data-options="fit:true",自动适应父容器的大小.
        设置选项卡可关闭按钮closable:true.

(重点)zTree树形结构  
--在页面中引入ztree和css样式


通过ztree制作树形菜单(基本使用的是简单的json格式)
--两种数据格式
        标准json数据
        简单json数据
                var simpleNodes = [
                    {"id":1, "pId":0, "name":"test1"},
                    {"id":11, "pId":1, "name":"test11"}
                ]
        在每个节点添加 id 和 pid, id 表示当前节点编号,pid 表示父节点编号,pId中的I必须大写;
--第一步:在页面显示菜单的位置,添加<url>设置class="ztree"
--第二步:开启简单数据格式支持
--第三步:编写树形菜单数据
--第四步:生成树形菜单
        将当前点击的节点的ID作为父节点的ID向下查询,获取子节点的列表
树形菜单和选项卡的整合:
--
--选项卡菜单功能:(自定义右键菜单:功能--关闭全部窗口,关闭其他窗口,关闭当前窗口)
        作用在<div>设置class="easyUI-menu" (菜单的初始化都是隐藏的)
        在选项卡点击右键时显示窗口(onContextMenu)
       
        对
--下拉菜单menubutton
        在页面提供超链接,设置class="easyUI-menubutton"
        编写子菜单的div元素
        对菜单项添加图标 通过 iconCls 属性指定图标样式  所有图标有 icon.css 文件控制的  
--消息提示窗口
--警告窗口:$.messager.alert("标题","内容","warning")
--确认窗口:$.messager.confirm("删除提示","确认删除吗?","回调函数")
--输入窗口:$.messager.prompt("标题","内容","回调函数")
--右下角窗口:$.messager.show({title:标题,msg:内容,timeout:时间})
--进度条窗口:$.messager.progress()显示进度条窗口
        $.messager.progress('close')关闭进度条窗口
回复 使用道具 举报
EasyUI 很强大的前端框架,分页不用再写一堆jsp代码了
OrcalXE不好用,我没装 换成Mysql了....海豚好看点
springdata-jpa   持久层工具  
hibernate对jdbc进行了轻量级封装 springdata对Hibernate又进行了一次封装springdata-jpa的使用只需配置pom依赖,dao层接口继承jpaxxxxxx接口传入对象名,Integer,然后在service层调用即可 彻底去掉了JDBC SQL语句
springdata内置了page对象,有基本的find save update delete4大方法  还有short 排序对象 ,也可以通过注解Query来写sql语句,还有个M开头的注解什么作用忘记了,dao层不需要写代码了 全部集中在service层 简化开发
回复 使用道具 举报
本帖最后由 COLDER 于 2018-10-18 19:16 编辑


查看进程占用端口:cmd命令符:netstat -ano

基于easyui的页面布局(layout)
class = "eaasyui-layout" 设置页面布局,可以作用在<body>或<div>
data-options="region = 'center'" 设置布局区域,东西南北中,作用在<div>
编写顺序:
导5个包:jquery,easyui,国际化,icon,easyui.css
划分区域:东西南北中

西部区域的折叠面板
class = "easyui-accordion",定义西部区域下的<div>为折叠面板.
自适应父容器大小:fit:true,需要在data-option属性中定义.

中心区域的选项卡面板
class = "easyui-tab",定义中心区域下的<div>为选项卡面板.
设置选项卡可关闭按钮:closable:true,需要在data-opetion属性中定义

树形结构:
将当前点击的节点的id作为父节点id向下查询,获取子节点列表.

使用ztree生成树形菜单:
1.在页面设置菜单位置,添加<ul>设置class = "ztree".
2.开启简单json数据格式支持
3.编写树形菜单数据
4.生成菜单

下拉菜单:
class = "easyui-menubutton" 作用在超链接上

搭建BOS工程实现实体类的自动建表:
1.创建子父工程,子工程继承父工程的依赖.
2.根据项目的持久层是使用spring+spring data jpa + jpa来实现,所以进行配置文件的编写,主要是围绕spring的配置文件展开.
3.编写配置文件的内容:注解扫描,加载连接数据库的外部文件信息,编写数据库连接池,编写实体管理工厂,事务管理,事务管理注解
4.导入实体类
5.进行Maven工程的install和compile
6.运行tomcat


点评

66666  发表于 2019-7-4 00:22
回复 使用道具 举报
郭明杰
easyUi是依赖于jQuery的,使用前必须导入jquery,easyUi.min 等包

配置自动建表:
<property name="generateDdl" value="true" />


PLSQL默认字符编码是utf-8  有中文乱码问题   
配置环境变量即可解决
回复 使用道具 举报
lsx:今天主要学了两块,一块easyUI的了解,
EasyUI是一组基于jQuery的UI插件集合体, EasyUI就是帮助
web开发者更轻松编写前台代码.要求能够看懂相关代码,可以
查看文档帮助了解.


另外就是下载oracleXE到本机能正常使用PlsqlDeveloper, 设置环境变量 创建bos用户
导入实体类及配置文件,根据自己具体要求更改,启动项目,完成自动建表
去oracle中查看是否有表即可
回复 使用道具 举报
游荣辉
easyui是一个强大的前端页面框架,了解就好.不懂得查API
注解
@Entity 标明是实体类
@Table 映射表名称
@Id 主键标识
@GeneratedValue 自动生成主键的值
@Column 设置映射数据表中列信息
@Temporal 控制数据表保存日期哪个部分(日期、时间、日期时间)
@OneToMany(mappedBy 相当于 inverse ) @ManyToOne 结合 @JoinColumn 添加一列外键
@ManyToMany 一方写 mappedBy 放弃外键维护、另一方 @JoinTable 维护中间表
搭建项目持久层架构
项目使用 spring + spring data jpa + jpa (hibernate 实现 )
1.集成sprinng环境
(1).Maven坐标导入
          IOC导入context依赖beans.core.expression   aop导入  测试集成    web集成 配置监听器     整合持久层框架  hibernate.jpa     
    (2).在web.xml下配置spring 监听器
        (3).在src/mian/resource  下建立applicationContext.xml
        (4).src/mian/ resource 提供 config.properties 外部属性文件、log4j.properties 日志配置文件
2.spring整合jpa
        1、 在 applicationContext.xml 配置数据库连接池
                先在pom导入c3p0 的jar包然后在applicationContext.xml调用
        2.  在pom导入hibernate框架的jar包
                在applicationContext.xml配置整合jap
                <property name=”generateDdl” value=”true”>(自动建表)
        3.  配置声明事物管理
回复 使用道具 举报
柯威龙
今天学习了EasyUI,主要学习使用UI来进行首页的布局.使用UI前需要导入UI的
类库.在主页上分为东西南北中来进行分布.然后使用ztree编写树形菜单.然后学习了Order
安装到本机,以及Order的环境配置.easyUI要看的懂, 自己需要熟练掌握使用API.
然后将实体类导入之后,需要去修改配置文件,然后让实体类创建出表.反向操作
回复 使用道具 举报
easyUI比较有规范性,样式代码都是class="easyui-xxx(menu,menubutton等)"

先拿到要操作的对象,然后在点上方法
$("#xxx").xxx({


})


PLsql之前有用过,非常的顺手,没有啥不适的地方

spring的自动创建表,最关键的就是需要配置
<property name="packagesToScan" value="com.itheima.domain" />
<property name="generateDdl" value="true" />
idea手动导入oracle依赖包 :下载到指定位置  使用maven指令添加到maven仓库
回复 使用道具 举报
吴俊斌
第二天通过api学习EasyUI   
   easyui
使用easyui要导五个包
jquery核心类库,easyui类库,主题css,图标css,国际化信息文件
  使用 ztree
下载  ztree插件包
导两个包  
<script src="../js/ztree/jquery.ztree.all-3.5.js"
type="text/javascript" charset="utf-8"></script>
<linkrel="stylesheet"type="text/css" href="../js/ztree/zTreeStyle.css"/>
然后学习了Order安装到本机,以及Order的环境配置,并且映射表和数据库的关系
回复 使用道具 举报
熟悉easyUI上课案例,不需要背诵,学会查api
如果要使用easyui,在body或div便签里面,使用class="easyui-xxx"来声明,其中,xxx的内容为使用何种效果时候的属性名;
如layout(页面布局),tabs(选项卡),menu(菜单栏),accordion(折叠),ztree(树形菜单)等;
然后每个样式的方法,事件啥的,在api里面都能找到;
---------------------------------
安装好oracleXE,并保证PLSQL Developer正常使用
oracleXE无脑安装,一路next,记得设定好密码,初始账号为system,在命令提示符中测试sqlplus system/密码,
能够登陆说明安装成功;
PLSQL的设置在前面的课程已经完成,主要是设定oracle的依赖的位置和加载oci.dll文件,登陆成功后,配置一个新用户BOS,
设置管理员权限;
在登陆的时候,下面的连接库使用127.0.0.1:1521/XE指向本地的Oracle来进行访问;
--------------------------------
编写spring配置文件,完成实体类的自动建表
实体类的自动建表是通过hibernate实现,我们要先集成环境(spring,spring data jpa,jpa)
导入依赖 集成环境 创建实体类 使用maven集成的tomcat运行(使用maven插件可以配置tomcat7,同时可以自定义端口号,避免冲突)
                                <plugin>
                            <groupId>org.apache.tomcat.maven</groupId>
                     
                            <artifactId>tomcat7-maven-plugin</artifactId>       
                            <version>2.2</version>
                            <configuration>
                           
                            <port>8082</port>               
                            <!--<path>/mgr</path> -->
                            <uriEncoding>UTF-8</uriEncoding>
                            <finalName>mgr</finalName>
                           
                            <path>/bos_management</path>               
                            <server>tomcat7</server>       
                            </configuration>
                            </plugin>
                            <plugin>
                                    <groupId>org.apache.maven.plugins</groupId>
                                    <artifactId>maven-surefire-plugin</artifactId>
                                    <configuration>
                                            <skip>true</skip>
                                    </configuration>
                            </plugin>
回复 使用道具 举报
12下一页
您需要登录后才可以回帖 登录 | 加入黑马