家庭记账本开发（6）

昨天已经完成了收入情况和支出情况的前端界面

今天争取完成主界面总账单的前端展示，

主要需求：

①显示实时的家庭总余额

②显示实时的家庭总账单（还可以对支出进行分类----计算每种支出的账单）

③对界面进行一定的美化

 

首先需要学习如何将数据库表里的某个字段进行相关的简单运算-------才能实现余额和账单的汇总

 

 

<template>
    <div>
        <span>总余额为:{{incomeSum-expenseSum}}</span>
        <br><br>
        <span>总支出为：{{expenseSum}}</span>
        
    </div>
</template>
<script>

    import axios from 'axios'
export default {
    data () {
        return {
            //收入求和
            incomeSum:'',
            //支出求和
            expenseSum:'',
        }
    },
    created() {
        axios.post("http://localhost:8080/income/sum").then((result) => {
          this.incomeSum=result.data.data;
          console.log(result.data.data);  
        })
        axios.post("http://localhost:8080/expense/sum").then((result) => {
          this.expenseSum=result.data.data;
          console.log(result.data.data);  
        })
    },
    methods: {
        
    }
}
</script>
<style>
    
</style>