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

VIP文章 fenjijue

已于 2022-06-24 20:27:20 修改

阅读量1.1k

点赞数 1

文章标签： vue.js 数据库前端

于 2022-06-24 20:25:57 首次发布

本文链接：https://blog.csdn.net/weixin_48127034/article/details/125451062

版权

提示：文章写完后，目录可以自动生成，如何生成可参考右边的帮助文档

文章目录

前言
一、安装vue环境，并新建Vue项目
二、界面开发
总结

前言

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

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

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

首先需要安装vue框架，这里博主使用到的各类工具的版本如下：vue: @vue/cli 5.0.4；[email protected] ；[email protected] ；[email protected]；和[email protected]；

二、界面开发

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;
        }
      });
    }