- it技术
- 今日作业
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document
</title>
<link href="https://cdn.bootcdn.net/ajax/libs/twitter-bootstrap/2.3.2/css/bootstrap.min.css" rel="stylesheet">
<script src="https://cdn.bootcdn.net/ajax/libs/axios/0.20.0/axios.min.js"></script>
<script src="https://cdn.bootcdn.net/ajax/libs/vue/2.6.11/vue.js"></script>
<script src="https://cdn.bootcss.com/vue-router/3.1.3/vue-router.min.js"></script>
</head>
<body>
<div id="app">
<div class="container">
<h2>程序员资产管理
</h2>
<nav>
<router-link to="/">主页
</router-link>
<router-link to="/add">添加
</router-link>
</nav>
<router-view></router-view>
</div>
</div>
<script>
const router = new VueRouter({
routes: [
{
path: '/',
component: {
data() {
return {
keyword: '',
list: [],
}
},
created() {
this.loadData();
},
watch: {
keyword() {
axios({
method: 'GET',
url: BASE_URL,
params: {
name_like: this.keyword,
}
}).then(res => {
this.list = res.data;
}).catch(err => {
alert('访问出错啦~');
})
}
},
methods: {
loadData() {
axios({
method: 'GET',
url: BASE_URL,
}).then(res => {
this.list = res.data;
}).catch(err => {
console.log('访问出错了！');
})
},
hDelete(index, id) {
if (confirm(`您确定删除${this.list[index].name}吗？`)) {
axios({
method: 'DELETE',
url: BASE_URL + id,
}).then(res => {
this.loadData();
}).catch(err => {
alert('删除失败');
})
}
},
},
computed: {
cTotalMoney() {
return this.list.reduce((sum, item) => {
sum += Number(item.price);
return sum;
}, 0)
}
},
filters: {
$: function (value, _currency) {
var digitsRE = /(\d{3})(?=\d)/g;
value = parseFloat(value);
if (!isFinite(value) || !value && value !== 0) return '';
_currency = _currency != null ? _currency : '￥';
var stringified = Math.abs(value).toFixed(2);
var _int = stringified.slice(0, -3);
var i = _int.length % 3;
var head = i > 0 ? _int.slice(0, i) + (_int.length > 3 ? ',' : '') : '';
var _float = stringified.slice(-3);
var sign = value < 0 ? '-' : '';
return _currency + sign + head + _int.slice(i).replace(digitsRE, '$1,') + _float;
}
},
template: `
<div>
<!-- 搜索 start-->
<form class="form-inline" style="padding: 20px 0">
<input type="text" v-focus="" v-model="keyword" class="form-control" placeholder="输入关键字进行搜索">
</form>
<!-- 搜索 end -->
<!-- 表格 start -->
<table class="table table-bordered table-hover">
<thead>
<tr>
<th>编号</th>
<th>资产名称</th>
<th>创建时间</th>
<th>操作</th>
</tr>
</thead>
<tbody v-if="list.length">
<tr v-for="(item,index) in list">
<td>{{index+1}}</td>
<td>{{item.name}}</td>
<td>{{item.price | $}}</td>
<td><a href="#" @click.prevent="hDelete(index,item.id)">删除</a></td>
</tr>
<tr>
<td colspan="4">总价：{{cTotalMoney | $}}</td>
</tr>
</tbody>
<tbody v-else>
<tr>
<td colspan="4">暂无数据！</td>
</tr>
</tbody>
</table>
<!-- 表格 end -->
</div>
`,
}
},
{
path: '/add',
component: {
data() {
return {
asset: {
name: '',
price: '',
},
}
},
methods: {
hAdd() {
let { name, price } = this.asset;
axios({
method: 'POST',
url: BASE_URL,
data: {
name,
price,
}
}).then(res => {
this.$router.push('/');
this.asset.name = '';
this.asset.price = '';
}).catch(err => {
alert('添加失败');
})
}
},
template: `
<div>
<!-- 添加资产 start -->
<form class="form-inline">
<div class="form-group">
<div class="input-group">
<input type="text" v-model.trim="asset.name" class="form-control" placeholder="资产名称">
<input type="text" v-model.number="asset.price" class="form-control" placeholder="价值">
<button class="btn btn-primary" @click.prevent="hAdd">添加资产</button>
</div>
</div>
</form>
<!-- 添加资产 end -->
</div>
`,
}
}
]
})
Vue.directive('focus', {
inserted(el) {
el.focus();
}
})
const BASE_URL = 'http://localhost:3000/assets/';
let v = new Vue({
el: '#app',
router,
})
</script>
</body>
</html>
