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

ゞ浴缸里的玫瑰 2024-04-18 10:11 22阅读 0赞

1.项目整体效果如下：  
![在这里插入图片描述][watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L2RwZjM3MzUyMQ_size_16_color_FFFFFF_t_70]  
2.数据库设计：  
表一：  
![在这里插入图片描述][watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L2RwZjM3MzUyMQ_size_16_color_FFFFFF_t_70 1]  
表二：  
![在这里插入图片描述][20190905093545708.png]  
3.搭建项目  
![在这里插入图片描述][20190905103446433.png]  
查询所有账单接口  
![在这里插入图片描述][watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L2RwZjM3MzUyMQ_size_16_color_FFFFFF_t_70 2]  
查询所有账单的实现类  
![在这里插入图片描述][watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L2RwZjM3MzUyMQ_size_16_color_FFFFFF_t_70 3]  
![在这里插入图片描述][watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L2RwZjM3MzUyMQ_size_16_color_FFFFFF_t_70 4]  
**前段控制器**

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>

![在这里插入图片描述][watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L2RwZjM3MzUyMQ_size_16_color_FFFFFF_t_70 5]

[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L2RwZjM3MzUyMQ_size_16_color_FFFFFF_t_70]: https://image.dandelioncloud.cn/pgy_files/images/2024/04/17/18d871dfe35241c2a79a6cb06f93c044.png
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L2RwZjM3MzUyMQ_size_16_color_FFFFFF_t_70 1]: https://image.dandelioncloud.cn/pgy_files/images/2024/04/17/9c6f87f40d9c402fb92593d4a9fe7519.png
[20190905093545708.png]: https://image.dandelioncloud.cn/pgy_files/images/2024/04/17/02c7257031e94bfb89f9c25a3880da32.png
[20190905103446433.png]: https://image.dandelioncloud.cn/pgy_files/images/2024/04/17/95927563a13b4a76b48c96e084cbb7f1.png
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L2RwZjM3MzUyMQ_size_16_color_FFFFFF_t_70 2]: https://image.dandelioncloud.cn/pgy_files/images/2024/04/17/e5b3044449494f12a4edad6a90a0cae2.png
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L2RwZjM3MzUyMQ_size_16_color_FFFFFF_t_70 3]: https://image.dandelioncloud.cn/pgy_files/images/2024/04/17/48953d490b0741bd9c00af32d253c800.png
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L2RwZjM3MzUyMQ_size_16_color_FFFFFF_t_70 4]: https://image.dandelioncloud.cn/pgy_files/images/2024/04/17/7ef5cabb40b94033ad5a16e416f4ac82.png
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L2RwZjM3MzUyMQ_size_16_color_FFFFFF_t_70 5]: https://image.dandelioncloud.cn/pgy_files/images/2024/04/17/03aca126f79640a2a7cb1b9d63d63ddf.png