谷粒学院70——添加课程分类(前端)

第七天主要实现的功能如下。

下面实现课程分类前端

（1）添加路由

router/index.js.

  {
    path: '/subject',
    component: Layout,
    redirect: '/subject/list', //在页面中访问'/teacher'会被重定向到'/teacher/table'
    name: '课程分类管理',
    meta: { title: '课程分类管理', icon: 'example' },
    children: [
      {
        path: 'list',
        name: '课程分类列表',
        component: () => import('@/views/edu/subject/list'),
        meta: { title: '课程分类列表', icon: 'table' }
      },
      {
        path: 'save',
        name: '添加课程分类',
        component: () => import('@/views/edu/subject/save'),
        meta: { title: '添加课程分类', icon: 'tree' }
      }
    ]
  }

效果如下。

(2)实现

/views/edu/subject/save.vue写个上传按钮组件。注意下面代码注释，在本地存放模板文件。

  <template>
        <div class="app-container">
            <el-form label-width="120px">
            <el-form-item label="信息描述">
                <el-tag type="info">excel模版说明</el-tag>
                <el-tag>
                <i class="el-icon-download" />
                <!-- 注意把模板放在项目对应的本地路径 -->
                <a :href="'/static/1.xlsx'">点击下载模版</a>  
                </el-tag>
            </el-form-item>
            <el-form-item label="选择Excel">
                <el-upload
                ref="upload"
                :auto-upload="false"
                :on-success="fileUploadSuccess"
                :on-error="fileUploadError"
                :disabled="importBtnDisabled"
                :limit="1"
                :action="BASE_API + '/eduservice/edu-subject/addSubject'"
                name="file"
                accept="application/vnd.ms-excel"
                >
                <el-button slot="trigger" size="small" type="primary"
                    >选取文件</el-button
                >
                <el-button
                    :loading="loading"
                    style="margin-left: 10px"
                    size="small"
                    type="success"
                    @click="submitUpload"
                    >上传到服务器</el-button
                >
                </el-upload>
            </el-form-item>
            </el-form>
        </div>
  </template>

实现script。

 <script>
  export default {
        data() {
            return {
                BASE_API: process.env.BASE_API, // 接口API地址
                importBtnDisabled: false, // 按钮是否禁用,
                loading: false,
            };
         },
         created() {

         },
         methods:{
             // 上传文件
             submitUpload() {
                this.importBtnDisabled = true,
                this.loading = true,
                this.$refs.upload.submit()
             },
             fileUploadSuccess() {
                this.loading = false;
                this.$message({
                type: "success",
                message: "上传成功",
                });
             },
             fileUploadError() {
                 this.loading = false;
                 this.$message({
                 type: "error",
                 message: "上传失败",
                });
             }

         }

  }
  </script>

测试下，将数据库中数据清空。

DELETE FROM `edu_subject`

上传。

结果如下。