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

本文主要是介绍Vue+SpringBoot前后端分离项目实战:个人网上银行,希望对大家解决编程问题提供一定的参考价值,需要的开发者们随着小编来一起学习吧!

一、语言和环境

A、实现语言

Java

B、环境要求

JDK 1.8、IDEA、 Maven3及以上版本、 MySQL 5.7、

Vue脚手架2.0+ElementUI

二、功能要求

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

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

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

038bf17b21826003e12dc010a32d2786.png点击“转账”超链接,进入转账页面。如图-4:

fd7b30849b8951f681ed2e609f55c316.png

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

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

547f7e28632a337c5938319ca1f52e7e.png

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

 如果指定时间范围内没有交易记录,提示效果如图-8:4556228687cbfb4dff6b815d8d3d2ac3.png

三、   数据库设计

数据库表名称及要求:

表名

account

中文表名称

账户信息表

主键

id

序号

字段名称

字段说明

类型

属性

备注

1

id

账户id

长整数

主键

使用自动增长赋值

2

cardno

卡号

字符串

非空,唯一

16位数字构成的卡号

3

password

密码

字符串

非空

6位数字的密码

4

balance

账户余额

浮点数

非空

5

status

账户状态

整数

非空

1为正常,0为冻结

表名

transaction_record

中文表名称

交易记录表

主键

id

序号

字段名称

字段说明

类型

属性

备注

1

id

记录id

长整数

主键

使用自动增长赋值

2

cardno

卡号

字符串

非空

对应account表cardno字段

3

transactionDate

交易日期

时间戳

非空

取系统时间

4

amount

交易金额

浮点数

非空

5

balance

账户余额

浮点数

非空

交易完成时的账户余额

6

transactionType

交易类型

字符串

非空

存款、取款、消费

7

remark

备注

字符串

数据库部分

/*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;

这篇关于Vue+SpringBoot前后端分离项目实战:个人网上银行的文章就介绍到这儿,希望我们推荐的文章对编程师们有所帮助!



http://www.chinasem.cn/article/741356

相关文章

java中BigDecimal里面的subtract函数介绍及实现方法

《java中BigDecimal里面的subtract函数介绍及实现方法》在Java中实现减法操作需要根据数据类型选择不同方法,主要分为数值型减法和字符串减法两种场景,本文给大家介绍java中BigD... 目录Java中BigDecimal里面的subtract函数的意思?一、数值型减法(高精度计算)1.

Java空指针异常NullPointerException的原因与解决方案

《Java空指针异常NullPointerException的原因与解决方案》在Java开发中,NullPointerException(空指针异常)是最常见的运行时异常之一,通常发生在程序尝试访问或... 目录一、空指针异常产生的原因1. 变量未初始化2. 对象引用被显式置为null3. 方法返回null

使用vscode搭建pywebview集成vue项目实践

《使用vscode搭建pywebview集成vue项目实践》:本文主要介绍使用vscode搭建pywebview集成vue项目实践,具有很好的参考价值,希望对大家有所帮助,如有错误或未考虑完全的地... 目录环境准备项目源码下载项目说明调试与生成可执行文件核心代码说明总结本节我们使用pythonpywebv

一文彻底搞懂Java 中的 SPI 是什么

《一文彻底搞懂Java中的SPI是什么》:本文主要介绍Java中的SPI是什么,本篇文章将通过经典题目、实战解析和面试官视角,帮助你从容应对“SPI”相关问题,赢得技术面试的加分项,需要的朋... 目录一、面试主题概述二、高频面试题汇总三、重点题目详解✅ 面试题1:Java 的 SPI 是什么?如何实现一个

Spring中管理bean对象的方式(专业级说明)

《Spring中管理bean对象的方式(专业级说明)》在Spring框架中,Bean的管理是核心功能,主要通过IoC(控制反转)容器实现,下面给大家介绍Spring中管理bean对象的方式,感兴趣的朋... 目录1.Bean的声明与注册1.1 基于XML配置1.2 基于注解(主流方式)1.3 基于Java

SpringCloud中的@FeignClient注解使用详解

《SpringCloud中的@FeignClient注解使用详解》在SpringCloud中使用Feign进行服务间的调用时,通常会使用@FeignClient注解来标记Feign客户端接口,这篇文章... 在Spring Cloud中使用Feign进行服务间的调用时,通常会使用@FeignClient注解

Java Spring 中的监听器Listener详解与实战教程

《JavaSpring中的监听器Listener详解与实战教程》Spring提供了多种监听器机制,可以用于监听应用生命周期、会话生命周期和请求处理过程中的事件,:本文主要介绍JavaSprin... 目录一、监听器的作用1.1 应用生命周期管理1.2 会话管理1.3 请求处理监控二、创建监听器2.1 Ser

JVisualVM之Java性能监控与调优利器详解

《JVisualVM之Java性能监控与调优利器详解》本文将详细介绍JVisualVM的使用方法,并结合实际案例展示如何利用它进行性能调优,具有很好的参考价值,希望对大家有所帮助,如有错误或未考虑完全... 目录1. JVisualVM简介2. JVisualVM的安装与启动2.1 启动JVisualVM2

Java如何从Redis中批量读取数据

《Java如何从Redis中批量读取数据》:本文主要介绍Java如何从Redis中批量读取数据的情况,具有很好的参考价值,希望对大家有所帮助,如有错误或未考虑完全的地方,望不吝赐教... 目录一.背景概述二.分析与实现三.发现问题与屡次改进3.1.QPS过高而且波动很大3.2.程序中断,抛异常3.3.内存消

SpringBoot使用ffmpeg实现视频压缩

《SpringBoot使用ffmpeg实现视频压缩》FFmpeg是一个开源的跨平台多媒体处理工具集,用于录制,转换,编辑和流式传输音频和视频,本文将使用ffmpeg实现视频压缩功能,有需要的可以参考... 目录核心功能1.格式转换2.编解码3.音视频处理4.流媒体支持5.滤镜(Filter)安装配置linu