HTML 透明登录框的实现

2014-08-17 HTML

html登录界面,看似简单,无非就是一个底图,一个名称,一个登录,一些底部信息,在没有美工的情况下,纯代码实现还是有些坑。

本文详解透明的登录框的CSS实现。

#设计界面元素 在把主页面的 html 的元素规定好。主要由底图、名称、登录表单、底部信息组成。如下:

<img  src="img/bg.jpg"  />
<div id="login_id">
    <h1>wwww.waylau.com<br/>信息管理系统</h1>
    <form id="login_form">
        <input name="loginname" type="text" class="loginuser"    placeholder="用户名"   />
        <input name="password" type="password" class="loginpwd"   placeholder="密码"  />
        <input id="login" type="button" class="loginbtn" value="登录" />
    </form>
</div>

<div id="buttom_id">
    版权所有:<a href="http://wwww.waylau.com" target="_blank">http://wwww.waylau.com</a>
</div>

body 的 底图我的需求是整张图拉伸铺满,而不是重复显示,或者留空。虽然 bodybackground:url(xxx) 可以插入底图,但是 设为no-repeat的话,如果图太小,会留空,background-size设置没有达到预期效果。所以直接用了img.

#样式 ##整体样式 整体是居中的

body {
    text-align: center;
    margin: 0;
}

##底图的样式

img {
    width:100% ;height:100%;position:absolute;
	top:0;left:0;right:100;bottom:500;z-index:-1;
}

拉伸图片填充整个界面,其中z-index:-1; 就是让图片的深度降一级,意思是说,图片是在所有元素的后面。

##表单样式 输入表单,我的需求是要透明(正常的input简直俗透了),只显示一个底部输入线条

#login_form input {
    border: 0;
    BACKGROUND-COLOR: transparent;
    BORDER-BOTTOM: #ffffff 1px solid;
    BORDER-LEFT: #ffffff 1px solid;
    COLOR: #ffffff;
    HEIGHT: 18px;
    font-size: 12pt
}

border: 0;就是不要显示输入框的边框。

BACKGROUND-COLOR: transparent;这里是设置了透明。

BORDER-BOTTOM就是 用来显示底线的,同理BORDER-LEFT BORDER-RIGHTBORDER-TOP就是设置上下左右的边框线条。

#整体效果

整体效果

么么滴,相册的水印真讨厌。╯﹏╰

另外底图来自《星际争霸》原画,当年最爱的游戏Y(^_^)Y

源码下载


将SVN服务器里面的项目删除

2014-08-04 SVN

平常用 svn 插件进行项目开发管理,如果要删除项目,就需要安装TortoiseSVN.

安装成功后,右键 就可以看到TortoiseSVN TortoiseSVN

提示要求输入服务器或者项目的地址 地址

需要用户名、密码 验证

右击项目,点击delete delete

日志里写点啥吧~,点击OK即可 OK


Hibernate tools介绍、安装、使用

2014-08-02 Hibernate

##介绍 http://hibernate.org/tools/

##版本 http://tools.jboss.org/downloads/overview.html

选择对应的版本

至今(2014-12-14) Eclipse Luna 4.4的最新版本是 `JBoss Tools 4.2.1.Final

##下载

下载安装方式有如下三种:

###1.从marketplace

http://tools.jboss.org/downloads/jbosstools/luna/4.2.0.Beta3.html#marketplace

###2.URL站点更新

http://tools.jboss.org/downloads/jbosstools/luna/4.2.0.Beta3.html#update_site

###3.插件下载

http://tools.jboss.org/downloads/jbosstools/luna/4.2.0.Beta3.html#zips

##使用

htools7.jpg

###1. 创建Hibernate Configuration File(cfg.xml)

根据要求填入相关配置,测试下能否连接上数据库就行了

###2. 创建Hibernate Console Configuration

选择项目和数据库连接(连接 emsc 在上一步中已经创建了)

htools8.jpg

选择方言

htools9.jpg

###3. 使用 Hibernate Code Generation Configurations 自动生成实体

htools3.jpg

选择 上一步中创建好的 Console Configuration,填写包名

htool.jpg

选择要生成的的文件类型

htools2.jpg

会有一个 “The serializable class SdUser does not declare a static final serialVersionUID field of type long” 的警告

htools4.jpg

用 eclipse 自动处理这个警告,生成一个 serial version ID 即可

htools5.jpg

完成

htools6.jpg

##错误解决

Problems while reading database schema

org.hibernate.HibernateException: could not instantiate RegionFactory 

换个项目没有问题。jar 冲突。换不了jar 就再另外一个项目里面把bean ,xml 给生成完了再把代码移回原项目

##参考


SQLserver不同数据库不同表之间的复制

2014-08-01 SQLServer

1.将EEMS库中的Dec_TownInfo表中的数据 复制到 OEM库的c_townInfo中(c_townInfo表事先存在),先要将表的主键设为自增长类型,且列出列名

SET IDENTITY_INSERT  [OEM].[dbo].[c_townInfo] ON

insert into  [OEM].[dbo].[c_townInfo] (id,name,city_id,code,logo) select * FROM [EEMS].[dbo].[Dec_TownInfo]

2.将EEMS库中的Dec_TownInfo表中的数据 复制到 OEM库的c_townInfo中(c_townInfo表事先不存在)

SELECT * INTO  [OEM].[dbo].[c_townInfo] FROM [EEMS].[dbo].[Dec_TownInfo]


用Jersey构建RESTful服务9--Jersey+SQLServer+Hibernate4.3+Spring3.2+AngularJS

2014-07-31 Java Jersey REST AngularJS

一、总体说明

本例运行演示了用 Jersey 构建 RESTful 服务中,如何集成 angular,用MVC分层的方式访问 RESTful 服务。

二、环境

  • 1.上上文的项目 Demo7
  • 2.angular 库 ,本例为1.2.3 版本
  • 3.样式 bootstrap-3.1.1.min.js

三、配置

1.完成项目结构

配置 创建相应的目录结构

angularjs 、bootstrap 的js,css文件放别放入相应的目录,

在js目录下再创建 app.jscontroller.js

在partials目录下再创建 create.htmllist.htmldetail.html

完整目录结构如下结构

  1. list.html填入如下内容,主要是显示用户列表ng-repeat为 angularjs 迭代器 ``作用是数据绑定:
	 
	<div class="pull-right">
		<a href="#/create" class="btn btn-default" title="Create"><span class="glyphicon glyphicon-plus"></span></a>
	</div>
	<div class="page-header">
		<h3>Users</h3>
	</div>
	<hr />
	<li ng-repeat="user in users | filter:query | orderBy:orderProp"  >
	
		<div class="pull-right">
		   <a href="#/users/"  class="btn btn-xs btn-default" title="edit">
		   <span class="glyphicon glyphicon-pencil"></span></a>
		</div>
		<h4>userId: </h4>
		<p>userName:<a href="#/users/"></a>   Age:</p>
	<hr />
	</li>
	
	<hr />
  1. 修改create.html用来添加用户信息,ng-model是模型

	<div class="page-header">
		<h3>Create</h3>
	</div>
	
	<form role="form" name="userForm">
  
     <div class="row">&nbsp;</div>
     <div class="row" ng-class="{'has-error': userForm.userId.$invalid}">
      <div class="col-md-1">
        <i ng-show="userForm.url.$error.required" 
          class="glyphicon glyphicon-pencil"></i>
        <label for="urlInput">userId</label>
      </div>
      <div class="col-md-4">
        <input 
          type="test" 
          class="form-control" id="urlInput"
          name="userId" ng-model="user.userId" required> 
      </div>
    </div>
    <div class="row">&nbsp;</div>
    
    <div class="row" ng-class="{'has-error': userForm.userName.$invalid}">
      <div class="col-md-1">
        <i ng-show="userForm.userName.$error.required" 
          class="glyphicon glyphicon-pencil"></i>
        <label for="nameInput">userName</label>
      </div>
      <div class="col-md-4">
        <input 
          type="text" 
          class="form-control error" id="nameInput"
          name="userName" 
          ng-model="user.userName" 
          required> 
      </div>      
    </div>
    
    <div class="row">&nbsp;</div>
    <div class="row" ng-class="{'has-error': userForm.url.$invalid}">
      <div class="col-md-1">
        <i ng-show="userForm.url.$error.required" 
          class="glyphicon glyphicon-pencil"></i>
        <label for="urlInput">age</label>
      </div>
      <div class="col-md-4">
        <input 
          type="text" 
          class="form-control" id="urlInput"
          name="age" ng-model="user.age" required>
      </div>
    </div>

    <div class="row" ng-hide="showConfirm">
      <div class="col-md-5">
        <a href="#users" class="btn">Cancel</a>
        <button 
          ng-click="add()" 
          ng-disabled="isClean() || userForm.$invalid"
          class="btn btn-primary">Save</button>
 
      </div>
    </div>

  1. 修改detail.html用来显示用户信息并提供修改、删除等功能

  <form role="form" name="userForm">
  
     <div class="row">&nbsp;</div>
     <div class="row" ng-class="{'has-error': userForm.userId.$invalid}">
      <div class="col-md-1">
        <i ng-show="userForm.url.$error.required" 
          class="glyphicon glyphicon-pencil"></i>
        <label for="urlInput">userId</label>
      </div>
      <div class="col-md-4">
        <input 
          type="test" 
          class="form-control" id="urlInput"
          name="userId" ng-model="user.userId" required> 
      </div>
    </div>
    <div class="row">&nbsp;</div>
    
    <div class="row" ng-class="{'has-error': userForm.userName.$invalid}">
      <div class="col-md-1">
        <i ng-show="userForm.userName.$error.required" 
          class="glyphicon glyphicon-pencil"></i>
        <label for="nameInput">userName</label>
      </div>
      <div class="col-md-4">
        <input 
          type="text" 
          class="form-control error" id="nameInput"
          name="userName" 
          ng-model="user.userName" 
          fend-focus="focusUserNameeInput"
          required> 
      </div>      
    </div>
    <div class="row">&nbsp;</div>
    <div class="row" ng-class="{'has-error': userForm.url.$invalid}">
      <div class="col-md-1">
        <i ng-show="userForm.url.$error.required" 
          class="glyphicon glyphicon-pencil"></i>
        <label for="urlInput">age</label>
      </div>
      <div class="col-md-4">
        <input 
          type="text" 
          class="form-control" id="urlInput"
          name="age" ng-model="user.age" required>
      </div>
    </div>
    
    
    <div class="row" ng-hide="showConfirm">&nbsp;</div>

    <div class="row" ng-hide="showConfirm">
      <div class="col-md-5">
        <a href="#users" class="btn">Cancel</a>
        <button 
          ng-click="save()" 
          ng-disabled="isClean() || userForm.$invalid"
          class="btn btn-primary">Save</button>
        <button 
          ng-click="remove()"
          ng-show="user.userId" 
          class="btn btn-danger">Delete</button>
      </div>
    </div>

 
  </form>

  1. 修改index.html作为主页面,嵌入其他子页面,ng-app声明这个是模块,ng-controller说明他的控制器叫ListCtrl,ng-view用来存放子视图(页面)。

	<!doctype html>
	<html ng-app="appMain" ng-controller="ListCtrl">
	<head>
	    <meta charset="utf-8"/>
	 	<meta name="viewport" content="width=device-width, initial-scale=1.0">
	    <link rel="stylesheet" href="css/bootstrap.min.css" type="text/css"/>
	</head>
	<body >
		<!-- navbar -->
	 	<div class="container ng-view"></div>
		<!-- footer -->
		<div id="footer" class="hidden-xs">
		  <div class="container">
		    <p class="text-muted">
		      Project Example - by <a href="http://www.waylau.com" target="_blank">www.waylau.com</a> | 
		      <a href="https://github.com/waylau" target="_blank">GitHub Project</a>
		    </p>
		  </div>
		</div>
	
		<script src="js/bootstrap-3.1.1.min.js"></script>
		<script src="js/angular-1.2.3.js"></script>
		<script src="js/angular-resource-1.2.3.js"></script>
		<script src="js/angular-route-1.2.3.js"></script>
		<script src="js/angular-cookies-1.2.3.js"></script>
		
	    <script src="js/app.js"></script>
	    <script src="js/controller.js"></script>
	</body>
	</html>

  1. 修改app.js ,声明模块appMain,提供路由功能,说明了调转到哪个页面,用哪个控制器

	angular.module('appMain', ['ngRoute']).config(['$routeProvider', function ($routeProvider) {
	    $routeProvider.
	        when('/users', {templateUrl: 'partials/list.html', controller: ListCtrl}).
	        when('/users/:userId', {templateUrl: 'partials/detail.html', controller: DetailCtrl}).
			when('/create', {
				templateUrl: 'partials/create.html',
				controller: CreateController
			}).
	        otherwise({redirectTo: '/users'});
	}]);
  1. 修改controller.js,控制器。主要是对业务逻辑的操作,常见的CURD功能,http访问RESTful接口,并且返回数据

	var url = 'http://localhost:8089/RestDemo/rest';
	
	function ListCtrl($scope, $http) {
	    $http.get( url + '/users' ).success(function(data) {
	        $scope.users = data;
	    });
	
	    $scope.orderProp = 'age';
	}
	
	function DetailCtrl($scope, $routeParams, $http) {
	 
	    $http.get( url + '/users/'+$routeParams.userId).success(function(data) {
	        $scope.user = data;
	    });
	    
		$scope.save = function() {
			$http.put( url + '/users',  $scope.user).
			success(function(data, status, headers, config){
				$location.path('/');
	        }).error(function(data, status, headers, config){
	            alert("error"+status);
	        }) ;
		};
		
		$scope.remove =  function(){
			$http({
				method:'DELETE',
				url: url + '/users/'+  $scope.user.userId ,
			})
			.success(function(data, status, headers, config){
				$location.path('/');
	        }).error(function(data, status, headers, config){
	            alert("error"+status);
	        }) ;
		};
	}
	 
	function CreateController($scope, $http) {
	 
	  
		$scope.add = function() {
			$http.post( url + '/users',  $scope.user).
			success(function(data, status, headers, config){
				$location.path('/');
	        }).error(function(data, status, headers, config){
	            alert("error"+status);
	        }) ;
		};
	}

四、运行

1.先运行项目

2.可以进行CURD操作

LIST

DETAIL

PS:本案例力求简单把 angularjs 访问 RESTful 服务展示出来,在Chrome,firefox,IE上做过测试。

本章源码jersey-demo9-sqlserver-hibernate-spring3-angularjs


用Jersey构建RESTful服务8--Jersey+SQLServer+Hibernate4.3+Spring3.2+jquery

2014-07-28 Java Jersey REST jQuery

#一、总体说明

本例运行演示了用 Jersey 构建 RESTful 服务中,如何集成 jQuery,用html作为客户端访问 RESTful 服务。

#二、环境

  • 1.上文的项目RestDemo
  • 2.jQuery 库 ,本例为1.7.1版本 #三、配置 配置
    1. 创建 jQuery 客户端的项目结构,在WebContent创建js,css两个目录,并把jQuery 库 放入js目录下,并在该目录下创建main,js空文件
  1. WebContent创建index.html:
	<!DOCTYPE HTML>
	<html>
	<head>
	<title>jquery Demo (人员管理系统)</title>
	<meta charset="utf-8"/>
	<link rel="stylesheet" href="css/styles.css" />
	 
	<script src="js/jquery-1.7.1.min.js"></script>
	<script src="js/main.js"></script>
	</head>
	
	<body>
		<div class="header">
	
			<button id="btnClear">Clear</button>
			<button id="btnRefreash">Refreash</button>
			更多实例访问:<a href="http://www.waylau.com" >www.waylau.com</a>
		</div>
	
	
		<div class="leftArea">
			<ul id="userList"></ul>
		</div>
	
		<form id="wineForm">
	
			<div class="mainArea">
	
				<label>Id:</label> <input id="userId" name="userId" type="text"  required/>
	
				<label>Name:</label> <input type="text" id="userName" name="userName" required> 
				<label>Age:</label> <input	type="text" id="age" name="age" required/>
				
				<button id="btnAdd">Add</button>
				<button id="btnSave">Save</button>
				<button id="btnDelete">Delete</button>
			</div>
	 
		</form>
	
	</body>
	</html>
  1. 修改main.js
	// The root URL for the RESTful services
	var rootURL = 'http://localhost:8089/RestDemo/rest/users';
	
	var currentUser;
	
	// Retrieve wine list when application starts 
	findAll();
	
	// Nothing to delete in initial application state
	$('#btnDelete').hide();
	
	$('#btnAdd').click(function() {
		addUser();
		return false;
	});
	
	$('#btnSave').click(function() {
	 
		updateUser();
		return false;
	});
	
	$('#btnClear').click(function() {
		newUser();
		return false;
	});
	
	
	$('#btnDelete').click(function() {
		deleteUser();
		return false;
	});
	
	$('#userList a').live('click', function() {
		findById($(this).data('identity'));
	});
	
	$('#btnRefreash').click(function() {
		findAll();
		return false;
	});
	 
	
	function newUser() {
		$('#btnDelete').hide();
		currentUser = {};
		renderDetails(currentUser); // Display empty form
	}
	
	function findAll() {
		console.log('findAll');
		$.ajax({
			type: 'GET',
			url: rootURL,
			dataType: "json", // data type of response
			success: renderList
		});
	}
	
	 
	function findById(id) {
		console.log('findById: ' + id);
		$.ajax({
			type: 'GET',
			url: rootURL + '/' + id,
			dataType: "json",
			success: function(data){
				$('#btnDelete').show();
	
				console.log('findById success: ' + data.userName);
				currentUser = data;
				renderDetails(currentUser);
			}
	 
		});
	}
	
	function addUser() {
		console.log('addUser');
		$.ajax({
			type: 'POST',
			contentType: 'application/json',
			url: rootURL,
			dataType: "json",
			data: formToJSON(),
			success: function(data, textStatus, jqXHR){
				alert('User created successfully');
				$('#btnDelete').show();
				$('#userId').val(data.userId);
			},
			error: function(jqXHR, textStatus, errorThrown){
				alert('addUser error: ' + textStatus);
			}
		});
	}
	
	function updateUser() {
		console.log('updateUser');
		$.ajax({
			type: 'PUT',
	
			contentType: 'application/json',
			url: rootURL,
			dataType: "json",
			data: formToJSON(),
			
			success: function(data, textStatus, jqXHR){
				alert('User updated successfully');
			},
			error: function(jqXHR, textStatus, errorThrown){
				alert('updateUser error: ' + textStatus);
			}
		});
	}
	
	function deleteUser() {
		console.log('deleteUser');
		$.ajax({
			type: 'DELETE',
			url: rootURL + '/' + $('#userId').val(),
			success: function(data, textStatus, jqXHR){
				alert('user deleted successfully');
			},
			error: function(jqXHR, textStatus, errorThrown){
				alert('delete user error');
			}
		});
	}
	
	function renderList(data) {
		// JAX-RS serializes an empty list as null, and a 'collection of one' as an object (not an 'array of one')
		var list = data == null ? [] : (data instanceof Array ? data : [data]);
	
		$('#userList li').remove();
		$.each(list, function(index, data) {
			$('#userList').append('<li><a href="#" data-identity="' + data.userId + '">'+data.userName+'</a></li>');
		});
	}
	
	function renderDetails(data) {
		$('#userId').val(data.userId);
		$('#userName').val(data.userName);
		$('#age').val(data.age);
	 
	}
	
	// Helper function to serialize all the form fields into a JSON string
	function formToJSON() {
		var userId = $('#userId').val();
		return JSON.stringify({
			"userId": userId == "" ? null : userId, 
			"userName": $('#userName').val(), 
			"age": $('#age').val() 
			});
	}
  1. css目录下创建styles.css文件
	* {
	  font-family: "Helvetica Neue", Helvetica, Arial, sans-serif;
	  font-size: 18px;
	}
	
	.header {
		padding-top: 5px;
	 
	}
	
	.leftArea {
		position: absolute;
		left: 10px;
		top: 70px;
		bottom: 20px;
		width: 260px;
		border:solid 1px #CCCCCC;
		overflow-y: scroll;
	}
	
	.mainArea {
		position: absolute;
		top: 70px;
		bottom: 20px;
		left:300px;
		overflow-y: scroll;
		width:300px;
	}
	
	.rightArea {
		position: absolute;
		top: 70px;
		bottom: 20px;
		left:650px;
		overflow-y: scroll;
		width:270px;
	}
	
	ul {
		list-style-type: none;
		padding-left: 0px;
		margin-top: 0px;
	}
	
	li a { 
		text-decoration:none;
		display: block;
		color: #000000;
		border-bottom:solid 1px #CCCCCC;
		padding: 8px;
	}
	
	li a:hover {
		background-color: #4B0A1E;
		color: #BA8A92;
	}
	
	input, textarea {
	  border:1px solid #ccc;
	  min-height:30px;
	  outline: none;
	}
	
	.mainArea input {
	  margin-bottom:15px;
	  margin-top:5px;
	  width:280px;
	}
	
	textarea {
		margin-bottom:15px;
	  	margin-top:5px;
		height: 200px;
	  	width:250px;
	}
	
	label {
		display:block;
	}
	
	button {
		padding:6px;
	}
	
	
	#searchKey {
		width:160px;
	}

#四、运行 1.先运行项目

2.可以进行CURD操作 CURD

PS:本案例力求简单把jquery访问 RESTful 服务展示出来,代码只在Chrome上做过测试。

本章源码https://github.com/waylau/RestDemo/tree/master/jersey-demo8-sqlserver-hibernate-spring3-jquery


Spring 4.x 与可选的第三方库的关系

2014-07-26 Java Spring

1.Spring 4唯一的外部强制性的依库是 jakarta commons-logging

2.Spring 4与可选的第三方库一般只支持在2010年底或后来发布的版本:特别是,Hibernate 3.6+, EhCache 2.1+, Quartz 1.8+, Groovy 1.8+, and Joda-Time 2.0+。作为另外,Spring 4 要求最近的Hibernate Validator 4.3 +,并支持Jackson 2.0+Jackson 1.8/1.9只保留对 Spring 3.2 支持;现在是处在废弃的状态)。

3.Spring 4 对低支持到 JDK 6 update 18,在新项目中,最好用Java 7/8.

4.Java EE 6/7现在被认为是Spring 4的最低标准。建议使用JPA 2Servlet 3规范。为了兼容Google App Engine和老旧的应用,它可以部署 Spring4应用到servlet 2.5环境。然而,强烈建议用 Servlet 3+作为测试环境

5.Gradle作为项目构建工具

参考:spring-framework-reference (v4.0.6Release)


Way Lau

Software Engineer and Full Stack Developer, now work and live in Shenzhen, China. Detail

Donate

See the list of Donors.