2-19 类别管理（2）
门票分类管理
1. 根据接口返回的数据，分析需要展示什么
{
"success":true,
"message":"查询成功",
"rows":[{
"Id":1,
"Name":"旅游",
"Src":"/public/1.jpg",
"SrotNum":100,
"Enable":1
}]
}| 属性 | 描述 |
|---|---|
| Id | ID |
| Name | 门票分类名 |
| Src | 门票分类的图标文件路径 |
| SortNum | 排序号，数字越小越靠前 |
| Enable | 是否启用，1启用，0禁用 |
我们要做表格显示这些数据
2. 建表
category.vue 门票分类管理：
<template>
<div>
<basic-toolbar></basic-toolbar>
<category-table></category-table>
</div>
</template>
<script>
import basicToolbar from "./common/basicToolbar";
import categoryTable from "./category/categoryTable";
export default {
components: {
basicToolbar,
categoryTable
}
};
</script>categoryTable.vue
<template>
<div>
<el-table :data="list" stripe>
<el-table-column prop="Id" label="编号" width="100"></el-table-column>
<el-table-column prop="Src" label="图标" width="100"></el-table-column>
<el-table-column prop="Name" label="分类名" ></el-table-column>
<el-table-column prop="SortNum" label="排序号" width="100"></el-table-column>
<el-table-column prop="Enable" label="启用" width="100"></el-table-column>
</el-table>
</div>
</template>
<script>
export default {
data() {
return {
list: []
}
}
};
</script>3. 加载数据
<script>
import axios from "axios";
export default {
data() {
return {
list: [],
keyword: ""
};
},
mounted() {
//挂载后直接调用
this.loadData()
},
methods: {
/**加载数据
* k: 关键词，如果有传入则查询相关数据
*/
loadData(k) {
//k有值旧将keyword更新为k
if (k!=undefined) this.keyword = k;
axios
.get("/api/category/get", {
params: {
keyword: this.keyword
}
})
.then(res => {
this.list = res.data.rows;
});
}
}
};
</script>4. 优化展示内容
我们优化一下启用和图标的显示效果
<el-table-column prop="Src" label="图标" width="100">
<template v-slot="scope">
<el-image :src="'http://lihangsoft.com:3001/'+scope.row.Src" fit="contain" style="width:90px;height:90px;"></el-image>
</template>
</el-table-column>
<el-table-column prop="Enable" label="启用" width="100">
<template v-slot="scope">
<el-tag v-if="scope.row.Enable==1" type="success">启用</el-tag>
<el-tag v-if="scope.row.Enable==0" type="danger">禁用</el-tag>
</template>
</el-table-column>对于图片这个部分，我们这里采用了将lihang服务器的地址拼在返回图片Src地址前。
通过代理服务器，也可使实现让图片正常加载，只需要去对/upload开头的目录去设定代理转发即可。
代理的配置如下：
{
'^/upload':{
target:'http://lihangsoft.com:3001'
}
}通过代理实现，我们的路径上就没有写域名，这种方式，以后发布到服务器上，服务器域名可以随便更改，项目代码不需要修改。
<el-table-column prop="Src" label="图标" width="100">
<template v-slot="scope">
<el-image :src="scope.row.Src" fit="contain" style="width:60px;height:60px;"></el-image>
</template>
</el-table-column>5. 制作用于添加和修改数据的对话框
此处我们建立一个空的对话框，并放到页面中显示
<template>
<el-dialog :title="title" :visible.sync="visiable" width="400px">
<template v-slot:footer>
<el-button @click=" visiable= false">取 消</el-button>
<el-button type="primary">确 定</el-button>
</template>
</el-dialog>
</template>
<script>
export default {
data() {
return {
visiable: true,
title: "标题"
};
}
};
</script>6. 添加表单
<template>
<el-dialog :title="title" :visible.sync="visiable" width="400px" >
<el-form :model="form" ref="form" label-width="80px" :rules="rules">
<el-form-item label="分类名">
<el-input v-model="form.Name" placeholder="请输入分类名" ></el-input>
</el-form-item>
<el-form-item label="图片" prop="Src">
<input type="file" accept="image/*" id="aa" @change="fileChange" style="width:100%;height:40px;position:absolute;z-index:1;opacity:0.3;">
<!-- 假的，只用于显示当前选择的文件，或者当前的图片路径 -->
<el-input v-model="form.Src" placeholder="请选择图片" readonly ></el-input>
</el-form-item>
<el-form-item label="排序号">
<el-input v-model="form.SortNum" placeholder="请输入排序号" ></el-input>
</el-form-item>
<el-form-item label="状态">
<el-select v-model="form.Enable" placeholder="请选择状态" style="width:100%">
<el-option label="启用" :value="1"></el-option>
<el-option label="禁用" :value="0"></el-option>
</el-select>
</el-form-item>
</el-form>
<template v-slot:footer>
<el-button @click=" visiable= false">取 消</el-button>
<el-button type="primary" @click="ok">确 定</el-button>
</template>
</el-dialog>
</template>
<script>
export default {
data() {
return {
visiable: true,
title: "标题",
rules:{
Src:{required:true,message:'请选择图片'}
},
form: {
Src:'',
SortNum:100,
Enable: 1
}
};
},
methods: {
//文件选择框发生修改的时候触发
fileChange(e){
//判断选择的文件列表中的第0项是否有值
if(e.target.files[0]){
this.form.Src=e.target.files[0].name
}else{
this.form.Src=''
}
},
ok(){
this.$refs.form.validate(result=>{
if(result){
alert("通过")
}
})
}
}
};
</script>7. 实现添加功能
ok(){
this.$refs.form.validate(result=>{
if(result){
//开启全局遮罩
this.$loading({text:'正在上传文件'})
//因为要传文件，所以必须用FormData去构建要传递的数据
var formData=new FormData();
formData.append('name',this.form.Name);
formData.append('sortnum',this.form.SortNum)
formData.append('enable',this.form.Enable)
formData.append('file', document.getElementById('aa').files[0])
axios.post('/api/category/add',formData).then(r=>{
this.$loading().close() //关闭全局遮罩
if (r.data.success) {
this.visiable = false;
this.$emit("refresh");
}
this.$message({
message: r.data.message,
type: r.data.success ? "success" : "error"
});
})
}
})
}
</script>练习
完成工具栏的功能
1.1. 实现点击添加按钮弹框，可添加新数据并刷新表格
1.2. 搜索功能
1.3. 刷新按钮
实现门票分类的删除
