vue-cli项目中替换notebook默认的文件管理列表页面

根据官方文档，也有文件管理的接口描述，但是在这里却没有给出具体的api路径

• 接口内容描述
  https://jupyter-notebook.readthedocs.io/en/stable/extending/contents.html

接口列表

• 查询列表
  get：http://你的域名/user/caoyj/api/contents?type=directory&_=1638328964067
• 上传文件
  put：http://你的域名/user/caoyj/api/contents/文件名

请求体是json格式的内容，文件转为了base64编码，kv如下

content: "base64编码之后的值"
format: "base64"
name: "e6728ae64f5047f3b55806e305a0f75a.jpg"
path: "e6728ae64f5047f3b55806e305a0f75a.jpg"
type: "file"

• 删除文件
  delete：http://你的域名/user/caoyj/api/contents/文件名
• 查询目录
  get：/user/caoyj/api/contents/${currExpDir}?type=directory&_=1638328964067
• 新增目录
  新增目录实际上需要操作两次接口，先创建一个默认目录，然后再改名

noteReq.post('/user/caoyj/api/contents', { type: 'directory' })

• 修改目录名

noteReq.patch(`/user/caoyj/api/contents/${res.data.path}`, { path: currExpDir })

vue编码

定义工具类

import axios from 'axios'
import { VueAxios } from './axios'

// 创建 axios 实例
const service = axios.create({
  baseURL: '/',
  timeout: 95000
})
// request interceptor
service.interceptors.request.use(config => {
  config.headers['Accept'] = 'application/json, text/javascript, */*; q=0.01'
  return config
}, error => {
  Promise.reject(error)
})

// respone interceptor
service.interceptors.response.use(
  response => { // 响应成功
    return response
  },
  error => { // 响应其它状态码
    return error.response // 也返回response
  })

const installer = {
  vm: {},
  install (Vue) {
    Vue.use(VueAxios, service)
  }
}

export {
  installer as VueAxios,
  service as axios
}
export default service

显示表格定义列配置和数据

const columns = [
  {
    dataIndex: 'name',
    key: 'name',
    slots: { title: 'customTitle' },
    scopedSlots: { customRender: 'name' }
  },
  {
    title: '最近修改时间',
    dataIndex: 'last_modified',
    key: 'last_modified',
    scopedSlots: { customRender: 'last_modified' }
  },
  {
    title: '文件大小',
    dataIndex: 'size',
    key: 'size',
    scopedSlots: { customRender: 'size' }
  },
  {
    title: '操作',
    key: 'action',
    scopedSlots: { customRender: 'action' }
  }
]
const data = [
]

对于服务器端返回的token设置到头信息中

noteReq.defaults.headers.common['Authorization'] = 'token ' + res.content.token

使用moment组件对utc时间进行格式化

import moment from 'moment'
formatUtc (utc) {
      return moment(utc).utcOffset(8).format('YYYY年MM月DD日 HH时mm分ss秒')
    },

格式化文件大小，在外层工具文件中定义

/**
     * 格式化文件大小
     * @param {*} value
     */
export function formatFileSize (size) {
  const value = Number(size)
  if (size && !isNaN(value)) {
      const units = ['B', 'KB', 'MB', 'GB', 'TB', 'PB', 'EB', 'ZB', 'YB', 'BB']
      let index = 0
      let k = value
      if (value >= 1024) {
          while (k > 1024) {
              k = k / 1024
              index++
          }
      }
      return `${(k).toFixed(2)} ${units[index]}`
  }
  return '-'
}

引入

import { formatFileSize } from '@/utils/util'
formatFileSize (size) {
      return formatFileSize(size)
    },