• Spring Boot + EasyUI 创建第一个项目（一）

            创建一个Spring Boot和EasyUI相结合的项目。

    一、构建一个Spring Boot项目

    Spring Boot之创建一个Spring Boot项目（一）-CSDN博客

    二、配置Thymeleaf

    Spring Boot Thymeleaf（十一）_thymeleaf 设置字体_人……杰的博客-CSDN博客

    三、配置EasyUI

    1 下载EasyUI的对应jar包并配置使用EasyUI

    下载地址：EasyUI框架下载 - EasyUI中文站

     

     

            新建一个index.html文件，注意这个文件需要放在static目录下，也就是跟easyui在同一个目录，否则放在templates下由于springboot的内部机制，调用接口访问不到会报404，结构如上图所示，浏览器访问这个页面的路径是localhost:8080/index.html。


    引入EasyUI：

    1.     <link rel="stylesheet" type="text/css" href="../../themes/default/easyui.css">
    2.     <link rel="stylesheet" type="text/css" href="../../themes/icon.css">
    3.     <link rel="stylesheet" type="text/css" href="../demo.css">
    4.     <script type="text/javascript" src="../../jquery.min.js">script>
    5.     <script type="text/javascript" src="../../jquery.easyui.min.js">script>

    四、项目举例

    1 项目框架

    2 代码实现

    SpringBootMainApplication.java:

    1. package com.xj.main;
    2.  
    3. import org.springframework.boot.SpringApplication;
    4. import org.springframework.boot.autoconfigure.SpringBootApplication;
    5. import org.springframework.context.annotation.ComponentScan;
    6.  
    7. /**
    8.  * @Author: xjfu
    9.  * @Create: 2023/10/20 7:33
    10.  * @Description: SpringBoot启动类
    11.  */
    12. @ComponentScan("com.xj")
    13. @SpringBootApplication
    14. public class SpringBootMainApplication {
    15.     public static void main(String[] args) {
    16.         try{
    17.             SpringApplication.run(SpringBootMainApplication.class, args);
    18.         }catch (Exception e){
    19.             e.printStackTrace();
    20.         }
    21.     }
    22. }

    ThymeleafController.java:

    1. package com.xj.controller;
    2.  
    3. import org.springframework.stereotype.Controller;
    4. import org.springframework.web.bind.annotation.RequestMapping;
    5.  
    6. /**
    7.  * @Author: xjfu
    8.  * @Create: 2023/10/20 7:42
    9.  * @Description:
    10.  */
    11. @RequestMapping("/easyui")
    12. @Controller
    13. public class ThymeleafController {
    14.  
    15.     @RequestMapping("/hello")
    16.     public String sayHello(){
    17.         //启动hello.html页面
    18.         return "hello";
    19.     }
    20.  
    21.     @RequestMapping("/helloPage")
    22.     public String helloPage(){
    23.         //启动helloPage.html页面
    24.         return "helloPage";
    25.     }
    26. }

    index.html:

    1. html>
    2. <html lang="en" xmlns:th="http://www.thymeleaf.org">
    3. <head>
    4.     <meta charset="UTF-8">
    5.     <title>Custom Window Tools - jQuery EasyUI Demotitle>
    6.     <link rel="stylesheet" type="text/css" href="../../themes/default/easyui.css">
    7.     <link rel="stylesheet" type="text/css" href="../../themes/icon.css">
    8.     <link rel="stylesheet" type="text/css" href="../demo.css">
    9.     <script type="text/javascript" src="../../jquery.min.js">script>
    10.     <script type="text/javascript" src="../../jquery.easyui.min.js">script>
    11. head>
    12. <body>
    13. <div id="win" class="easyui-window" title="My Window" style="width:300px;height:100px;padding:5px;">
    14.     Hello! Sprring Boot + easyUI success!
    15. div>
    16. body>
    17. html>

    hello.html:

    1. html>
    2. <html lang="en" xmlns:th="http://www.thymeleaf.org">
    3. <head>
    4.     <meta charset="UTF-8">
    5.     <title>Titletitle>
    6. head>
    7. <body>
    9. <h1 th:text="迎您来到Thymeleaf">欢迎您访问静态页面 HTMLh1>
    10. body>
    11. html>

    helloPage.html:

    1. html>
    2. <html lang="en" xmlns:th="http://www.thymeleaf.org">
    3. <head>
    4.     <meta charset="UTF-8">
    5.     <title>Custom Window Tools - jQuery EasyUI Demotitle>
    6.     <link rel="stylesheet" type="text/css" href="../../themes/default/easyui.css">
    7.     <link rel="stylesheet" type="text/css" href="../../themes/icon.css">
    8.     <link rel="stylesheet" type="text/css" href="../demo.css">
    9.     <script type="text/javascript" src="../../jquery.min.js">script>
    10.     <script type="text/javascript" src="../../jquery.easyui.min.js">script>
    11. head>
    12. <body>
    13. <div id="win" class="easyui-window" title="My Window" style="width:300px;height:100px;padding:5px;">
    14.     Hello! Sprring Boot + easyUI success!
    15. div>
    16. body>
    17. html>

    3 运行结果

    3.1 测试thymeleaf正常

    3.2 EasyUI访问方式

    3.3 使用thymeleaf访问方式

    五、参考

    1.SpringBoot集成EasyUI_springboot整合easyui-CSDN博客

    2.https://www.cnblogs.com/jingmoxukong/p/10239821.html

    3.Easyui 创建简单窗口_EasyUI 教程

  • 相关阅读:
    （59、60、61、62）CPU
    midway的使用教程
    让Win11系统更好用的几个设置
    WebRTC与CSS滤镜（CSS filter）
    常见的应用层协议都有哪些？【面试官可能会问系列】
    【POJ No. 1195】 矩形区域查询 Mobile phones
    【Python21天学习挑战赛】- 函数进阶
    axios---封装loadding组件的显示和隐藏
    二叉树基础
    【Python基础入门3】转义字符和原字符
  • 原文地址：https://blog.csdn.net/qq_21370419/article/details/125420740