您的位置：首页 > 编程技术 > html  >  基于Bootstrap的Java开发问题汇总（Spring MVC）

基于Bootstrap的Java开发问题汇总（Spring MVC）

 更新时间：2017年1月22日 11:05  点击：1729
bootstrap是一个前端的技术框架。结合了JQuery从而实现了非常丰富、美观的界面效果。本文介绍了基于Bootstrap的Java开发问题汇总（Spring MVC），希望能帮助到学习bootstrap的各位。

第一次接触Bootstrap框架，特别生疏。但是在慢慢了解了之后会发现bootstrap是一个前端的技术框架。结合了JQuery从而实现了非常丰富、美观的界面效果。此次项目是基于Spring MVC模式下。

1.菜单

     在Bootstrap中构建一个菜单是一件非常容易的事情。因为有专门的菜单管理，所以相比以前做过的菜单相对来说就轻松的多。只需要点开菜单管理，进行需求菜单的添加。如下图所示：

        添加完菜单之后还不能显示，因为没有为菜单分配权限。接下来在角色权限管理里面为菜单进行授权。之后用授权过的账户进行登录就可以看见刚才所添加的菜单。

2.上传图片

     上传图片费了好久才完成。开始以为上传图片功能已经做成功了。但是回过头看的时候才发现是有问题的。

问题一：

       因为我是总共要上传三张图片，遇到的问题是每一次上传都上传成功了，可是数据库里的数据永远保存的最后一条的记录。最终发现发现方法的参数写错了。本来调用的是根据多个属性删除对象实体，结果发现在方法的参数里写了两个参数new  String[] { "type", "typeId" }，就是第二个参数typeId导致每次删除的都是用户的所有记录。最终改为new  String[] { "type", "imgId"  }，将第二个参数改为imgId每次根据图片的类型删除。每次改变只是改变相对应的图片，避免了将同一个用户的所有图片都删除。

问题二：

      上传成功后怎么都显示不到页面。问题是之前的做法是只上传一张图片，每次上传后的图片路径保存到filePath里，然而现在变成上传三张图片后每一次上传的图片路径都会保存到filePath里，也就是说第二次上传的图片路径每次都会覆盖上一次的路径，因此三张图片在页面的显示效果永远都是同一张照片。

      最终在要显示的页面里从attachment表里面将用户对应所上传的图片显示在页面，这样就避免了filePath里只能保存一个路径的问题！

bootstrap中datetimepicker日期插件非常简单易用，那么如何使用呢？快跟小编看看这篇讲解bootstrap datetimepicker日期插件使用方法的文章吧！

本文实例为大家分享了bootstrap datetimepicker日期插件的简单使用，供大家参考，具体内容如下

首先在文件头部引入必要的文件：

 

<link rel="stylesheet" href="Css/bootstrap-datetimepicker.min.css">
<script src="Js/bootstrap-datetimepicker.js"></script>
 代码如下复制代码

Bootstrap，来自 Twitter，是目前最受欢迎的前端框架。Bootstrap 是基于 HTML、CSS、JAVASCRIPT 的，它简洁灵活，使得 Web 开发更加快捷。本文介绍的是BootStrap表单验证的实例代码，对刚刚学习bootstrap的同学来说很有帮助，下面一起来看看吧

下面给大家分享bootstrap表单验证实例代码，具体代码如下所示：

 

 代码如下 复制代码

<%@ page language="java"contentType="text/html; charset=UTF-8"

  pageEncoding="UTF-8"%>

<%@ include file="../include/taglib.jsp"%>

<!DOCTYPE html PUBLIC"-//W3C//DTD HTML 4.01 Transitional//EN""http://www.w3.org/TR/html4/loose.dtd">

<html>

<head>

<meta http-equiv="Content-Type"content="text/html; charset=UTF-8">

<%@include file="../include/common.jsp"%>

<script type="text/javascript"src="form.js"></script>

<script type="text/javascript"src="bootstrapValidator.min.js"></script>

<link rel="stylesheet"href="../../css/edit.css">

<link rel="stylesheet"href="bootstrapValidator.min.css">

<title>表单测试</title>

</head>

<body class="no-skin">

<div class="main-container"id="main-container">

<div class="main-content">

<div class="main-content-inner">

<div class="page-content">

<div class="row">

<div class="col-xs-12 col-sm-12 col-md-12">

<form id="formTest"class="form-horizontal"role="form">

   <div class="form-group">

<label class="col-xs-3 col-sm-3 col-md-5 no-padding-right">用户姓名:</label>

<div class="col-xs-3 col-sm-3 col-md-3">

<div>

<input type="text"id="username"name="username"class="col-xs-12 col-sm-12 col-md-12"placeholder="用户姓名"/>

</div>

</div>

</div>

<!-- 生日-->

<div class="form-group">

<label class="col-xs-3 col-sm-3 col-md-5 no-padding-right">生&emsp;&emsp;日:</label>

<div class="col-xs-3 col-sm-3 col-md-3">

<div>

<input type="text"id="birthday"name="birthday"class="col-xs-12 col-sm-12 col-md-12"placeholder="生日"/>

</div>

</div>

</div>

<!-- 邮件 -->

<div class="form-group">

<label class="col-xs-3 col-sm-3 col-md-5 no-padding-right">邮&emsp;&emsp;件:</label>

<div class="col-xs-3 col-sm-3 col-md-3">

<div>

<input type="text"id="email"name="email"class="col-xs-12 col-sm-12 col-md-12"placeholder="邮件"/>

</div>

</div>

</div>

<!-- 密码 -->

<div class="form-group">

<label class="col-xs-3 col-sm-3 col-md-5 no-padding-right">密&emsp;&emsp;码:</label>

<div class="col-xs-3 col-sm-3 col-md-3">

<div>

<input type="text"id="password"name="password"class="col-xs-12 col-sm-12 col-md-12"placeholder="密码"/>

</div>

</div>

</div>

<!-- 确认密码 -->

<div class="form-group">

<label class="col-xs-3 col-sm-3 col-md-5 no-padding-right">确认密码:</label>

<div class="col-xs-3 col-sm-3 col-md-3">

<div>

<input type="text"id="confirmPassword"name="confirmPassword"class="col-xs-12 col-sm-12 col-md-12"placeholder="确认密码"/>

</div>

</div>

</div>

<div class="form-group">

<label class="col-xs-3 col-sm-3 col-md-5 no-padding-right">语&emsp;&emsp;言:</label>

<div class="col-xs-3 col-sm-3 col-md-3">

<div>

<input type="checkbox"id="languages"name="languages"value="中文"style="margin-top:12px"/>中文

</div>

 <div>

<input type="checkbox"id="languages"name="languages"value="英语"style="margin-top:12px"/>英语

</div>

 <div>

<input type="checkbox"id="languages"name="languages"value="德语"style="margin-top:12px"/>德语

 </div>

 <div>

<input type="checkbox"id="languages"name="languages"value="韩语"style="margin-top:12px"/>韩语

 </div>

</div>

</div>

<!-- 自定义 -->

<div class="form-group">

<label class="col-xs-3 col-sm-3 col-md-5 no-padding-right"id="callbackshow"></label>

<div class="col-xs-3 col-sm-3 col-md-3">

<div>

<input type="text"id="callbacktest"name="callbacktest"class="col-xs-12 col-sm-12 col-md-12"placeholder="自 定 义"/>

</div>

</div>

</div>

</form>

<!-- PAGE CONTENT ENDS -->

</div><!-- /.col -->

</div><!-- /.row -->

</div><!-- /.page-content -->

</div><!-- /.main-content-inner -->

</div><!-- /.main-content -->

<div class="clear-div"></div>

<div class="footer-button-box container">

<div class="button-conent">

  <button class="btn"type="button"id="submitBtn">

提交

</button>

<button class="btn"type="button"id="resetBtn">

重置

</button>

</div><!-- /.button-conent -->

</div><!-- /.footer-button-box -->

</div><!-- /.main-container -->

</body>

</html>

 

--------------------------------------------------引入js----------------------------------------------------------------------

 

 代码如下 复制代码

$(function() {

//重置

$('#resetBtn').click(function(){

//清空表单验证内容

$('#formTest')[0].reset();

//清空表单验证信息

$('#formTest').bootstrapValidator('resetForm');

});

functionrandomNumber(min, max) {

     returnMath.floor(Math.random() * (max - min + 1) + min);

    };

   $('#callbackshow').html([randomNumber(1, 100),'+', randomNumber(1, 200),'='].join(' '));

   //校验

$('#formTest').bootstrapValidator({

    message :'',

    feedbackIcons: {

      valid:'glyphicon glyphicon-ok',

invalid:'glyphicon glyphicon-remove',

validating:'glyphicon glyphicon-refresh'

    },

    //验证用户名字

    fields: {

username: {

  message:'用户名验证失败',

validators: {

 notEmpty: {

    message:'用户名不能为空'

 },

 stringLength: {

  min: 2,

max: 4,

message:'名字长度只能为2-4位'

 },

 regexp: {

  regexp: /^[\u2E80-\u9FFF]+$/,

  message:'只能为汉字'

 },

}

},//end username

birthday:{

  validators: {

   notEmpty: {

    message:'生日不能为空'

   },

 date:{

  format:'YYYY/MM/DD',

message:'输入正确的日期格式，YYYY/MM/DD'

 }

 }

  },//end birthday

//验证email

  email: {

  validators: {

   notEmpty: {

    message:'邮箱地址不能为空'

   },

 emailAddress: {

message:'邮箱地址不对'

 }

  }

 },//end email

  password:{

 validators: {

   notEmpty: {

    message:'密码不能为空'

   },

 stringLength: {

  min: 6,

max: 15,

message:'密码长度最小为6最多为15'

 },

 regexp: {

 regexp: /^[\d]+$/,

 message:'只能为数字'

 },

}

 },//end password

confirmPassword:{

 validators: {

  notEmpty: {

  message:'密码不能为空'

},

stringLength: {

  min: 6,

  max: 15,

  message:'密码长度最小为6最多为15'

},

identical: {

          field:'password',

          message:'2次密码不一致'

        },

}

},//end confirmPassword

'languages': {

        validators: {

          notEmpty: {

            message:'至少要选择一个'

          },

choice: {

            min: 2,

            max: 3,

            message:'选择2-3个'

          }

       }

     },//end languages

     callbacktest:{

 validators: {

callback:{

message:'输入错误',

callback:function(value,validator){

varitems = $('#callbackshow').html().split(' '),

sum = parseInt(items[0]) + parseInt(items[2]);

console.log(sum);

returnvalue == sum;

}

}

  }

},//end callbacktest

    }

  });

 

//表单提交

$("#formTest").submit(function(ev){ev.preventDefault();});

$("#submitBtn").on("click",function(){

varbootstrapValidator = $("#formTest").data('bootstrapValidator');

bootstrapValidator.validate();

if(bootstrapValidator.isValid()){

$.ajaxRequest({

url :'www.baidu.com',

  });

}else{

return;

}

});

 });

 

[!--infotagslink--]

相关文章

  • Bootstrap Table使用整理(二)

    这篇文章主要介绍了Bootstrap Table使用整理(二)的相关资料,需要的朋友可以参考下...2017-06-15

  • 基于BootStrap Metronic开发框架经验小结【八】框架功能总体界面介绍

    这篇文章主要介绍了基于BootStrap Metronic开发框架经验小结【八】框架功能总体界面介绍 的相关资料,需要的朋友可以参考下...2016-05-14

  • PHP传值到不同页面的三种常见方式及php和html之间传值问题

    在项目开发中经常见到不同页面之间传值在web工作中，本篇文章给大家列出了三种常见的方式。接触PHP也有几个月了，本文总结一下这段日子中，在编程过程里常用的3种不同页面传值方法，希望可以给大家参考。有什么意见也希望大...2015-11-24

  • js修改input的type属性问题探讨

    js修改input的type属性有些限制。当input元素还未插入文档流之前，是可以修改它的值的，在ie和ff下都没问题。但如果input已经存在于页面，其type属性在ie下就成了只读属性了，不可以修改。...2013-10-19

  • Mysql常见问题集锦

    1，utf8_bin跟utf8_general_ci的区别 ci是 case insensitive, 即 "大小写不敏感", a 和 A 会在字符判断中会被当做一样的; bin 是二进制, a 和 A 会别区别对待. 例如你运行: SELECT * FROM table WHERE txt = 'a'...2013-10-04

  • Mysql大小写敏感的问题

    一、1 CREATE TABLE NAME(name VARCHAR(10)); 对这个表，缺省情况下，下面两个查询的结果是一样的：复制代码 代码如下: SELECT * FROM TABLE NAME WHERE name='clip'; SELECT * FROM TABLE NAME WH...2015-03-15

  • linux mint 下mysql中文支持问题

    一.mysql默认不支持中文,它的server和db默认是latin1编码.所以我们要将其改变为utf-8编码,因为utf-8包含了地球上大部分语言的二进制编码 1.关闭mysql服务 sudo /etc/init.d/mysql stop 2.修改mysql配置文件 mysql配...2015-10-21

  • vscode搭建STM32开发环境的详细过程

    这篇文章主要介绍了vscode搭建STM32开发环境的详细过程,本文给大家介绍的非常详细，对大家的学习或工作具有一定的参考借鉴价值，需要的朋友可以参考下...2021-05-02

  • Bootstrap3制作图片轮播效果

    这篇文章主要教大家如何利用Bootstrap3制作图片轮播效果，具有一定的参考价值，感兴趣的小伙伴们可以参考一下...2016-05-14

  • Bootstrap教程JS插件滚动监听学习笔记分享

    这篇文章主要为大家分享了Bootstrap教程JS插件滚动监听学习笔记，内容很详细，感兴趣的小伙伴们可以参考一下...2016-05-20

  • 安卓开发之Intent传递Object与List教程

    下面我们一起来看一篇关于　安卓开发之Intent传递Object与List的例子，希望这个例子能够为各位同学带来帮助。 Intent 不仅可以传单个的值，也可以传对象与数据集合...2016-09-20

  • php微信公众账号开发之五个坑（二）

    这篇文章主要为大家详细介绍了php微信公众账号开发之五个坑,具有一定的参考价值，感兴趣的小伙伴们可以参考一下...2016-10-02

  • BootStrap CSS全局样式和表格样式源码解析

    这篇文章主要为大家详细解析了BootStrap图片样式、辅助类样式和CSS组件源码，具有一定的参考价值，感兴趣的小伙伴们可以参考一下...2017-01-23

  • Bootstrap进度条组件知识详解

    在网页中，经常见到进度条效果，那么这些个性的进度条组件效果是怎么实现的呢，下面脚本之家小编给大家分享Bootstrap进度条组件知识详解，感兴趣的朋友要求学习吧...2016-05-04

  • JS树形菜单组件Bootstrap TreeView使用方法详解

    这篇文章主要为大家详细介绍了js组件Bootstrap TreeView使用方法，本文一部分针对于bootstrap的treeview的实践，另一部分是介绍自己写的树形菜单，具有一定的参考价值，感兴趣的小伙伴们可以参考一下...2017-01-09

  • 如何设计一个安全的API接口详解

    在日常开发中,总会接触到各种接口,前后端数据传输接口,第三方业务平台接口,下面这篇文章主要给大家介绍了关于如何设计一个安全的API接口的相关资料,需要的朋友可以参考下...2021-08-12

  • Bootstrap树形控件使用方法详解

    这篇文章主要为大家详细介绍了Bootstrap树形控件使用方法，感兴趣的小伙伴们可以参考一下...2016-01-29

  • Bootstrap选项卡学习笔记分享

    这篇文章主要为大家详细介绍了Bootstrap选项卡学习笔记，具有一定的参考价值，感兴趣的小伙伴们可以参考一下...2017-02-19

  • 基于BootStrap的Metronic框架实现页面链接收藏夹功能按钮移动收藏记录(使用Sortable进行拖动排序)

    这篇文章主要介绍了基于BootStrap的Metronic框架实现页面链接收藏夹功能按钮移动收藏记录(使用Sortable进行拖动排序)的相关资料,非常不错，需要的朋友可以参考下...2016-09-01

  • 基于Bootstrap的Metronic框架实现页面链接收藏夹功能

    本文给大家介绍基于Metronic的Bootstrap开发框架实现页面链接收藏夹功能，非常不错，具有参考借鉴价值，感兴趣的朋友一起学习吧...2016-09-01