Java Web当中使用EasyUI|快速建立漂亮的后台网站(教程+源代码)

项目实战+源代码 专栏收录该内容
22 篇文章 4 订阅

项目源代码下载:https://download.csdn.net/download/qq_44757034/12726812

一、EasyUI的概述

1、什么是EasyUI

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

2、下载EasyUI

官网:https://www.jeasyui.cn/index.php
在这里插入图片描述


在这里插入图片描述


在这里插入图片描述


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,并编写超链接的标签
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>Insert title here</title>
<!-- 引入EasyUI的CSSJS -->
<link rel="stylesheet" type="text/css" href="../themes/default/easyui.css">
<link rel="stylesheet" type="text/css" href="../themes/icon.css">
<link rel="stylesheet" type="text/css" href="../demo.css">
<script type="text/javascript" src="../js/jquery.min.js"></script>
<script type="text/javascript" src="../js/jquery.easyui.min.js"></script>
</head>
<body>
<!-- EasyUI的入门:方式一,CSS的方式 -->
<a href="#" class="easyui-linkbutton" data-options="iconCls:'icon-add'">超链接:添加</a>
<a href="#" class="easyui-linkbutton" data-options="iconCls:'icon-search'">超链接:搜索</a>
<a href="#" class="easyui-linkbutton" data-options="iconCls:'icon-remove'">超链接:删除</a>
</body>
</html>
(2)将超链接变成漂亮的图标

在这里插入图片描述

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

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

(1)在HTML当中编写超链接标签以及JS代码
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>Insert title here</title>
<!-- 引入EasyUI的CSSJS -->
<link rel="stylesheet" type="text/css" href="../themes/default/easyui.css">
<link rel="stylesheet" type="text/css" href="../themes/icon.css">
<link rel="stylesheet" type="text/css" href="../demo.css">
<script type="text/javascript" src="../js/jquery.min.js"></script>
<script type="text/javascript" src="../js/jquery.easyui.min.js"></script>
<script type="text/javascript">
	$(function(){
		$("#btn1").linkbutton({
			"iconCls":"icon-search"
		});
		$("#btn2").linkbutton({
			"iconCls":"icon-add"
		});
		$("#btn3").linkbutton({
			"iconCls":"icon-remove"
		});
	});
</script>
</head>
<body>
<!-- EasyUI的入门:方式二,JS的方式 -->
<a href="#" id="btn1">超链接:搜索</a>
<a href="#" id="btn2">超链接:添加</a>
<a href="#" id="btn3">超链接:删除</a>
</body>
</html>
(2)显示效果

在这里插入图片描述

三、EasyUI的布局

1、EasyUI的布局

在这里插入图片描述

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

(1)引入css样式以及对应的js样式,以及布局标签

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

<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>Insert title here</title>
<!-- 引入EasyUI的CSSJS -->
<link rel="stylesheet" type="text/css" href="../themes/default/easyui.css">
<link rel="stylesheet" type="text/css" href="../themes/icon.css">
<link rel="stylesheet" type="text/css" href="../demo.css">
<script type="text/javascript" src="../js/jquery.min.js"></script>
<script type="text/javascript" src="../js/jquery.easyui.min.js"></script>
</head>
<body>
	<div style="margin:20px 0;"></div>
	<div class="easyui-layout" style="width:1000px;height:550px;">
		<div data-options="region:'north'" title="North" style="height:50px"></div>
		<div data-options="region:'west',split:true" title="West" style="width:100px;"></div>
		<div data-options="region:'center',title:'Main Title',iconCls:'icon-ok'">
		</div>
	</div>
</body>
</html>

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

(2)设置自适应容器:data-options=“fit:true”

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

(3)其他属性

split:true设置为true的时候的时候根据分隔栏改变面板的大小,设置false的时候就会固定大小不可以动
在这里插入图片描述

3、CRM页面实战

(1)在WebContext下新建一个index.html

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

<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>Insert title here</title>
<!-- 引入EasyUI的CSS和JS -->
<link rel="stylesheet" type="text/css" href="./themes/default/easyui.css">
<link rel="stylesheet" type="text/css" href="./themes/icon.css">
<link rel="stylesheet" type="text/css" href="./demo.css">
<script type="text/javascript" src="./js/jquery.min.js"></script>
<script type="text/javascript" src="./js/jquery.easyui.min.js"></script>

</head>
<body>
<div style="margin:20px 0;"></div>
	<div class="easyui-layout"  data-options="fit:true">
		<div data-options="region:'north',split:true" title="CRM管理系统" style="height:50px"></div>
		<div data-options="region:'west',split:true" title="系统菜单" style="width:200px;"></div>
		<div data-options="region:'center',title:'数据区域',iconCls:'icon-ok'">
		</div>
	</div>
</body>
</html>
(2)效果

在这里插入图片描述

四、EasyUI的分类面板

1、分类介绍

在这里插入图片描述

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

(1)引入引入EasyUI的CSS和JS以及分类菜单页面
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>Insert title here</title>
<!-- 引入EasyUI的CSS和JS -->
<link rel="stylesheet" type="text/css" href="../themes/default/easyui.css">
<link rel="stylesheet" type="text/css" href="../themes/icon.css">
<link rel="stylesheet" type="text/css" href="../demo.css">
<script type="text/javascript" src="../js/jquery.min.js"></script>
<script type="text/javascript" src="../js/jquery.easyui.min.js"></script>
</head>
<body>
<div class="easyui-accordion" style="width:500px;height:300px;">
		<div title="About" data-options="iconCls:'icon-ok'" style="overflow:auto;padding:10px;">
		</div>
		<div title="Help" data-options="iconCls:'icon-help'" style="padding:10px;">
		</div>
		<div title="TreeMenu" data-options="iconCls:'icon-search'" style="padding:10px 0;">
			
		</div>
	</div>
</body>
</html>
(2)标签介绍

在这里插入图片描述

(2)效果

在这里插入图片描述

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

(1)在系统菜单当中添加分类页面

在这里插入图片描述

(2)代码
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>Insert title here</title>
<!-- 引入EasyUI的CSS和JS -->
<link rel="stylesheet" type="text/css"
	href="./themes/default/easyui.css">
<link rel="stylesheet" type="text/css" href="./themes/icon.css">
<link rel="stylesheet" type="text/css" href="./demo.css">
<script type="text/javascript" src="./js/jquery.min.js"></script>
<script type="text/javascript" src="./js/jquery.easyui.min.js"></script>

</head>
<body>
	<div style="margin: 20px 0;"></div>
	<div class="easyui-layout" data-options="fit:true">
		<div data-options="region:'north',split:true" title="CRM管理系统" style="height: 100px"></div>
		<div data-options="region:'west',split:true" title="系统菜单" style="width: 300px;">
			<div class="easyui-accordion" data-options="fit:true">
				<div title="客户管理" data-options="iconCls:'icon-ok',selected:true" style="overflow: auto; padding: 10px;">
					<a href="#">新增客户</a><br /> <a href="#">查询客户</a>
				</div>
				<div title="联系人管理" data-options="iconCls:'icon-help'" style="padding: 10px;">
					<a href="#">新增联系人</a><br /> <a href="#">查询联系人</a>
				</div>
				<div title="拜访记录管理" data-options="iconCls:'icon-search'" style="padding: 10px 0;">
					<a href="#">新增拜访记录</a><br /> <a href="#">查询拜访记录</a>
				</div>
				<div title="统计分析" data-options="iconCls:'icon-search'" style="padding: 10px 0;">
					<a href="#">查询统计分析</a>
				</div>
				<div title="系统管理" data-options="iconCls:'icon-search'" style="padding: 10px 0;">
					<a href="#">系统管理</a>
				</div>
			</div>
		</div>
		<div data-options="region:'center',title:'数据区域',iconCls:'icon-ok'">
		
		</div>
		<div data-options="region:'south',split:true" title="详情" style="height: 100px"></div>
	</div>
</body>
</html>
(3)效果

在这里插入图片描述

五、EasyUI的选项卡

1、EasyUI的选项卡的介绍

在这里插入图片描述

2、EasyUI的选项卡的使用

(1)在WebContent创建04-tabs以及04-tabs.html在页面当中引入选项卡
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>Insert title here</title>
<!-- 引入EasyUI的CSS和JS -->
<link rel="stylesheet" type="text/css" href="../themes/default/easyui.css">
<link rel="stylesheet" type="text/css" href="../themes/icon.css">
<link rel="stylesheet" type="text/css" href="../demo.css">
<script type="text/javascript" src="../js/jquery.min.js"></script>
<script type="text/javascript" src="../js/jquery.easyui.min.js"></script>
</head>
<body>
	<div id="tt" class="easyui-tabs" style="width:500px;height:250px;">
    <div title="Tab1" style="padding:20px;display:none;">
		tab1
    </div>
    <div title="Tab2" data-options="closable:true" style="overflow:auto;padding:20px;display:none;">
		tab2
    </div>
    <div title="Tab3" data-options="iconCls:'icon-reload',closable:true" style="padding:20px;display:none;">
		tab3
    </div>
</div>
</body>
</html>
(2)修改页面(通过点击按钮的方式创建选项卡)

在这里插入图片描述

(3)效果

在这里插入图片描述

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

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

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

(1)将选项卡的代码放入到数据区域
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>Insert title here</title>
<!-- 引入EasyUI的CSSJS -->
<link rel="stylesheet" type="text/css"
	href="./themes/default/easyui.css">
<link rel="stylesheet" type="text/css" href="./themes/icon.css">
<script type="text/javascript" src="./js/jquery.min.js"></script>
<script type="text/javascript" src="./js/jquery.easyui.min.js"></script>
<style type="text/css">
.menuA {
	text-decoration: none;
}
</style>
<script type="text/javascript">
	$(function() {
		$(".menuA").click(function() {
			//获得超链接中的文本内容
			var textContext = this.innerHTML;
			//创建选项卡
			createTabs(textContext);
		});
	});
	//编写创建选项卡的函数:
	function createTabs(textContext) {
		//判断选项卡是否存在
		var flag = $("#tt").tabs("exists",textContext);
		if (flag) {
			//以及存在该选项卡
			$('#tt').tabs("select",textContext);
		} else {
			//不存在该选项卡
			// 添加一个新的标签页面板(tab panel)
			$('#tt').tabs('add', {
				title : textContext,
				content : 'XXX管理数据',
				closable : true
			});
		}
	}
</script>
</head>
<body>
	<div id="cc" class="easyui-layout" data-options="fit:true">
		<div data-options="region:'north',title:'CRM管理系统',split:true"
			style="height: 100px;"></div>
		<div data-options="region:'west',title:'系统菜单',split:true" style="width: 200px;">
			<div id="aa" class="easyui-accordion" data-options="fit:true">
				<div title="客户管理" data-options="iconCls:'icon-save',selected:true" style="overflow: auto; padding: 10px;">
					<a href="#" class="menuA">客户管理</a>
				</div>
				<div title="联系人管理" data-options="iconCls:'icon-reload'" style="overflow: auto; padding: 10px;">
					<a href="#" class="menuA">联系人管理</a>
				</div>
				<div title="拜访记录管理" data-options="iconCls:'icon-reload'">
					<a href="#" class="menuA">拜访记录管理</a>
				</div>
				<div title="统计分析" data-options="iconCls:'icon-reload'" style="overflow: auto; padding: 10px;">
					<a href="#" class="menuA">统计分析管理</a>
				</div>
				<div title="系统管理" data-options="iconCls:'icon-reload'" style="overflow: auto; padding: 10px;">
					<a href="#" class="menuA">系统管理</a>
				</div>
			</div>
		</div>
		<div data-options="region:'center',title:''"
			style="padding: 5px; background: #eee;">
			<div id="tt" class="easyui-tabs" data-options="fit:true">
				<div title="数据区域" data-options="closable:true" style="padding: 20px; display: none;">欢迎来到CRM管理系统</div>
			</div>
		</div>
	</div>
</body>
</html>
(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当中的名称对应
    在这里插入图片描述
  • 设置表单的分页功能、设置语言为中文、设置操作(修改|删除)
    在这里插入图片描述
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>Insert title here</title>
<!-- 引入EasyUI的CSSJS -->
<link rel="stylesheet" type="text/css" href="../themes/default/easyui.css">
<link rel="stylesheet" type="text/css" href="../themes/icon.css">
<script type="text/javascript" src="../js/jquery.min.js"></script>
<script type="text/javascript" src="../js/jquery.easyui.min.js"></script>
<script type="text/javascript" src="../locale/easyui-lang-zh_CN.js"></script>
<script type="text/javascript">
	$(function(){
		$('#dg').datagrid({    
		    url:'datagrid_data1.json',    
		    columns:[[    
		        {field:'productid',title:'商品编号',width:100},    
		        {field:'productname',title:'商品名称',width:100},    
		        {field:'unitcost',title:'商品单价',width:100,align:'left'} ,   
		        {field:'status',title:'商品状态',width:100,align:'right'},
		        {field:'listprice',title:'商品价格',width:100,align:'right'},
		        {field:'attr1',title:'商品属性',width:100,align:'right'},
		        {field:'itemid',title:'商品编号',width:100,align:'right'},
		        {field:'xxxxx',title:'操作',width:100,align:'left',formatter: function(value,row,index){
					return "<a href=''>修改</a> | <a href=''>删除</a>";
					}
		        }
		    ]],
		  	//设置斑马线效果
		    striped:true,
		    //显示分页工具栏
		    pagination:true,
		    //设置分页数字
		    pageList:[3,5,10]	
		});  
	});
</script>
</head>
<body>
	<table id="dg"></table>  
</body>
</html>
(4)效果

在这里插入图片描述

3、SSH实现,环境的准备

引入jar包,引入配置文件,创建包和类
(1)引入jar包
(2)设置配置文件,web.xml 和struct.xml和log4j.properties和applicationContext.xml
  • 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" id="WebApp_ID" version="2.5">
  <display-name>crm_easyUI</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>
  
  <!-- 配置Spring的核心监听器 -->
	<listener>
		<listener-class>org.springframework.web.context.ContextLoaderListener</listener-class>
	</listener>
	<!-- 加载Spring的配置文件的路径的,默认加载的/WEB-INF/applicationContext.xml,设置加载classpath:applicationContext.xml -->
	<!-- 全局初始化参数 -->
	<context-param>
		<!-- 参数名称 -->
		<param-name>contextConfigLocation</param-name>
		<!-- 参数的值 -->
		<param-value>classpath:applicationContext.xml</param-value>
	</context-param>
    <!-- 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>
  </filter-mapping>
</web-app>
  • struct.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>
	<!-- 配置Struts2的常量 -->
	<constant name="struts.action.extension" value="action"/>	
</struts>
  • 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">		
	<!-- 开启属性注入的注解====================在没有扫描的情况下,使用属性注入订单注解 @Resource @Value @Autowired @Qulifier -->
	<context:annotation-config/>
	<!-- 引入外部属性文件================================== -->
	<context:property-placeholder location="classpath:jdbc.properties" />
	<!-- 配置C3P0链接池=================== -->
	<bean id="dataSource"
		class="com.mchange.v2.c3p0.ComboPooledDataSource">
		<!-- 注入属性 -->
		<property name="driverClass" value="${jdbc.driverClass}"></property>
		<property name="jdbcUrl" value="${jdbc.url}"></property>
		<property name="user" value="${jdbc.username}"></property>
		<property name="password" value="${jdbc.password}"></property>
	</bean>
	<!-- 配置SessionFactory -->
	<bean id="sessionFactory"
		class="org.springframework.orm.hibernate5.LocalSessionFactoryBean">
		<!-- 注入连接池 -->
		<property name="dataSource" ref="dataSource"></property>
		<!-- 配置Hibernate的相关的属性 -->
		<property name="hibernateProperties">
			<!-- 注入复杂数据类型Properties -->
			<props>
				<prop key="hibernate.dialect">org.hibernate.dialect.MySQLDialect</prop>
				<prop key="hibernate.show_sql">true</prop>
				<prop key="hibernate.format_sql">true</prop>
				<prop key="hibernate.hbm2ddl.auto">update</prop>
			</props>
		</property>
		<!-- 引入映射文件 -->
		<property name="mappingResources">
			<list>				
			</list>
		</property>
	</bean>	
	<!-- 配置事务事务管理器 -->
	<bean id="transactionManager"
		class="org.springframework.orm.hibernate5.HibernateTransactionManager">
		<!-- 可以理解为在transactionManager事务管理器当中注入sessionFactory数据库连接池 -->
		<property name="sessionFactory" ref="sessionFactory"></property>
	</bean>
	<!-- 开启注解事务 -->
	<tx:annotation-driven transaction-manager="transactionManager" />
</beans>
  • jdbc.properties
jdbc.driverClass=com.mysql.jdbc.Driver
jdbc.url=jdbc:mysql:///ssh1
jdbc.username=root
jdbc.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<Customer> {
	// 模型驱动使用的对象
	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<Customer> 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<Customer> 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<Customer> findByPage(DetachedCriteria detachedCriteria, Integer page, Integer rows) {
		// TODO Auto-generated method stub
		PageBean<Customer> pageBean = new PageBean<Customer>();
		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<Customer> 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<Customer> 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<Long> list = (List<Long>) this.getHibernateTemplate().findByCriteria(detachedCriteria);
		if(list.size() > 0) {
			return list.get(0).intValue();		
		}
		return null;
	}
	@Override
	public List<Customer> findByPage(DetachedCriteria detachedCriteria, Integer begin, Integer rows) {
		// TODO Auto-generated method stub
		detachedCriteria.setProjection(null);
		return (List<Customer>) this.getHibernateTemplate().findByCriteria(detachedCriteria,begin,rows);
	}
}

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

(1)引入jsonlib的开发包

知识点:JSONArray(用于转化数组和list集合),JSONObject(对象和map集合)

(2)在页面当中显示数据到数据表格当中
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>Insert title here</title>
<!-- 引入EasyUI的CSSJS -->
<link rel="stylesheet" type="text/css"
	href="./themes/default/easyui.css">
<link rel="stylesheet" type="text/css" href="./themes/icon.css">
<script type="text/javascript" src="./js/jquery.min.js"></script>
<script type="text/javascript" src="./js/jquery.easyui.min.js"></script>
<script type="text/javascript" src="./locale/easyui-lang-zh_CN.js"></script>
<script type="text/javascript">	
	$(function(){
		$('#dg').datagrid({    
		    url:'customer_findAll.action',    
		    columns:[[    
		        {field:'cust_name',title:'客户名称',width:100},    
		        {field:'cust_source',title:'客户来源',width:100},    
		        {field:'cust_level',title:'客户级别',width:100},
		        {field:'cust_industry',title:'客户行业',width:100},
		        {field:'cust_phone',title:'客户固定电话',width:100},
		        {field:'cust_mobile',title:'客户移动电话',width:100},
		        {field:'xxx',title:'操作',width:100}
		    ]],
		    striped:true,
		    //显示分页工具
		    pagination:true,
		    //分页条的位置
		    pagePosition:"bottom",
		    //初始化页数
		    pageBumber:1,
		    //每页显示多少条记录
		    pageSize:3,
		    pageList:[3,5,10]
		});  
	});
</script>
</head>
<body>
	<table id="dg"></table> 
</body>
</html>
(3)页面效果

在这里插入图片描述

七、EasyUI的窗口

1、EasyUI的窗口的介绍

在这里插入图片描述

2、EasyUI的窗口的使用

(1)在上面创建好的Customer.html当中引入窗口
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>Insert title here</title>
<!-- 引入EasyUI的CSSJS -->
<link rel="stylesheet" type="text/css"
	href="./themes/default/easyui.css">
<link rel="stylesheet" type="text/css" href="./themes/icon.css">
<script type="text/javascript" src="./js/jquery.min.js"></script>
<script type="text/javascript" src="./js/jquery.easyui.min.js"></script>
<script type="text/javascript" src="./locale/easyui-lang-zh_CN.js"></script>
<script type="text/javascript">
	$(function() {
		$('#dg').datagrid({
			url : 'customer_findAll.action',
			columns : [ [ {
				field : 'cust_name',
				title : '客户名称',
				width : 100
			}, {
				field : 'cust_source',
				title : '客户来源',
				width : 100
			}, {
				field : 'cust_level',
				title : '客户级别',
				width : 100
			}, {
				field : 'cust_industry',
				title : '客户行业',
				width : 100
			}, {
				field : 'cust_phone',
				title : '客户固定电话',
				width : 100
			}, {
				field : 'cust_mobile',
				title : '客户移动电话',
				width : 100
			}, {
				field : 'xxx',
				title : '操作',
				width : 100
			} ] ],
			striped : true,
			//显示分页工具
			pagination : true,
			//分页条的位置
			pagePosition : "bottom",
			//初始化页数
			pageBumber : 1,
			//每页显示多少条记录
			pageSize : 3,
			pageList : [ 3, 5, 10 ],
			toolbar : [ {
				iconCls : 'icon-add',
				handler : function() {
					$('#winAdd').window('open');
				}
			} ]
		});
	});
</script>
</head>
<body>
	<table id="dg"></table>
	<!-- 添加客户的表单,默认是隐藏的 -->
	<div id="winAdd" class="easyui-window" title="添加客户" style="width:600px;height:400px"   
	        data-options="iconCls:'icon-save',modal:true,closed:true">   		    
	        <form id="formAdd" method="post">
				<TABLE cellSpacing=0 cellPadding=5  border=0>
				<TR>
					<td>客户名称:</td>
					<td>
						<INPUT class=textbox id=sChannel2 style="WIDTH: 180px" maxLength=50 name="cust_name">
					</td>
					<td>客户级别 :</td>
					<td>
						<INPUT class=textbox id=sChannel2 style="WIDTH: 180px" maxLength=50 name="cust_level">
					</td>
				</TR>
				
				<TR>
					<td>信息来源 :</td>
					<td>
						<INPUT class=textbox id=sChannel2 style="WIDTH: 180px" maxLength=50 name="cust_source">
					</td>
					<td>客户行业:</td>
					<td>
						<INPUT class=textbox id=sChannel2 style="WIDTH: 180px" maxLength=50 name="cust_industry">
					</td>
				</TR>
				
				<TR>
					<td>固定电话 :</td>
					<td>
						<INPUT class=textbox id=sChannel2 style="WIDTH: 180px" maxLength=50 name="cust_phone">
				</td>
				<td>移动电话 :</td>
				<td>
					<INPUT class=textbox id=sChannel2 style="WIDTH: 180px" maxLength=50 name="cust_mobile">
						</td>
					</TR>					
					<tr>
						<td rowspan=2>
							<button id="customerBtn" type="button" onclick="save()">保存</button>
						</td>
					</tr>
				</TABLE>   
			</form>
		</div> 
</body>
</html>
(2)效果

在这里插入图片描述

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

(1)在Customer.html当中编写一个函数向action当中提交数据(实现异步提交数据),并将返回的数据转换为JSON格式
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>Insert title here</title>
<!-- 引入EasyUI的CSSJS -->
<link rel="stylesheet" type="text/css"
	href="./themes/default/easyui.css">
<link rel="stylesheet" type="text/css" href="./themes/icon.css">
<script type="text/javascript" src="./js/jquery.min.js"></script>
<script type="text/javascript" src="./js/jquery.easyui.min.js"></script>
<script type="text/javascript" src="./locale/easyui-lang-zh_CN.js"></script>
<script type="text/javascript">
	$(function() {
		$('#dg').datagrid({
			url : 'customer_findAll.action',
			columns : [ [ {
				field : 'cust_name',
				title : '客户名称',
				width : 100
			}, {
				field : 'cust_source',
				title : '客户来源',
				width : 100
			}, {
				field : 'cust_level',
				title : '客户级别',
				width : 100
			}, {
				field : 'cust_industry',
				title : '客户行业',
				width : 100
			}, {
				field : 'cust_phone',
				title : '客户固定电话',
				width : 100
			}, {
				field : 'cust_mobile',
				title : '客户移动电话',
				width : 100
			}, { field : 'xxx', title : '操作', width : 100 ,formatter: function(value,row,index){
				return "<a href='#'>编辑</a> | <a href='#' οnclick='del("+row.cust_id+")'>删除</a>";
			}
				
			
			} 
			
			
			] ],
			striped : true,
			//显示分页工具
			pagination : true,
			//分页条的位置
			pagePosition : "bottom",
			//初始化页数
			pageBumber : 1,
			//每页显示多少条记录
			pageSize : 3,
			pageList : [ 3, 5, 10 ],
			toolbar : [ {
				iconCls : 'icon-add',
				handler : function() {
					$('#winAdd').window('open');
				}
			} ]
		});
	});
	
	
	function save(){
		//提交数据到Action
		$('#formAdd').form('submit',{
			url:"customer_save.action",
			success:function(data){
				//data是字符串
				var jsonData = eval("("+data+")");
				$.messager.show({
					title:'提示消息',
					msg:jsonData.msg,
					timeout:3000,
					showType:'slide'//划出窗口
				});
				//关闭窗口
				$("#winAdd").window("close");
				//表格重新加载
				$("#dg").datagrid("reload");
			}
		});
		
	}
	
	function del(id){
		alert(id);
	}
	
</script>
</head>
<body>
	<table id="dg"></table>
	<!-- 添加客户的表单,默认是隐藏的 -->
	<div id="winAdd" class="easyui-window" title="添加客户" style="width:600px;height:400px"   
	        data-options="iconCls:'icon-save',modal:true,closed:true">   
		    
	        <form id="formAdd" method="post">
				<TABLE cellSpacing=0 cellPadding=5  border=0>
				<TR>
					<td>客户名称:</td>
					<td>
						<INPUT class=textbox id=sChannel2 style="WIDTH: 180px" maxLength=50 name="cust_name">
					</td>
					<td>客户级别 :</td>
					<td>
						<INPUT class=textbox id=sChannel2 style="WIDTH: 180px" maxLength=50 name="cust_level">
					</td>
				</TR>
				
				<TR>
					<td>信息来源 :</td>
					<td>
						<INPUT class=textbox id=sChannel2 style="WIDTH: 180px" maxLength=50 name="cust_source">
					</td>
					<td>客户行业:</td>
					<td>
						<INPUT class=textbox id=sChannel2 style="WIDTH: 180px" maxLength=50 name="cust_industry">
					</td>
				</TR>
				
				<TR>
					<td>固定电话 :</td>
					<td>
						<INPUT class=textbox id=sChannel2 style="WIDTH: 180px" maxLength=50 name="cust_phone">
				</td>
				<td>移动电话 :</td>
				<td>
					<INPUT class=textbox id=sChannel2 style="WIDTH: 180px" maxLength=50 name="cust_mobile">
						</td>
					</TR>
					
					<tr>
						<td rowspan=2>
							<button id="customerBtn" type="button" onclick="save()">保存</button>
						</td>
					</tr>
				</TABLE>   
			</form>
		</div> 


</body>
</html>
(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)测试

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

展开阅读全文
  • 13
    点赞
  • 8
    评论
  • 39
    收藏
  • 一键三连
    一键三连
  • 扫一扫,分享海报

<p> <span style="color:#E53333;font-size:18px;"><strong>课程介绍</strong></span> </p> <p> 仓库管理系统主要功能有采购入库,采购退货,销售出库,销售退货,仓库盘点,库存报表,Excel导入导出,按钮级权限控制及系统日志等功能,系统采用SpringBoot ,mybatis,easyui,ajax,mssql数据库等技术开发。提供所有源代码下载,系统功能完善,可直接运行。 </p> <span style="font-size:18px;color:#E53333;"><strong>开发环境</strong></span><br /> 项目开发语言:SpringBoot ,mybatis,easyui,ajax,mssql数据库<br /> 项目运行环境:jdk1.8及以上版本,tomcat8.0及以上版本,sql server2005及以上版本<br /> 项目开发工具: 本项目开发工具是Intellij Idea<br /> <br /> <span style="font-size:18px;color:#E53333;"><strong>课程目标</strong></span><br /> <p> 掌握SpringBoot等技术,熟悉仓库管理系统主要功能,采购入库,采购退货,销售出库,销售退货,仓库盘点,系统报表,权限控制及日志等 </p> <p> <span style="color:#E53333;font-size:14px;"><strong>50多门JAVA系列全套课程,包括大一新生到大四毕业所有JAVA系列技术专业课程,项目实战,商业项目等;</strong></span><br /> <span style="color:#E53333;"><strong>基础课程:</strong></span><br /> JAVA初级工程师:<br /> <span> </span>1、计算机基础<br /> <span> </span>2、HTML语言基础<br /> <span> </span>3、C语言从入门到精通+贪吃蛇游戏<br /> <span> </span>4、贪吃蛇游戏<br /> <span> </span>5、SQL SERVER数据库基础<br /> <span> </span>6、JAVA从入门到精通+推箱子游戏+QQ即时通讯软件<br /> <span> </span>7、推箱子游戏;<br /> <span> </span>8、仿QQ即时通讯软件;<br /> <strong><span style="color:#E53333;">JAVA中级工程师:</span></strong><br /> <span> </span>9、SQLSERVER数据库高级<br /> <span> </span>10、SQLSERVER从入门到精通基础+高级<br />  11、JavaScript从入门到精通,<br /> <span> </span>12、JSP从入门到精通+点餐系统,<br /> <span> </span>13、JSP从入门到精通+在线视频学习教育平台,<br /> <span> </span>14、JSP从入门到精通+大型电商平台;<br /> <span> </span>15、XML从入门到精通,<br /> <span> </span>16、数据结构JAVA,<br /> <strong><span style="color:#E53333;">JAVA高级工程师:</span></strong><br /> <span> </span>17、Oracle数据库从入门到精通,<br /> <span> </span>18、ajax+jquery从入门到精通,<br /> <span> </span>19、EasyUI从入门到精通,<br /> <span style="color:#E53333;"><strong>SSH框架:</strong></span><br /> <span> </span>20、Struts2从入门到精通课程,<br /> <span> </span>21、Hibernate从入门到精通课程,<br /> <span> </span>22、Spring从入门到精通课程;<br /> <span> </span>23、Echarts从入门到精通,<br /> <span> </span>24、Excel基于POI导入导出<br /> <span style="color:#E53333;"><strong>工作流框架:</strong></span><br /> <span> </span>25、Activiti流程框架从入门到精通<br /> <span> </span>26、JBPM流程框架从入门到精通<br /> SSM框架:<br /> <span> </span>27、MyBatis从入门到精通<br /> <span> </span>28、Spring MVC从入门到精通<br /> <span> </span>29、Spring Boot入门到精通<br /> <span> </span>30、Spring Cloud入门到精通<br /> <span style="color:#E53333;"><strong>面试题:</strong></span><br /> <span> </span>31、职业生涯规划及面试题集锦<br /> <span style="color:#E53333;"><strong>商业项目:</strong></span><br /> <span> </span>32、微信公众号在线支付系统<br /> <span> </span>33、微信生活缴费在线支付系统<br /> <span> </span>34、支付宝生活缴费在线支付系统<br /> <span> </span>35、在线考试系统<br /> <span> </span>36、人脸识别智能考试系统人工智能AI<br /> <span> </span>37、仓库管理及质量追溯系统<br /> <span> </span>38、房屋出租管理系统APP身份证识别<br /> <span> </span>39、手机订餐管理系统,<br /> <span> </span>40、CRM客户关系管理系统<br /> <span> </span>41、大型房地产CRM销售管理系统<br /> <span> </span>42、CMPP2,CMPP3移动网关系统<br /> <span> </span>43、仓库管理系统SpringBoot)<br /> <span> </span>44、影院在线售票系统(仿猫眼电影)<br /> <span style="color:#E53333;"><strong>人工智能:</strong></span><br /> <span> </span>45、人脸识别在线考试系统<br /> <span> </span>46、人脸识别系统项目实战<br /> <span> </span>47、车牌识别停车场管理系统<br /> <span> </span>48、身份证识别系统项目实战<br /> <span> </span>49、营业执照识别系统项目实战<br /> <span> </span>50、名片识别管理系统 </p> <div> <br /> </div>
相关推荐
<p>      掌握基于腾讯人工智能AI车牌识别技术,使用车牌识别技术实现一个完整停车场管理系统,项目包括网页调用摄像头拍照,车牌拍照识别,上传车牌图片识别,用户管理,车辆管理临时车与包月车,车辆出场,入场管理,停车费收费管理,按照临时车或包月车自动计算停车费,系统参数设置,修改用户密码及安全退出等功能,该系统采用Jsp技术,使用SSM框架,Mysql数据库,ajax技术及人工智能等相关技术实现。</p> <h2><span style="color: #e03e2d;">重要通知:本课程根据腾讯AI车牌识别新接口,更新了新接口源代码,发布程序,购买了课程同学可以下载新程序,包括运行程序及源代码,更新时间:2021-2-17</span><br /><br /><span style="color: #e53333;">项目开发技术:java,jsp,mysql,MyBatis,SpringMVC,jquery,ajax,json</span><br /><span style="color: #e53333;">项目运行环境:jdk1.7及以上版本,tomcat6.0及以上版本,mysql5.5及以上版本</span><br /><span style="color: #e53333;">项目开发工具: 本项目开发工具是Eclipse,也支持myEclipse,Intellij Idea等其他版本开发工具</span><br /><br /></h2> <p style="color: #333333;"><span style="font-size: 20px;"><span style="color: #ff0000;"><strong>相关课程学习顺序</strong></span></span></p> <p style="color: #333333;">本校课程是培养JAVA软件工程师及JSP WEB网络应用程序开发,android工程师全套课程,课程学习顺序如下:<br /><span style="color: #ff0000;"><strong>JAVA初级工程师:</strong></span><br />    1、计算机基础<br />    2、HTML语言基础<br />    3、C语言从入门到精通+贪吃蛇游戏<br />    4、贪吃蛇游戏<br />    5、SQL SERVER数据库基础<br />    6、JAVA从入门到精通+推箱子游戏+QQ即时通讯软件<br />    7、推箱子游戏;<br />    8、仿QQ即时通讯软件;<br /><span style="color: #ff0000;"><strong>JAVA中级工程师:</strong></span><br />    9、SQLSERVER数据库高级<br />    10、SQLSERVER从入门到精通基础+高级<br />              11、JavaScript从入门到精通,<br />    12、JSP从入门到精通+点餐系统,<br />    13、JSP从入门到精通+在线视频学习教育平台,<br />    14、JSP从入门到精通+大型电商平台;<br />    15、XML从入门到精通,<br />    16、数据结构JAVA,<br /><span style="color: #ff0000;"><strong>JAVA高级工程师:</strong></span><br />    17、Oracle数据库从入门到精通,<br />    18、ajax+jquery从入门到精通,<br />    19、EasyUI从入门到精通,<br /><span style="color: #ff0000;"><strong>SSH框架:</strong></span><br />    20、Struts2从入门到精通课程,<br />    21、Hibernate从入门到精通课程,<br />    22、Spring从入门到精通课程;<br />    23、Echarts从入门到精通,<br />    24、Excel基于POI导入导出<br /><span style="color: #ff0000;"><strong>工作流框架:</strong></span><br />    25、Activiti流程框架从入门到精通<br />    26、JBPM流程框架从入门到精通<br /><span style="color: #ff0000;"><strong>SSM框架:</strong></span><br />    27、MyBatis从入门到精通<br />    28、Spring MVC从入门到精通<br /><span style="color: #ff0000;"><strong>面试题:</strong></span><br />    29、职业生涯规划及面试题集锦<br /><span style="color: #ff0000;"><strong>商业项目:</strong></span><br />    30、微信公众号在线支付系统<br />    31、微信生活缴费在线支付系统<br />    32、支付宝生活缴费在线支付系统<br />    33、在线考试系统<br />    34、手机订餐管理系统,<br />    35、CRM客户关系管理系统<br />    36、大型房地产CRM销售管理系统<br />    37、CMPP2,CMPP3移动网关系统<br /><span style="color: #ff0000;"><strong>人工智能:</strong></span><br />    38、人脸识别在线考试系统<br />    39、人脸识别系统项目实战<br />    40、车牌识别系统项目实战<br />    41、身份证识别系统项目实战<br />    42、营业执照识别系统项目实战</p> <p style="color: #333333;">          43、名片识别管理系统</p>
©️2020 CSDN 皮肤主题: 点我我会动 设计师:白松林 返回首页
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、C币套餐、付费专栏及课程。

余额充值