前言最近好久没写文章了，生活节奏忙忙碌碌，博客相关的东西不能做成文章来说明详细。大部分都是和SEO相关的，但是真正会用的人不多，所以过段时间再回顾一下目前开发的高校培训系统的网页项目。整个团队只有我一个人开发，所以我负责需求分析、原型设计、UI/UE设计等工作。其他组员和老师负责javaweb后台。个人从框架开发的角度谈谈框架开发效率和效果的意义。前端页面开发框架常见的网页框架网页开发的框架只有几个是大家常用和熟悉的。页面布局框架：Bootstrap、MaterializeJS框架：Jquery乍一看好像有点少见。其实只要开发网站的要求不是特别多，基本就够用了，有的甚至会用到更少的JS。前端页面的开发在开发的时候是最简单的，因为需求不多。其实复杂的话，会用到更多的H5和CSS3的东西，再加上JS和Ajax。框架简介Bootstrap确实是一个强大的框架，就不多介绍了。就像它的slogan一样。Bootstrap是最流行的HTML、CSS和JS框架，用于开发响应式、移动优先的Web项目。为所有开发者和所有应用场景而设计。Bootstrap使前端开发更快、更容易。所有开发者都可以快速上手，所有设备都可以适配，所有项目都适用。诚然，目前很多网页都使用这个框架，确实为开发省了很多功夫，但是有些大公司的网页，把里面需要用到的组件封装到自己的里面，改改用。新手可能很难上手，自己DIY。建议按照文档中的方法调用。等到真正需要集成代码时，再将代码独立合并到项目中。学习如何将别人的框架组件的代码集成到自己项目的CSS和JS中，真的很有用，因为很多下载的框架都是压缩过的，体积比较大。如果只使用一小部分JS和CSS样式，就有点大材小用了。所以你必须将相应的组件合并到你自己的项目中。Materialise这个来自谷歌的框架可能没有Bootstrap那么出名，但是它的设计、配色和动画效果似乎是目前框架中最完美的！官网给出了很多组件的效果和使用方法，大家自己去看看效果吧。物化。除了它的其他页面布局，我最看重它的色表和它给出的模板页面，可以大大减少前端对网页设计和布局的困惑，因为没有独立的平面设计师来规划整个布局，前端开发可以借助框架更快的开发出想要的效果，好看。总结其实Jquery没有提到，因为这个JS框架其实对开发用处不大，主要是框架本身需要Jquery来支持，是必须的，因为它让JS语言更美观实用，写手更少，多做。其实最后我并没有使用上面提到的框架，而是发现了一个国外团队组建的新框架。这个框架结合了Google的MaterialDesignStandards和Bootstrap。使用后发现结合了Materialize框架的一些优点和Bootstrap的一些布局特性，对两者共享的组件进行了优化和美化。配色和动画效果主要参考了Material，使得Bootstrap的一些组件更加生动，提升了用户体验。稍后将详细描述该框架。Propeller前后页面框架什么是propeller？如前所述，它是一个结合了Materialize和Bootstrap框架的极其易用的前后台。我更关注一些组件在后台的效果。比如需要用到很多背景，比如图表、数据表格、日历选项等。虽然选项不多，但也够用了。使用效果登录页面后台主页面因为Propeller提供了包含其组件的后台管理页面，所以开发起来并不困难。登录模块使用了认证框架，后面会提到，然后根据项目需求DIY设置一些东西和样式。让开发效率得到解放和提升，方便二次开发。后台部分难点主要在于二期开发可能涉及到数据的图形展示，需要使用JS插件完成，目前还没有开始开发。然后是数据的表格和表格展示。利用插件自带的数据表格，实现了表格的排序和查找，简化了后台开发的工作量。具体的页面效果和交互效果请点击访问我在文末给出的地址查看源码和demo页面。bootstrapValidator表单验证表单验证的第三方插件确实很多。我无意中在网站上发现了bootstrapValidator。别人编译发表的，我自己用的。只不过这个框架是根据查询表单的ID来定位的，但是我在开发的时候使用的Propeller框架，它的模板页面把??项目需要的三个页面合二为一，即登录、注册、检索页面，导致3个页面，所以我在JS中一共调用了3次来检测。不知道有没有更方便简洁的方法。因为我的其中一个页面有3个窗体，隐藏和显示都是通过点击按钮来控制的。对于验证部分，设计了一个正则表达式。因为需要验证邮箱地址和密码的长度和强度，所以在网上百度了下这方面的正则写法。正则表达式：{正则表达式：/(?!^[0-9]+$)(?!^[A-z]+$)(?!^[^A-z0-9]+$)^.{6,12}$/,message:'必须包含数字和字母，以字母开头（长度为6-12位数字）'},varemail=/^([a-zA-Z0-9_-])+@([a-zA-Z0-9_-])+((\.[a-zA-Z0-9_-]{2,3}){1,2})$/;//获取输入邮箱并使用正则表达式替换空格为空字符邮箱检查其实bootstrapValidator可以使用正则表达式进行检查。我是为了实现点击发送验证码的效果，所以又重复了一遍这个检查，因为我控制了它邮箱发送邮件的规格，实现了自动倒计时的效果。.电子邮件必须有效。因为不知道如何在bootstrapValidator框架中调用自己的方法和函数，所以就单独用一个JS来完成。完整代码如下：//验证码jsvarsends={checked:1,send:function(){varemail=/^([a-zA-Z0-9_-])+@([a-zA-Z0-9_-])+((\.[a-zA-Z0-9_-]{2,3}){1,2})$/;//获取输入邮箱，使用正则表达式将空格替换为空字符varval=$('#forgot-email').val().replace(/\s+/g,"");varvall=$('#fotgot-email').val().replace(/\s+/g,"");如果($('.div-email').find('span').length==0&&$('.div-emaila').attr('class')=='send1'){if(!email.test(val)||val.length==0){$('.div-email').append('
