前言

最近和同学一起写了个银行流水查询系统，系统采用的是前后端分离技术，其中后端使用的是springboot框架，数据库由巨杉数据库用容器模式部署的，主要由我同学完成，我主要负责的是前端web展示内容，使用的是vue框架，在这里记录一下自己的学习心得。其中web需要完成的内容如下：

以下是前端的一个架构图。

目前前端设计还是有点简陋，功能不多，以后有时间再进行修改

一、安装vue环境，并新建Vue项目

首先需要安装vue框架，这里博主使用到的各类工具的版本如下：vue: @vue/cli 5.0.4；cnpm@8.1.0 ；npm@6.14.17 ；node@16.15.1；和npminstall@6.2.0；

二、界面开发

1.登陆界面开发

接下来我们来开发我们第一个页面Login.vue（http://localhost:8080），目前页面是完全空白的。一般登录页面就一个简单的表单：用户名、登录密码和验证码。然后我在表单左边添加一个交行logo，中间用一条竖线分开。这里可以参考elimentUI中的form表单：https://element.eleme.cn/#/zh-CN/component/form进行修改，得到效果如下：

2.后台查询界面开发

在该管理系统中，页面头部我们用来展示一个简单的信息展示系统名称和登录用户信息，然后中间的左边是菜单导航栏，右边是内容，对应到elementui的组件中，我们可以找到这个Container 布局容器用于布局，方便快速搭建页面的基本结构。采用这个布局：

最终完成的效果如下：

3.查询功能实现

3.1查询一实现

这里我们首先要实现的是按照流水号进行查询，主要难点在传参到后端以及从后端接收数据并展示到前端。传参的话，我们可以使用axios进行post传参，并接收数据传至要展示的值中，因为vue中是双向绑定，data数据改变后能即时展现在页面中。
axios部分代码如下：

  methods: {submitForm(formName) {this.$refs[formName].validate((valid) => {if (valid) {this.axios({url: 'http://localhost:8097/select1',method: 'post',headers: {// 全局请求头'Content-Type': 'application/json'},params:this.loginForm,}).then(res => {console.log(res)this.tableData = res.data})} else {console.log('error submit!!');return false;}});},resetForm(formName) {this.$refs[formName].resetFields();},}

最终实现的效果如下：

3.2查询二实现

查询二主要是多了一个分页的功能，在这里我们可以参考elimentUI的分页组件：https://element.eleme.cn/#/zh-CN/component/pagination
最终实现的效果如图：

该部分代码如下:

<!-- 按照账号(不包括对方账户)查询交易流水 -->
<template><el-form :model="loginForm" :rules="rules" ref="loginForm" label-width="80px" :inline="true"><el-form-item label="账号" prop="account_id" style="width: 380px;" ><el-input v-model="loginForm.account_id"></el-input></el-form-item><el-form-item><el-button type="primary" @click="submitForm('loginForm')" >查询</el-button><el-button @click="resetForm('loginForm')">重置</el-button></el-form-item></el-form><el-table style="width: 100%" border :data="tableData"><template v-for="(item,index) in rightHeader"><el-table-column :prop="item.label" :label="item.key" :key="index"v-if="item.label != 'id'"></el-table-column></template></el-table><!-- 分页 --><el-paginationstyle="text-align: right"layout="total, prev, pager, next, jumper":total="totalData.length":current-page.sync="page"@size-change="handleSizeChange"@current-change="handleCurrentChange"></el-pagination></template><script>
export default {name: "Select2",data() {return {loginForm: {account_id: '',token: ''},rightHeader:[{label: 'account_id',key: 'account_id'},{label: 'tx_id',key: 'tx_id'},{label: 'customer_name',key: 'customer_name'},{label: 'tx_time',key: 'tx_time'},{label: 'tx_value',key: 'tx_value'},{label: 'account_overage',key: 'account_overage'},{label: 'tx_type',key: 'tx_type'},{label: 'other_side_account',key: 'other_side_account'},{label: 'tx_site',key: 'tx_site'},{label: 'summary',key: 'summary'}],tableData:[],totalData:[],page: 1, // 默认页码page_size: 10, // 每页条数total: 0,  //默认总数rules: {account_id: [{required: true, message: '请输入账号进行查询', trigger: 'blur'}],},};},methods: {submitForm(formName) {this.$refs[formName].validate((valid) => {if (valid) {this.axios({url: 'http://localhost:8097/select2',method: 'post',headers: {'Content-Type': 'application/json'},params:this.loginForm,}).then(res => {console.log(res)this.totalData = res.data// 解决第一页需要点击页码才能显示的问题，且后面重新搜索还是显示上一次搜索的问题if (this.page_size <= this.totalData.length){this.tableData = this.totalData.slice(0, 10)}else {this.tableData = this.totalData.slice(0, this.totalData.length)}})} else {console.log('error submit!!');return false;}});},resetForm(formName) {this.$refs[formName].resetFields();},handleSizeChange(size) {},handleCurrentChange(page) {this.page = pageconsole.log(`当前处于${page}页`)if (page * this.page_size <= this.totalData.length){this.tableData = this.totalData.slice((page-1)* this.page_size, page * this.page_size)}else {this.tableData = this.totalData.slice((page-1)* this.page_size, this.totalData.length)}},},  // 方法
}</script><style scoped></style>

查询三和查询四和查询一相差不大，这里不再重复

4.其他功能

操作日志是为了记录每一个登录角色及进行过的操作，以提高系统的安全性，更多服务是方便后续提供可以添加更多的服务，这两个暂时还没有具体实现其功能。

5.跨域问题

由于后端使用的端口为8097，而前端使用的是8080，这就存在了一个跨域问题，跨域问题有多个解决方法，具体可以参考：
https://blog.csdn.net/m0_58528901/article/details/123775417
这里博主是在后端controller类添加注解：
@CrossOrigin(origins={“*”,“null”})

6.后端开发

这里的后端开发可以参考我同学的博客：
https://blog.csdn.net/weixin_48127037/article/details/125436003

总结

经过这次大作业，对vue框架有了一个基本的了解，可以使用vue开发一些简单的界面，对巨杉数据库也有了一个较为全面的了解。

vue开发银行流水查询系统--基于巨杉数据库相关推荐

车辆违章查询系统-基于Python-Django后端渲染项目
车辆违章查询系统-基于Python-Django后端渲染项目作者:代昌松项目详情代码参见: 后端渲染:https://gitee.com/dcstempt_ping/carsys_back_end ...
公交线路图查询系统c语言,公交路线查询系统(基于数据结构和C语言)完整
公交路线查询系统(基于数据结构和C语言)完整 #include #include #include #include #define max 30 #define len 20 #define MAX ...
基于巨杉数据库的银行流水查询系统
背景: 银行流水账单俗称银行卡存取款交易对账单,也称银行账户交易对账单.指的是客户在一段时间内与银行发生的存取款业务交易清单.一般而言,在申请贷款或者信用卡时,银行或其他金融机构会要求借款人提供申请者 ...
计算机毕设Python+Vue医疗健康查询系统（程序+LW+部署）
项目运行环境配置: Jdk1.8 + Tomcat7.0 + Mysql + HBuilderX(Webstorm也行)+ Eclispe(IntelliJ IDEA,Eclispe,MyEclis ...
基于android系统的公交信息查询系统,基于Android平台的智能手机公交信息查询系统的设计与实现...
摘要: 随着我国城市化经济的飞速发展,公共交通在这一进程中的作用越来越重要.目前,我国城市公共交通的线路和站点越来越多,逐渐形成了一个复杂的公共交通网络.然而,正是因为公交网络的复杂,导致人们无法快速 ...
java springboot VUE 在线学习平台系统开发mysql数据库web结构java编程计算机网页源码maven项目前后端分离
一.源码特点 springboot VUE 在线学习平台系统是一套完善的完整信息管理类型系统前后端分离,结合springboot框架和VUE完成本系统,对理解JSP java编程开发语言有帮助系 ...
基于html5的城市公交查询系统,基于WEB的智能公交查询系统的研究与设计
摘要: 我国城市公交查询系统的发展处于一个较落后的水平,广大乘客可以获得信息的方式很少,为了解决这种问题,加快发展城市公交信息化,设计了这个城市公交出行线路查询系统.公交换乘查询系统是MAS技术和We ...
C语言最短时间旅游路线查询系统,基于QT实现的旅游路线查询系统
一.功能要求系统初始的城市总数不少于10个建立汽车.火车和飞机的时刻表(航班表),时刻表(航班表)中包含沿途到站及票价信息不能太简单(不能总只是1班车次相连),旅客的要求包括:起点.终点.途经某 ...
查询系统--基于Solr4.9.0实现
为什么非要搜索系统随着在产品的数量的增长.和复杂的检索要求,直接从数据库中检索信息,它已经无法满足展示机搜索需求. 实例: http://search.jd.com/Search?keyword=% ...

vue开发银行流水查询系统--基于巨杉数据库

文章目录

前言