记账清单

作者: 家乡的蝈蝈 | 来源:发表于2024-03-25 08:45 被阅读0次

【斩笔·天秤】41/52 （10.23～10.29）
终于，让我找到款像样的网贷记账工具
复盘和总结：创建项目和预算
3.5 时间管理APP推荐
12月计划
2019年愿望清单
发现
321训练营1226作业
周检视·20190106
周检视·‪201‬90120

1.需求分析

1.基本渲染

2.添加功能

3.删除功能

4.饼图渲染

2.思路分析

1.基本渲染

立刻发送请求获取数据 created
拿到数据，存到data的响应式数据中
结合数据，进行渲染 v-for
消费统计 —> 计算属性

2.添加功能

收集表单数据 v-model，使用指令修饰符处理数据
给添加按钮注册点击事件，对输入的内容做非空判断，发送请求
请求成功后，对文本框内容进行清空
重新渲染列表

3.删除功能

注册点击事件，获取当前行的id
根据id发送删除请求
需要重新渲染

4.饼图渲染

初始化一个饼图 echarts.init(dom) mounted钩子中渲染
根据数据试试更新饼图 echarts.setOptions({...})
1. 基本渲染

<tbody>
  <tr v-for="(item, index) in list" :key="item.id">
    <td>{{ index + 1 }}</td>
    <td>{{ item.name }}</td>
    <td :class="{ red: item.price > 500 }">{{ item.price.toFixed(2) }}</td>
    <td><a href="javascript:;">删除</a></td>
  </tr>
</tbody>
const app = new Vue({
  el: '#app',
  data: {
    list: []
  },
  async created () {
    const res = await axios.get('https://applet-base-api-t.itheima.net/bill', {
      params: {
        creator: 'xx'
      }
    })
    this.list = res.data.data
  }
})

2. 添加功能

<!-- 添加资产 -->
<form class="my-form">
  <input v-model.trim="form.name" type="text" class="form-control" placeholder="消费名称" />
  <input v-model.number="form.price" type="text" class="form-control" placeholder="消费价格" />
  <button @click="add" type="button" class="btn btn-primary">添加账单</button>
</form>
created() {
  this.getList()
},
methods: {
  async getList() {
    const res = await axios.get('https://applet-base-api-t.itheima.net/bill', {
      params: {
        creator: 'xx'
      }
    })
    this.list = res.data.data
  },
  async add() {
    // 发送添加请求
    const res = await axios.post('https://applet-base-api-t.itheima.net/bill', this.form)
    // 重新渲染一次
    this.getList()

    this.name = ''
    this.price = ''
  }
}

3. 删除功能

<td><a @click="del(item.id)" href="javascript:;">删除</a</td>
async del (id) {
  // 根据 id 发送删除请求
  const res = await axios.delete(`https://applet-base-api-t.itheima.net/bill/${id}`)
  // 重新渲染
  this.getList()
}

4. 饼图渲染
图表前置知识点

<body>
    <button>更换数据</button>
    <div style="width: 400px; height: 300px;" id="main"></div>
    <script src="./echarts.min.js"></script>
    <script>
        // 创建图表的基本步骤
        let = myChart = echarts.init(document.querySelector('#main'))
        let option = {}
        myChart.setOption(option)
        document.querySelector('button').addEventListener('click', function(){
            myChart.setOption({
                series: [
                    {
                        data:[
                            {value:104,name:'xxx'}
                        ]
                    }
                ]
            })
        })
    </script>
</body>

实现思路

methods中，封装一个createChart 方法，里面创建图表（数据可以是空的）
createChart 不会自动执行，所以在mounted 里面调用它-刷新页面看到灰色的图表
获取到接口返回的数据之后(getlist里面），重新的this.myChart.setOption({})更换图表数据

<!-- 右侧图表 -->
<div class="echarts-box" id="main"></div>
mounted () {
  this.myChart = echarts.init(document.querySelector('#main'))
  this.myChart.setOption({})
}
methods: {
  async getList () {
    const res = await axios.get('https://applet-base-api-t.itheima.net/bill', {
      params: {
        creator: 'xx'
      }
    })
    this.list = res.data.data
    // 更新图表
    this.myChart.setOption({
      // 数据项
      series: [
        {
          data: this.list.map(item => ({ value: item.price, name: item.name}))
        }
      ]
    })
  },