基于Bootstrap的響應式金融借貸平臺設計

簡平

（貴州財經(jīng)大學 貴州省貴陽市 550025）

基于Bootstrap 的響應式金融借貸平臺是一個使用Bootstrap 框架開發(fā)的一個P2P 金融借貸平臺。Bootstrap 提供了優(yōu)雅的HTML和CSS 規(guī)范，它由動態(tài)CSS 語言Less 寫成。Bootstrap 一經(jīng)推出后頗受歡迎，一直是GitHub 上的熱門開源項目。使用Bootstrap 來開發(fā)前端，能夠使我們用較少的時間取得更好的效果。使網(wǎng)站具備多終端設備自適應的能力，會根據(jù)不同分辨率的屏幕來自動調(diào)整相應的布局。此平臺解決了傳統(tǒng)金融借貸平臺的信用評審不夠準確的問題，同時還解決了傳統(tǒng)借貸平臺由于資金不足而無法運營下去的風險以及傳統(tǒng)網(wǎng)絡借貸平臺無法很好的適配各種終端等問題。

1 緒論

基于Bootstrap 的響應式金融借貸平臺是一個使用Bootstrap 框架開發(fā)的一個P2P 金融借貸平臺。Bootstrap 框架提供了非常多的UI 組件，它通過媒體查詢技術實現(xiàn)了組件的響應式布局，同時它還提供了一個柵格系統(tǒng)，可以把一個網(wǎng)頁分為十二份，通過其提供的組件和柵格系統(tǒng)，可以快速的搭建一個完整的網(wǎng)頁，能夠使我們用較少的時間取得更好的效果。使網(wǎng)站具備多終端設備自適應的能力，會根據(jù)不同分辨率的屏幕來自動調(diào)整相應的布局。此平臺具備登錄、投資、借款等基本功能，同時此平臺的一大特點是任何人都可以在平臺上進行投資。

2 關鍵技術介紹

2.1 開發(fā)技術的選擇

HTML、CSS、JavaScript、jQuery、Bootstrap，gulp。

2.2 DIV+CSS技術概述

一個完整的網(wǎng)站應該包括結(jié)構，樣式和行為，我們可以這樣認為；HTML 就是網(wǎng)頁的結(jié)構，CSS（Cascading Style Sheets）就是網(wǎng)頁的樣式，JS（JavaScript）就是網(wǎng)頁的行為；而在HTML 的標簽中；其中div 標簽是最具有代表性的，通過div 和CSS 的結(jié)合；就可以實現(xiàn)一個網(wǎng)頁的靜態(tài)布局

2.3 MySQL數(shù)據(jù)庫

MySQL 是目前最流行的關系型數(shù)據(jù)庫管理系統(tǒng)之一，在WEB 應用方面，MySQL 是最好的 RDBMS(Relational Database Management System：關系數(shù)據(jù)庫管理系統(tǒng))應用軟件之一。

當我們和網(wǎng)站產(chǎn)生一些交互的時候可能就會產(chǎn)生一些數(shù)據(jù)，比如用戶的注冊、登錄、點擊超鏈接等。那我們應該不數(shù)據(jù)放到什么地方才會比較好呢？我們當然可以將數(shù)據(jù)存儲在文件中，但是將存儲在文件中存在許多弊端，比如管理數(shù)據(jù)困難，讀寫數(shù)據(jù)速度相對較慢等；而MySQL 就提供了一整套的解決方案。MySQL 是最流行的關系型數(shù)據(jù)庫管理系統(tǒng)，在 WEB 應用方面 MySQL 是最好的RDBMS(Relational Database Management System：關系數(shù)據(jù)庫管理系統(tǒng))應用軟件之一；關聯(lián)數(shù)據(jù)庫將數(shù)據(jù)保存在不同的表中，而不是將所有數(shù)據(jù)放在一個大倉庫內(nèi)，這樣就增加了速度并提高了靈活性。

2.4 PHP技術

PHP 是一種創(chuàng)建動態(tài)交互性站點的強有力的服務器端腳本語言。PHP 是免費的，并且使用非常廣泛。同時，對于像微軟 ASP這樣的競爭者來說，PHP 無疑是另一種高效率的選項。所以此網(wǎng)站選用PHP 作為服務器端的腳本語言來寫接口

2.5 Apache服務器

Apache 是世界使用排名第一的Web 服務器軟件。它可以運行在幾乎所有廣泛使用的計算機平臺上，由于其跨平臺和安全性被廣泛使用，是最流行的Web 服務器端軟件之一。它快速、可靠并且可通過簡單的API 擴充，將Perl/Python 等解釋器編譯到服務器中。

3 系統(tǒng)分析

3.1 可行性分析

現(xiàn)如今，可能很多人都體會過借錢出去容易，要別人還錢難的感受。導致很多有錢的人不愿意把錢借給別人。而又有一些人可能會有急需用錢的時候，卻又找不到地方借錢，這樣一個金融借貸平臺剛好解決了有錢人無處投資，而急需用錢的人找不到途徑借款的這樣一個現(xiàn)狀，同過此平臺，借款人可以發(fā)表借款需求，投資人可以看到所有的借款需求，根據(jù)借款人給出的年利率以及平臺提供的信用度，投資人可以選擇性的將錢借給有需要的人，投資人通過收取利息的方式獲得利潤，而平臺通過收取傭金獲得相應的收益，這樣，借款人、投資人、和平臺三方都滿足了自己的需要。

3.2 功能需求分析

此平臺是一個金融借貸平臺，自然是需要注冊登錄才可以進行借款和投資的，所以注冊和登錄功能是必不可少的，同時，還應該具備個人信息編輯，實名認證、查看投資列表、可以查看平臺簡介等功能，用戶需在平臺上的賬戶進行充值，才能使用賬戶上的錢進行投資或者是還款，因此還需要充值功能，為了清晰的展示借款信息、還款信息等數(shù)據(jù)，還應該有明細統(tǒng)計功能。

3.3 非功能需求分析

作為一個網(wǎng)站，不僅基本功能要實現(xiàn)，同時還應該考慮到網(wǎng)站的整體外觀效果是否美觀，用戶體驗是否友好等個方面因素。傳統(tǒng)的網(wǎng)站設計因為沒有使用到響應式技術，使得用戶體驗度不是很好，比如一個頁面在PC 端效果是正常的，但是用移動端打開之后字體、圖片等元素顯得尤其的小，使得用戶體驗度大大的降低。通過使用Bootstrap 框架的柵格系統(tǒng)，可以使得在不同的屏幕尺寸上有著比較友好的體驗。

4 系統(tǒng)設計

4.1 系統(tǒng)設計原則

系統(tǒng)設計原則是希望不管在PC 端還是移動端，都能夠有一個比較好的體驗度，因此本系統(tǒng)主要采用Bootstrap 框架對項目進行快速搭建以減少對樣式代碼的編寫，同時可以根據(jù)屏幕的大小進行自適應，實現(xiàn)一套代碼兼容多端的目的。

4.2 系統(tǒng)總體結(jié)構

系統(tǒng)總體結(jié)構如圖1 所示。

4.3 模塊詳細設計

主頁是一個網(wǎng)站的門面，也是一個網(wǎng)站的入口，此模塊一般應當包括一個banner 和一些功能模塊的快捷入口，比如投資模塊，借款模塊等，同時每一個頁面都具備頁頭和頁尾，一般來說，頁頭和頁尾每一個頁面都是一致的，因此我們可以將頁頭和頁尾單獨抽離出來，以減少代碼的冗余。如圖2 所示的效果只需要通過Bootstrap的導航組件便可以輕松的搭建出來，投資模塊包括一些借款人的借款列表信息，如圖3 所示，此部分可以通過Bootstrap 的table 組件輕松的完成，可以通過點擊查看進入借款人的具體信息，包括信用度，借款時長，年利率等。通過給按鈕添加btn 和btn-danger 類名，可以使得按鈕的顏色變成紅色。通過Bootstrap 的柵格系統(tǒng)，我們可以吧個人中心輕松的分為左右布局，只需要將左右兩部（即左右兩個行row）分同時包裹在一個容器（類名為container）里，分別為每一個row 設置相應的比例類名如左邊(col-md-3)，右邊（colmd-9）。

圖1：系統(tǒng)總體結(jié)構

圖2：首頁頭部導航

圖3：投資列表頁部分

5 系統(tǒng)實現(xiàn)

5.1 環(huán)境搭建

安裝IDE（Integrated Development Environment），這里選擇vscode，搭建SVN 服務器，SVN 是一個開放源代碼的版本控制系統(tǒng)，通過采用分支管理系統(tǒng)的高效管理，簡而言之就是用于多個人共同開發(fā)同一個項目，實現(xiàn)共享資源，實現(xiàn)最終集中式的管理。搭建好SVN 服務器之后在一個開發(fā)目錄下檢出項目，然后配置項目目錄結(jié)構即完成項目的搭建。

5.2 系統(tǒng)前臺功能實現(xiàn)

5.2.1 首頁

首先搭建一個網(wǎng)頁應該有的基本結(jié)構，包括文檔聲明（＜!DOCTYPE html>）,HTML 根節(jié)點，head 標簽，body 主體內(nèi)容等，同時還應該在head 標簽之間引入Bootstrap 樣式和公共樣式等。

5.2.2 注冊

如果是初次使用本平臺的服務，需要先進行注冊之后方可享受本平臺提供的服務，那么注冊功能就是必不可少的了，一個最簡單的注冊功能，至少要包含用戶名以及用戶密碼，為了避免密碼填錯，還應該包含確認密碼一項，同時為了平臺的規(guī)范以及用戶密碼的安全，我們應該對用戶輸入的用戶名以及密碼進行合法性驗證，只有通過驗證之后才可以提交表單進行注冊。為了有一個較好的用戶體驗，當用戶注冊完成之后便立即跳轉(zhuǎn)到登錄頁面并回填用戶信息進行登錄。

5.2.3 登錄

用戶需要使用本平臺提供的服務，首先得先登錄，因為平臺需要知道是為誰在服務，登錄需要驗證用戶名和密碼，當我們點擊登錄按鈕的時候，需要發(fā)送ajax 請求，將用戶名和密碼發(fā)送給后臺，后臺根據(jù)用戶名和密碼在數(shù)據(jù)庫里面進行查找，如果有用戶名且和密碼一一對應則登錄成功，否則登錄失敗，根據(jù)后臺返回的信息進行友好提示。

5.2.4 個人中心

當用戶登錄成功之后，便可以進入個人中心查看一些基本信息以及一些操作，比如實名認證、銀行卡管理等操作，這里使用到了Bootstrap 的柵格系統(tǒng)，將頁面分為左右兩部分，通過類名的方式將左右劃分開來，通過col-md-3 使得左邊占據(jù)柵格系統(tǒng)的三份，colmd-9 使得右邊占9 份。

6 結(jié)論

設計此平臺的意義在于解決傳統(tǒng)金融借貸平臺存在的一些問題，那就是傳統(tǒng)金融借貸平臺信用評定不夠準確，平臺需要大量的運營資金以及普通人無法在平臺上進行投資和傳統(tǒng)借貸平臺無法很好的適應各種尺寸的屏幕等問題。本平臺通過使用Bootstrap 框架，解決了各種尺寸的屏幕不能很好的適配的問題，而且還針對傳統(tǒng)金融借貸平臺的功能做出了優(yōu)化，解決了傳統(tǒng)金融借貸平臺存在的弊端。