1、第1章 绪论1.1 选题背景及意义近十年来随着人们消费水平的提高，越来越多的人在为了体验高品质的生活方式去花费更多的钱和精力，而很多人的收入暂时并不能达到高消费的平均值。因此利用银行贷款提前消费的模式应运而生。经过近十年的发展与改革，逐渐形成了具有一定特色的银行消费信贷业务体系，各大银行的贷款总量也日益增多。截止到2017年底，在某些发达国家人均已拥有6张信用卡、港台地区也达到了惊人的3张以上。总的来说，我国的消费市场已由卖方转为买方，销售厂家采取了很多方法去提高自己的销量，甚至许多消费品采取持续降价的销售方式但并未达到很好的效果。解决国内消费状态萎靡不振的问题刻不容缓，有关机构明确指出促进居
2、民个人的消费需求才是解决消费需求问题的关键。尽管在过去的15年里，我国平均消费率为56.5%，低于国外水平和历史平均水平，但据不完全统计我国的居民金融资产同期也在大幅增加，银行的储蓄存款总额已达7万多亿元，由此可见虽然当前现实并不允许我国大力开展消费贷业务，但随着人们收入的提升以及对高品质生活的疯狂追求，国内的个人消费信贷市场潜力巨大。从国外消费贷的发展历史过程来看，其不止与国民的消费愿望存在着很紧密的联系，还和国民消费水平具有很大的关系。消费拉动我国GDP增长举步维艰一直以来都是未解决的难题，最主要的原因是和我国国内生产总值的高速增长来比，居民收入增长较慢。从2010年以来，为了扩大国内需求
3、，我国采取积极的财政政策和稳健的货币政策，消费信贷正是增大消费市场需求最有力的手段。为了响应国家政策，满足人们的消费需求，本课题结合消费贷产品的特点，并采用了HTML5技术，设计与实现了基于HTML5的移动端消费贷系统，本系统可以跨平台运行，有效的满足了人们对消费贷系统的要求。本文设计实现的是一个基于HTML5的移动端消费贷系统，此系统包括五个功能模块，第一模块是登录注册，第二模块是申请借款，第三模块是提前还款，第四模块是借还记录，第五模块是个人信息管理。1.2 国内外研究现状据资料可查，20世纪前后，由于经济发展相对较好，欧美地区成为了消费信贷的发源地，20世纪后期，这一业务在西方得到广泛的
4、推广。众所周知，消费信贷已经成为一项有着近百年发展历史的西方发达资本主义国家的盈利模式，并逐渐成为某些发达国家大部分银行的一项重要盈利来源。而我国在经历了东南亚金融危机之后，才明白我们需要借助发展消费信贷业务的趋势进一步扩大国内消费市场内需、刺激国内居民的消费热情。随着业务领域不断加深和拓展，消费信贷在各大领域的供给量猛增，个人消费信贷市场的未来呈现出一片宏大的蓝图。但是我国的消费信贷历史短暂，一直都存在着资本市场发展不完善的缺陷，尤其是资金渠道狭窄这一问题成为了整个消费信贷大道的拦路虎。由于银行的系统中金融资产占了很大部分，这种过于集中的最大弊端就是银行有关资产的业务如果出现一些不可控制的危
5、机，我国宏观经济的稳健运行必将会受到极大的影响。 1.3 论文主要工作本文设计实现的是一个基于HTML5的移动端消费贷系统，此系统包括五个功能模块，第一模块是登录注册，第二模块是申请借款，第三模块是提前还款，第四模块是借还记录，第五模块是个人信息管理。1、登录注册模块：注册时用户需要输入姓名，身份证，手机号，以及登录密码，且需要符合正则表达式的要求才可以注册成功。注册成功会有一个提示弹框提示你注册成功，并会跳转到登录页面，登录需要输入手机号和密码来登录，并判断如果输入的手机号为15979083783且密码正确时，会跳转到管理员页面，其他手机号登录则是用户页面。在登录消费贷系统时候，首先判断输入
6、的手机号和密码是否对应表user中的数据，如果符合，则判断是管理员还是用户，是管理员则进入管理员页面，否则进入用户页面；如果不符合，则提示用户名/密码错误，请重新输入。在登录的时候使用sessionstroge技术保存了登录时的客户手机号，再使用客户手机号查询数据库user表中的客户信息，并保存。2、申请贷款模块：用户可以提前计算贷款所需要的利息，以及每个月需要还款的多少，此处用户可以选择借款金额的不同来计算不同贷款期限所需的应还利息金额，采用的利息计算法是根据工商银行的利息计算法。用户点击申请分期按钮时，系统会先判断用户是否已经贷过款，如果上一次贷款的金额还未还清，则无法继续贷款，如未贷过款
7、或者上一次贷款已还清，则可继续贷款。用户输入身份证、贷款金额、分期期数，如果用户输入的身份证和后台保存的身份证号相同，即可贷款成功；如果不相同，则会弹框提示两次身份证不相同。如果申请条件成立的，那么系统将会发送ajax调用apply方法，apply方法中会建立一个连接池将系统与数据库相连，其中的sql语句就是申请贷款的关键语句，系统会向数据库brow表写入合同号、还款状态、身份证号、分期期数、用户姓名、申请金额、还款时间、借款时间。3、提前还款模块：用户点击“我的分期”按钮时，后台会根据用户登录时保留的身份证查询数据库brow表中的信息，系统将会发送ajax调用querylous方法，quer
8、ylous方法中会建立一个连接池将系统与数据库相连，其中的sql语句就是查询的关键语句，查询成功后将表中的借据号、身份证号、姓名、申请金额、借款日期、总分期数、已还分期数、还款状态显示在页面上。4、借还记录模块：用户点击“账户设置”按钮时，系统将会发送ajax调用querymessage方法，querymessage方法中会建立一个连接池将系统与数据库相连，其中的sql语句就是查询数据库user表中的信息，并返回到前台显示到页面中，其中包括姓名、身份证、登录密码、注册时间、电话号码、状态、还款账号、详细地址、紧急联系方式、与紧急联系人的关系等信息。5、个人信息管理模块：点击“账户设置”，会有“
9、查看个人信息”和“修改密码”功能，该模块可以查看自己的详细信息，并修改自己的登录密码。用户点击“修改个人信息”按钮时，系统将会发送ajax调用querymessage方法，querymessage方法中会建立一个连接池将系统与数据库相连，其中的sql语句就是查询数据库user表中的信息，并返回到前台显示到页面中，页面中的输入框内容是可以修改的，其他的并不能修改。点击“修改”按钮后，则会修改成功。3第2章 相关技术介绍2.1 架构选择本系统设计采用B/S（浏览器/服务器）架构模式。管理系统的设计模式结构发展由传统的C/S（客户端/服务器），再到C/S与B/S的辅成，再到目前成熟的B/S模式。使得
10、使用者不依赖于系统环境、不局限于计算机、不需要安装额外的客户端，可以随时随地通过浏览器访问，符合当今移动优先的开发环境。C/S和B/S的结构图如图2-1和图2-2所示。2.2 前端技术介绍本项目涉及到的主要技术有JavaScript、HTML、CSS，使用了bootstrap样式框架以及jQuery框架进行页面美化以及页面交互。引入了jQuery的Particleground插件，使用canvas画布功能绘制动态粒子背景。后台采用时下流行的nodejs，提供http服务，使用express扩展，处理前端的请求，连接MsSql数据库，处理数据通过接口返回给前端。作为Web项目首要达到的要求便是页
11、面交互的流畅度，如你在电脑上直接访问该系统时的时候，发现浏览器就像卡死掉了一样或者你先只看到了文字，完全没有排版的样子，整个页面的布局完全都没有加载出来，这样的用户体验就会很糟糕。所以在设计上，前端的性能优化显得尤为重要。不引用大量的插件，进行代码压缩，能让系统给使用者带去更好的体验。再一个就是后台的响应速度，用户点击一个链接，如果响应的事件过长，那么这个系统的的后台设计就算是失败的。所以要在后台进行大量的代码优化工作，提高代码的复用性，在nodejs的模块化编程中显得更为重要。系统的鲁棒性，要尽可能的增强代码的鲁棒性，各个模块之间要分工明确，不能因为某一个模块失效而使得整个系统功能崩溃。安全
12、性，作为一个高校的移动端消费贷系统，系统的安全性也是极为重要的，所以在设计系统的时候要把安全性放在首位考虑，设计实现一个安全的、高效的、易用的移动端消费贷系统才符合国民的需求。2.2.1 HTML5技术HTML(HyperText Mark-up Language)是一张网页的基本骨架，是构成张网页的主要语言之一。在10年之前，第一版的HTML诞生，历经多年，期间更新迭代了多个版本，在HTML5之前的HTML版本统称HTML。但是其在表达和应用上已经难以满足开发者的日常需求。为了适应迭代更新的Web技术和不断提出的Web应用新需求，HTML5技术由此诞生。第一份正式HTML5草案在2008年1
13、月22日向外界公布，经过八年，HTML5标准规范终于最终制定完成了，并且正式发布。语义化特性，让网页有了更好的意义和结构，更有利于搜索引擎对于站点的搜索。丰富的标签系统将伴随对RDFa，微格式与微数据等场景的支持，构建对开发者、对用户都更有价值的基于数据驱动的新一代web技术；本地存储特性，LocalStorage突破了传统cookie的存储数据量的限制，将数据存储在本地大大提升了站点的性能；设备兼容特性，HTML5开放了更多的应用数据接口和应用场景接入，使外部应用能够直接与内部数据相连。并且在webApp的开发上有了更大的突破，能够使用HTML5调用绝大部分的Android原生API，使we
14、bApp能够带来如原生APP的体验；连接特性，HTML5拥更有效的连接工作效率，基于此，站点能够实现的实时的聊天，也带来了更快速、流畅的网页游戏体验。HTML5拥有更有效的服务器推送技术，Server-Sent Event和WebSockets就是其中的两个关键技术，这两个技术能够帮助我们实现服务器将数据“推送”到客户端的功能；影音特性，HTML5支持让网页拥有的Audio、Video等多媒体功能，与客户端自带的APPS，摄像头，音频、视频功能等能够完美契合。Canvas、svg等新技术给浏览器带来了绘制矢量图的功能，加快了flash的灭亡的步伐。开放注定是互联网的未来。HTML5 的跨平台优
15、势在移动互联网时代进一步显现，HTML5技术拥有有巨大的发展趋势。2.2.2 css技术CSS（Cascading Style Sheets），是一种用来表现HTML或XML等文件的样式语言。如果说HTML是一个骨架的话，那么css就是一件件靓丽的衣服。CSS就像Office Word工具一样能对一张网页不仅仅是静态网页有着精准的排版控制和动画效果。CSS技术被设计出来是用于美化HTML结构，是一张网页只是干巴巴的文字而可以是图像、动画、以及各种炫酷特效。CSS提供了非常多的文档的样式，以及能够设置文本、阴影、背景等属性的能力；CSS可以为任何元素创建边框，以及修改元素边框与其他标签元素间的距
16、离，标签元素边框与标签元素内容间的距离，可以任意的修改文本的字体大小、字体类型、装饰方式以及其他页面效果；CSS样式可以是一个单独存放CSS文件，这样在需要在多个页面使用相同的样式时，只需要引入这一个文件。CSS样式文件理论上不是任何页面从属文件，所以任何页面中都可以将其引用。这样就可以实现多个页面风格的统一；CSS对一个HTML结构的处理具有层叠性，如果你觉得上一版的风格不符合你的需求，你可以继续在CSS种写新的风格去覆盖上一版的样式，新的样式能够在原有样式不需要更改的情况下直接替换样式。2.2.3 JavaScript技术HTML对应结构层、css对应样式层、JavaScript则对应行为层。JavaScript一种直接编译式的脚本语言，是一种动态的、弱类型的、基于原型的语言，拥有内置对象。js脚本的编译解析器被称为JavaScript引擎，是组成浏览器重要组成之一，广泛用于各客户端的脚本语言，最早是在HTML网页上使用，用来给HTML网页增
