2-19 类别管理(2)

Profile Picture
Published on Feb 19, 2020🌏 Public

门票分类管理

1. 根据接口返回的数据,分析需要展示什么

{
    "success":true,
    "message":"查询成功",
    "rows":[{
         "Id":1,
         "Name":"旅游",
         "Src":"/public/1.jpg",
         "SrotNum":100,
         "Enable":1
     }]
}
属性描述
IdID
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. 实现点击添加按钮弹框,可添加新数据并刷新表格

    1.2. 搜索功能

    1.3. 刷新按钮

  2. 实现门票分类的删除