bootstrap與java如何結(jié)合使用

　　BootStrap主要作用于前端美化，它也有自己的一套布局，你在使用的時(shí)候只需要將文件包解壓，添加進(jìn)項(xiàng)目之后，在用到的html或者jsp中引用他的文件即可，不過(guò)在引入之前，一定要先把jquery的文件引入進(jìn)去，因?yàn)樗蕾囉趈query，文件的順序十分重要。

　　還有就是，他的文件的順序最好不要打亂，因?yàn)樗膬?nèi)部也有調(diào)用自己的文件，如果你把它弄亂了之后，就可能導(dǎo)致它找不到自己的文件，所以，直接引入是最好的方法，先引入CSS文件《link href=“》 再引入jquery《script src=”“》，最后引入Javascript文件《script src=”“》，

? ? ? ? 例如：

　　《！DOCTYPE HTML》

　　《html》

　　《head》

　　《link href=”bootstrap-datetimepicker-master/sample in bootstrap v2/bootstrap/css/bootstrap.min.css“ rel=”stylesheet“》

　　《link rel=”stylesheet“ type=”text/css“ media=”screen“

　　href=”bootstrap-datetimepicker-master/css/bootstrap-datetimepicker.min.css“》

　　《/head》

　　《body》

　　《div class=”input-append date form_date“ data-date-format=”yyyy-mm-dd“》

　　《input size=”16“ type=”text“ value=”“ readonly》

　　《span class=”add-on“》《i class=”icon-remove“》《/i》《/span》

　　《span class=”add-on“》《i class=”icon-calendar“》《/i》《/span》

　　《/div》

　　《div class=”input-append date“ id=”datetimepicker“ data-date-format=”yyyy-mm-dd“》

　　《input class=”span2“ size=”16“ type=”text“》

　　《span class=”add-on“》《i class=”icon-th“》《/i》《/span》

　　《/div》

　　《script type=”text/javascript“ src=”bootstrap-datetimepicker-master/sample in bootstrap v2/jquery/jquery-1.8.3.min.js“》

　　《/script》

　　《script type=”text/javascript“ src=”bootstrap-datetimepicker-master/bootstrap/js/bootstrap.min.js“》

　　《/script》

　　《script type=”text/javascript“ src=”bootstrap-datetimepicker-master/js/bootstrap-datetimepicker.js“》

　　《/script》

　　《script type=”text/javascript“ src=”bootstrap-datetimepicker-master/js/locales/bootstrap-datetimepicker.zh-CN.js“ charset=”UTF-8“》

　　《/script》

　　《script type=”text/javascript“》

　　$（‘.form_date’）.datetimepicker（{

　　language： ‘zh-CN’，

　　weekStart： 1，

　　todayBtn： 1，

　　autoclose： 1，

　　todayHighlight： 1，

　　startView： 2，

　　minView： 2，

　　forceParse： 0

　　}）;

　　《/script》

　　《/body》

　　《html》

　　這是我做的一個(gè)用到datepicker的文件

　　而java是用于后臺(tái)開(kāi)發(fā)所用，而那個(gè)工具是應(yīng)用于前段美化的所以他們之間并不沖突，正常的結(jié)合就行了

　　只要按上面的方法導(dǎo)入bootstrap的文件，然后在進(jìn)行自己的java的開(kāi)發(fā)就行了，就不會(huì)受到什么干擾了

?

　　基于Bootstrap的Java開(kāi)發(fā)問(wèn)題總結(jié)

　　第一次接觸Bootstrap框架，特別生疏。但是在慢慢了解了之后會(huì)發(fā)現(xiàn)bootstrap是一個(gè)前端的技術(shù)框架。結(jié)合了JQuery從而實(shí)現(xiàn)了非常豐富、美觀的界面效果。此次項(xiàng)目是基于Spring MVC模式下。

　　1.菜單

　　在Bootstrap中構(gòu)建一個(gè)菜單是一件非常容易的事情。因?yàn)橛袑ｉT(mén)的菜單管理，所以相比以前做過(guò)的菜單相對(duì)來(lái)說(shuō)就輕松的多。只需要點(diǎn)開(kāi)菜單管理，進(jìn)行需求菜單的添加。如下圖所示：

　　添加完菜單之后還不能顯示，因?yàn)闆](méi)有為菜單分配權(quán)限。接下來(lái)在角色權(quán)限管理里面為菜單進(jìn)行授權(quán)。之后用授權(quán)過(guò)的賬戶進(jìn)行登錄就可以看見(jiàn)剛才所添加的菜單。

　　2.上傳圖片

　　上傳圖片費(fèi)了好久才完成。開(kāi)始以為上傳圖片功能已經(jīng)做成功了。但是回過(guò)頭看的時(shí)候才發(fā)現(xiàn)是有問(wèn)題的。

　　問(wèn)題一：

　　因?yàn)槲沂强偣惨蟼魅龔垐D片，遇到的問(wèn)題是每一次上傳都上傳成功了，可是數(shù)據(jù)庫(kù)里的數(shù)據(jù)永遠(yuǎn)保存的最后一條的記錄。最終發(fā)現(xiàn)發(fā)現(xiàn)方法的參數(shù)寫(xiě)錯(cuò)了。本來(lái)調(diào)用的是根據(jù)多個(gè)屬性刪除對(duì)象實(shí)體，結(jié)果發(fā)現(xiàn)在方法的參數(shù)里寫(xiě)了兩個(gè)參數(shù)new String［］ {“type”， “typeId” }，就是第二個(gè)參數(shù)typeId導(dǎo)致每次刪除的都是用戶的所有記錄。最終改為new String［］ { “type”，“imgId” }，將第二個(gè)參數(shù)改為imgId每次根據(jù)圖片的類型刪除。每次改變只是改變相對(duì)應(yīng)的圖片，避免了將同一個(gè)用戶的所有圖片都刪除。

　　問(wèn)題二：

　　上傳成功后怎么都顯示不到頁(yè)面。問(wèn)題是之前的做法是只上傳一張圖片，每次上傳后的圖片路徑保存到filePath里，然而現(xiàn)在變成上傳三張圖片后每一次上傳的圖片路徑都會(huì)保存到filePath里，也就是說(shuō)第二次上傳的圖片路徑每次都會(huì)覆蓋上一次的路徑，因此三張圖片在頁(yè)面的顯示效果永遠(yuǎn)都是同一張照片。

　　最終在要顯示的頁(yè)面里從attachment表里面將用戶對(duì)應(yīng)所上傳的圖片顯示在頁(yè)面，這樣就避免了filePath里只能保存一個(gè)路徑的問(wèn)題！