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

2019-09-05 11:07:31 阅读：574 来源： 互联网

标签：function MybatisPlus Springboot title layui 账单 var import RequestMapping

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>

在这里插入图片描述

标签：function,MybatisPlus,Springboot,title,layui,账单,var,import,RequestMapping
来源： https://blog.csdn.net/dpf373521/article/details/100551574

本站声明： 1. iCode9 技术分享网（下文简称本站）提供的所有内容，仅供技术学习、探讨和分享；
2. 关于本站的所有留言、评论、转载及引用，纯属内容发起人的个人观点，与本站观点和立场无关；
3. 关于本站的所有言论和文字，纯属内容发起人的个人观点，与本站观点和立场无关；
4. 本站文章均是网友提供，不完全保证技术分享内容的完整性、准确性、时效性、风险性和版权归属；如您发现该文章侵犯了您的权益，可联系我们第一时间进行删除；
5. 本站为非盈利性的个人网站，所有内容不会用来进行牟利，也不会利用任何形式的广告来间接获益，纯粹是为了广大技术爱好者提供技术内容和技术思想的分享性交流网站。

ICode9

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

记账管理