easyui Basic CRUD Application 试水

- 前言
- 环境搭建
  - 离线版
  - 在线版
- 前端代码
  - 完整代码
  - 经典解析
- 数据库
  - 建表语句
  - 预先分配一些值
- 后端代码
  - 数据库小扳手
  - get_usersphp
  - save_userphp
  - update_userphp
    - destroy_userphp
- 效果演示
  - 罗列User
  - 新增User
  - 修改User信息
  - 删除User
- 总结

前言

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

环境搭建

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

离线版

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

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

在线版

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

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

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

<!DOCTYPE html>
<html>
<head>
    <meta charset="UTF-8">
    <title>Basic CRUD Application - jQuery EasyUI CRUD Demo</title>
    <link rel="stylesheet" type="text/css" href="http://www.jeasyui.com/easyui/themes/default/easyui.css">
    <link rel="stylesheet" type="text/css" href="http://www.jeasyui.com/easyui/themes/icon.css">
    <link rel="stylesheet" type="text/css" href="http://www.jeasyui.com/easyui/themes/color.css">
    <link rel="stylesheet" type="text/css" href="http://www.jeasyui.com/easyui/demo/demo.css">
    <script type="text/javascript" src="http://code.jquery.com/jquery-1.6.min.js"></script>
    <script type="text/javascript" src="http://www.jeasyui.com/easyui/jquery.easyui.min.js"></script>
</head>

前端代码

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

完整代码

<!DOCTYPE html>
<html>
<head>
    <meta charset="UTF-8">
    <title>Basic CRUD Application - jQuery EasyUI CRUD Demo</title>
    <link rel="stylesheet" type="text/css" href="http://www.jeasyui.com/easyui/themes/default/easyui.css">
    <link rel="stylesheet" type="text/css" href="http://www.jeasyui.com/easyui/themes/icon.css">
    <link rel="stylesheet" type="text/css" href="http://www.jeasyui.com/easyui/themes/color.css">
    <link rel="stylesheet" type="text/css" href="http://www.jeasyui.com/easyui/demo/demo.css">
    <script type="text/javascript" src="http://code.jquery.com/jquery-1.6.min.js"></script>
    <script type="text/javascript" src="http://www.jeasyui.com/easyui/jquery.easyui.min.js"></script>
</head>
<body>
<h2>Basic CRUD Application</h2>
<p>Click the buttons on datagrid toolbar to do crud actions.</p>

<table id="dg" title="My Users" class="easyui-datagrid" style="width:700px;height:250px"
       url="get_users.php"
       toolbar="#toolbar" pagination="true"
       rownumbers="true" fitColumns="true" singleSelect="true">
    <thead>
    <tr>
        <th field="firstname" width="50">First Name</th>
        <th field="lastname" width="50">Last Name</th>
        <th field="phone" width="50">Phone</th>
        <th field="email" width="50">Email</th>
    </tr>
    </thead>
</table>
<div id="toolbar">
    <a href="javascript:void(0)" class="easyui-linkbutton" iconCls="icon-add" plain="true" onclick="newUser()">New User</a>
    <a href="javascript:void(0)" class="easyui-linkbutton" iconCls="icon-edit" plain="true" onclick="editUser()">Edit User</a>
    <a href="javascript:void(0)" class="easyui-linkbutton" iconCls="icon-remove" plain="true" onclick="destroyUser()">Remove User</a>
</div>

<div id="dlg" class="easyui-dialog" style="width:400px"
     closed="true" buttons="#dlg-buttons">
    <form id="fm" method="post" novalidate style="margin:0;padding:20px 50px">
        <div style="margin-bottom:20px;font-size:14px;border-bottom:1px solid #ccc">User Information</div>
        <div style="margin-bottom:10px">
            <input name="firstname" class="easyui-textbox" required="true" label="First Name:" style="width:100%">
        </div>
        <div style="margin-bottom:10px">
            <input name="lastname" class="easyui-textbox" required="true" label="Last Name:" style="width:100%">
        </div>
        <div style="margin-bottom:10px">
            <input name="phone" class="easyui-textbox" required="true" label="Phone:" style="width:100%">
        </div>
        <div style="margin-bottom:10px">
            <input name="email" class="easyui-textbox" required="true" validType="email" label="Email:" style="width:100%">
        </div>
    </form>
</div>
<div id="dlg-buttons">
    <a href="javascript:void(0)" class="easyui-linkbutton c6" iconCls="icon-ok" onclick="saveUser()" style="width:90px">Save</a>
    <a href="javascript:void(0)" class="easyui-linkbutton" iconCls="icon-cancel" onclick="javascript:$('#dlg').dialog('close')" style="width:90px">Cancel</a>
</div>
<script type="text/javascript">
    var url;
    function newUser(){
        $('#dlg').dialog('open').dialog('center').dialog('setTitle','New User');
        $('#fm').form('clear');
        url = 'save_user.php';
    }
    function editUser(){
        var row = $('#dg').datagrid('getSelected');
        if (row){
            $('#dlg').dialog('open').dialog('center').dialog('setTitle','Edit User');
            $('#fm').form('load',row);
            url = 'update_user.php?id='+row.id;
        }
    }
    function saveUser(){
        $('#fm').form('submit',{
            url: url,
            onSubmit: function(){
                return $(this).form('validate');
            },
            success: function(result){
                var result = eval('('+result+')');
                alert(result.success);
                alert(result.errorMsg);
                if (result.errorMsg){
                    $.messager.show({
                        title: 'Error',
                        msg: result.errorMsg
                    });
                } else {
                    $('#dlg').dialog('close');        // close the dialog
                    $('#dg').datagrid('reload');    // reload the user data
                }
            }
        });
    }
    function destroyUser(){
        var row = $('#dg').datagrid('getSelected');
        if (row){
            $.messager.confirm('Confirm','Are you sure you want to destroy this user?',function(r){
                if (r){
                    $.post('destroy_user.php',{id:row.id},function(result){
//                        alert('asdsasasd'+result);
                        if (result.success){
                            $('#dg').datagrid('reload');    // reload the user data
                        } else {
                            $.messager.show({    // show error message
                                title: 'Error',
                                msg: result.errorMsg
                            });
                        }
                    },'json');
                }
            });
        }
    }
</script>
</body>
</html>

经典解析

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数据库。下面针对前端特定功能实现特定的后端处理代码。

数据库小扳手

之前有种预感，要经常性的接触数据库编程，所以为了偷懒，写了个通俗易懂的数据库小扳手，来处理常用的数据库操作。没想到这么快就派上了用场，如果有需要的话，可以在我的 http://blog.csdn.net/marksinoberg/article/details/54650032
这篇文章中找到源码，这里不再阐述。

get_users.php

<?php
/**
 * Created by PhpStorm.
 * User: ${郭璞}
 * Date: 2017/2/2
 * Time: 10:08
 * Description: get_users. 返回值记得要为JSON格式
 */

include "db.php";

$querier = new QueryRunner();

$resultset = $querier->select("select * from easyui_application");

echo json_encode($resultset);

save_user.php

<?php
/**
 * Created by PhpStorm.
 * User: ${郭璞}
 * Date: 2017/2/2
 * Time: 11:39
 * Description:
 */

$firstname = $_REQUEST['firstname'];
$lastname = $_REQUEST['lastname'];
$phone = $_REQUEST['phone'];
$email = $_REQUEST['email'];

if($firstname&&$lastname&&$phone&&$email) {
    include "db.php";
    $querier = new QueryRunner();
    $params = array($firstname, $lastname, $phone, $email);
    $isInserted = $querier->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

<?php
/**
 * Created by PhpStorm.
 * User: ${郭璞}
 * Date: 2017/2/2
 * Time: 11:39
 * Description:
 */
$id = $_GET['id'];
$firstname = $_REQUEST['firstname'];
$lastname = $_REQUEST['lastname'];
$phone = $_REQUEST['phone'];
$email = $_REQUEST['email'];

if($firstname&&$lastname&&$phone&&$email) {
    include "db.php";
    $querier = new QueryRunner();
    $params = array($firstname, $lastname, $phone, $email, $id);
    $isInserted = $querier->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

<?php
/**
 * Created by PhpStorm.
 * User: ${郭璞}
 * Date: 2017/2/2
 * Time: 11:39
 * Description:
 */
include 'db.php';

$querier = new QueryRunner();

$params = array(
    $_POST['id'],
);
$isDeleted = $querier ->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);
}

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

效果演示

罗列User

打开与之对应的网址即可看到前端从数据库中取得的所有的值了。可以使用组件自带的分页处理来实现灵活的分页效果，是不是很赞呢？

新增User

下面进行添加用户的演示。

新增用户的时候可以按照需求灵活地添加自己的验证规则，很灵活！

修改User信息

修改用户信息的时候最讨厌的就是重新输入一遍信息了，不过还好easyui帮我们想到了这点，我们只需要修改需要修改的地方就行了，很省心！！！

删除User

下面继续拧删除用户的演示。

删除的操作是先选中要删除的行，然后点击removeUser按钮，来明确要删除哪一行记录。

总结

最后来回顾一下，本次试验主要是使用了easyui的组件来帮助后端开发人员减少前端代码的编写，高效的处理业务流程。

在线版以及离线版都是可以的，按需使用即可。

后端处理不固定，有很多语言都可以实现后端处理，Java， Python，C， C#，ASP等都是可以的。

前后端代码耦合的时候非常的重要，接口之间的处理也是如此。最后对于代码的复用性争取能重构到最大限度。

命名规范什么的也不过多的说了，老生常谈的问题。不是不重要，而是非常的重要。

好了，先写这么一个，以后对于用得到的easyui组件再进行描述吧。

时间： 2024-10-03 00:04:06

easyui Basic CRUD Application 试水

前言

环境搭建

离线版

在线版

前端代码

完整代码

经典解析

数据库

建表语句

预先分配一些值

后端代码

数据库小扳手

get_users.php

save_user.php

update_user.php

destroy_user.php

效果演示

罗列User

新增User

修改User信息

删除User

总结

easyui Basic CRUD Application 试水的相关文章

解析用博客试水SEO市场是否可行

吉利试水电子商务结合SNS大获全胜

试水移动医疗，英特尔要用大数据追踪疾病

商业化试水，Prisma能否重创奇迹？

试水教练个性收费商业化在线健身是否靠谱

试水Nutanix超融合架构，中通信息经验分享

为了更有效率地偷钱，Android root木马开始试水短信扣费诈骗

Json.Net6.0入门学习试水篇

“笔记书”试水图书市场：图书笔记本融为一体