1.项目整体效果如下：

2.数据库设计：
表一：

表二：

3.搭建项目

查询所有账单接口

查询所有账单的实现类

前段控制器

import java.util.HashMap;
import java.util.Map;
import org.springframework.stereotype.Controller;
import org.springframework.web.bind.annotation.RequestMapping;
import org.springframework.web.bind.annotation.ResponseBody;
import com.alibaba.dubbo.config.annotation.Reference;
import com.sxt.service.IBillsService;
import com.sxt.utils.DataGridView;
import com.sxt.vo.BillsVo;

/**

前端控制器
@author DPF
@since 2019-09-04
*/
@Controller
@RequestMapping("/bills")
public class BillsController {

@Reference
private IBillsService billService;

/**
- 跳转到页面
  */
  @RequestMapping(“toIndex”)
  public String toIndex() {
  return “index”;
  }
/**
- 加载所有的数据
  */
  @RequestMapping(“loadAllBills”)
  @ResponseBody
  public DataGridView loadAllBills(BillsVo billsVo) {
  return this.billService.queryAllBills(billsVo);
  }
/**
- 添加账单
  */
  @RequestMapping(“addBill”)
  @ResponseBody
  public Map<String, Object> addBill(BillsVo billsVo) {
  Map<String, Object> map =new HashMap<>();
  Integer code =0;
  String msg=“添加成功”;
  try {
  this.billService.save(billsVo);
  } catch (Exception e) {
  e.printStackTrace();
  code=-1;
  msg=“添加失败”;
  }
  map.put(“code”, code);
  map.put(“msg”, msg);
  return map;
  }
  }

import java.util.List;
import org.springframework.stereotype.Controller;
import org.springframework.web.bind.annotation.RequestMapping;
import org.springframework.web.bind.annotation.ResponseBody;
import com.alibaba.dubbo.config.annotation.Reference;
import com.sxt.domain.Billtype;
import com.sxt.service.IBilltypeService;

/**

前端控制器
@author DPF
@since 2019-09-04
*/
@Controller
@RequestMapping("/billtype")
public class BilltypeController {

@Reference
private IBilltypeService billtypeService;
/**
- 查询所有的账单类型
  */
  @RequestMapping(“loadAllBillType”)
  @ResponseBody
  public List loadAllBillType(){
  return this.billtypeService.list();
  }
  }

主页面

所有账单

记账管理

账单类型

开始时间

结束时间

查询重置添加

<!-- 数据表格开始 -->
<table class="layui-hide" id="billTable" lay-filter="billTable"></table><!-- 添加和修改的弹出层开始 -->
<div style="display: none;padding: 20px" id="saveOrUpdateDiv" ><form class="layui-form"  lay-filter="dataFrm" id="dataFrm"><div class="layui-form-item"><label class="layui-form-label">收支类型:</label><div class="layui-input-block" id="radio_typeid">

       </div><div class="layui-form-item"><label class="layui-form-label">标题:</label><div class="layui-input-block"><input class="layui-input" name="title" lay-verify="required"  /></div></div><div class="layui-form-item"><div class="layui-inline"><label class="layui-form-label">时间</label><div class="layui-input-inline"><input type="text" name="billtime" id="billtime"readonly="readonly" placeholder="yyyy-MM-dd HH:mm:ss"autocomplete="off" class="layui-input"></div></div><div class="layui-inline"><label class="layui-form-label">金额</label><div class="layui-input-inline"><input type="text" name="price" lay-verify="number"autocomplete="off"class="layui-input"></div></div></div><div class="layui-form-item"><label class="layui-form-label">说明:</label><div class="layui-input-block"><textarea class="layui-textarea" name="remark" lay-verify="content"></textarea></div></div><div class="layui-form-item" style="text-align: center;"><div class="layui-input-block"><button type="button" class="layui-btn layui-btn-normal layui-btn-sm layui-icon layui-icon-release" lay-filter="doSubmit" lay-submit="">提交</button><button type="reset" id="dataFrmResetBtn" class="layui-btn layui-btn-warm layui-btn-sm layui-icon layui-icon-refresh" >重置</button></div></div></form></div>
<!-- 添加和修改的弹出层结束 --><script type="text/javascript" src="/resources/layui/layui.js"></script><script type="text/javascript">layui.use([ 'jquery', 'layer', 'form', 'table','laydate' ], function() {var $ = layui.jquery;var layer = layui.layer;var form = layui.form;var table = layui.table;var laydate=layui.laydate;//渲染时间laydate.render({elem:'#startTime',type:'datetime'});laydate.render({elem:'#endTime',type:'datetime'});laydate.render({elem:'#billtime',type:'datetime'});//初始化查询条件和添加的类型$.get("/billtype/loadAllBillType",function(obj){var typeidDom=$("#typeid");var radio_typeid=$("#radio_typeid");var html="<option value=''>请选择类型</option>"var radioHtml="";$.each(obj,function(index,item){html+="<option value="+item.id+">"+item.name+"</option>";radioHtml+='<input type="radio" name="typeid" value='+item.id+' title='+item.name+'>';});typeidDom.html(html);radio_typeid.html(radioHtml);form.render("select");form.render("radio");})//渲染数据表格var tableIns=table.render({elem: '#billTable'   //渲染的目标对象,url:'/bills/loadAllBills' //数据接口,title: '账单数据'//数据导出来的标题,height:'full-200',cellMinWidth:100 //设置列的最小默认宽度,page: true  //是否启用分页,cols: [ [   //列表数据{field:'id', title:'ID',align:'center'},{field:'title', title:'标题',align:'center'},{field:'typename', title:'类型',align:'center'} ,{field:'billtime', title:'记录时间',align:'center'},{field:'price', title:'金额',align:'center'},{field:'remark', title:'备注',align:'center'}] ]});//模糊查询$("#doSearch").click(function(){var params=$("#searchFrm").serialize();tableIns.reload({url:"/bills/loadAllBills?"+params,page:{curr:1}})});$("#addBill").click(function(){openAddBill();});var url;var mainIndex;//打开添加页面function openAddBill(){mainIndex=layer.open({type:1,title:'添加账单',content:$("#saveOrUpdateDiv"),area:['800px','550px'],success:function(index){//清空表单数据       $("#dataFrm")[0].reset();form.val("dataFrm",{typeid:1});url="/bills/addBill";}});}//保存form.on("submit(doSubmit)",function(obj){//序列化表单数据var params=$("#dataFrm").serialize();$.post(url,params,function(obj){layer.msg(obj.msg);//关闭弹出层layer.close(mainIndex)//刷新数据 表格tableIns.reload();})});});
</script>

Springboot+MybatisPlus+layui简易账单管理项目相关推荐

基于Springboot+MybatisPlus+Layui的商品库存权限管理系统
一.基于Springboot+MybatisPlus+Layui的商品库存权限管理系统此项目为基于Springboot+MybatisPlus+Layui的商品库存权限管理系统,主要支撑商品库存的系 ...
SpringBoot+MyBatisPlus+Vue 前后端分离项目快速搭建【前端篇】【快速生成后端代码、封装结果集、增删改查、模糊查找】【毕设基础框架】
前后端分离项目快速搭建[前端篇] 后端篇前端篇创建vue项目安装所需工具开始编码 1.在根目录下添加vue.config.js文件 2.编写main.js 3.编写App.vue 4.编写ax ...
1112_Vue+SpringBoot+Mybatis的简单员工管理项目
Vue+SpringBoot+Mybatis的简单员工管理项目本文项目参考自:https://github.com/boylegu/SpringBoot-vue https://www.cnblog ...
SpringBoot+MyBatisPlus+Vue 前后端分离项目快速搭建【后端篇】【快速生成后端代码、封装结果集、增删改查、模糊查找】【毕设基础框架】
前后端分离项目快速搭建[后端篇] 数据库准备后端搭建 1.快速创建个SpringBoot项目 2.引入依赖 3.编写代码快速生成代码 4.运行代码生成器生成代码 5.编写application.pr ...
图书管理系统（vue2 + springboot +mybatis-Plus）前后端分离项目
本人是大一在校学生,代码基本上是原创的,也有些写的不好的地方希望大佬轻点喷我, 本教学致力于让零基础的保姆级教学准备阶段学习vue2 , spring-boot ,mybatis-plus 的知识 ...
整合SpringBoot + MybatisPlus 搭建JAVA多模块项目基本骨架
SpringBoot SpringBoot可以让你简单.快速.方便的搭建一个Spring Web项目. Mybatis-Plus MP是国内人员开发的一个Mybatis的增强工具,在Mybat ...
SpringBoot+MyBatisPlus+DataTables实现退货管理的添加和编辑时控制checkbox的回显选中
场景 SpringBoot+My BatisPlus+DataTables实现企业车间退货管理(学习企业级开发思想): https://blog.csdn.net/BADAO_LIUMANG_QIZH ...
Vue+SpringBoot+Mybatis的简单员工管理项目
本文项目参考自:https://github.com/boylegu/SpringBoot-vue 这个项目主要讲的是一些概念,想要自己实现代码操作请看:https://www.cnblogs.com ...
1124——Vue+SpringBoot+Mybatis的简单员工管理项目
本文项目参考自:https://github.com/boylegu/SpringBoot-vue https://www.cnblogs.com/wlovet/p/8317282.html 为了完成 ...

Springboot+MybatisPlus+layui简易账单管理项目

记账管理

Springboot+MybatisPlus+layui简易账单管理项目相关推荐

最新文章

热门文章