您的位置：首页 > Web前端 > Vue.js

vue的初始和简单应用--发送数据和获取数据并且生成表格

2020-07-24 21:55 12 查看

<!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/nprogress/0.2.0/nprogress.css" rel="stylesheet">
<style>
td {
width: 80px;
padding: 5px 30px;
text-align: center;
height: 30px;
border: 1px solid brown;
}

table {
border-collapse: collapse;

}
</style>
</head>

<body>
<div id="app">
<div><input type="text" v-model='username'></div>
<div><input type="text" v-model='pwd'></div>
<button @click='login'>登录</button>
<table>
<tr>
<td>编号</td>
<td>姓名</td>
<td>电话</td>
<td>时间</td>
<td>操作</td>
</tr>
<tr v-for='item in list'>
<td>{{item.id}}</td>
<td>{{item.realname}}</td>
<td>{{item.tel}}</td>
<td>{{item.createtime | fmtTime}}</td>
<td @click='del(item.id)'><button>删除</button></td>
</tr>
</table>
</div>
<script src="../Vue/vue.js"></script>
<script src="../Vue/axios.js"></script>
<script src="https://cdn.bootcdn.net/ajax/libs/nprogress/0.2.0/nprogress.js"></script>
<script src="https://cdn.bootcdn.net/ajax/libs/qs/6.9.4/qs.js"></script>
<script>
axios.defaults.timeout = 2500;
axios.interceptors.request.use(function (config) {
let {method,url,params,data} =config
if(method === 'get') console.log(`${method}了${url},参数是${Qs.stringify(params)}`);
else console.log(`${method}了${url},参数是${Qs.stringify(data)}`);
NProgress.start()
return config;
}, function (error) {
NProgress.done()
return Promise.reject(error);
});

axios.interceptors.response.use(function (response) {
NProgress.done()
return response;
}, function (error) {
return Promise.reject(error);
});
Vue.filter('fmtTime', val => {
let timer = new Date(val)
return timer.getFullYear() + '-' + (timer.getMonth() + 1) + '-' + timer.getDate()
})

new Vue({
el: '#app',
created() {
this.getList()
},
data() {
return {
username: '',
pwd: '',
list: []
}
},
methods: {
async getList() {
let {
data
} = await axios.get('http://simbajs.com:89/sys/shitinglist', {
params: {
pageIndex: 1,
pageSize: 10
}
})
this.list = data
console.log(data);
},
async login() {
let {
data
} = await axios.post('http://simbajs.com:89/user/login', {
username: this.username,
pwd: this.pwd
})
if (data.success) alert('登录成功')
else alert('用户名或密码错误')
},
async del(id) {
let {
data
} = await axios.post('http://simbajs.com:89/sys/removest', {
id
})
if (data.success) alert('删除成功')
else alert('删除失败');
this.getList()
},
},
})
</script>
</body>

</html>

内容来自用户分享和网络整理，不保证内容的准确性，如有侵权内容，可联系管理员处理

标签：

相关文章推荐

新的分享

章节导航