家庭记账本开发(6)
昨天已经完成了收入情况和支出情况的前端界面
今天争取完成主界面总账单的前端展示,
主要需求:
①显示实时的家庭总余额
②显示实时的家庭总账单(还可以对支出进行分类----计算每种支出的账单)
③对界面进行一定的美化
首先需要学习如何将数据库表里的某个字段进行相关的简单运算-------才能实现余额和账单的汇总
1 <template> 2 <div> 3 <span>总余额为:{{incomeSum-expenseSum}}</span> 4 <br><br> 5 <span>总支出为:{{expenseSum}}</span> 6 7 </div> 8 </template> 9 <script> 10 11 import axios from 'axios' 12 export default { 13 data () { 14 return { 15 //收入求和 16 incomeSum:'', 17 //支出求和 18 expenseSum:'', 19 } 20 }, 21 created() { 22 axios.post("http://localhost:8080/income/sum").then((result) => { 23 this.incomeSum=result.data.data; 24 console.log(result.data.data); 25 }) 26 axios.post("http://localhost:8080/expense/sum").then((result) => { 27 this.expenseSum=result.data.data; 28 console.log(result.data.data); 29 }) 30 }, 31 methods: { 32 33 } 34 } 35 </script> 36 <style> 37 38 </style>