博主的職位是java后臺開發的,但是由于在公司也要負責一些前端頁面的開發,所以也有接觸到一些前端的框架。
由于博主才工作不到一年,積累經驗并不是很多,因此,本文只介紹三個框架:BUI、Swiper和Bootstrap。另外,這些框架絕不是一篇博客就可以講述清楚的,因此本主要以介紹為主,不過對于每個框架都會配有一個實例講解,因此還是值得一讀的。
### 一、BUI框架
**1.1、BUI介紹**
BUI 是基于 jQuery 兼容 Kissy 的 Web UI 類庫。專注于解決后臺系統的框架方案。
BUI是十分適合作為后臺管理系統的前端框架,因為:
(1)后臺管理系統數據以表格形式呈現,然后就是增刪查改等操作,分頁等功能,使用起來十分便利。
(2)BUI還提供了數據統計顯示的各種圖片,什么折線圖、區域圖、柱狀圖、餅圖等等。
(3)BUI還提供了各種按鈕、面包屑,工具欄等等各種前端樣式。
總之,一般后臺管理系統的功能的樣式也實現,BUI基本能夠滿足。其功能點這里無法一一詳細介紹。猿友們可以參考其API:[http://120.26.80.109/docs/api/index.html](http://120.26.80.109/docs/api/index.html),當然對于入門猿友,個人還是十分建議你先閱讀一個實例網站:[http://www.builive.com/](http://www.builive.com/),里面有許多BUI相關實例,如果實例解決不了你的問題再去詳細研究其API。
**1.2、獲取BUI**
如何獲取到最新版的BUI?BUI在github有個開源項目,地址為:[https://github.com/dxq613/bui](https://github.com/dxq613/bui),猿友們可直接下載其對應工程,然后里面有個build目錄,里面是已經打包好的css和js文件,我們只需要用到里面的文件就好了。
**1.3、BUI實例**
我只需要引入下面這五個文件:
~~~
<link href="css/dpl-min.css" rel="stylesheet">
<link href="css/bui-min.css" rel="stylesheet">
<script src="js/jquery-1.8.1.min.js"></script>
<script src="js/bui-min.js"></script>
<script src="js/layout-min.js"></script>
~~~
除了jquery是我自己在其他地方下載的,其他的都是來自build目錄。
**下面是一個表格實例效果展示:**

**本工程源碼下載(解壓瀏覽器打開即可)**
[http://download.csdn.net/detail/u013142781/9419002](http://download.csdn.net/detail/u013142781/9419002)
其他更多功能就待猿友研究使用啦
### 二、Swiper框架
**2.1、Swiper框架介紹**
Swiper是純javascript打造的滑動特效插件,面向手機、平板電腦等移動終端。?
Swiper能實現觸屏焦點圖、觸屏Tab切換、觸屏多圖切換等常用效果。?
Swiper開源、免費、穩定、使用簡單、功能強大,是架構移動終端網站的重要選擇!
簡單來說,Swiper就是實現了一個滑動切換圖片或面板的效果。顯然是針對移動端的。
一些新聞圖片排本等等是十分適用的,另外在其基礎上,博主還封裝成如下效果哦:

上圖就是博主在Swiper基礎上做成的省市區三聯動效果,因此Swiper對于移動端的滑動場景還是十分有用的。
關于Swiper猿友們可以直接查看其官網:[http://www.swiper.com.cn/](http://www.swiper.com.cn/),官網配有詳細介紹和使用API以及Swiper的下載。
**2.2、Swiper實例**
下面是博主的一個實例,在官網即可下載Swiper插件,實例只需要導入如下兩個文件:
~~~
<link rel="stylesheet" href="css/swiper.min.css">
<script src="js/swiper.min.js"></script>
~~~
實例效果:

本工程源碼下載(解壓瀏覽器打開即可):
[http://download.csdn.net/detail/u013142781/9419005](http://download.csdn.net/detail/u013142781/9419005)
上面的實例過于簡單了一些,其實猿友們可以對Swiper封裝一下,如下效果是博主封裝的一聯動、二聯動、三聯動選擇:、
?
?

由于這是工作上分裝的代碼,不方便提供源碼,請諒解。這里只是提醒各位猿友可在其基礎上分裝出適合自己場景的代碼。
### 三、Bootstrap框架
**3.1、Bootstrap框架介紹**
可能很多猿友們已經對Bootstrap框架有了一定的了解。
Bootstrap,來自 Twitter,是目前很受歡迎的前端框架。Bootstrap 是基于 HTML、CSS、JAVASCRIPT 的,它簡潔靈活,使得 Web 開發更加快捷。
Bootstrap中包含了豐富的Web組件,根據這些組件,可以快速的搭建一個漂亮、功能完備的網站。其中包括以下組件:下拉菜單、按鈕組、按鈕下拉菜單、導航、導航條、路徑導航、分頁、排版、縮略圖、警告對話框、進度條、媒體對象等
另外,通過Less可以對Bootstrap中所有的CSS變量進行修改,并依據自己的需求裁剪代碼。
**另外一個重點是,Bootstrap是自適應的,可以支持PC和移動端頁面,自動調整其樣式寬度高度,做PC端和移動端的網頁都可以使用它。當然,完全做到自適應是不可能的,但是Bootstrap基本適用大部分場景了。**
其官網鏈接:[http://www.bootcss.com/](http://www.bootcss.com/),另外,博主推薦另外一個網站配有其詳細實例:[http://www.runoob.com/bootstrap/bootstrap-intro.html](http://www.runoob.com/bootstrap/bootstrap-intro.html),當然對于入門,這兩者都是十分不錯的選擇。
獲取Bootstrap,可到其官網如下鏈接:[http://v3.bootcss.com/getting-started/#download](http://v3.bootcss.com/getting-started/#download),我們不采用定制版,因此下載這個就好了:

**3.2、Bootstrap實例**
上面我們獲取到Bootstrap的一些css、js和一些字體文件之后,我們還需要去下載jquery,因為Bootstrap是依賴jquery的,這里博主下載的是jquery-1.9.1.min.js,因為我下載的Bootstrap必須要jquery-1.9.1以上版本。
實例只需要導入如下幾個文件:
~~~
<!-- 新 Bootstrap 核心 CSS 文件 -->
<link rel="stylesheet" href="css/bootstrap.min.css">
<!-- 可選的Bootstrap主題文件(一般不用引入) -->
<link rel="stylesheet" href="css/bootstrap-theme.min.css">
<!-- jQuery文件。務必在bootstrap.min.js 之前引入 -->
<script src="js/jquery-1.9.1.min.js"></script>
<!-- 最新的 Bootstrap 核心 JavaScript 文件 -->
<script src="js/bootstrap.min.js"></script>
~~~
實例效果展示:

上圖只是一個簡單的表單例子,但是Bootstrap是很好看的,這里由于博主時間有限,因此例子比較粗糙,主要以介紹Bootstrap為主。
本工程源碼下載(解壓瀏覽器打開即可):
[http://download.csdn.net/detail/u013142781/9419007](http://download.csdn.net/detail/u013142781/9419007)
### 四、通過請求json文件獲取省市區聯動下拉小例子
**4.1、將省市區的數據放到json文件里面,address.json:**

**4.2、前端通過如下jquery代碼獲取數據:**
~~~
var ADDRESS_DATA_SOURCE = [];
function initAddressDataSource(){
$.ajax({
type: 'GET',
url: 'json/address.json',
async: false,
dataType: 'json',
success: function(data) {
ADDRESS_DATA_SOURCE = data;
},
error: function(err) { // 備用方案
alert('獲取省市區數據失敗,使用網絡備用方案...');
}
});
}
~~~
**4.3、實例演示**

**4.4、實例源碼下載:**
[http://download.csdn.net/detail/u013142781/9420276](http://download.csdn.net/detail/u013142781/9420276)
**4.5、chrome跨域訪問問題解決**
chrome通過$.ajax請求本地的json文件數據,會出現如下錯誤:XMLHttpRequest cannot load:

上圖錯誤是因為跨域請求資源導致的,由于瀏覽器同源策略,凡是發送請求url的協議、域名、端口三者之間任意一與當前頁面地址不同即為跨域。具體可以查看下表:

而我們這里并不是http請求,因此也同樣會出現這個問題。
解決方式是給chrome快捷方式添加啟動參數:
~~~
--allow-file-access-from-files
~~~
注意一定是給快捷方式添加啟動參數:

添加方式:
選中快捷方式圖標,右鍵–>屬性–>快捷方式–>目標(T)的值最后面添加上述參數:

注意“- -”前是有個空格的,添加完成之后,重新利用快捷方式打開chrome,然后訪問jsontext.html發現OK了!
- 前言
- Java生成中間logo的二維碼(還可以加上二維碼名稱哦)
- Java我的高效編程之常用函數
- AES加密解密&&SHA1、SHA加密&&MD5加密
- Java中synchronized的使用實例
- Java基礎之集合
- Java基礎之泛型
- Java基礎之枚舉妙用
- 那些年用過的一些前端框架
- 關于正則,那些年一直存在的疑惑解答(正則菜鳥不容錯過)
- 給pdf文件添加防偽水印logo(附工程源碼下載)
- SpringMVC+BUI實現文件上傳(附詳解,源碼下載)
- Java異常封裝(自己定義錯誤碼和描述,附源碼)
- javaweb異常提示信息統一處理(使用springmvc,附源碼)
- 關于Java,那些我心存疑惑的事(不斷更新中...)
- 深入Java虛擬機(1)——Java體系結構
- 深入Java虛擬機(2)——Java的平臺無關性
- 深入Java虛擬機(3)——安全
- 深入Java虛擬機(4)——網絡移動性
- Linux文件編輯命令詳細整理
- 阿里云服務器云數據庫免費體驗(Java Web詳細實例)
- 項目部署、配置、查錯常用到的Linux命令
- Shell腳本了解
- Ajax原理學習
- linux下安裝apache(httpd-2.4.3版本)各種坑
- JSP九大內置對象
- Servlet再度學習
- 開發人員系統功能設計常用辦公軟件分享
- java.lang.ClassNotFoundException:org.springframework.web.context.ContextLoaderListener問題解決
- tomcat內存溢出解決,java.lang.OutOfMemoryError: PermGen space
- 《Java多線程編程核心技術》推薦
- 關于跳槽,是我心浮氣躁?還是我確實該離開了?
- Java I/O學習(附實例和詳解)
- Java經典設計模式之五大創建型模式(附實例和詳解)
- Java經典設計模式之七大結構型模式(附實例和詳解)
- Java經典設計模式之十一種行為型模式(附實例和詳解)
- Java內存管理
- SQL實例整理
- 數據庫面試常問的一些基本概念