easyui Basic CRUD Application 试水-白红宇

前言

EasyUI 一款简洁而又不简单的前端框架，近来因为要做一些管理信息处理，为了偷懒写那么多前端代码，就尝试着使用easyui做了一下适配。因为是基于JQuery实现，所以兼容性是没得说啦，其他的除了界面略显粗糙，还都挺不错的。

环境搭建

要想使用easyui，就必须下载相关的依赖。因为是基于JQuery，所以必不可少需要JQuery的支持。通常来讲，可以使用离线版和在线版两种方式来引入相关文件。接下来简单的叙述一下。

离线版

使用离线版的话，需要将下载好的javascript文件引入到我们的项目中来。该文件可以在处下载。下载完后我们需要的文件就是下面这张图上展示的了。

到时候需要的时候，在HTML代码中进行引入就可以了。

在线版

在线版的话就方便多了，但是缺点就是当网速不给力的时候，页面加载的会非常的缓慢，导致用户体验的直线下降。

所以一般来讲，实际项目中都会先把依赖的文件保存到服务器的特定目录中，方便代码的加载和调用。最大程度上给用户更好的使用体验。

因为我这次的实验比较简单，家里的网速还挺不错。为了让项目目录更加精简，我就用一下在线版的好了。具体来讲就是在相关的HTML页面中添加上这段代码。

    
         Basic CRUD Application - jQuery EasyUI CRUD Demo

前端代码

前端部分代码比较长，但是仔细阅读以下，不难发现流程还是很清晰的。

完整代码

Basic CRUD Application - jQuery EasyUI CRUD Demo

Basic CRUD Application

Click the buttons on datagrid toolbar to do crud actions.

First Name	Last Name	Phone	Email

Save

Cancel

经典解析

HTML页面中使用了很多easyui中定制的类型。这里不过多的阐述了。但是页面中使用到的JavaScript代码可谓是非常的经典了。

秉承“一次只做一件事”的理念，对应页面上的超链接这里实现了相应的处理函数，以供调用。逻辑非常的清晰。

尤其是对于新建和修改段代码更值得仔细品读。

数据库

建表语句

DROP TABLE IF EXISTS `easyui_application`;CREATE TABLE `easyui_application` (  `id` int(100) NOT NULL AUTO_INCREMENT,  `firstname` varchar(32) NOT NULL,  `lastname` varchar(32) NOT NULL,  `phone` int(11) NOT NULL,  `email` varchar(64) NOT NULL,  PRIMARY KEY (`id`)) ENGINE=InnoDB AUTO_INCREMENT=8 DEFAULT CHARSET=utf8;

预先分配一些值

INSERT INTO `easyui_application` VALUES ('1', 'tom', 'Boris', '123456789', '1234567890@tom.com');INSERT INTO `easyui_application` VALUES ('2', 'jack', 'James', '123456799', '1236765342@jack.com');INSERT INTO `easyui_application` VALUES ('3', 'Herry', 'Jackson', '634343423', 'esdfsfdsds@herry.com');INSERT INTO `easyui_application` VALUES ('4', 'Dsad', 'Hankson', '122344546', 'dasdsaudas@dasd.com');INSERT INTO `easyui_application` VALUES ('5', 'Mark', 'Sinoberg', '232323722', 'sadbsadsasaid@mark.com');INSERT INTO `easyui_application` VALUES ('6', 'pu', 'guo', '123456789', '1064319632@qq.com');INSERT INTO `easyui_application` VALUES ('7', 'pupu', 'guo', '123456787', '13981283326@qq.com');

后端代码

PHP在web开发中有先天优势，所以这里仍旧选择使用PHP作为后端处理语言，当然JavaWeb或者Python做后端处理也都是可以的。

数据库这块为了配合PHP的使用，选择了MySQL数据库。下面针对前端特定功能实现特定的后端处理代码。

数据库小扳手

之前有种预感，要经常性的接触数据库编程，所以为了偷懒，写了个通俗易懂的数据库小扳手，来处理常用的数据库操作。没想到这么快就派上了用场，如果有需要的话，可以在我的

这篇文章中找到源码，这里不再阐述。

get_users.php


     select("select * from easyui_application");echo json_encode($resultset);

save_user.php


     insert("insert into easyui_application(firstname, lastname, phone, email) values(?, ?, ?, ?)", $params);    if($isInserted) {        $result = array("success"=>"saved success!");        echo json_encode($result);    }else{        $result = array("errorMsg"=>"saved Success!");        echo json_encode($result);    }}else{    $result = array("errorMsg"=>"Field should be cpmpleted!");    echo json_encode($result);}

update_user.php


     insert("update easyui_application set firstname = ?, lastname=?, phone=?, email=? WHERE id=?", $params);    if($isInserted) {        $result = array("success"=>"updated success!");        echo json_encode($result);    }else{        $result = array("errorMsg"=>"updated Success!");        echo json_encode($result);    }}else{    $result = array("errorMsg"=>"Field should be cpmpleted!");    echo json_encode($result);}

destroy_user.php


     delete("delete from easyui_application where ID=?", $params);if($isDeleted){    $result = array("success"=>"destroy success!");    echo json_encode($result);}else{    $result = array("errorMsg"=>"Destroy Failed!");    echo json_encode($result);}

至此，前后端所需代码全部搞定了。下面就一起来看看实现的效果吧。