SpringBoot 之应用 EasyUI

钝悟...大约 5 分钟

SpringBoot 之应用 EasyUI

EasyUI 是一个简单的用户界面组件的集合。由于 EasyUI 已经封装好大部分 UI 基本功能，能帮用户减少大量的 js 和 css 代码。所以，EasyUI 非常适合用于开发简单的系统或原型系统。
本文示例使用技术点：
Spring Boot：主要使用了 spring-boot-starter-web、spring-boot-starter-data-jpa
EasyUI：按需加载，并没有引入所有的 EasyUI 特性
数据库：为了测试方便，使用 H2

简介

什么是 EasyUI？

easyui 是基于 jQuery、Angular.、Vue 和 React 的用户界面组件的集合。
easyui 提供了构建现代交互式 javascript 应用程序的基本功能。
使用 easyui，您不需要编写许多 javascript 代码，通常通过编写一些 HTML 标记来定义用户界面。
完整的 HTML5 网页框架。
使用 easyui 开发你的产品时可以大量节省你的时间和规模。
easyui 使用非常简单但功能非常强大。

Spring Boot 整合 EasyUI

配置

application.properties 修改：

spring.mvc.view.prefix = /views/
spring.mvc.view.suffix = .html

引入 easyui

EasyUI 下载地址：http://www.jeasyui.cn/download.htmlopen in new window

在 src/main/resources/static 目录下引入 easyui。

然后在 html 中引用：

<!DOCTYPE html>
<html>
  <head>
    <meta charset="UTF-8" />
    <link
      rel="stylesheet"
      type="text/css"
      href="../lib/easyui/themes/bootstrap/easyui.css"
    />
    <link
      rel="stylesheet"
      type="text/css"
      href="../lib/easyui/themes/icon.css"
    />
    <link
      rel="stylesheet"
      type="text/css"
      href="../lib/easyui/themes/color.css"
    />
    <script type="text/javascript" src="../lib/easyui/jquery.min.js"></script>
    <script
      type="text/javascript"
      src="../lib/easyui/jquery.easyui.min.js"
    ></script>
    <script
      type="text/javascript"
      src="../lib/easyui/locale/easyui-lang-zh_CN.js"
    ></script>
  </head>
  <body>
    <!-- 省略 -->
  </body>
</html>

引入 easyui 后，需要使用哪种组件，可以查看相关文档或 API，十分简单，此处不一一赘述。

实战

引入 maven 依赖

  <dependencies>
    <dependency>
      <groupId>org.springframework.boot</groupId>
      <artifactId>spring-boot-starter-web</artifactId>
    </dependency>
    <dependency>
      <groupId>org.springframework.boot</groupId>
      <artifactId>spring-boot-starter-data-jpa</artifactId>
    </dependency>
    <dependency>
      <groupId>org.springframework.boot</groupId>
      <artifactId>spring-boot-starter-tomcat</artifactId>
      <scope>provided</scope>
    </dependency>
    <dependency>
      <groupId>org.springframework.boot</groupId>
      <artifactId>spring-boot-starter-test</artifactId>
      <scope>test</scope>
    </dependency>

    <dependency>
      <groupId>com.h2database</groupId>
      <artifactId>h2</artifactId>
    </dependency>
    <dependency>
      <groupId>org.springframework.boot</groupId>
      <artifactId>spring-boot-devtools</artifactId>
    </dependency>
    <dependency>
      <groupId>commons-collections</groupId>
      <artifactId>commons-collections</artifactId>
      <version>3.2.2</version>
    </dependency>
  </dependencies>

使用 JPA

为了使用 JPA 技术访问数据，我们需要定义 Entity 和 Repository

定义一个 Entity：

@Entity
public class User {

    @Id
    @GeneratedValue(strategy = GenerationType.AUTO)
    private Long id;
    private String firstName;
    private String lastName;
    private String phone;
    private String email;

    protected User() {}

    public User(String firstName, String lastName, String phone, String email) {
        this.firstName = firstName;
        this.lastName = lastName;
        this.phone = phone;
        this.email = email;
    }

    // 略 getter/setter
}

定义一个 Repository：

public interface UserRepository extends CrudRepository<User, Long> {

    List<User> findByLastName(String lastName);
}

使用 Web

首页 Controller，将 web 请求定向到指定页面（下面的例子定向到 index.html）

@Controller
public class IndexController {

    @RequestMapping(value = {"", "/", "index"})
    public String index() {
        return "index";
    }

}

此外，需要定义一个 Controller，提供后台的 API 接口

@Controller
public class UserController {

    @Autowired
    private UserRepository customerRepository;

    @RequestMapping(value = "/user", method = RequestMethod.GET)
    public String user() {
        return "user";
    }

    @ResponseBody
    @RequestMapping(value = "/user/list")
    public ResponseDTO<User> list() {
        Iterable<User> all = customerRepository.findAll();
        List<User> list = IteratorUtils.toList(all.iterator());
        return new ResponseDTO<>(true, list.size(), list);
    }

    @ResponseBody
    @RequestMapping(value = "/user/add")
    public ResponseDTO<User> add(User user) {
        User result = customerRepository.save(user);
        List<User> list = new ArrayList<>();
        list.add(result);
        return new ResponseDTO<>(true, 1, list);
    }

    @ResponseBody
    @RequestMapping(value = "/user/save")
    public ResponseDTO<User> save(@RequestParam("id") Long id, User user) {
        user.setId(id);
        customerRepository.save(user);
        List<User> list = new ArrayList<>();
        list.add(user);
        return new ResponseDTO<>(true, 1, list);
    }

    @ResponseBody
    @RequestMapping(value = "/user/delete")
    public ResponseDTO delete(@RequestParam("id") Long id) {
        customerRepository.deleteById(id);
        return new ResponseDTO<>(true, null, null);
    }

}

使用 EasyUI

接下来，我们要使用前面定义的后台接口，仅需要在 EasyUI API 中指定 url 即可。

请留意下面示例中的 url 字段，和实际接口是一一对应的。

<!DOCTYPE html>
<html>
  <head>
    <title>Complex Layout - jQuery EasyUI Demo</title>
    <meta charset="UTF-8" />
    <link
      rel="stylesheet"
      type="text/css"
      href="../lib/easyui/themes/bootstrap/easyui.css"
    />
    <link
      rel="stylesheet"
      type="text/css"
      href="../lib/easyui/themes/icon.css"
    />
    <link
      rel="stylesheet"
      type="text/css"
      href="../lib/easyui/themes/color.css"
    />
    <script type="text/javascript" src="../lib/easyui/jquery.min.js"></script>
    <script
      type="text/javascript"
      src="../lib/easyui/jquery.easyui.min.js"
    ></script>
    <script
      type="text/javascript"
      src="../lib/easyui/locale/easyui-lang-zh_CN.js"
    ></script>
    <style type="text/css">
      body {
        font-family: microsoft yahei;
      }
    </style>
  </head>
  <body>
    <div style="width:100%">
      <h2>基本的 CRUD 应用</h2>
      <p>数据来源于后台系统</p>

      <table
        id="dg"
        title="Custom List"
        class="easyui-datagrid"
        url="/user/list"
        toolbar="#toolbar"
        pagination="true"
        rownumbers="true"
        fitColumns="true"
        singleSelect="true"
      >
        <thead>
          <tr>
            <th field="id" width="50">ID</th>
            <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()"
          >添加</a
        >
        <a
          href="javascript:void(0)"
          class="easyui-linkbutton"
          iconCls="icon-edit"
          plain="true"
          onclick="editUser()"
          >修改</a
        >
        <a
          href="javascript:void(0)"
          class="easyui-linkbutton"
          iconCls="icon-remove"
          plain="true"
          onclick="destroyUser()"
          >删除</a
        >
      </div>

      <div
        id="dlg"
        class="easyui-dialog"
        style="width:400px"
        data-options="closed:true,modal:true,border:'thin',buttons:'#dlg-buttons'"
      >
        <form
          id="fm"
          method="post"
          novalidate
          style="margin:0;padding:20px 50px"
        >
          <h3>User Information</h3>
          <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>
    </div>

    <script type="text/javascript">
      var url

      function newUser() {
        $('#dlg')
          .dialog('open')
          .dialog('center')
          .dialog('setTitle', 'New User')
        $('#fm').form('clear')
        url = '/user/add'
      }

      function editUser() {
        var row = $('#dg').datagrid('getSelected')
        if (row) {
          $('#dlg')
            .dialog('open')
            .dialog('center')
            .dialog('setTitle', 'Edit User')
          $('#fm').form('load', row)
          url = '/user/save'
        }
      }

      function saveUser() {
        $('#fm').form('submit', {
          url: url,
          onSubmit: function() {
            return $(this).form('validate')
          },
          success: function(result) {
            var result = eval('(' + result + ')')
            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(
                  '/user/delete',
                  { id: row.id },
                  function(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>

完整示例

请参考源码open in new window

运行方式：

mvn clean package -DskipTests=true
java -jar target/

在浏览器中访问：http://localhost:8080/open in new window

引用和引申

昵称

邮箱

网址

按正序
按倒序
按热度

SpringBoot 之应用 EasyUI

# SpringBoot 之应用 EasyUI

# 简介

# 什么是 EasyUI？

# Spring Boot 整合 EasyUI

# 配置

# 引入 easyui

# 实战

# 引入 maven 依赖

# 使用 JPA

# 使用 Web

# 使用 EasyUI

# 完整示例

# 引用和引申

预览:

SpringBoot 之应用 EasyUI

简介

什么是 EasyUI？

Spring Boot 整合 EasyUI

配置

引入 easyui

实战

引入 maven 依赖

使用 JPA

使用 Web

使用 EasyUI

完整示例

引用和引申