基于Bootstrap的響應(yīng)式金融借貸平臺(tái)設(shè)計(jì)

簡(jiǎn)平

（貴州財(cái)經(jīng)大學(xué) 貴州省貴陽(yáng)市 550025）

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

1 緒論

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

2 關(guān)鍵技術(shù)介紹

2.1 開(kāi)發(fā)技術(shù)的選擇

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

2.2 DIV+CSS技術(shù)概述

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

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

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

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

2.4 PHP技術(shù)

PHP 是一種創(chuàng)建動(dòng)態(tài)交互性站點(diǎn)的強(qiáng)有力的服務(wù)器端腳本語(yǔ)言。PHP 是免費(fèi)的，并且使用非常廣泛。同時(shí)，對(duì)于像微軟 ASP這樣的競(jìng)爭(zhēng)者來(lái)說(shuō)，PHP 無(wú)疑是另一種高效率的選項(xiàng)。所以此網(wǎng)站選用PHP 作為服務(wù)器端的腳本語(yǔ)言來(lái)寫(xiě)接口

2.5 Apache服務(wù)器

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

3 系統(tǒng)分析

3.1 可行性分析

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

3.2 功能需求分析

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

3.3 非功能需求分析

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

4 系統(tǒng)設(shè)計(jì)

4.1 系統(tǒng)設(shè)計(jì)原則

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

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

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

4.3 模塊詳細(xì)設(shè)計(jì)

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

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

圖2：首頁(yè)頭部導(dǎo)航

圖3：投資列表頁(yè)部分

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

5.1 環(huán)境搭建

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

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

5.2.1 首頁(yè)

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

5.2.2 注冊(cè)

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

5.2.3 登錄

用戶(hù)需要使用本平臺(tái)提供的服務(wù)，首先得先登錄，因?yàn)槠脚_(tái)需要知道是為誰(shuí)在服務(wù)，登錄需要驗(yàn)證用戶(hù)名和密碼，當(dāng)我們點(diǎn)擊登錄按鈕的時(shí)候，需要發(fā)送ajax 請(qǐng)求，將用戶(hù)名和密碼發(fā)送給后臺(tái)，后臺(tái)根據(jù)用戶(hù)名和密碼在數(shù)據(jù)庫(kù)里面進(jìn)行查找，如果有用戶(hù)名且和密碼一一對(duì)應(yīng)則登錄成功，否則登錄失敗，根據(jù)后臺(tái)返回的信息進(jìn)行友好提示。

5.2.4 個(gè)人中心

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

6 結(jié)論

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