簡平

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

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

1 緒論

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

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

2.1 開發(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)頁的結(jié)構(gòu)，CSS（Cascading Style Sheets）就是網(wǎng)頁的樣式，JS（JavaScript）就是網(wǎng)頁的行為；而在HTML 的標(biāo)簽中；其中div 標(biāo)簽是最具有代表性的，通過div 和CSS 的結(jié)合；就可以實(shí)現(xiàn)一個(gè)網(wǎng)頁的靜態(tài)布局

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

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

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

2.4 PHP技術(shù)

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

2.5 Apache服務(wù)器

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

3 系統(tǒng)分析

3.1 可行性分析

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

3.2 功能需求分析

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

3.3 非功能需求分析

作為一個(gè)網(wǎng)站，不僅基本功能要實(shí)現(xiàn)，同時(shí)還應(yīng)該考慮到網(wǎng)站的整體外觀效果是否美觀，用戶體驗(yàn)是否友好等個(gè)方面因素。傳統(tǒng)的網(wǎng)站設(shè)計(jì)因?yàn)闆]有使用到響應(yīng)式技術(shù)，使得用戶體驗(yàn)度不是很好，比如一個(gè)頁面在PC 端效果是正常的，但是用移動(dòng)端打開之后字體、圖片等元素顯得尤其的小，使得用戶體驗(yàn)度大大的降低。通過使用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 框架對項(xiàng)目進(jìn)行快速搭建以減少對樣式代碼的編寫，同時(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ì)

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

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

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

圖3：投資列表頁部分

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

5.1 環(huán)境搭建

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

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

5.2.1 首頁

首先搭建一個(gè)網(wǎng)頁應(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 注冊

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

5.2.3 登錄

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

5.2.4 個(gè)人中心

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

6 結(jié)論

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