前段组件
Jquery.validate
- 通常可以使用jquery.validate.js的插件进行前端数据的校验。具有一定的局限性，只适合有form表单提交数据。
$("#indexForm").validate({
rules: {
user_test1: {
required: true,
}
},
messages: {
user_test1: {
required: "验证插件",
}
}
});
5.5.2 Jquery.cookie
jQuery.Cookie.js插件是一个轻量级的Cookie管理插件。依赖于jquery.js。cookie机制采用的是在客户端保持状态的方案，而session机制采用的是在服务器端保持状态的方案。cookie数据存放在客户的浏览器上，session数据放在服务器上。单个cookie保存的数据不能超过4K，很多浏览器都限制一个站点最多保存20个cookie。
使用建议：将登陆信息等重要信息存放为SESSION；其他信息如果需要保留，可以放在COOKIE中。
使用方法。
(1)读取cookie值
$.cookie(cookieName) cookieName:要读取的cookie名称。
示例：$.cookie("username");读取保存在cookie中名为的username的值。
(2)写入设置Cookie值
$.cookie(cookieName,cookieValue);
cookieName:要设置的cookie名称，cookieValue表示相对应的值。
示例:$.cookie("username","admin");
$.cookie("username",NULL);销毁名称为username的cookie
(3) [option]参数说明：
Expires：有限日期，可以是一个整数或一个日期(单位：天)。这个地方也要注意，如果不设置这个东西，浏览器关闭之后此cookie就失效了。
Path：cookie值保存的路径，默认与创建页路径一致。
Domin：cookie域名属性，默认与创建页域名一样。 这个地方要相当注意，跨域的概念，如果要主域名二级域名有效则要设置 ".xxx.com"
Secrue：一个布尔值，表示传输cookie值时，是否需要一个安全协议。
创建cookie实例： $.cookie("useuName", $("#useuName").val(), { path: "/", expiress: 7 ,sucue:true})
5.5.3 Jquery-mobile
5.5.4 bootstrap
5.5.5 Jquery-jqGrid
- 最新版本：
5.5.6 Bootstrap-datepicker
Bootstrap日期时间选择器(Bootstrap DateTime Picker)是一个Bootstrap组件,能够简化页面上日期、时间的输入。
5.5.7 Bootstrap-select
Bootstrap-select多选下拉框实现
5.5.8 Bootstrap-smoke
Smoke jQuery插件件适于Bootstrap 3版的前端框架，主要是扩展了BOOTSTRAP 3目前没有的功能，而且效果很不错。Smoke 插件新增加效果有：表单验证 浮动提示框 流行的页面加载进度条效果 全屏效果 Panel面板增加全屏、最小化和关闭功能 Helpers功能（获取当前数值、URL、日期）
5.5.9 Raty评分
5.5.10 Zoom放大镜
- 下载地址
5.5.11 Ztree
- 树组件。
5.5.12 Layer
- web弹层组件，主要用于页面信息提示的弹出框。
- 官网地址：http://layer.layui.com/和http://www.layui.com/下载包。
- 引入layer.js文件（依赖于jquery文件）
前段的各种组件。
5.5.13 WebUploader
- 图片上传组件。
- 引入相应的js和CSS文件。（webuploader.css、jquery.js、webuploader.js）
- 分片、并发，预览、压缩，多途径添加文件夹（文件多选，拖拽等）妙传。
- 创建相应的页面。
<body>
<div id="upload">
<div id="filePicker">文件上传</div>
</div>
<script type="text/javascript">
var uploader = WebUploader.create(
{
swf:"${pageContext.request.contextPath }/js/Uploader.swf",
server:"${pageContext.request.contextPath }/FileUploadServlet",
pick:"#filePicker",
auto:true
}
);
</script>
</body>
5.5.14 Underscore.js
- 提供了许多作为开发者的我们在开发 Web 项目所需要的实用功能。
- 引入对于的js文件。（）
- .isEmpty({});.flatten([[0, 1], [2, 3], [4, 5]]); _.range(5);
- _.each：写看得懂的循环
- _.template: 简单直白
- _.filter()：只需要一个布尔函数
5.5.15 Hcharts - 官网：https://www.hcharts.cn/
- 图表制作。
5.5.16 Echarts - 官网：http://echarts.baidu.com/
- 图表功能的制作。
- 官方网址：
5.5.17 Vue（Iview） - 最新版本：Vue2.5
- 官网：https://cn.vuejs.org
- Github下载：https://github.com/iview/iview
- JavaScript和html进行分离书写，必须将外部引入的JavaScript文件放到DOM页面的后面。
- 整合iview前端组件的使用。使用iview中的组件时，注意标签的书写格式。
5.5.18 Iview - 最新版本：
- 官网：https://www.iviewui.com/
5.5.19 Angular
- 最新版本：
