利用vue框架写记账本

提示：文章写完后，目录可以自动生成，如何生成可参考右边的帮助文档

文章目录

目录

文章目录

前言

一、记账本所要实现的功能

二、实现代码

1.封装渲染函数

2.页面添加账单

3.页面删除账单

4.渲染图表

5.效果展示

​编辑 

总结

---

---

前言

上次说到用vue做一个基本渲染，那么这次就是借助黑马程序员的小黑记账本案例对vue搭建起网页框架做一个更加深入的实验

---

提示：以下是本篇文章正文内容，下面案例可供参考

一、记账本所要实现的功能

        功能需求：

         1. 基本渲染

          (1)利用axios请求得到后台的数据，然后进行页面渲染

          (2)数据处理在created函数里

          (3)用v-for进行页面渲染

          (4)利用双向数据绑定和computed属性进行累加求和

          2. 添加功能

           (1)注册点击事件

           (2)利用axios包中的post方法进行数据添加

           (3)利用v-model进行双向数据绑定

          (4)拿到后台数据后进行重新渲染

         3. 删除功能

          (1)注册点击事件

          (2)利用axios包中的delete方法进行数据删除

        4. 饼图渲染

          (1)在mounted函数中书写

主要是对四个生命周期对应的步骤要进一步熟悉，样式与结构黑马程序员的治疗已经准备好了，对vue框架的代码进行解说。

二、实现代码

1.封装渲染函数

这个函数极为重要，因为他的作用是将获取到的账本信息赋值给list，这样，我们就能通过vue将list渲染到页面上，利用axios对黑马的接口发起get函数，配置接口所需要的项，返回对象用res接收，res.data.data就是我们要的，第二个是将数据渲染到图表上。

代码如下（示例）：

async fullList() {
                    const res = await axios.get('https://applet-base-api-t.itheima.net/bill', {
                        params: {
                            creator: '小丽'
                        }
                    })
                    // console.log(res);
                    // 拿到数据后，进行赋值
                    this.list = res.data.data
                    // 更新图表
                    this.myCharts.setOption({
                        series: [
                            {
                                // 数据不能写死
                                // 异步更新图标，表格变化，图表也变化
                                // 用map方法动态得到数据
                                data: this.list.map(item => ({ value: item.price, name: item.name })),
                            }
                        ]
                    })
                }

2.页面添加账单

和之前一样有几个要注意的点，商品名称不能为空，价格必须是数字类型，然后再将用户输入的数据传输给接口的post函数，将用户添加的内容存储到后台，然后返回新的res，这时，我们再一次调用渲染函数，将他渲染到账单和图表上

代码如下（示例）：

 async add() {
                    // 判断输入内容是否有误
                    if (!this.name) {
                        alert('请输入商品名称！')
                        return;
                    }
                    if (typeof this.price !== 'number') {
                        alert('请输入正确的商品价格！')
                        return;
                    }
                    const res = await axios.post('https://applet-base-api-t.itheima.net/bill',
                        {
                            creator: '小丽',
                            name: this.name,
                            price: this.price
                        }
                    )
                    // console.log(res);
                    // 拿到数据后进行重新渲染
                    this.fullList()
                    // 清空数据
                    this.name = ''
                    this.price = ''
                }

3.页面删除账单

其实做法一样，就是我们得向后台请求删除的数据，然后后台返回删除后新的数据，用渲染函数再一次渲染就行。

代码如下（示例）：

async del(id) {
                    const res = await axios.delete(`https://applet-base-api-t.itheima.net/bill/${id}`)
                    // console.log(res);
                    // 拿到数据后进行重新渲染
                    this.fullList()

4.渲染图表

 利用echarts图表进行渲染，这是链接：Apache ECharts

5.效果展示

 

---

总结

好的，今天的分享到这里就结束了，主要希望自己能够熟练掌握vue框架的基本使用，为后面vue的工程化开发做一个铺垫。