Idea中SpringBoot集成EasyUI

程序员文章站 2022-05-26 08:41:35

...

SpringBoot集成EasyUI

下载EasyUI

EasyUI可以到官网下载，如下图所示。学习EasyUI控件的使用同样可以通过EasyUI在线文档进行学习。

Idea中SpringBoot集成EasyUI

下载得到的是一个压缩包解压可以得到如下图所示的文件，各个文件中存放的内容已经表明。

Idea中SpringBoot集成EasyUI

Idea集成EasyUI

创建web项目

这里就不做过多的赘述了，默认简单的项目已经创建好了。在pom.xml文件中引入依赖。

<?xml version="1.0" encoding="UTF-8"?>

<project xmlns="http://maven.apache.org/POM/4.0.0" xmlns:xsi="http://www.w3.org/2001/XMLSchema-instance"
  xsi:schemaLocation="http://maven.apache.org/POM/4.0.0 http://maven.apache.org/xsd/maven-4.0.0.xsd">
  <modelVersion>4.0.0</modelVersion>

  <groupId>com.zwl</groupId>
  <artifactId>easyui</artifactId>
  <version>1.0-SNAPSHOT</version>

  <name>easyui</name>

  <properties>
    <project.build.sourceEncoding>UTF-8</project.build.sourceEncoding>
    <maven.compiler.source>1.8</maven.compiler.source>
    <maven.compiler.target>1.8</maven.compiler.target>
  </properties>

  <!--引入父依赖-->
  <parent>
    <groupId>org.springframework.boot</groupId>
    <artifactId>spring-boot-starter-parent</artifactId>
    <version>2.2.2.RELEASE</version>
  </parent>


  <dependencies>
    <!--junit单元测试-->
    <!--SpringBoot官方提供的依赖-->
    <dependency>
      <groupId>org.springframework.boot</groupId>
      <artifactId>spring-boot-starter-web</artifactId>
    </dependency>
    <!--aop依赖-->
    <dependency>
      <groupId>org.springframework.boot</groupId>
      <artifactId>spring-boot-starter-aop</artifactId>
    </dependency>
    <!--freemrker依赖-->
    <dependency>
      <groupId>org.springframework.boot</groupId>
      <artifactId>spring-boot-starter-freemarker</artifactId>
    </dependency>
      
    <dependency>
      <groupId>org.springframework.boot</groupId>
      <artifactId>spring-boot-starter-test</artifactId>
      <scope>test</scope>
    </dependency>

    <!--将数据包装成json数据-->
    <dependency>
      <groupId>com.alibaba</groupId>
      <artifactId>fastjson</artifactId>
      <version>1.2.47</version>
    </dependency>

    <dependency>
      <groupId>org.springframework.boot</groupId>
      <artifactId>spring-boot-starter-thymeleaf</artifactId>
    </dependency>


  </dependencies>

</project>

拷贝EasyUI文件

拷贝EasyUI文件到项目项目的目录下，路径如下：

Idea中SpringBoot集成EasyUI

.yml文件

#配置视图文件存放的位置，及视图文件为ftl文件
spring:
  freemarker:
    suffix: .ftl
    content-type: text/html
    charset: UTF-8
    template-loader-path: classpath:/views/

dialog.ftl

注意引入CSS文件和JS文件的方式，此处用的使用相对路径（路径中的 “/”容易忘记）。

<!DOCTYPE html>
<html>
<head>
    <title>EasyUI</title>
    <!--路径中的第一个/不要丢掉，否则无法找到文件-->
    <link rel="stylesheet" href="/themes/default/easyui.css">
    <link rel="stylesheet" href="/themes/icon.css">
    <script src="/js/jquery.min.js"></script>
    <script src="/js/jquery.easyui.min.js"></script>
    <script src="/js/easyui-lang-zh_CN.js" ></script>
</head>
<body>

    <table class="easyui-datagrid" id="aa">
    </table>
    <a id="btn"  class="easyui-linkbutton" data-options="iconCls:'icon-search'">造数据</a>
</body>

<script type="text/javascript">

    $('#aa').datagrid({
        singleSelect:true,
        data:[
            {id:1,name:'张三'},
            {id:1,name:'张三'},
            {id:1,name:'张三'},
            {id:1,name:'张三'},
            {id:1,name:'张三'},
            {id:2,name:'李四'}
        ],
        columns:[[
            {field:'id',title:'编号',width:100},
            {field:'name',title:'名称',width:150}
        ]]

    });
    var i = 1;
    $('#aa').datagrid('selectRow',1);
    $('#btn').linkbutton({
        onClick:function(){
            if(i%2==1){
                $('#aa').datagrid('selectRow',0);
            }else{
                $('#aa').datagrid('uncheckAll');
            }
            i++;
        }
    });


</script>
</html>

Controller

package com.zwl.easyui;

import org.springframework.stereotype.Controller;
import org.springframework.web.bind.annotation.RequestMapping;

/**
 * 项目描述：
 *
 * @auther ZWL
 * @date 2020/9/15
 */
@Controller
@RequestMapping("easyui")
public class Demo01 {

    @RequestMapping("test")
    public String test(){
        return "dialog";
    }

}

Main

启动类

package com.zwl.easyui;

import org.springframework.boot.SpringApplication;
import org.springframework.boot.autoconfigure.SpringBootApplication;

/**
 * 项目描述：启动类
 *
 * @auther ZWL
 * @date 2020/9/15
 */
@SpringBootApplication
public class Start {

    public static void main(String[] args) {
        SpringApplication.run(Start.class);
    }
}

启动项目‘

启动项目访问dialog.ftl文件，验证EasyUI是否引入成功，如下图所示。到此springBoot集成EasyUI成功。

Idea中SpringBoot集成EasyUI

Idea中SpringBoot集成EasyUI

SpringBoot集成EasyUI

下载EasyUI

Idea集成EasyUI

SpringBoot项目在IntelliJ IDEA中实现热部署

IDEA 中创建SpringBoot 父子模块的实现

idea中springboot项目连接数据库报错的原因解析

Spring Secure在SpringBoot中的集成

Spring Secure在SpringBoot中的集成

【图解】IDEA中MAVEN下载，配置与集成

关于idea中SpringBoot启动失败的坑

idea SpringBoot中Junit测试无法加载@SpringApplicationConfiguration注解

详解IDEA中SpringBoot整合Servlet三大组件的过程

springboot集成springCloud中gateway时启动报错的解决