功能需求
- 基本渲染
- 添加功能
- 删除功能
- 饼图渲染
基本渲染
- 立刻发送请求并获取数据created
- 拿到数据：存到data的响应式数据中
- 结合数据，进行渲染v-for
- 消费统计=>计算属性
<script>
const app=new Vue({
el:'#app',
data:{
list:[]
},
computed:{
totalPrice (){
return this.list.reduce((sum,item=>sum+item.price),)
}
},
//接口传参
async created(){
const res= await axios.get('',{
params:{
creator:'小黑'
}
})
this.list=res.data.data
}
})
</script>
添加功能
- 收集表单数据 v-model
- 给添加按钮注册点击事件，发送添加请求
- 需要重新渲染
<script>
const app = new Vue({
el: '#app',
data: {
list: [],
name: '',
price: ''
},
computed: {
totalPrice() {
return this.list.reduce((sum, item => sum + item.price),)
}
},
//接口传参，收集表单数据
created() {
// const res= await axios.get('',{
// params:{
// creator:'小黑'
// }
// })
// this.list=res.data.data
this.getList()
},
methods: {
async getList() {
const res = await axios.get('', {
params: {
creator: '小黑'
}
})
this.list = res.data.data
//封装重选渲染的方法（每次更新都要渲染一次，故封装）
},
async add() {
if (!this.name){
alert('请输入消费名称')
return
}
if (typeof this.price!=='number'){
alert('请输入正确的消费价格')
return
}
//发送添加请求
const res = await axios.post('', {
creator: '小黑',
name: this.name,
price: this.price
})
//重新渲染一次
this.getList
this.name=''
this.price=''
}
}
})
</script>
删除功能
- 注册点击事件，传参传id
- 根据id发送删除请求
- 需要重新渲染
<script>
const app = new Vue({
el: '#app',
data: {
list: [],
name: '',
price: ''
},
computed: {
totalPrice() {
return this.list.reduce((sum, item => sum + item.price),)
}
},
//接口传参
created() {
// const res= await axios.get('',{
// params:{
// creator:'小黑'
// }
// })
// this.list=res.data.data
this.getList()
},
methods: {
async getList() {
const res = await axios.get('', {
params: {
creator: '小黑'
}
})
this.list = res.data.data
},
async add() {
if (!this.name){
alert('请输入消费名称')
return
}
if (typeof this.price!=='number'){
alert('请输入正确的消费价格')
return
}
//发送添加请求
const res = await axios.post('', {
creator: '小黑',
name: this.name,
price: this.price
})
//重新渲染一次
this.getList
this.name=''
this.price=''
},
async del(id){
//根据id发送删除请求
const res=await axios.delete(``)
//重新渲染
}
}
})
</script>
饼图渲染
- 初始化一个饼图echarts mounted钩子实现
- 根据数据实时更新饼图
<script src="./vue.js"></script>
<script>
const app = new Vue({
el: '#app',
data: {
list: [],
name: '',
price: ''
},
computed: {
totalPrice() {
return this.list.reduce((sum, item => sum + item.price),)
}
},
//接口传参
created() {
// const res= await axios.get('',{
// params:{
// creator:'小黑'
// }
// })
// this.list=res.data.data
this.getList()
},
mounted() {
this.myChart = echarts.init(document.querySelector('#main'))
this.myChart.setOption({
//大标题
title: {
text: '消费账单列表',
left: 'center'
},
//提示框
tooltip: {
trigger: 'item'
},
//图例
legend: {
orient: 'vertical',
left: 'left'
},
series: [
{
name: '消费账单',
type: 'bar',
radius: '50%',
data: [
{}
]
}
]
})
},
methods: {
async getList() {
const res = await axios.get('', {
params: {
creator: '小黑'
}
})
this.list = res.data.data
//更新图表
this.myChart.setOption({
series: [
{
data: this.list.map(item=>({value:item.price,name:item.name}))
}
]
})
},
async add() {
if (!this.name) {
alert('请输入消费名称')
return
}
if (typeof this.price !== 'number') {
alert('请输入正确的消费价格')
return
}
//发送添加请求
const res = await axios.post('', {
creator: '小黑',
name: this.name,
price: this.price
})
//重新渲染一次
this.getList
this.name = ''
this.price = ''
},
async del(id) {
//根据id发送删除请求
const res = await axios.delete(``)
//重新渲染
}
}
})
</script>
