spingboot银行案例+前端

最新推荐文章于 2023-05-17 19:47:02 发布

Angle灬魔君

最新推荐文章于 2023-05-17 19:47:02 发布

阅读量484

点赞数 1

分类专栏： springboot 文章标签： springboot银行案例+前端

本文链接：https://blog.csdn.net/AMrss/article/details/102826330

版权

springboot 专栏收录该内容

3 篇文章 0 订阅

订阅专栏

1.文件结构

在这里插入图片描述

//对date的扩展，将Date转化为指定格式的String
//月（M）、日（d）、小时（h）、分（m）、秒（s）、季度（q）可以用1-2个占位符，
//年（y）可以用1-4个占位符，毫秒（s）只能用1个占位符（是1-3位的数字）
//例子：
//(new Date()).Format("yyyy-MM-dd HH:mm:ss.S") ==> 2006-07-02 08:09:04.3423
//(new Date()).Format("yyyy-M-d H:m:s.S") ==> 2006-7-2 8:9:4.13
//let time1= new Date().Format("yyyy-MM-dd");
//let time2 = new Date().Format("yyyy-MM-dd HH:mm:ss");

Date.prototype.Format = function (fmt) {//author:meizz
    let o = {
        "M+":this.getMonth()+1,//月份
        "d+":this.getDate(),//日
        "H+":this.getHours(),//小时
        "m+":this.getMinutes(),//分
        "s+":this.getSeconds(),//秒
        "q+":this.floor((this.getMonth()+3)/3),//季度
        "S":this.getMilliseconds()//毫秒
    };
    //年得格式转换
    //RegExp.$1表示第一个匹配的字段部分
    if(/(y+)/.test(fmt)) fmt = fmt.replace(RegExp.$1,(this.getFullYear()+"").substr(4-RegExp.$1.length));
    //其他部分的转换
    for (let k in o )
        if(new RegExp("("+K+")").test(fmt)) fmt = fmt.replace(RegExp.$1,(RegExp.$1.length == 1)?(o[k]):(("00"+o[k]).substr(""+o[k]).length));
    return fmt;
};

main.html

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>个人银行</title>
    <link href="css/main.css" rel="stylesheet">
</head>
<body>
<div id="out-box">
    <div id="top">
        <span>admin,您好！欢迎访问微博信息管理系统！</span>
        <a href="javascript:void(0)">注销</a>
    </div>
    <div id="body">
        <div id="nav" class="background">
            <span></span>
            <ul>
                <li id="showBalance">查询余额</li>
                <li id="transAction">转账</li>
                <li id="records">查询交易记录</li>
                <li id="editPassword">修改密码</li>
            </ul>
        </div>
        <div id="content">
            <span id="content-top">首页</span>
            <div class="background" id="table">
                <center><h2>欢迎使用个人网上银行</h2></center>
            </div>
        </div>
    </div>
</div>
<script src="js/jquery-3.2.1.min.js"></script>
<script src="js/com.js"></script>
<script src="js/main.js"></script>
<script src="js/timeParse.js"></script>
</body>
</html>

main.js

let transactionParams = {};
let pageParams = {};
let passwordTest = /^\d{6}$/;

$(function () {
    sessionStorage.setItem("cardno","0123456789123456");
});

//转账页面
$("#transAction").click(function () {
    $("#table").html(`<center>
        <h3>当前操作：转账。请输入转入账号和金额后点“转账”按钮</h3>
        <div><span>转入账号：</span><input type="text" name="inCardNo"></div>
        <div><span>转入金额：</span><input type="text" name="transactionAmount"></div>
        <div><button type="button" id="confirm-transAction">转账</button></div>
    </center>`);
});

$("#table").on("click","#confirm-transAction",function () {
    transactionParams.currentCardNo = sessionStorage.getItem("cardno");
    transactionParams.targetCardNo = $("[name='inCardNo']").val().trim();
    transactionParams.money = $("[name='transactionAmount']").val().trim();
    $.ax("ta.do",transactionParams,function (obj) {
        console.log(obj);
        alert(obj.msg);
    })

});

//查询交易记录页面
$("#records").click(function () {
    $("#table").html(`<div><h3>当前操作：查询交易记录。请选择时间范围后点击“查询”按钮</h3>
        <div><span>查询日期范围：</span>
            <input type="date" name="startTime"><span>到</span><input type="date" name="endTime"/>
            <input type="button" value="查询" id="search">
        </div>
        <table id="record-list"></table>
        <div id="page-nav"></div>
    </div>`);
});

//交易记录局部刷新
//查询按钮、上一页、下一页、首页、末页按钮点击后根据传入页码查询交易记录
function showRecords(pageno){
    //将传入的页码存入全局变量，发送给后台
    pageParams.pageno = pageno;
    $.ax("page.do",pageParams,function (data) {
        if(data.total=="0"){
            $("#record-list").html("");
            $("#page-nav").html(`<center><h3>该时间范围内没有交易记录！</h3></center>`);
            return;
        }
        pageParams.pages = data.pages;
        //声明变量存储展示交易记录的表格标签元素
        let records = [];
        //声明变量存储表格下面的页码导航标签（首页、末页。。。。。）
        let pageNav = [];
        //添加表头
        records.push(`<tr>
           <th>交易日期</th>
           <th>交易额</th>
           <th>账户余额</th>
           <th>交易类型</th>
           <th>备注</th>
           </tr>`);
        //遍历list，将所有的记录放入表格元素
        data.list.forEach(e=>{
            records.push(`<tr>
                    <td>${e.transactiondate}</td>
                    <td>￥${e.expense}</td>
                    <td>￥${e.balance}</td>
                    <td>${e.transactiontype}</td>
                    <td>${e.remark}</td>
                </tr>`);
        });
        //将记录填入表格标签
        $("#record-list").html(records.join(""));

        pageNav.push(`<span>共${data.total}条记录</span>
                <span>每页<input type="text" readonly value="${data.pageSize}" name="pageSize"/>条</span>
                <span>第${data.pageNum}页/共${data.pages}页</span>`);

        //如果当前不是第一页，展示首页、上一页
        if (data.pageNum>1){
            pageNav.push(`<a href="javascript:void(0);" onclick="showRecords(${1})">首页</a><a href="javascript:void(0);" onclick="showRecords(${data.prePage})">上一页</a>`)
        }
        //如果当前不是最后一页，展示下一页、末页
        if(data.pageNum<data.pages){
            pageNav.push(`<a href="javascript:void(0);" onclick="showRecords(${data.nextPage})">下一页</a><a href="javascript:void(0);" onclick="showRecords(${data.pages})">末页</a>`)
        }
        pageNav.push(`<span>转到第<input type="text" value="${data.pageNum}" name="pageNo"/>页</span>
                <button type="button" class="blog-jump button">跳转</button>`);
        //填充页码标签
        $("#page-nav").html(pageNav.join(""));
    })
}

//查询按钮点击事件
$("#table").on("click","#search",function () {
    //获取后台所需的当前卡号、转入卡号、交易金额存入全局变量
    pageParams.cardno = sessionStorage.getItem("cardno");
    pageParams.starttime = $("[name='startTime']").val().trim();
    pageParams.endtime = $("[name='endTime']").val().trim();
    //查询按钮默认查询第一页，所以参数传“1”
    showRecords("1");
});

//页面跳转按钮
$("#table").on("click",".blog-jump",function () {
    //判断输入的页码是否超出实际页码，是的话报错，return停止继续执行后面的代码
    if($("#page-nav").find("[name='pageNo']").val()>pageParams.pages || $("#page-nav").find("[name='pageNo']")[0].value<1){
        alert("您选择的页码超出了实际页码数，请重新选择！");
        return;
    }

    //将跳转前面的input的值（想要跳转的页码）取出作为参数传入，刷新页面
    showRecords($("#page-nav").find("[name='pageNo']")[0].value);
});

//修改密码
$("#editPassword").click(function () {
    $("#table").html(`<h3>当前操作：修改密码。请按要求填写完整后点击“保存”按钮</h3>
        <form action="javascript:void(0)" method="post">
            <div><span>原密码：</span><input type="text" id="old-password"></div>
            <div><span>新密码：</span><input type="text" id="new-password"></div>
            <div><span>再次确认新密码：</span><input type="text" id="confirm-password"></div>
            <div>
                <button type="button" class="button" id="save">保存</button>
            </div>
        </form>
`)
});

//保存密码按钮点击事件
$("#table").on("click","#save",function () {
    let editParam = {};
    let isvalidate = true;
    editParam.cardno = sessionStorage.getItem("cardno");
    editParam.oldPwd = $("#old-password").val();
    editParam.password = $("#new-password").val();
    $("#table").find("input").each((i,e)=>{
        if(""==e.value.trim()){
            alert("密码不能为空！");
            isvalidate = false;
            return false;
        }else if(!passwordTest.test(e.value.trim())){
            alert("密码必须是六位数字！");``
            isvalidate = false;
            return false;
        }
    });
    if (!isvalidate){
        return;
    }
    $.ax("pwd.do",editParam,function (data) {
        alert(data.msg);
    })
});

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>登录界面</title>
    <style>
        fieldset{
            margin-top: 30px;
            width: 600px;
            background: repeating-linear-gradient(cornflowerblue,deepskyblue);
        }

        form{
            width: 600px;
            height: 200px;
            display: flex;
            flex-direction: column;
            justify-content:space-around;
        }

        [type="button"]{
            width: 60px;
        }

        span{
            display: inline-block;
            width: 80px;
        }
    </style>
</head>
<body>
<center>
    <fieldset>
        <legend>登录</legend>
        <form method="post">
            <div><span>卡号：</span><input type="text" name="cardNo" placeholder="请输入用户名" hint="用户名"></div>
            <div><span>密码：</span><input type="text" name="password" placeholder="请输入密码" hint="密码"></div>
            <input type="button" value="登录" id="login">
        </form>
    </fieldset>
</center>
<script src="js/jquery-3.2.1.min.js"></script>
<script src="js/com.js"></script>
<script>
    $("#login").click(function () {
        let validate = true;
        let accountParam = {};
        $("[name]").each((i,e)=>{
            if(""==e.value.trim()){
                alert($(e).attr("hint")+"不能为空!");
                validate = false;
                return false;
            }
            accountParam[e.name] = e.value;
        });
        if(!validate){
            return;
        }
        $.ax("showAccount.do",{cardNo:accountParam.cardNo},function (data) {
            if("undefined"!=typeof data.result){
                alert("卡号不存在！");
            }else {
                if(accountParam.password==data.password){
                    if("0"==data.status){
                        alert("登陆失败！该卡已被冻结！");
                    }else {
                        sessionStorage.setItem("cardNo",data.cardNo);
                        sessionStorage.setItem("balance",data.balance);
                        location.href = "main.html";
                    }
                }else {
                    alert("卡号或密码错误！");
                }
            }
        })

    })
</script>
</body>
</html>

com.js

$.extend({
    ax(url,param,callback){
        $.ajax({
            url:"http://localhost:9091/"+url,
            type:"post",
            data:param,
            dataType:"json",
            success:function (data) {
                callback(data);
            },
            error:function () {
                alert("系统繁忙！");
            }
        });
    }
});

timeParse.js

//对date的扩展，将Date转化为指定格式的String
//月（M）、日（d）、小时（h）、分（m）、秒（s）、季度（q）可以用1-2个占位符，
//年（y）可以用1-4个占位符，毫秒（s）只能用1个占位符（是1-3位的数字）
//例子：
//(new Date()).Format("yyyy-MM-dd HH:mm:ss.S") ==> 2006-07-02 08:09:04.3423
//(new Date()).Format("yyyy-M-d H:m:s.S") ==> 2006-7-2 8:9:4.13
//let time1= new Date().Format("yyyy-MM-dd");
//let time2 = new Date().Format("yyyy-MM-dd HH:mm:ss");

Date.prototype.Format = function (fmt) {//author:meizz
    let o = {
        "M+":this.getMonth()+1,//月份
        "d+":this.getDate(),//日
        "H+":this.getHours(),//小时
        "m+":this.getMinutes(),//分
        "s+":this.getSeconds(),//秒
        "q+":this.floor((this.getMonth()+3)/3),//季度
        "S":this.getMilliseconds()//毫秒
    };
    //年得格式转换
    //RegExp.$1表示第一个匹配的字段部分
    if(/(y+)/.test(fmt)) fmt = fmt.replace(RegExp.$1,(this.getFullYear()+"").substr(4-RegExp.$1.length));
    //其他部分的转换
    for (let k in o )
        if(new RegExp("("+K+")").test(fmt)) fmt = fmt.replace(RegExp.$1,(RegExp.$1.length == 1)?(o[k]):(("00"+o[k]).substr(""+o[k]).length));
    return fmt;
};

nds()//毫秒
};
//年得格式转换
//RegExp.$1表示第一个匹配的字段部分
if(/(y+)/.test(fmt)) fmt = fmt.replace(RegExp.$1,(this.getFullYear()+"").substr(4-RegExp.$1.length));
//其他部分的转换
for (let k in o )
if(new RegExp("("+K+")").test(fmt)) fmt = fmt.replace(RegExp.$1,(RegExp.$1.length == 1)?(o[k])?(“00”+o[k]).substr(""+o[k]).length));
return fmt;
};