共用弹框之新增编辑（三）01-弹框接口文件——配置接口、引用接口、封装接口 & 下载接口的封装和使用

最新推荐文章于 2025-07-11 23:57:11 发布

原创最新推荐文章于 2025-07-11 23:57:11 发布 · 198 阅读

0 ·

CC 4.0 BY-SA版权

文章标签：

#vue.js #ajax #json

vue3+ts-运维同时被 2 个专栏收录

87 篇文章

订阅专栏

node-axios

54 篇文章

订阅专栏

本文详细介绍了课程资源管理系统的API接口实现，包括课件的新增、编辑、查询等功能的具体实现方式，并提供了下载接口的封装及使用流程。

共用弹框之新增/编辑（三）01-弹框接口文件——配置接口、引用接口、封装接口 & 下载接口的封装和使用

Courseware接口文件

1、新增和编辑接口

src/api/PublicResource/CourseWare/index.ts

import { ehrService } from '@/axios';
const Courseware = {
    //新增课件__________用到了
    addCourseWare(data) {
        return ehrService({
            url: '/courseware/insertcourse',
            method: 'post',
            data
        });
    },
    //编辑课件__________用到了
    editCourse(data) {
        return ehrService({
            url: '/courseware/updatecourse',
            method: 'post',
            data
        });
    },
    //查询课件类型
    getCourseWareType() {
        return ehrService({
            url: '/courseware/selectCourseWareCategory',
            method: 'get'
        });
    },
    // 查询课件的下拉框
    selectCourseWareCategory() {
        return ehrService({
            url: '/courseware/selectCourseWareCategory',
            method: 'get'
        });
    },
    saveCourseWareType(data) {
        return ehrService({
            url: '/courseware/savecoursecategory',
            method: 'post',
            data
        });
    },
    lookCourseInfo(id) {
        return ehrService({
            url: `/courseware/selectcourseitem?id=${id}`,
            method: 'get'
        });
    },
    // 渲染页面的接口/查询的接口
    searchCourseList(data) {
        return ehrService({
            url: '/courseware/searchcourse',
            method: 'post',
            data
        });
    }
};

export default Courseware;

附、下载接口

局部配置

使用流程

1、页面引用

import { downloadFile } from '@/axios';

//方法-下载
openFile(file) {
    downloadFile(file.url, file.name);
},

2、引入文件

src/axios/index.ts__局部配置文件

 /**
  * 下载文件通过DFS url
  * @param url
  * @param name
  * @param params
  */
 export const downloadFile = (url: string, name?: string, params?: Object) => {
     axios
         .get(url, {
             params,
             responseType: 'blob'
         })
         .then(res => {
             let fileName = '';
             //判断是否存在 . 如果不存在说明是自己传入
             if (name.indexOf('.') === -1) {
                 fileName = name;
                 fileName += url.length
                     ? '.' + url.substring(url.lastIndexOf('.') + 1, url.length)
                     : '';
             } else {
                 //存在 filename 直接使用
                 fileName = name;
             }
             downloadByBlob(res.data, fileName);
         });
 };