黑马健康应用数据持久化及相关操作

在之前的基础之上实现了数据持久化操作和页面交互，以及饮食记录页面的业务层开发。

饮食记录页面的业务层开发，主要是在实现动态化渲染数据的基础上，实现各个页面数据互通，也就是在一个页面上操作，操作部分所涉及到相关部分的数据也会相应的发生变化。还有一个要注意的就是之前食物记录页面、食物列表操作等等，我们都用了许多的Builder函数，来实现代码更加规范、更加简洁，但Build函数也有些不足，就是build构解函数默认情况下，传递的是数值而非引用，属性变动时，不会触发重新渲染。下面是主要的代码：

import DateUtil from '../common/utils/DateUtil'
import RecordModel from '../model/RecordModel'
import GroupInfo from '../viewmodel/GroupInfo'
import RecordType from '../viewmodel/RecordType'
import RecordVO from '../viewmodel/RecordVO'
import StatsInfo from '../viewmodel/StatsInfo'
import {RecordTypes, RecordTypeEnum} from '../model/RecordTypeModel'
import ItemModel from '../model/ItemModel'

class RecordService{

  insert(typeId: number, itemId: number, amount: number){
    //1.获取时间
    let createTime = (AppStorage.Get('selectedDate') || DateUtil.beginTimeOfDay(new Date())) as number
    //2.新增
    return  RecordModel.insert({typeId, itemId, amount, createTime})
  }

  deleteById(id: number){
    return RecordModel.deleteById(id)
  }

  async queryRecordByDate(date: number): Promise<RecordVO[]>{
    //1.查询数据库的RecordPO
    let rps = await RecordModel.listByDate(date)
    // 2.将RecordPO转化为RecordVO
    return rps.map(rp => {
      //2.1获取po中的基本属性
      let rv = {id: rp.id, typeId: rp.typeId, amount: rp.amount} as RecordVO
      //2.2查询记录项
      rv.recordItem = ItemModel.getById(rp.itemId, rv.typeId !== RecordTypeEnum.WORKOUT)
      //2.3计算热量
      rv.calorie = rp.amount * rv.recordItem.calorie
      return rv
    })
  }

  calculateStatsInfo(records: RecordVO[]): StatsInfo{
    //1.准备结果
    let info = new StatsInfo()
    if (!records || records.length <= 0){
      return info
    }
    //2.计算统计数据
    records.forEach(r => {
      if (r.typeId === RecordTypeEnum.WORKOUT){
        //运动，累加消耗热量
        info.expend += r.calorie
      }else{
        //食物，累加摄入热量、蛋白质、碳水、脂肪
        info.intake += r.calorie
        info.carbon += r.recordItem.carbon
        info.protein += r.recordItem.protein
        info.fat += r.recordItem.fat
      }
    })
    //3.返回
    return info
  }

  calculateGroupInfo(records: RecordVO[]): GroupInfo<RecordType, RecordVO>[]{
    //1.创建空的记录类型分组
    let groups = RecordTypes.map(recordType => new GroupInfo(recordType, []))
    if (!records || records.length <= 0){
      return groups
    }
    //2.遍历所有的饮食记录，把每个记录存入其相对应类型的分组中
    records.forEach(record => {
      //2.1把每个记录存入其对应类型的分组中
      groups[record.typeId].items.push(record)
      //2.2计算该组的总热量
      groups[record.typeId].calorie += record.calorie
    })
    return groups;
  }


}

let recordService = new RecordService()

export default recordService as RecordService

接下来便是数据持久化操作和页面交互。数据持久化操作主要就是给某个组件增加onclick点击事件，例如：之前面板组件上的Button组件，增加onclick点击事件后，调用上述的RecordService（）中增加insert、删除delete（）、查询query（）等函数来实现数据持久化保存。页面交互便是在实物记录页面中的记录列表中增加router页面路由，可跳转到相应的食物列表，并且获取相应的数据使得食物列表能进行相应的改变。

.onClick(() => {
              setTimeout(()=>{
                router.pushUrl({
                  url: 'pages/ItemIndexPage',
                  params: {type: group.type}
                })
              },1000)
            })


.onClick(()=> {
                //1.持久化保存
                RecordService.insert(this.type.id,this.item.id,this.amount)
                  .then(() => {
                    //2.关闭弹幕
                    this.showPanel = false
                  })
              })

以上便是两点击事件。