Now l have come to the crossroads in my life. I always knew what the right path was. Without exception, I knew, but l never took it. You know why? lt was too damn hard.
—— 《Scent of a Woman》
楔子
经常做web后台开发的朋友可能会遇到这样的问题，当我们独立完成一个比较简单的功能模块或者做demo时，不得不自己编写前端js代码以及UI。编写js代码可能问题还不大，但是后台开发的朋友如果自己调整CSS样式，做出来的页面效果常常会丑的超越想象力。。。因此我们经常借助一些比较成熟的、拥有一整套UI样式的工具来辅助我们完成前端开发工作。
EasyUI 简介
easyui是一种基于jQuery的用户界面插件集合。
easyui为创建现代化，互动，JavaScript应用程序，提供必要的功能。
使用easyui你不需要写很多代码，你只需要通过编写一些简单HTML标记，就可以定义用户界面。
easyui是个完美支持HTML5网页的完整框架。
easyui节省您网页开发的时间和规模。
easyui很简单但功能强大的。
—— JQuery EasyUI中文网
类似功能的UI框架产品还有Twitter的Bootstrap、jQuery LigerUI以及jQuery MiniUI等等。
CRUD 应用示例
跟其他的UI框架产品一样，要是用EasyUI，我们需要先下载它，然后导入到我们的项目中。
EasyUI的下载地址如下：
http://www.jeasyui.net/download/
我们选择GPL版本下载之。官网上的使用示例是PHP的，但是现在开发web应用大部分还是用的java，因此我们以Spring Boot框架为例讲解如何创建一个简单的CRUD应用。
将解压出来的EasyUI文件夹改名为easyui，然后放置在src/main/resources文件夹下面的static文件夹中。然后在HTML页面中引入它们：
在body主体中添加datagrid用于存放查询出来的数据
ID
Name
FileList
State
对主要的属性进行讲解：
url：表示datagrid中存放的数据，一般为一个List
完整的controller内容
package com.example.filelist.controller;
import java.util.List;
import org.springframework.beans.factory.annotation.Autowired;
import org.springframework.stereotype.Controller;
import org.springframework.ui.Model;
import org.springframework.web.bind.annotation.RequestMapping;
import org.springframework.web.bind.annotation.RequestMethod;
import org.springframework.web.bind.annotation.ResponseBody;
import com.example.filelist.entity.EUDataGridResult;
import com.example.filelist.entity.FileList;
import com.example.filelist.repository.filelistRepository;
@Controller
@RequestMapping(value="/")
public class filelistController {
@Autowired
private filelistRepository filelistRepository;
@RequestMapping(value = "/filelist",method = RequestMethod.GET)
public String getFilelist(Model model)
{
List filelists = filelistRepository.findAll();
model.addAttribute("filelists", filelists);
return "filelist";
}
@ResponseBody
@RequestMapping(value = "/saveFileList",method = RequestMethod.POST)
public FileList saveFileList(int id,String name,String filelist,String state,Model model)
{
FileList newFileList = new FileList();
newFileList.setName(name);
newFileList.setFilelist(filelist);
newFileList.setState(state);
FileList saveFileList = filelistRepository.save(newFileList);
return saveFileList;
}
@ResponseBody
@RequestMapping(value = "/updateFileList",method = RequestMethod.POST)
public FileList updateFileList(int id,String name,String filelist,String state,Model model)
{
filelistRepository.updateById(name, filelist, state, id);
FileList updateFileList = filelistRepository.findById(id);
return updateFileList;
}
@ResponseBody
@RequestMapping(value = "/destroyFileList",method = RequestMethod.POST)
public List destroyFileList(int id,Model model)
{
filelistRepository.deleteById(id);
List destroyFileList = filelistRepository.findAll();
return destroyFileList;
}
@ResponseBody
@RequestMapping(value = "/getJson")
public List getJson(Model model)
{
List filelists = filelistRepository.findAll();
return filelists;
}
@RequestMapping(value = "/hello",method = RequestMethod.GET)
public String hello(Model model) {
model.addAttribute("name", "Niao");
return "hello";
}
}
完整的UI内容
hello
ID
Name
FileList
State
User Information