概述

这是一个前后端分离的记账系统，分为前端部分和后端部分，后端返回Json数据，前端通过Ajax调用后端接口来接收数据。

后端分为4个部分：

Eureka注册中心：其他微服务都要注册到eureka（端口号：10086） Spring Cloud Gateway网关：有路由功能，将特定格式的请求（以/api/bill/开头的请求）路由到bill-service微服务（端口号：8086） Spring Cloud Config分布式配置中心：从Git仓库获取bill-service微服务的配置文件（我将bill-service微服务配置文件上传到了gitee）（端口号：12000） bill-service微服务（端口号：9091）

前端使用了layui框架。

为了实现bill-service微服务配置文件的实时更新，使用了基于RabbitMQ的Spring Cloud Bus服务总线，请见我写的这一篇文章：

遇到的问题及解决方法

前后端分离的项目怎么实现跨页面的数据回显？

主页（operate.html）显示了很多条账单数据，点击某一条账单数据的修改按钮，跳转到修改页面（update.html），此时要回显数据，把这条账单数据显示在输入框里。

可以使用本地存储localstorage。主页（operate.html）点击修改按钮时，把相应的数据存储在localstorage：

//将要修改的数据存在local storage中
localStorage.setItem("originalBillData",JSON.stringify(data));

在修改页面（update.html），将数据从localstorage里取出来。

//从local storage中取原来的账单数据
    var str = localStorage.getItem("originalBillData");
    console.log(str);
    var originalBillData = JSON.parse(str);//string转json

layui表单的提交按钮，每点击一次，实际会提交两次

在主页（operate.html）通过开始时间、结束时间、类别进行条件查询时，总是查询失败（并没有利用用户输入的条件），后来发现：表单被提交了2次。

在这里找到了解决方法：

<!--"搜索"按钮需要设置type="button"，否则点击“搜索”时，表单会提交两次（layui会自动提交一次）-->
<button type="button" class="layui-btn" lay-submit="" lay-filter="component-form-demo1" id="selectByCondition">搜索</button>

效果

条件搜索

删除

添加

更新

分页

代码

后端代码： 前端代码：