easyui学习笔记1：搭建环境，编写hellworld

最新推荐文章于 2019-06-14 16:26:46 发布

weixin_34194087

最新推荐文章于 2019-06-14 16:26:46 发布

阅读量112

点赞数

原文链接：https://my.oschina.net/ooad/blog/389649

版权

为什么80%的码农都做不了架构师？>>>

一、引言

为了方便没有接触过easyui的同学快速入门，考虑写easyui学习笔记。easyui组件非常多，本笔记打算只介绍几个开发MIS中常用的组件，包括layout，tab，tree，datagrid，theme，combobox，form，dialog等。此外介绍与后台java代码传递数据的问题。笔记中代码参考了一些博客和项目。初步打算写7篇，争取1天1篇。

EasyUI是一个基于Jquery的Web富客户端UI框架。为什么使用UI框架呢？

(1) 使用UI框架可以让没有美工的情况下也能开发出美观漂亮的系统界面。

(2) 掌握基本使用方法后，能帮助开发团队快速、简单地实现很多功能，如分页、排序、多对多等。

二、环境准备

(1) 因为IE对js支持不够友好，建议安装firefox或chrome浏览器。本笔记代码暂不考虑浏览器兼容问题。

(2) 编写代码过程中如果出错，界面直接显示空白，难以调试错误。因此，如果使用firefox，建议安装firebug插件。如果使用chrome，点击页面右键选择“审查元素”也可以辅助调试。

(3) 一个代码文本编辑器。我自己喜欢用EditPlus，其他当然也可以。

(4) 从官方网站上下载EasyUI库。网址是：www.jeasyui.com , 如果访问不了，可以从中文站点http://www.jeasyui.net/ 下载。

(5) 学习过程中建议要多看教程和示例demo。EasyUI官网上有很多教程和示例demo。如果讨厌E文，依旧建议http://www.jeasyui.net/ 。

(6) 如果不用到动态数据或Json数据，可以直接运行html网页即可测试代码。否则需要一个web服务器，tomcat即可。可在tomcat的webapps目录内编写代码，修改代码后不需要重启服务器。

三、HelloWorld

1. 在tomcat的webapps目录下新建easyui文件夹作为项目空间。解压下载的easyui库，本笔记本笔记使用的是3.1.5版本。

2. 新建子文件夹easyui/jslib/ easyui1.3.5用于存放easyui的库文件。在实际项目中，我们可能用到多个UI库，建议都扔到jslib内，每个UI库一个文件夹。我们需要将easyui根目录下3个文件拷贝到easyui1.3.5目录下。再将themes拷贝进来，然后再将locale目录拷贝进来，locale目录只留下easyui-lang-zh_CN.js（因为咱是中国人），其它删除。如下图所示

3. 在easyui目录下新建about.html网页。为了应用easyui，需要在页面引入easyui的样式和js库文件。代码如下：

<html>
    <head>
        <meta charset="UTF-8">
        <title>easyui学习笔记</title>
        <link id="easyuiTheme" rel="stylesheet" type="text/css" href="jslib/easyui1.3.5/themes/default/easyui.css"/>
        <link rel="stylesheet" type="text/css" href="jslib/easyui1.3.5/themes/icon.css"/>
        <script type="text/javascript" src="jslib/easyui1.3.5/jquery.min.js"></script>
        <script type="text/javascript" src="jslib/easyui1.3.5/jquery.easyui.min.js"></script>
        <script type="text/javascript" src="jslib/easyui1.3.5/locale/easyui-lang-zh_CN.js" charset="utf-8"></script>
    </head>
    <body>
        <script type="text/javascript">
            $.messager.alert('About','Hello EasyUI World!');
        </script>
    </body>
</html>

每个文件作用如下。

easyui.css为主题样式文件。Easyui提供浅蓝、灰色、黑色、Metro和Bootstrap等5种风格主题皮肤。

icon.css 为图标样式文件。

jquery.min.js 为压缩版jquery库文件

jquery.easyui.min.js 为压缩版easyui库文件

easyui-lang-zh_CN.js为本地化文件，可让easyui支持中文。

网页中就一句js，弹出一个消息框。$.messager是easyui的消息组件。

4. 运行tomcat，在浏览器中输入localhost:8080/easyui/about.html。如显示如下界面，恭喜你，环境配置成功。