jQuery-confirm

[TOC]

Jquery-confirm

1. alert使用

使用 Jquery-confirm.js插件

function alertView(str){
    $.alert({
        animation : 'zoom',
        animationBounce : 2,
        keyboardEnabled : true,
        title : false,
        content : str,
        theme : 'white',
    });
}

2. confirm使用

使用 Jquery-confirm.js插件

$.confirm({
    title: '退出系统登陆吗？', 
    content : false,
    // autoClose: 'confirm|10000',
    confirmButtonClass : 'btn-info',
    cancelButtonClass : 'btn-danger',
    confirm : function() {
        $.ajax({
            type : "post",
            url : "logoutAction.action",
            async: false,
            success :function(){
                location.href = "../login.jsp";
            }
        });
    },
    cancel : function() {
        alert('canceled');
    }
});

bootstrap-dialog使用

[TOC]

页面加载

function changePasswd(){
 BootstrapDialog.show({
     title : "修改密码",
     message: function(dialog) {
         var $message = $('<div></div>');
         var pageToLoad = dialog.getData('pageToLoad');
         $message.load(pageToLoad);
         return $message;
     },
     data: {
         'pageToLoad': 'changePasswd.html'
     },
        buttons: [{
         id: 'btn-ok',   
         icon: 'glyphicon glyphicon-check',       
         label: 'OK',
         cssClass: 'btn-success', 
         autospin: false,
         action: function(dialogItself){    
             change();
               dialogItself.close();
         }
     }, {
         id:'btn-reset',
         cssClass: 'btn-warning',
         label: '重置',
         icon: 'glyphicon glyphicon-repeat',
         action : function(){
             document.getElementById("changeForm").reset();
            $('#btn-reset').click(function() {
            });
         }
     }, {
         id:'btn-close',
         icon:'glyphicon glyphicon-remove',
         label: 'Close',
         cssClass: 'btn-danger',
         action: function(dialogItself){
             dialogItself.close();
         }
     }]
 });
}

angular实现用户登陆

[toc]

尝试用angular来实现登陆，表单的验证和控制果然很简单方便哎，跟大家分享一下，望不吝赐教。

表单验证

$pristine

布尔值，表示用户是否修改了表单。如果为true，表示没有修改过；false表示修改过。

formName.inputFieldName.$pristine;

$dirty

布尔值，表示用户已修改过表单

formName.inputFieldName.$dirty

$valid

布尔值，表示表单是否通过验证，为true，则表示通过验证

formName.inputFieldName.$valid

$invalid

布尔值，为true表示未通过验证

formName.inputFieldName.$invalid

$error

$error对象，包含input每个验证是有效还是无效的

form.name.$error.minlength
form.name.$error.maxlength
form.name.$error.required //非空
form.email.$error.email  //无效邮箱

其他验证

form.name.$touched  //触发

ng-pattern

关于正则表达式的验证

<input type="password" 
        class="form-control" 
        ng-model="user.password" 
        name="password"
        ng-pattern="/^[A-Za-z]{1}[0-9A-Za-z_]{2,29}$/">

<p class="help-block has-error" ng-show="regForm.password.$error.pattern&&regForm.password.$touched">只能是数字、字母和下划线</p>

由上可看出，正则表达式验证是否通过可以通过regForm.password.$error.pattern此表达式验证。

登陆案例

登陆界面如下：

登陆界面

表单验证效果：

表单验证

验证通过效果：

enter description here
代码如下

html

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <link rel="stylesheet" type="text/css" href="../lib/bootstrap-3.3.5/css/bootstrap.min.css">
    <link rel="stylesheet" type="text/css" href="form.css">
    <title>登录表单</title>
</head>
<body ng-app="myApp">
    <div class="row">
        <div class="col-md-offset-3 col-md-6 location ">
            <div class="panel panel-primary">
                <div class="panel-heading">
                    <div class="panel-title">登录</div>
                </div>
                <div class="panel-body">
                    <div class="row" ng-controller="loginCtrl">
                        <div class="col-md-12">
                            <form class="form-horizontal" name="loginForm"  ng-submit="submitForm()" novalidate>
                                <div class="form-group" >
                                    <label class="col-md-2 control-label">用户名：</label>
                                    <div class="col-md-10">
                                        <input type="text" class="form-control" name="name" ng-model="user.name" ng-class="{error:loginForm.name.$invalid&&!loginForm.name.$pristine}" ng-minlength="4" ng-maxlength="10"placeholder="用户名" required="">
                                        <p ng-show="loginForm.name.$error.minlength" class="help-block">name is too short</p>
                                        <p class="help-block" ng-show="loginFOrm.name.$error.maxlength">name is too long</p>
                                    </div>
                                </div>
                                <div class="form-group" >
                                    <label class="col-md-2 control-label">密码：</label>
                                    <div class="col-md-10">
                                        <input type="text" class="form-control" name="password" ng-model="user.password" placeholder="只能是数字、字母和下划线" ng-minlength="6" ng-maxlength="10"   ng-class="{error:loginForm.password.$invalid&&!loginForm.password.$pristine}" ng-pattern="/^[A-Za-z]{1}[0-9A-Za-z_]{2,29}$/" required="">
                                        <p class="help-block" ng-show="loginForm.password.$error.minlength">password is too short</p>
                                        <p class="help-block" ng-show="loginForm.password.$error.maxlength">password is too long</p>
                                    </div>
                                </div>
                                <div class="form-group">
                                    <div class="col-md-offset-2 col-md-10">
                                        <div class="checkbox">
                                            <label><input type="checkbox" ng-model="user.autoLogin">自动登录</label>
                                        </div>
                                    </div>
                                </div>
                                <div class="form-group">
                                    <div class="col-md-offset-2 col-md-10">
                                        <button class="btn btn-primary" ng-disabled="loginForm.$invalid">登录</button>
                                    </div>
                                </div>
                            </form>
                        </div>
                    </div>
                </div>
            </div>
        </div>
    </div>

    <script src="../lib/angular.min.js"></script>
    <script type="text/javascript" src="../lib/jquery-2.2.0.min.js"></script>
    <script type="text/javascript" src="../lib/bootstrap-3.3.5/js/bootstrap.min.js"></script>
    <script type="text/javascript" src="form.js"></script>
</body>
</html>

js

'use strict';

var myApp = angular.module('myApp',[]);
myApp.controller('loginCtrl',['$scope', function($scope){
    $scope.user={
    /*    name: "ch",
        password: 1,
        autoLogin: true*/
    };
    $scope.submitForm = function(){
        var formData = {
            name : $("input[name=name]").val(),
            password : $("input[name=password]").val()
        };
        console.dir(formData);
        alert(formData);
        $.ajax({
            type:"post",
            url:"",
            dataType:"json",
            data:formData,
            success:function(data){
                alert("submit success!");
            }
        });
/*        event.preventDefault();*/
    }
}])

css

.location{
    margin-top: 150px; 
}
.error{
    color:red;
    border-color: red;
    -webkit-box-shadow: 0 0 6px #f8b9b7;
    -moz-box-shadow: 0 0 6px #f8b9b7;
    box-shadow: 0 0 6px #f8b9b7;
}

bootstrap file文件上传

最近因为项目需要研究了下bootstrap fileinput的使用，来记录下这几天的使用心得吧。

前台html页面的代码

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
<form role="form" id="importFile" method="post"
					enctype="multipart/form-data">
					<div class="row">
						<div class="col-md-3" >
							<input type="radio" name="excelType" class="radio" id="station" value="station"><label for="station">&nbsp;参数1</label>
						</div>
						<div class="col-md-3  ">
							<input type="radio" name="excelType" class="radio" id="line" value="line"><label for="line">&nbsp;参数2</label>
						</div>
						<div class="col-md-3 ">
							<input type="radio" name="excelType" class="radio" id="pipeline" value="pipeline"><label for="pipeline">&nbsp;参数3</label>
						</div>
						<div class="col-md-3 ">
							<input type="radio" name="excelType" class="radio" id="jdj" value="jdj"><label for="jdj">&nbsp;参数4</label>
						</div>
					</div>
					<input id="excelFile" name="excelFile" class="file-loading"
						type="file" multiple accept=".xls,.xlsx" data-min-file-count="1"
						data-show-preview="true"> <br>
				</form>

js进行插件的初始化和一些参数的设置

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
$("#excelFile").fileinput({
					uploadUrl:"rest/import/importExcel",//上传的地址
					uploadAsync: true,
					language : "zh",//设置语言
					showCaption: true,//是否显示标题
					showUpload: true, //是否显示上传按钮
					browseClass: "btn btn-primary", //按钮样式 
					allowedFileExtensions: ["xls", "xlsx"], //接收的文件后缀
					maxFileCount: 10,//最大上传文件数限制
					maxFileSize : 1024 * 200, // 限制大小为200MB，单位为kb，如果为0表示不限制文件大小
			        msgSizeTooLarge : "文件太大,不能超过200M",
					uploadAsync: true,
					previewFileIcon: '<i class="glyphicon glyphicon-file"></i>',
					allowedPreviewTypes: null, 
					previewFileIconSettings: {
						'docx': '<i class="glyphicon glyphicon-file"></i>',
						'xlsx': '<i class="glyphicon glyphicon-file"></i>',
						'pptx': '<i class="glyphicon glyphicon-file"></i>',
						'jpg': '<i class="glyphicon glyphicon-picture"></i>',
						'pdf': '<i class="glyphicon glyphicon-file"></i>',
						'zip': '<i class="glyphicon glyphicon-file"></i>',
					},
					uploadExtraData: function() {
						var extraValue = null;
						var radios = document.getElementsByName('excelType');
						for(var i=0;i<radios.length;i++){
							if(radios[i].checked){
								extraValue = radios[i].value;
							}
						}
						return {"excelType": extraValue};
					}
				});

注意： uploadExtraData函数中只能用原生JS来取值，不能用JQuery来获取值，此参数用来向后台传递附加参数，以方便处理，最简单的写法是：

1
2
3
uploadExtraData: {
						"excelType": document.getElementByID('id')
					}

文件上传成功后的回调方法

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22

$("#excelFile").on("fileuploaded", function(event, data, previewId, index) {
	alert("上传成功!");
	$("#excelImport").modal("hide");
	//后台处理后返回的经纬度坐标json数组，
	var array = data.response;
	console.dir(array);
	//jquery循环取经纬度坐标
	$.each(array,function(index,latAndLon){
		var lon = latAndLon.lon;
		var lat = latAndLon.lat;
		var point =  new Point(lon, lat, map.spatialReference);
		var symbol = new esri.symbol.SimpleMarkerSymbol().setStyle(
			    SimpleMarkerSymbol.STYLE_CIRCLE).setColor(
			    new Color([255,255,0,0.5]));
		var attr = {"address": "addressName" };
		var infoTemplate = new esri.InfoTemplate("标题", "地址 :${address}");
		var graphic = new Graphic(point,symbol,attr,infoTemplate);
		map.graphics.add(graphic);
	});
	
});

arcgis中点的定义的两种方法：

1
2
var point =  new Point(lon, lat, new SpatialReference({ wkid: 4326 }));
var point =  new Point(lon, lat, map.spatialReference);

后台Java处理，使用common fileupload插件来实现，此处限制只能上传excel 文件

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
public JSONArray importExcel(HttpServletRequest request,
		HttpServletResponse response) throws Exception {

	final String allowFileSuffix = "xls,xlsx";
	Subject subject = SecurityUtils.getSubject();
	String uname = (String) subject.getPrincipal();
	String basePath = "D:" + File.separator + uname;
	File tmpDir = new File(basePath);// 初始化上传文件的临时存放目录
	JSONArray jsonArry = new JSONArray();

	if (!tmpDir.exists()) {
		tmpDir.mkdirs();
	}

	// 检查输入请求是否为multipart表单数据。
	if (ServletFileUpload.isMultipartContent(request)) {
		DiskFileItemFactory dff = new DiskFileItemFactory();// 创建该对象
		dff.setRepository(tmpDir);// 指定上传文件的临时目录
		dff.setSizeThreshold(1024000);// 指定在内存中缓存数据大小,单位为byte
		ServletFileUpload sfu = new ServletFileUpload(dff);// 创建该对象
		// sfu.setFileSizeMax(5000000);//指定单个上传文件的最大尺寸
		sfu.setSizeMax(10000000);// 指定一次上传多个文件的总尺寸
		sfu.setHeaderEncoding("utf-8");
		String type = null;

		List<FileItem> fileItems = new ArrayList<FileItem>();
		try {
			fileItems = sfu.parseRequest(request);
		} catch (FileUploadException e1) {
			System.out.println("文件上传发生错误" + e1.getMessage());
		}
		String fullPath = null;
		String fileName = null;
		for (FileItem fileItem : fileItems) {

			// 判断该表单项是否是普通类型
			if (fileItem.isFormField()) {
				String name = fileItem.getFieldName();// 控件名
				String value = fileItem.getString();
				if (name.equals("excelType")) {
					type = value;
				}
			} else {
				String filePath = fileItem.getName();
				if (filePath == null || filePath.trim().length() == 0)
					continue;
				fileName = filePath.substring(filePath
						.lastIndexOf(File.separator) + 1);
				String extName = filePath.substring(filePath
						.lastIndexOf(".") + 1);
				fullPath = basePath + File.separator + fileName;
				if (allowFileSuffix.indexOf(extName) != -1) {
					try {
						fileItem.write(new File(fullPath));
					} catch (Exception e) {
						e.printStackTrace();
					}

				} else {
					throw new FileUploadException("文件格式不正确");
				}
			}
		}
		if (type.equals("station")) {
			jsonArry = readExcel(fullPath, fileName);
		} else if (type.equals("line")) {
			System.out.println("===============:line");
		} else if (type.equals("pipeline")) {
			System.out.println("===============:pipeline");
		} else if (type.equals("jdj")) {
			System.out.println("===============:jdj");
		}
	}
	return jsonArry;
}

// 判断文件类型
public Workbook createWorkBook(InputStream is, String excelFileName)
		throws IOException {
	if (excelFileName.toLowerCase().endsWith("xls")) {
		return new HSSFWorkbook(is);
	}
	if (excelFileName.toLowerCase().endsWith("xlsx")) {
		return new XSSFWorkbook(is);
	}
	return null;
}

public JSONArray readExcel(String basePath, String fileName)
		throws FileNotFoundException, IOException {
	File file = new File(basePath);
	Workbook book = createWorkBook(new FileInputStream(file), fileName);
	JSONObject jsonObj = new JSONObject();
	JSONArray jsonArry = new JSONArray();
	Sheet sheet = book.getSheetAt(0);
	for (int i = 3; i < sheet.getLastRowNum(); i++) {
		Row row = sheet.getRow(i);
		String lon = row.getCell(2).getNumericCellValue() + "";
		String lat = row.getCell(3).getNumericCellValue() + "";
		jsonObj.put("lat", lat);// 纬度
		jsonObj.put("lon", lon);// 经度
		jsonArry.add(jsonObj);
	}
	System.out.println(jsonArry.toString());
	return jsonArry;
}

基本流程终于走通啦，修改后记录一下跟大家分享，欢迎拍砖~~~

关于HTML5的一些零碎

[TOC]

属性

tabindex

tabindex 属性规定元素的 tab 键控制次序

<input type="text" tabindex="1">

defer

现在html5的出现开始全面支持defer。defer 属性规定当页面已完成加载后，才会执行脚本。defer 属性仅适用于外部脚本（只有在使用 src 属性时）

async

async 属性规定一旦脚本可用，则会异步执行

novalidate

通过将novalidate属性放置到form元素上，form元素的原生校验特征就会忽略，这样就可以防止它同你的自己写的JavaScript的校验方法起冲突。

Sublime初识

[TOC]

这款编辑器已经被安利很久了，总算是开始使用了，果然开局总是很不顺利的，各种问题啊。。。跟大家分享一下解决方法吧。

emmet的安装

首先安装Package Control：

  1. Ctrl+~打开控制台，在控制台输入如下的Python命令
import  urllib.request,os;pf='Package Control.sublime-package';ipp=sublime.installed_packages_path();urllib.request.install_opener(urllib.request.build_opener(urllib.request.ProxyHandler()));open(os.path.join(ipp,pf),'wb').write(urllib.request.urlopen('http://sublime.wbond.net/'+pf.replace(' ','%20')).read())
  1. 重启后，如果在Preferences->package settings中有看到package control这一项，则安装成功。

    安装emmet

  2. Ctrl+Shift+P：调出控制面板
  3. 输入Install Package，并回车
  4. emmet安装

PyV8的问题

如果提示需安装PyV8，则需要把PyV8下载下来解压到

enter description here
这个地址可以通过Preferences->Browse Packages直接进入以免不好找啦
具体内容如下：

enter description here

再次重启一下就ok可以使用了，初次体验感觉很好，果然可以大大提高编码速度，熟悉之后可以大幅度简化代码啊，nice！

Intellij IDEA

根据近期的项目需求，抛弃我们所熟悉的eclipse转向IntelliJ IDEA,这款据说最好用的java集成环境，习惯性的记录一下使用过程中遇到的问题。
支持Sublime风格
Intellij IDEA没有eclipse、Myeclipse的工作空间（workspace）的概念，是以project为单位，所以多个项目会有多个窗口

bin目录下的几个重要文件

enter description here

idea.properties

配置文件目录

可以设置个性化环境配置的地址。

关于servlet理解与认识

[TOC]

关于servlet理解与认识

serlvet初识

一种运行于服务器端的java程序，用来与数据库进行交互，响应前台客户的请求，由web服务器加载并运行的。通俗来讲servlet就是用于后台开发，调用DAO
或者业务逻辑层来完成数据库操作，还可以用来接受表单参数和完成页面跳转。
Servlet技术是web开发中的一个核心部分，包括3各重要部分：Servlet开发、Filter开发和Listener开发。
前台和后台连接的一个桥梁。
JSP页面也是通过转译成servlet后才执行的。

servlet开发

servlet本身就是一个简单的java类，只是所有的servlet类都必须继承HttpServlet，里面包含一个doGet、doPost方法

servlet执行

servlet的执行需要在web.xml中配置一个servlet节点和servlet-mapping节点，分别用来配置servlet名称、所在类和通过节点名称为其指定的映射路径。

<servlet>
    <servlet-name>HelloServlet</servlet-name>
    <servlet-class>com.servlet.HelloServlet</servlet-class>
</servlet>
<servlet-mapping>
    <servlet-name>HelloServlet</servlet-name>
    <url-pattern>/servlet/helloServlet</url-pattern>
</servlet-mapping>

servlet生命周期

  1. 加载到servlet引擎
  2. 调用init()方法初始化
  3. 通过doGet()、doPost()方法处理客户端请求
  4. 调用destory()方法进行销毁处理
  5. 通过垃圾收集器进行收集清理

    Filter开发

    Filter同servlet一样，也是一个java类，需要实现Filter接口,实现Filter接口中定义的init(),doFilter()和destroy()方法。
    Filter的执行也需要向Servlet一样在web.xml中配置
<Filter>
    <FilterFilter-name>HelloFilter</Filter-name>
    <Filter-class>com.servlet.HelloFilter</Filter-class>
</Filter>
<Filter-mapping>
    <Filter-name>HelloFilter</Filter-name>
    <url-pattern>/servlet/helloFilter</url-pattern>
</Filter-mapping>

Filter生命周期

  1. 加载Filter
  2. 调用init()方法初始化
  3. 通过doFilter()方法处理客户端请求
  4. 调用destory()方法进行销毁处理
  5. 通过垃圾收集器进行收集清理

JSP浅析

最近项目中遇到一个问题，当前JSP页面中获取到得session值，js中无法获取，引发我们对一个问题的思考，JSP页面的解析过程到底是什么，js代码先执行
还是java代码先解析？？？带着这个疑惑研究了一下这方面知识，好多已经遗忘的基本知识。废话不多说，下面来看一下jsp页面的解析过程。
jsp页面的执行分为两个阶段：

  • 转译阶段
    1. 服务器将jsp转译成servlet的源文件；
    2. 再将Servlet源代码编译为Class文件；
  • 请求阶段
    1. 将class文件加载到内存执行
    2. 结果返回客户端
|