首页 博客列表 精选博客 智能问答 chat-GPT 关于我
Java Web当中使用EasyUI|快速建立漂亮的后台网站（教程+源代码）
发布日期：2021-06-29 15:02:35 浏览次数：2 分类：技术文章

本文共 10129 字，大约阅读时间需要 33 分钟。

项目源代码下载：

一、EasyUI的概述

1、什么是EasyUI

jQuery EasyUI是一组基于jQuery的UI插件集合体，而jQuery EasyUI的目标就是帮助web开发者更轻松的打造出功能丰富并且美观的UI界面。开发者不需要编写复杂的javascript，也不需要对css样式有深入的了解，开发者需要了解的只有一些简单的html标签。

2、下载EasyUI

官网：

在这里插入图片描述

在这里插入图片描述

在这里插入图片描述

3、解压缩最新版

在这里插入图片描述

二、EasyUI的使用

EasyUI的使用有两种方式

1、准备工作

（1）创建web项目

在这里插入图片描述

（2）引入EasyUI的一些开发的JS和CSS
  • 在WebContext下新建一个js文件夹
    在这里插入图片描述
  • 将EasyUI当中的这两个文件的引入
    在这里插入图片描述
  • 在WebContext当中引入EasyUI当中文件夹
    在这里插入图片描述
  • 引入完成
    在这里插入图片描述
（3）EasyUI入门
  • 在WebContent当中创建文件夹
    在这里插入图片描述
  • 创建01-easyui文件
    在这里插入图片描述

2、方式一：CSS的方式

（1）在创建的HTML当中引入js和css，并编写超链接的标签
   Insert title here
   
   
   
   
   超链接：添加超链接：搜索超链接：删除
（2）将超链接变成漂亮的图标

在这里插入图片描述

  • css的样式名称与js方法名称对应

3、方式二：编写JS的方式

（1）在HTML当中编写超链接标签以及JS代码
   Insert title here
   
   
   
   
   超链接：搜索超链接：添加超链接：删除
（2）显示效果

在这里插入图片描述

三、EasyUI的布局

1、EasyUI的布局

在这里插入图片描述

2、创建02-layout文件夹，然后创建02-layout

（1）引入css样式以及对应的js样式，以及布局标签

其中对应布局标签的属性data-options

   Insert title here

在这里插入图片描述

效果
在这里插入图片描述

（2）设置自适应容器：data-options=“fit:true”

在这里插入图片描述

效果
在这里插入图片描述

（3）其他属性

split:true设置为true的时候的时候根据分隔栏改变面板的大小，设置false的时候就会固定大小不可以动

在这里插入图片描述

3、CRM页面实战

（1）在WebContext下新建一个index.html

引入EasyUI的CSS和JS，以及对应的页面布局

   Insert title here
（2）效果

在这里插入图片描述

四、EasyUI的分类面板

1、分类介绍

在这里插入图片描述

2、创建02-accordion文件夹在其下面创建03-accordion.html

（1）引入引入EasyUI的CSS和JS以及分类菜单页面
   Insert title here
（2）标签介绍

在这里插入图片描述

（2）效果

在这里插入图片描述

3、布局上方index.html当中菜单的内容

（1）在系统菜单当中添加分类页面

在这里插入图片描述

（2）代码
   Insert title here
（3）效果

在这里插入图片描述

五、EasyUI的选项卡

1、EasyUI的选项卡的介绍

在这里插入图片描述

2、EasyUI的选项卡的使用

（1）在WebContent创建04-tabs以及04-tabs.html在页面当中引入选项卡
   Insert title here
   
   
   
   	
   
    
    
     		tab1    
    
    
    
     		tab2    
    
    
    
     		tab3
（2）修改页面（通过点击按钮的方式创建选项卡）

在这里插入图片描述

（3）效果

在这里插入图片描述

（4）现在可以创建多个，需要限制创建选项卡的个数（当有对应按钮的选项卡面板的时候，不再新创建新选项卡面板，直接选中对应的选项卡面板）

在这里插入图片描述

在这里插入图片描述

3、在上述创建CRM系统当中数据区域设置选项卡

（1）将选项卡的代码放入到数据区域
   Insert title here
（2）效果

在这里插入图片描述

4、在CRM首页上加载数据

（1）创建customer和linkman的html页面

在这里插入图片描述

在这里插入图片描述

（2）修改index.xml上的jsp代码，引入对应的HTML页面

在这里插入图片描述

5、效果

在这里插入图片描述

六、EasyUI数据表格

1、EasyUI的数据表格的介绍

在这里插入图片描述

2、创建测试文件夹05-datagrid在其下创建05-datagrid.html

（1）在页面当中引入EasyUI的相关js和css样式

在这里插入图片描述

（2）EasyUI的数据表格的使用
  • 引入JQuery EasyUI自带的json数据
    在这里插入图片描述
  • 将该文件引入到上面创建好的05-datagrid
    在这里插入图片描述
（3）在页面当中加入对应的表单并载入数据
  • 设置对应的载入表单的数据要与JSON当中的名称对应
    在这里插入图片描述
  • 设置表单的分页功能、设置语言为中文、设置操作（修改|删除）
    在这里插入图片描述
   Insert title here
（4）效果

在这里插入图片描述

3、SSH实现，环境的准备

引入jar包,引入配置文件,创建包和类
（1）引入jar包
  • SSH相关jar
    SSH整合jar下载地址：
    在这里插入图片描述
（2）设置配置文件，web.xml 和struct.xml和log4j.properties和applicationContext.xml
  • web.xml
   
     
    
     crm_easyUI
      
        
     
      index.html
         
     
      index.htm
         
     
      index.jsp
         
     
      default.html
         
     
      default.htm
         
     
      default.jsp
       
        
    	
    		
     
      org.springframework.web.context.ContextLoaderListener
     	
    	
    	
    	
    		
     		
     
      contextConfigLocation
     		
     		
     
      classpath:applicationContext.xml
     	
        
      
      	
     
      struts2
       	
     
      org.apache.struts2.dispatcher.ng.filter.StrutsPrepareAndExecuteFilter
       
      
      	
     
      struts2
       	
     
      /*
  • struct.xml
  • applicationContext.xml
   
   			
    	
    	
    	
    	
    	
    		
     		
     		
     		
     		
     	
    	
    	
    		
     		
     		
     		
     			
      			
      				
       
        org.hibernate.dialect.MySQLDialect
       				
       
        true
       				
       
        true
       				
       
        update
  • jdbc.properties
jdbc.driverClass=com.mysql.jdbc.Driverjdbc.url=jdbc:mysql:///ssh1jdbc.username=rootjdbc.password=root
（3）创建包和类
  • 创建Customer类
    在这里插入图片描述
  • 创建接口CustomerDao以及实现类CustomerDaoImpl和CustomerService接口和CustomerServiceImpl
    在这里插入图片描述

在这里插入图片描述

在这里插入图片描述
在这里插入图片描述

  • 创建CustomerAction
    CustomerAction在这里插入图片描述
（4）将类配置到Spring的配置文件当中
  • 在applicationContext.xml当中设置
    引入Customer.hbm.xml映射文件。
    在这里插入图片描述
  • 在applicationContext.xml当中设置
    将对应的DAO和Service以及Action交给Spring管理并注入属性。
    在这里插入图片描述

4、SSH实现，从数据库查询数据显示到数据表格当中

（1）在customer.html中添加数据表格

在这里插入图片描述

（2）在domain下创建PageBean

在这里插入图片描述

（3）编写CustomerAction中的findAll的方法
package com.itzheng.crm.web.action;import org.hibernate.criterion.DetachedCriteria;import com.itzheng.crm.domain.Customer;import com.itzheng.crm.domain.PageBean;import com.itzheng.crm.service.CustomerService;import com.opensymphony.xwork2.ActionSupport;import com.opensymphony.xwork2.ModelDriven;public class CustomerAction extends ActionSupport implements ModelDriven
   
     {
   	// 模型驱动使用的对象	private Customer customer = new Customer();	@Override	public Customer getModel() {
   		return customer;	}	// 注入Service	private CustomerService customerService;	public void setCustomerService(CustomerService customerService) {
   		this.customerService = customerService;	}		//接收分页的数据	//接收当前的页数和每页显示的记录数。 这两个值在easyUI当中以及有规定。page就是当前的页数，rows就是每页显示的记录数	private Integer page = 1;	private Integer rows = 3; 	public void setPage(Integer page) {
   		this.page = page;	}	public void setRows(Integer rows) {
   		this.rows = rows;	}	public String findAll() {
   		DetachedCriteria detachedCriteria = DetachedCriteria.forClass(Customer.class);		//调用业务层:		PageBean
    
      pageBean = customerService.findByPage(detachedCriteria,page,rows);		return NONE;	}}
（4）编写CustomerService以及对应的实现类
package com.itzheng.crm.service;import org.hibernate.criterion.DetachedCriteria;import com.itzheng.crm.domain.Customer;import com.itzheng.crm.domain.PageBean;public interface CustomerService {
   	PageBean
   
     findByPage(DetachedCriteria detachedCriteria, Integer page, Integer rows);}
   
package com.itzheng.crm.service.impl;import java.util.List;import org.hibernate.criterion.DetachedCriteria;import com.itzheng.crm.dao.CustomerDao;import com.itzheng.crm.domain.Customer;import com.itzheng.crm.domain.PageBean;import com.itzheng.crm.service.CustomerService;public class CustomerServiceImpl implements CustomerService {
   	private CustomerDao customerDao;	public void setCustomerDao(CustomerDao customerDao) {
   		this.customerDao = customerDao;	}	@Override	public PageBean
   
     findByPage(DetachedCriteria detachedCriteria, Integer page, Integer rows) {
   		// TODO Auto-generated method stub		PageBean
    
      pageBean = new PageBean
     
      ();		pageBean.setCurrPage(page);		pageBean.setPageSize(rows);		Integer totalCount = customerDao.findCount(detachedCriteria);		pageBean.setTotalCount(totalCount);		double tc = totalCount;		Double num = Math.ceil(tc / rows);		pageBean.setTotalPage(num.intValue());		Integer begin = (page - 1) * rows;				List
      
        list = customerDao.findByPage(detachedCriteria,begin,rows);		pageBean.setList(list);		return pageBean ;	}}
（5）编写CustomerDao以及对应的实现类
package com.itzheng.crm.dao;import java.util.List;import org.hibernate.criterion.DetachedCriteria;import com.itzheng.crm.domain.Customer;public interface CustomerDao {
   	Integer findCount(DetachedCriteria detachedCriteria);	List
   
     findByPage(DetachedCriteria detachedCriteria, Integer begin, Integer rows);}
   
package com.itzheng.crm.dao.impl;import java.util.List;import org.hibernate.criterion.DetachedCriteria;import org.hibernate.criterion.Projections;import org.springframework.orm.hibernate5.support.HibernateDaoSupport;import com.itzheng.crm.dao.CustomerDao;import com.itzheng.crm.domain.Customer;public class CustomerDaoImpl extends HibernateDaoSupport implements CustomerDao {
   	@Override	public Integer findCount(DetachedCriteria detachedCriteria) {
   				detachedCriteria.setProjection(Projections.rowCount());		List
   
     list = (List
    
     ) this.getHibernateTemplate().findByCriteria(detachedCriteria);		if(list.size() > 0) {
   			return list.get(0).intValue();				}		return null;	}	@Override	public List
     
       findByPage(DetachedCriteria detachedCriteria, Integer begin, Integer rows) {
   		// TODO Auto-generated method stub		detachedCriteria.setProjection(null);		return (List
      
       ) this.getHibernateTemplate().findByCriteria(detachedCriteria,begin,rows);	}}

5、将pageBean数据转换为json格式,并放入到值栈当中

（1）引入jsonlib的开发包

知识点：JSONArray（用于转化数组和list集合），JSONObject（对象和map集合）

（2）在页面当中显示数据到数据表格当中
   Insert title here
（3）页面效果

在这里插入图片描述

七、EasyUI的窗口

1、EasyUI的窗口的介绍

在这里插入图片描述

2、EasyUI的窗口的使用

（1）在上面创建好的Customer.html当中引入窗口
   Insert title here
   
   
   	
   
	
   	
   
   		    	        
    
				
     
				             
					        客户名称：					          					        客户级别 ：					          				       
								       
					        信息来源 ：					          					        客户行业：					          				       
								       
					        固定电话 ：					          				        移动电话 ：
（2）效果

在这里插入图片描述

3、将窗口当中的数据提交到Action当中并再次查询对应的联系人列表、

（1）在Customer.html当中编写一个函数向action当中提交数据（实现异步提交数据），并将返回的数据转换为JSON格式
   Insert title here
   
   
   	
   
	
   	
   
   		    	        
    
				
     
				             
					        客户名称：					          					        客户级别 ：					          				       
								       
					        信息来源 ：					          					        客户行业：					          				       
								       
					        固定电话 ：					          				        移动电话 ：
（2）编写Action，在customeeAction当中编写save方法

在这里插入图片描述

（3）Service和ServiceImpl以及dao和daoImpl当中的方法

CustomerService

在这里插入图片描述
CustomerServiceImpl上添加事务
在这里插入图片描述
在这里插入图片描述
CustomerDao
在这里插入图片描述
CustomerDaoImpl
在这里插入图片描述

（4）效果

在这里插入图片描述

在这里插入图片描述

在这里插入图片描述

4、修改操作

（1）在customer.html当中增加修改的操作

在这里插入图片描述

在这里插入图片描述
在这里插入图片描述

（2）在customerAction当中设置update方法

在这里插入图片描述

Service以及dao

CustomerService
在这里插入图片描述
CustomerServiceImpl
在这里插入图片描述
CustomerDao
在这里插入图片描述
CustomerDaoImpl
在这里插入图片描述
在这里插入图片描述
在这里插入图片描述
在这里插入图片描述

5、删除操作

（1）在customer.html

在这里插入图片描述

（2）在customerAction创建delete方法

在这里插入图片描述

（3）Service和Dao

CustomerService

在这里插入图片描述
CustomerServiceImpl
在这里插入图片描述
CustomerDao
在这里插入图片描述
CustomerDaoImpl
在这里插入图片描述

（4）测试

在这里插入图片描述

删除成功
在这里插入图片描述

转载地址：https://code100.blog.csdn.net/article/details/107943895 如侵犯您的版权，请留言回复原文章的地址，我们会给您删除此文章，给您带来不便请您谅解！

上一篇：Oracle快速入门（基本概念+查询大全）
下一篇：SSH注解整合项目（struts2+Spring+Hibernate）客户关系管理系统

发表评论

最新留言

做的很好，不错不错
[***.243.131.199]2024年04月30日 10时23分09秒

关于作者

    喝酒易醉，品茶养心，人生如梦，品茶悟道，何以解忧？唯有杜康！
-- 愿君每日到此一游！

推荐文章

H桥电机驱动电路详解 2019-04-29
电气毕业生在国家电网都干啥工作？ 2019-04-29
为什么LED灯会越用越暗？ 2019-04-29
知乎热议：嵌入式开发中C++好用吗？ 2019-04-29
这100道Linux常见面试题，看看你会多少？ 2019-04-29
嵌入式开发中常用的几种通信接口总结 2019-04-29
读博读废了是种什么样的体验？ 2019-04-29
为什么你学C++这么难？ 2019-04-29
无人机破巡检难题，秒变电网卫士 2019-04-29
五年，我成为了一名嵌入式工程师。 2019-04-29
2020年电赛题目，命题专家们怎么看？ 2019-04-29
PCB元器件摆放不可忽略的10个技巧 2019-04-29
掌握AI核心技术没有秘籍，能自己创造就是王道 2019-04-29
大学老师的月薪多少？实话实说：4万多一点…… 2019-04-29
2020年电赛题目，命题专家权威解析！ 2019-04-29
写论文，这个神器不能少！ 2019-04-29
现在做硬件工程师还有前途吗？ 2019-04-29
华为被超越！这家公司成中国最大智能手机制造商，不是小米！ 2019-04-29
芯片为什么持续缺货？ 2019-04-29
美国无人机在火星首飞成功，创造历史，3米飞行高度悬停30秒 2019-04-29
白红宇的个人博客 - 记录点点滴滴的事 - 您是第 310035540 位访客
访问时间: 2024-05-02 14:13:33 访问IP: 3.145.17.20     Copyright © 2020 - 2023 blog.css8.cn 京ICP备2021015314号-1 手机版