基于Bootstrap的响应式金融借贷平台设计

简平

（贵州财经大学 贵州省贵阳市 550025）

基于Bootstrap 的响应式金融借贷平台是一个使用Bootstrap 框架开发的一个P2P 金融借贷平台。Bootstrap 提供了优雅的HTML和CSS 规范，它由动态CSS 语言Less 写成。Bootstrap 一经推出后颇受欢迎，一直是GitHub 上的热门开源项目。使用Bootstrap 来开发前端，能够使我们用较少的时间取得更好的效果。使网站具备多终端设备自适应的能力，会根据不同分辨率的屏幕来自动调整相应的布局。此平台解决了传统金融借贷平台的信用评审不够准确的问题，同时还解决了传统借贷平台由于资金不足而无法运营下去的风险以及传统网络借贷平台无法很好的适配各种终端等问题。

1 绪论

基于Bootstrap 的响应式金融借贷平台是一个使用Bootstrap 框架开发的一个P2P 金融借贷平台。Bootstrap 框架提供了非常多的UI 组件，它通过媒体查询技术实现了组件的响应式布局，同时它还提供了一个栅格系统，可以把一个网页分为十二份，通过其提供的组件和栅格系统，可以快速的搭建一个完整的网页，能够使我们用较少的时间取得更好的效果。使网站具备多终端设备自适应的能力，会根据不同分辨率的屏幕来自动调整相应的布局。此平台具备登录、投资、借款等基本功能，同时此平台的一大特点是任何人都可以在平台上进行投资。

2 关键技术介绍

2.1 开发技术的选择

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

2.2 DIV+CSS技术概述

一个完整的网站应该包括结构，样式和行为，我们可以这样认为；HTML 就是网页的结构，CSS（Cascading Style Sheets）就是网页的样式，JS（JavaScript）就是网页的行为；而在HTML 的标签中；其中div 标签是最具有代表性的，通过div 和CSS 的结合；就可以实现一个网页的静态布局

2.3 MySQL数据库

MySQL 是目前最流行的关系型数据库管理系统之一，在WEB 应用方面，MySQL 是最好的 RDBMS(Relational Database Management System：关系数据库管理系统)应用软件之一。

当我们和网站产生一些交互的时候可能就会产生一些数据，比如用户的注册、登录、点击超链接等。那我们应该不数据放到什么地方才会比较好呢？我们当然可以将数据存储在文件中，但是将存储在文件中存在许多弊端，比如管理数据困难，读写数据速度相对较慢等；而MySQL 就提供了一整套的解决方案。MySQL 是最流行的关系型数据库管理系统，在 WEB 应用方面 MySQL 是最好的RDBMS(Relational Database Management System：关系数据库管理系统)应用软件之一；关联数据库将数据保存在不同的表中，而不是将所有数据放在一个大仓库内，这样就增加了速度并提高了灵活性。

2.4 PHP技术

PHP 是一种创建动态交互性站点的强有力的服务器端脚本语言。PHP 是免费的，并且使用非常广泛。同时，对于像微软 ASP这样的竞争者来说，PHP 无疑是另一种高效率的选项。所以此网站选用PHP 作为服务器端的脚本语言来写接口

2.5 Apache服务器

Apache 是世界使用排名第一的Web 服务器软件。它可以运行在几乎所有广泛使用的计算机平台上，由于其跨平台和安全性被广泛使用，是最流行的Web 服务器端软件之一。它快速、可靠并且可通过简单的API 扩充，将Perl/Python 等解释器编译到服务器中。

3 系统分析

3.1 可行性分析

现如今，可能很多人都体会过借钱出去容易，要别人还钱难的感受。导致很多有钱的人不愿意把钱借给别人。而又有一些人可能会有急需用钱的时候，却又找不到地方借钱，这样一个金融借贷平台刚好解决了有钱人无处投资，而急需用钱的人找不到途径借款的这样一个现状，同过此平台，借款人可以发表借款需求，投资人可以看到所有的借款需求，根据借款人给出的年利率以及平台提供的信用度，投资人可以选择性的将钱借给有需要的人，投资人通过收取利息的方式获得利润，而平台通过收取佣金获得相应的收益，这样，借款人、投资人、和平台三方都满足了自己的需要。

3.2 功能需求分析

此平台是一个金融借贷平台，自然是需要注册登录才可以进行借款和投资的，所以注册和登录功能是必不可少的，同时，还应该具备个人信息编辑，实名认证、查看投资列表、可以查看平台简介等功能，用户需在平台上的账户进行充值，才能使用账户上的钱进行投资或者是还款，因此还需要充值功能，为了清晰的展示借款信息、还款信息等数据，还应该有明细统计功能。

3.3 非功能需求分析

作为一个网站，不仅基本功能要实现，同时还应该考虑到网站的整体外观效果是否美观，用户体验是否友好等个方面因素。传统的网站设计因为没有使用到响应式技术，使得用户体验度不是很好，比如一个页面在PC 端效果是正常的，但是用移动端打开之后字体、图片等元素显得尤其的小，使得用户体验度大大的降低。通过使用Bootstrap 框架的栅格系统，可以使得在不同的屏幕尺寸上有着比较友好的体验。

4 系统设计

4.1 系统设计原则

系统设计原则是希望不管在PC 端还是移动端，都能够有一个比较好的体验度，因此本系统主要采用Bootstrap 框架对项目进行快速搭建以减少对样式代码的编写，同时可以根据屏幕的大小进行自适应，实现一套代码兼容多端的目的。

4.2 系统总体结构

系统总体结构如图1 所示。

4.3 模块详细设计

主页是一个网站的门面，也是一个网站的入口，此模块一般应当包括一个banner 和一些功能模块的快捷入口，比如投资模块，借款模块等，同时每一个页面都具备页头和页尾，一般来说，页头和页尾每一个页面都是一致的，因此我们可以将页头和页尾单独抽离出来，以减少代码的冗余。如图2 所示的效果只需要通过Bootstrap的导航组件便可以轻松的搭建出来，投资模块包括一些借款人的借款列表信息，如图3 所示，此部分可以通过Bootstrap 的table 组件轻松的完成，可以通过点击查看进入借款人的具体信息，包括信用度，借款时长，年利率等。通过给按钮添加btn 和btn-danger 类名，可以使得按钮的颜色变成红色。通过Bootstrap 的栅格系统，我们可以吧个人中心轻松的分为左右布局，只需要将左右两部（即左右两个行row）分同时包裹在一个容器（类名为container）里，分别为每一个row 设置相应的比例类名如左边(col-md-3)，右边（colmd-9）。

图1：系统总体结构

图2：首页头部导航

图3：投资列表页部分

5 系统实现

5.1 环境搭建

安装IDE（Integrated Development Environment），这里选择vscode，搭建SVN 服务器，SVN 是一个开放源代码的版本控制系统，通过采用分支管理系统的高效管理，简而言之就是用于多个人共同开发同一个项目，实现共享资源，实现最终集中式的管理。搭建好SVN 服务器之后在一个开发目录下检出项目，然后配置项目目录结构即完成项目的搭建。

5.2 系统前台功能实现

5.2.1 首页

首先搭建一个网页应该有的基本结构，包括文档声明（＜!DOCTYPE html>）,HTML 根节点，head 标签，body 主体内容等，同时还应该在head 标签之间引入Bootstrap 样式和公共样式等。

5.2.2 注册

如果是初次使用本平台的服务，需要先进行注册之后方可享受本平台提供的服务，那么注册功能就是必不可少的了，一个最简单的注册功能，至少要包含用户名以及用户密码，为了避免密码填错，还应该包含确认密码一项，同时为了平台的规范以及用户密码的安全，我们应该对用户输入的用户名以及密码进行合法性验证，只有通过验证之后才可以提交表单进行注册。为了有一个较好的用户体验，当用户注册完成之后便立即跳转到登录页面并回填用户信息进行登录。

5.2.3 登录

用户需要使用本平台提供的服务，首先得先登录，因为平台需要知道是为谁在服务，登录需要验证用户名和密码，当我们点击登录按钮的时候，需要发送ajax 请求，将用户名和密码发送给后台，后台根据用户名和密码在数据库里面进行查找，如果有用户名且和密码一一对应则登录成功，否则登录失败，根据后台返回的信息进行友好提示。

5.2.4 个人中心

当用户登录成功之后，便可以进入个人中心查看一些基本信息以及一些操作，比如实名认证、银行卡管理等操作，这里使用到了Bootstrap 的栅格系统，将页面分为左右两部分，通过类名的方式将左右划分开来，通过col-md-3 使得左边占据栅格系统的三份，colmd-9 使得右边占9 份。

6 结论

设计此平台的意义在于解决传统金融借贷平台存在的一些问题，那就是传统金融借贷平台信用评定不够准确，平台需要大量的运营资金以及普通人无法在平台上进行投资和传统借贷平台无法很好的适应各种尺寸的屏幕等问题。本平台通过使用Bootstrap 框架，解决了各种尺寸的屏幕不能很好的适配的问题，而且还针对传统金融借贷平台的功能做出了优化，解决了传统金融借贷平台存在的弊端。