<div id="Book" style="background-color: cornflowerblue;">
<h2 style="text-align: center;">记账本</h2>
<div style="text-align: center;">
支出:<input type="text" v-model="one.name">
金额:<input type="text" v-model="one.price">
<button @click="add()">添加</button>
</div>
<table style="margin: auto auto;width: 60%;" border="0" cellspacing="0">
<tr>
<th style="width: 30%;">支出</th>
<th style="width: 30%;">金额</th>
<th style="width: 40%;">操作</th>
</tr>
<tr v-for="(item , index) in good" :key="index.id">
<td>{{ item.name }}</td>
<td>{{ item.price }}</td>
<td>
<a href="javascript:">修改</a>
<a href="javascript:" @click="del(item.id)">删除</a>
</td>
</tr>
</table>
<div id="main" style="width: 600px;height:400px;text-align: center;"></div>
</div>
<script>
const Book=new Vue({
el:'#Book',
data:{
good:[],
one:{
creator:'小牛',
name:'',
price:''
}
},
mounted(){
this.refresh()
this.e = echarts.init(document.getElementById('main'));
this.e.setOption(
{
title: {
text: '消费账单',
subtext: '',
left: 'center'
},
tooltip: {
trigger: 'item'
},
legend: {
orient: 'vertical',
left: 'left'
},
series: [
{
name: '单项消费',
type: 'pie',
radius: '40%',
data: [],
emphasis: {
itemStyle: {
shadowBlur: 10,
shadowOffsetX: 0,
shadowColor: 'rgba(0, 0, 0, 0.5)'
}
}
}
]
}
)
},
methods:{
async refresh(){
const res = await axios.get('https://applet-base-api-t.itheima.net/bill',{
params:{
creator:'小牛'
}
})
this.good=res.data.data
console.log(res)
this.e.setOption({
series: [{
data: this.good.map(item => ({ value : item.price , name : item.name }))
}]
})
},
async add(){
const res = await axios.post('https://applet-base-api-t.itheima.net/bill',this.one)
this.refresh()
this.one.name=''
this.one.price=''
},
async del(id){
const res = await axios.delete(`https://applet-base-api-t.itheima.net/bill/${id}`)
this.refresh()
}
}
})
</script>
<div id="test">
<button @click="gggg()">1111</button>
</div>
<script>
const test=new Vue({
el:'#test',
data:{
num:''
},
methods:{
async gggg(){
console.log('11111111')
const response = await axios.get(
'http://localhost:8080/login'
)
console.log(response)
}
}
})
</script>
</BODY>
</HTML>
