一、LayUI介绍 layui（谐音：类UI) 是一款采用自身模块规范编写的前端 UI 框架，遵循原生 HTML/CSS/JS 的书写与组织形式，门槛极低，拿来即用。其外在极简，却又不失饱满的内在，体积轻盈，组件丰盈，从核心代码到 API 的每一处细节都经过精心雕琢，非常适合界面的快速开发。layui 首个版本发布于2016年金秋，她区别于那些基于 MVVM 底层的 UI 框架，却并非逆道而行，而是信奉返璞归真之道。准确地说，她更多是为服务端程序员量身定做，你无需涉足各种前端工具的复杂配置，只需面对浏览器本身，让一切你所需要的元素与交互，从这里信手拈来。 layui 兼容人类正在使用的全部浏览器（IE6/7除外），可作为 PC 端后台系统与前台界面的速成开发方案。 1.1、资源 文档： 官网： git:https://github.com/sentsin/layui 二、Hello World  2.1、引入UI框架 下载layui将dest中的内容添加到项目中 项目： 2.2、后台布局 新建admin.html 结果 2.3、后台服务 2.3.1、封装数据R.java   2.3.2、数据访问UserDao.java   2.3.3、分页服务 2.3.4、服务测试 2.3.5、对接前后台 2.3.6、运行结果 三、综合示例 3.1、概要 实现商品的后台管理功能，添加，修改，删除，更新，上传，富文本，前台展示，手机端的浏览 3.2、创建数据库 结果： 3.3、创建项目 创建一个web项目，记得选择生成web.xml文件 创建完成 在webcontent目录下添加images图片目录 在webcontent目录下添加layui 后台模板 添加后的效果 部署运行 创建页，未修改的模板 后台管理 3.4、创建实体类 Product.java 3.5、数据访问 ProductDao.java 先添加依赖包sqljdbc4.jar JDBCUitls工具类 ProductDao.java 测试结果： decimal->BigDecimal 3.6、产品展示 ProductDao.java 测试： 分页工具类R.java JsonUtil工具类 产品控制器,ProductController.java  测试服务 product.html 运行结果 3.7、AJAX文件异步上传 3.7.1、前端页面 html   js 3.7.2、后台服务 添加jar包的依赖 定义上传文件的Servlet 3.7.3、演示结果 3.7.4、其它上传组件 uploadify 3.8、富文本编辑器Kindeditor KindEditor是一套开源的HTML可视化编辑器，主要用于让用户在网站上获得所见即所得编辑效果，兼容IE、Firefox、Chrome、Safari、Opera等主流浏览器。KindEditor使用JavaScript编写，可以无缝的于Java、.NET、PHP、ASP等程序接合。 KindEditor非常适合在CMS、商城、论坛、博客、Wiki、电子邮件等互联网应用上使用 1. 体积小，加载速度快，但功能十分丰富。2. 内置自定义range，完美地支持span标记。 3. 基于插件的方式设计，所有功能都是插件，增加自定义和扩展功能非常简单。 4. 修改编辑器风格很容易，只需修改一个CSS文件。 5. 支持大部分主流浏览器，比如IE、Firefox、Safari、Chrome、Opera。 官网： Github: https://github.com/kindsoft/kindeditor Oschina: 下载地址：https://github.com/kindsoft/kindeditor/releases/download/v4.1.11/kindeditor-4.1.11-zh-CN.zip 3.8.1、使用Kindeditor 1. 下载编辑器 下载 KindEditor 最新版本，下载之后打开 examples/index.html 就可以看到演示。下载页面: 2. 部署编辑器 解压 kindeditor-x.x.x.zip 文件，将所有文件上传到您的网站程序目录里，例如：http://您的域名/editor/Note:您可以根据需求删除以下目录后上传到服务器。asp - ASP程序asp.net - ASP.NET程序php - PHP程序jsp - JSP程序examples - 演示文件 3. 修改HTML页面 1.在需要显示编辑器的位置添加textarea输入框。<textarea id="editor_id" name="content" >&lt;strong&gt;HTML内容&lt;/strong&gt;</textarea>Note: id在当前页面必须是唯一的值。在textarea里设置HTML内容即可实现编辑，在这里需要注意的是，如果从服务器端程序(ASP、PHP、ASP.NET等)直接显示内容，则必须转换HTML特殊字符(>,<,&,”)。具体请参考各语言目录下面的demo.xxx程序，目前支持ASP、ASP.NET、PHP、JSP。在有些浏览器上不设宽度和高度可能显示有问题，所以最好设一下宽度和高度。宽度和高度可用inline样式设置，也可用 编辑器初始化参数 设置。2.在该HTML页面添加以下脚本。<script charset="utf-8" src="https://www.cnblogs.com/editor/kindeditor.js"></script><script charset="utf-8" src="https://www.cnblogs.com/editor/lang/zh_CN.js"></script><script> var editor; KindEditor.ready(function(K) { editor = K.create('#editor_id'); });</script>Note: 第一个参数可用其它CSS选择器，匹配多个textarea时只在第一个元素上加载编辑器。通过K.create函数的第二个参数，可以对编辑器进行配置，具体参数请参考 编辑器初始化参数 。var options = { cssPath : '/css/index.css', filterMode : true};var editor = K.create('textarea[name="content"]', options); 4. 获取HTML数据// 取得HTML内容html = editor.html(); // 同步数据后可以直接取得textarea的valueeditor.sync();html = document.getElementById('editor_id').value; // 原生APIhtml = K('#editor_id').val(); // KindEditor Node APIhtml = $('#editor_id').val(); // jQuery // 设置HTML内容editor.html('HTML内容');Note: KindEditor的可视化操作在新创建的iframe上执行，代码模式下的textarea框也是新创建的，所以最后提交前需要执行 sync() 将HTML数据设置到原来的textarea。KindEditor在默认情况下自动寻找textarea所属的form元素，找到form后onsubmit事件里添加sync函数，所以用form方式提交数据，不需要手动执行sync()函数。 3.8.2、文件上传  将依赖的jar文件放置到项目的lib目录中，3个jar文件已在kindeditor中存在 找到用于处理上传的jsp程序，根据需要修改 upload_json.jsp   文件管理file_manager_json.jsp   KindEditor默认提供ASP、ASP.NET、PHP、JSP上传程序，这些程序是演示程序，建议不要直接在实际项目中使用。如果您确定直接使用本程序，使用之前请仔细确认相关安全设置。 选择程序语言?// ASPKindEditor.ready(function(K) { K.create('#textarea_id', { uploadJson : '../asp/upload_json.asp', fileManagerJson : '../asp/file_manager_json.asp', allowFileManager : true });});// ASP.NETKindEditor.ready(function(K) { K.create('#textarea_id', { uploadJson : '../asp.net/upload_json.ashx', fileManagerJson : '../asp.net/file_manager_json.ashx', allowFileManager : true });});// JSPKindEditor.ready(function(K) { K.create('#textarea_id', { uploadJson : '../jsp/upload_json.jsp', fileManagerJson : '../jsp/file_manager_json.jsp', allowFileManager : true });});Note: 具体使用方法请参见各语言(asp、asp.net、php、jsp)目录下的demo.xxx文件。 完整示例： 运行结果：   3.8.3、其它属性设置 3.8.4、Kindeditor获取不了焦点的解决方法 使用layui弹出层时会发现kindeditor获取不了光标，这是因为多个层与iframe元素间叠放顺序的问题引起的，解决办法如下： 代码：   3.9、移动端UI框架 https://weui.io 示例： 运行结果： 如果需要演示可使用Total Control软件 四、素材、示例与视频 4.1、素材 链接: https://pan.baidu.com/s/1iFyQJ8oNWnoVrQ64rq2c6w 密码: 5a19 图标： layui文档： layui文档： 上传jar包：https://files.cnblogs.com/files/best/上传jar.zip KindEditor下载：链接: https://pan.baidu.com/s/1IGBFVzMPjQ5FYCEKoYOc9w 密码: tv9v GoMallPro项目：链接: https://pan.baidu.com/s/1wN2DRJXGoTgPv4rSnCSWlw 密码: 13tw （SUI）