axios-get
-
首先,如果你有一定的基础的话,请参考axios官网:axios官方 。 下面,我就以表格的
增删改查
为例,加以说明。 -
注意:此代码是,运行依赖于json-server中,若是api接口形式运行的话,只需把
url
的地址修改即可! -
话不多说,先贴整个代码:
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta http-equiv="X-UA-Compatible" content="ie=edge">
<title>axios</title>
<link rel="stylesheet" href="https://cdn.bootcdn.net/ajax/libs/twitter-bootstrap/4.5.0/css/bootstrap.min.css">
<style>
#box{ position: relative;}
.pops{ position: absolute; left:calc(50% - 250px);top: 7rem;width: 500px;height: 440px;}
</style>
</head>
<body>
<div class="container" id="box">
<div class="card">
<div class="card-header">
人员信息一览表
</div>
<div class="card-body">
<div class="form-group form-inline">
<input type="text" placeholder="请输入关键字查询" class="form-control" v-model="keyword">
<button class="btn btn-info mx-3" @click="search">搜索</button>
<button class="btn btn-danger" @click="addOne">新增</button>
</div>
<table class="table table-bordered table-striped">
<thead>
<tr>
<th>序号</th>
<th>姓名</th>
<th>性别</th>
<th>年龄</th>
<th>操作</th>
</tr>
</thead>
<tbody>
<tr v-for="(item , index) in list" :key="item.id">
<td>{{index + 1}}</td>
<td>{{item.name}}</td>
<td>{{item.gender}}</td>
<td>{{item.age}}</td>
<td>
<button class="btn btn-success btn-sm" @click="editOne(item)">编辑</button>
<button class="btn btn-danger btn-sm" @click="delOne(item)">删除</button>
</td>
</tr>
</tbody>
</table>
</div>
<div class="card-footer text-muted">
xxxxxxxxxxxxxxxx
</div>
</div>
<pop v-show="isShow" @hidden="popHidden" :per="person"></pop>
</div>
// 弹出层模块,模板
<template id="box1">
<div class="card pops">
<div class="card-header" style="position:relative">
新增人员信息
<span style="position:absolute;top:10px;right:26px;cursor: pointer;" @click="close">×</span>
</div>
<div class="card-body">
<div class="form-group">
<label>姓名</label>
<input type="text" class="form-control" v-model="user.txtName">
</div>
<div class="form-group">
<label>性别</label>
<input type="text" class="form-control" v-model="user.txtGender">
</div>
<div class="form-group">
<label>年龄</label>
<input type="text" class="form-control" v-model="user.txtAge">
</div>
</div>
<button class="btn btn-danger btn-block mb-2" @click="save">保存</button>
<div class="card-footer text-muted">
xxxxxxxxxx
</div>
</div>
</template>
<script src="https://cdn.bootcdn.net/ajax/libs/vue/2.6.11/vue.js"></script>
<script src="https://cdn.bootcdn.net/ajax/libs/axios/0.19.2/axios.js"></script>
<script>
// 定义一个pop组件
var pop = {
template: '#box1',
// 定义pop组件的数据
data() {
return { user: { txtName: '', txtGender: '', txtAge: '' } }
},
// 定义pop组件的方法
methods: {
// 关闭(x)的方法
close() {
this.$emit('hidden');
},
// 保存按钮功能(编辑、新增、简单判断的保存)
save() {
//保存前,判断名字是否为 空
if (this.user.txtName) {
// 判断是否为 编辑 操作
if (this.per) {
axios.put('http://localhost:3000/people' + this.per.id, {
name: this.user.txtName,
gender: this.user.txtGender,
age: this.user.txtAge,
})
// 判断是否为 新增 操作
} else {
axios.post('http://localhost:3000/people', {
name: this.user.txtName,
gender: this.user.txtGender,
age: this.user.txtAge,
}).then((item) => console.log(item));
};
this.close();
// 如果为空,弹窗警告
} else {
alert('名字不能为空');
}
},
},
// 把 点击的 需要编辑的一项,从父组件中,接收
props: ['per']
}
// 定义一个 vue组件,是定义在整个table中
var box = new Vue({
el: '#box',
data: {
keyword: '', // 查询的关键字
list: [], // 显示于页面的 数据
isShow: false, // pop弹出层 是否显示 默认display:none
person: '' // 需要 编辑 的对象
},
//把pop弹出层 组件 注册在box中
components: {
pop
},
methods: {
popShow() { // 控制 弹出层 显示/隐藏 功能
this.isShow = true;
},
addOne() { // 新增
this.popShow();
},
editOne(v) { // 编辑
this.popShow();
this.person = v;
},
popHidden() { // 弹出层 关闭 功能
this.isShow = false;
},
init() { // 页面初始化(显示数据)
axios.get('http://localhost:3000/people').then((res) => {
// console.log(res.data);
this.list = res.data;
});
},
delOne(obj) { // 删除选定项
axios.delete('http://localhost:3000/people/' + obj.id).then((item) => console.log(item));
},
search() { // 根据关键字 搜索
axios.get('http://localhost:3000/people').then((res) => {
// console.log(res.data);
this.list = res.data.filter((item) => item.name.indexOf(this.keyword) > -1);
});
}
},
// 页面打开时,数据的初始化
created() {
this.init();
}
})
</script>
</body>
</html>`
首先,html部分,我是用bootstrap4来布局的,主要用到里面的,table、card,当然在弹出层你也可以选择modal
,但是要注意,modal是依赖于bootstrap中的JS的,所以此弹出层(pop),我用css
手动布局。主要部分是功能,这里不再累述布局了。