码迷,mamicode.com
首页 > 其他好文 > 详细

ssm+maven+bootstrap尝试

时间:2016-04-29 19:02:58      阅读:169      评论:0      收藏:0      [点我收藏+]

标签:


     谨以此篇文章来记录4月份开发那点事儿。

     从去年12月份换工作到现在,主要内容是做接口开发,调用阿里云,Azure,vmware,openstack等国内外云平台restful接口,主要包括创建虚拟机,虚机操作,网络VPC,负载均衡创建等等API操作吧。我做过的最‘牛’的一件事儿就是一次接口调用把某云平台的数据库搞垮了,导致真个机房宕机好几天,可能这个平台太脆了了吧技术分享,平台的运维人员都怕了我,哈哈是不是很搞笑。说起来其实蛮无聊的,不过能学的东西还是非常多。互联网公司的项目还是挺不错的,需要多加努力。从3月份公司旅游回来到到现在,接口任务基本完成,其他同事则是负责前台业务的开发,我负责的接口部分最终是以jar包形式提供他们调用。换句话说,接口完成了我一般就没什么太多的事情了,抽空就跟同事学学jquery,bootstrap等等前台技术。虽说技术要精,学一点前台还是不错的。

     闲暇时间学学spring+springmvc+mybatis+boostrap搭建一个系统平台,这些东西其实都是在陪他们夜里发版本的时候自己做的,刚好不会的东西直接问同事,他们也很乐于帮助我,这就是做技术最快乐的地方技术分享哈哈。

  好了,废话不多说啦,开始今天的主题,先看看系统平台的登录页面吧......有些看到后会觉得很眼熟,没错,这个前台模板是网上下载的,做了些调整和校验

技术分享

   在登录表单中利用jquery.validate.js做了相关校验,是不是看上去更舒服点呢,哈哈

 技术分享

  注册页面:

技术分享

这里注明下jquery.validate.js的用法:

1、首先在页面引入js库;

<pre name="code" class="html"><script src="<%=request.getContextPath()%>/static/javascript/jquery-validate/jquery.validate.js"></script>


2、针对需要提交的form表单进行如下校验;

       // 登录表单校验;
	$("#loginForm").validate({ 
		// 指定展示错误信息的dom元素; 
        errorElement : 'span', 
        // 错误样式; 红色框
        errorClass : 'help-block',
        // 提交表单后,未通过验证的表单中DOM元素会获得焦点,默认为true;为false时dom将不会获得焦点;
        focusInvalid : true, 
        // 字段校验规则;
        rules : {  
        	user_alias : {required : true},  
        	password : {required : true}
        }, 
        // 错误详细提示信息;
        messages : {  
        	user_alias : {required : "请输入用户名!" },
        	password : {required : "请输入密码!" }
        },  

        highlight : function(element) {  
            $(element).closest('.form-group').addClass('has-error');  
        },  
        // 表单校验成功后;
        success : function(label) {
            label.closest('.form-group').removeClass('has-error');  
            label.remove();
        },  
        // 表单校验失败时,相关DOM元素会增加错误样式;
        errorPlacement : function(error, element) {
            element.parent('div').append(error);  
        }
	});
 好了,现在登录进去,哦忘记了,数据库这里用的mysql5.5版本,登录后主页如下:

技术分享

  模板左侧提供了丰富的组件,可以较快的了解bootstrap的各个组件如何设计,还是比较不错的,右侧是主页面,这个风格我还是比较喜欢的,你们觉得呢?哈哈,好了,看下个人资料修改页面:

技术分享

系统设计到的表单我都做了校验,主要用到的是jquery.validate.js,另外通知框用的是toastr.js 这两个插件比较喜欢,可以按照自己的风格进行自定义样式和校验规则,比较不错。好了,先写到这里吧,这就是我两周业余时间来干的事儿,后续的实现功能罗列了一下几点:

1、增加对列表和树形结构的操作;

2、通过接口获取数据json,列表展示同时操作某个记录;

3、引入百度地图API,实现一个路线搜索的模板,哈哈,虽然这个功能和目前系统无关联,无所谓啦,喜欢就去做;

4、编写拦截器,对所有请求进行拦截处理;

5、引入aop编程,对系统日志进行拦截;

。。。。。。巴拉巴拉等等吧,其实想做的东西还有很多呢,太细的就先不写了,先记录到这里吧,ok,写的不好的地方各位多多指点,目前工作一年半,还是个菜鸟中的菜鸟


ace模板的下载地址:http://download.csdn.net/detail/cherishme1988/9501151

ssm+maven+bootstrap尝试

标签:

原文地址:http://blog.csdn.net/cherishme1988/article/details/51234944

(0)
(0)
   
举报
评论 一句话评论(0
登录后才能评论!
© 2014 mamicode.com 版权所有  联系我们:gaon5@hotmail.com
迷上了代码!