Spring Bootの統合EasyUI Webアプリケーションの構築

SpringBootTutorial::Web::UI::EasyUI
EasyUIは簡単なユーザインタフェースコンポーネントの集合である.EasyUIはUIの基本機能の大部分をパッケージ化しているため、jsコードとcssコードを大幅に削減することができます.従って、EasyUIは、単純なシステムまたはプロトタイプシステムの開発に非常に適している.
この例では、テクノロジポイントを使用します.

Spring Boot:主にspring-boot-starter-web、spring-boot-starter-data-jpa

を使用

EasyUI:オンデマンドでロードされ、すべてのEasyUIプロパティ

は導入されていません.

データベース:テストの便宜上、H 2

を使用

概要

EasyUIとは?

Spring Boot統合EasyUI

構成

easyui

に導入

実戦

maven依存

を導入

使用JPA

Web

を使用

EasyUI

を使用

完全例

引用と引用

概要
EasyUIとは?

easyuiはjQuery,Angular.,VueとReactのユーザインタフェースコンポーネントの集合.

easyuiは、現代のインタラクティブjavascriptアプリケーションを構築するための基本的な機能を提供します.

easyuiを使用すると、多くのjavascriptコードを記述する必要はありません.通常、HTMLタグを記述することでユーザーインタフェースを定義します.

完全なHTML 5ページフレームワーク.

easyuiを使用して製品を開発すると、時間と規模を大幅に節約できます.

easyuiの使用は簡単ですが、機能は非常に強力です.

Spring Boot統合EasyUI
コンフィギュレーション
application.properties修正:

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

easyuiの導入
EasyUIダウンロードアドレス:http://www.jeasyui.cn/download.html src/main/resources/staticディレクトリにeasyuiを導入します.
次にhtmlで参照します.

easyuiを した 、どのコンポーネントを する があるかは、 ドキュメントやAPIを することができますが、 です.ここでは しません.

maven の

  
    
      org.springframework.boot
      spring-boot-starter-web
    
    
      org.springframework.boot
      spring-boot-starter-data-jpa
    
    
      org.springframework.boot
      spring-boot-starter-tomcat
      provided
    
    
      org.springframework.boot
      spring-boot-starter-test
      test
    

    
      com.h2database
      h2
    
    
      org.springframework.boot
      spring-boot-devtools
    
    
      commons-collections
      commons-collections
      3.2.2
    
  

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 {

    List findByLastName(String lastName);
}

Webの
トップページController,webリクエストを ページに する( の はindex.htmlに する)

@Controller
public class IndexController {

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

}

さらに、バックグラウンドのAPIインタフェースを するControllerを する があります.

@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 list() {
        Iterable all = customerRepository.findAll();
        List list = IteratorUtils.toList(all.iterator());
        return new ResponseDTO<>(true, list.size(), list);
    }

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

    @ResponseBody
    @RequestMapping(value = "/user/save")
    public ResponseDTO save(@RequestParam("id") Long id, User user) {
        user.setId(id);
        customerRepository.save(user);
        List 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の
に、 に したバックグラウンドインタフェースを するには、EasyUIAPIでurlを するだけです.
の のurlフィールドは、 のインタフェースと1つに していることに してください.

  
    
    
    
    
    
    
    
    
    
  
  
    

      
    CRUD   
      
         

      

        

          

            
ID
            
First Name
            
Last Name
            
Phone
            
Email
          
        
      
      

          
          
          
      

      

        

          
User Information
          

            
          
          

            
          
          

            
          
          

            
          
        
      
      

        Save
        Cancel
      
    

    
      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'
                );
              }
            }
          );
        }
      }
    
  

完全な例
ソースコードを参照してください
実行方法:

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

ブラウザでのアクセス:http://localhost:8080/
引用と引用

EasyUI公式サイト

EasyUI中国語ネット