Vue+SpringBoot前后端分离项目实战：个人网上银行

一、语言和环境

二、功能要求

在IDEA中使用Maven构建项目，使用Spring Boot + MyBatis-Plus（或JPA）
+Vue脚手架-ElementUI实现个人网上银行，以MySQL 5.7作为后台数据库。功能包括登录、退出、转账、查询交易记录，具体要求如下：
打开个人网上银行首页，显示登录页面。如图-1：

输入卡号和密码，点击“登录网上银行”按钮进行登录。要求进行表单验证，卡号、密码必填，且卡号为16位数字、密码为6位数字，输入有误需要提示。
通过表单验证后提交表单，服务器根据用户所填处理登录请求。可能导致登录失败的业务条件有：卡号不正确、密码不正确、账户已冻结。如出现上述问题，须返回登录页并对用户进行提示。
登录成功后，进入个人网上银行主界面，界面显示当前登录的卡号。如图-2：
注：
查询余额和修改密码功能不要求实现

点击“退出登录”超链接执行退出操作，要求使用confirm对用户操作进行确认，如图-3。用户点击“确定”按钮，销毁回话并跳转到登录页面。

点击“转账”超链接，进入转账页面。如图-4：

用户点击“转账”按钮后，进行JavaScript验证，账号和金额均为必填项，账号只能是16位数字，金额必须是数字且最多只能有两位小数。用户填写错误需要提示。
通过JavaScript验证后，提交数据到服务器执行转账功能，可能导致转账失败的业务条件有：转入账户不存在、转入账户被冻结、转出账户余额不足。发生上述情况须在转账页面进行提示。
否则分别修改两个账户的余额，并在交易记录表transaction_record中分别为转出账户添加一条取款记录，为转入账户添加一条存款记录，交易时间均为当前系统时间。全部执行成功，提交事务，否则回滚事务。并在页面提示用户操作成功或操作失败。如图-5：

点击“查询交易记录”进入查询交易记录页面。如图-6：

用户点击“查询”按钮，进行JavaScript验证。两个日期均为必填项，格式为“年-月-日”。用户填写错误需要提示。
通过JavaScript验证后，提交数据到服务器执行查询，查询结果按交易时间升序排列，列表隔行变色，并分页展示。在切换页码时，指定的日期范围应保持不变。如图-7：

 如果指定时间范围内没有交易记录，提示效果如图-8：

三、   数据库设计

数据库表名称及要求：

数据库部分

/*Navicat Premium Data TransferSource Server         : 本机MySQL57Source Server Type    : MySQLSource Server Version : 50726Source Host           : localhost:3306Source Schema         : bankdbTarget Server Type    : MySQLTarget Server Version : 50726File Encoding         : 65001Date: 06/01/2022 22:46:59
*/create data if not exists bankdb;use bankdb;SET NAMES utf8mb4;
SET FOREIGN_KEY_CHECKS = 0;-- ----------------------------
-- Table structure for account
-- ----------------------------
DROP TABLE IF EXISTS `account`;
CREATE TABLE `account`  (`id` bigint(20) NOT NULL AUTO_INCREMENT COMMENT '账户id',`cardno` varchar(16) CHARACTER SET utf8 COLLATE utf8_general_ci NOT NULL COMMENT '卡号',`password` varchar(6) CHARACTER SET utf8 COLLATE utf8_general_ci NOT NULL COMMENT '密码',`balance` decimal(10, 2) NOT NULL COMMENT '账户余额',`status` int(11) NOT NULL COMMENT '账户状态,1为正常，0为冻结',PRIMARY KEY (`id`) USING BTREE,UNIQUE INDEX `cardno`(`cardno`) USING BTREE
) ENGINE = InnoDB AUTO_INCREMENT = 3 CHARACTER SET = utf8 COLLATE = utf8_general_ci ROW_FORMAT = Dynamic;-- ----------------------------
-- Records of account
-- ----------------------------
INSERT INTO `account` VALUES (1, '6451225451452114', '123456', 7000.00, 1);
INSERT INTO `account` VALUES (2, '6451225451452115', '654321', 67000.00, 1);-- ----------------------------
-- Table structure for transaction_record
-- ----------------------------
DROP TABLE IF EXISTS `transaction_record`;
CREATE TABLE `transaction_record`  (`id` bigint(20) NOT NULL AUTO_INCREMENT COMMENT '记录id',`cardno` varchar(16) CHARACTER SET utf8 COLLATE utf8_general_ci NOT NULL COMMENT '卡号',`transactionDate` timestamp(0) NOT NULL DEFAULT CURRENT_TIMESTAMP(0) ON UPDATE CURRENT_TIMESTAMP(0) COMMENT '交易日期,取系统时间',`amount` decimal(10, 2) NOT NULL COMMENT '交易金额',`balance` decimal(10, 2) NOT NULL COMMENT '交易完成时的账户余额',`transactionType` varchar(16) CHARACTER SET utf8 COLLATE utf8_general_ci NOT NULL COMMENT '交易类型,存款、取款、消费',`remark` varchar(2000) CHARACTER SET utf8 COLLATE utf8_general_ci NULL DEFAULT NULL COMMENT '备注',PRIMARY KEY (`id`) USING BTREE
) ENGINE = InnoDB AUTO_INCREMENT = 7 CHARACTER SET = utf8 COLLATE = utf8_general_ci ROW_FORMAT = Dynamic;-- ----------------------------
-- Records of transaction_record
-- ----------------------------
INSERT INTO `transaction_record` VALUES (1, '6451225451452114', '2021-12-18 10:04:53', 100.00, 8000.00, '消费', '买了一条裤子');
INSERT INTO `transaction_record` VALUES (2, '6451225451452115', '2021-12-18 10:05:20', 800.00, 65100.00, '取款', NULL);
INSERT INTO `transaction_record` VALUES (3, '6451225451452114', '2021-12-18 10:05:44', 300.00, 6000.00, '存款', NULL);
INSERT INTO `transaction_record` VALUES (4, '6451225451452115', '2021-12-18 10:06:02', 300.00, 68000.00, '存款', NULL);
INSERT INTO `transaction_record` VALUES (5, '6451225451452114', '2021-12-18 12:06:06', 1000.00, 7000.00, '取款', '转账给6451225451452115');
INSERT INTO `transaction_record` VALUES (6, '6451225451452115', '2021-12-18 12:06:06', 1000.00, 67000.00, '存款', '6451225451452114转入');SET FOREIGN_KEY_CHECKS = 1;