一个easyui的例子,附源码

本文分享了一款轻量级前端框架EasyUI的实例应用,包括登录框设计、用户信息管理、验证规则扩展、省市联动、datagrid功能、用户数据导出、日志查询、图片上传及WebService接口实现。介绍了如何使用EasyUI创建简洁高效的前端界面,并通过简单的WebService接口与后端交互。

摘要生成于 C知道 ,由 DeepSeek-R1 满血版支持, 前往体验 >

我也没怎写过博客,小菜鸟一个,因为项目需要,得用一个前台框架,ext也学过,但是觉得那玩意儿太重口味了,不太好用,就没有深入,后来在网上看见easyui,感觉还不错,就研究了下,做了这个例子  下面是效果图:

 

这个是登录框,用户名框用的是combobox,用户可以选择已保存过的cookie,也可以自己输入


 

这是一个主页面,是所有用户的信息 ,不过我这只有一条记录。
 
 


  这个是菜单。。。。

 

新用户注册,检验是相当全的,通过扩展,新增了几个检验规则:

$.extend($.fn.validatebox.defaults.rules, { 
    				onlyCN:{ 
        				validator: function(value, param){ 
           					 return /^[\u4E00-\u9FA5]+$/.test(value); 
      					  }, 
        				message: '请输入中文...' 
    					}
					});
				$.extend($.fn.validatebox.defaults.rules,{
					equalsTo:{
						validator:function(value,param){
							return value == $(document.getElementById(param)).val();
						},
						message:'密码不匹配...'
					}
				});
			$(function(){
				$.extend($.fn.validatebox.defaults.rules,{
					countOrEn : {
						validator : function(value,param){
							return /^\w+$/.test(value) && value.length >= 6 && value.length <= 12;
						},
						message : "登录名由字母数字下划线组成,并且长度为6~12..."
					}
				})
			});
 


 

用户信息修改:省市两级联动也可以用

 

另外,datagrid的列有右键功能,取消某列可以屏蔽该列的显示:


下载用户数据excel批量导入模版:


 

 

查询日志:



 
 上传自己的图片:


大概功能只有这么多,对了,该简单的系统还对外提供了一个webService接口,只需传入用户的真实姓名,服务器会返回包含该用户信息的JSON字符串。

客户端调用webservice,我写了个简单的调用方法,可以参考下“

public class WebServiceUtil {
	public static String getDataFromWebService(String name){
		Client client = null;
		Object[] result = null;
		Object[] params = new Object[1];
		params[0] = name;
		try {
			client = new Client(new URL("http://localhost:8089/msgSystem/services/msgSystemQuery?wsdl"));
			result = client.invoke("queryMessage", params);
		} catch (MalformedURLException e) {
			e.printStackTrace();
		} catch (Exception e) {
			e.printStackTrace();
		}
		return result[0].toString();
	}

 我的webservice对外公布的方法就是代码中的queryMessage,接收params是一个表示用户真实姓名的字符串。

可能有些小功能没提到,  有兴趣的同学可以下来研究下。。。虽然简单,对于刚学的还有有些帮助的

源码压缩过了10M,我想想办法。。

如果需要请留言

评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

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

余额充值