实习日记 5/12

todolist：

• 完成文字提示框的布局
• 完成MD5的显示

记录：

1、在表格里面新加一列显示MD5的值

  <el-table-column
          :label="$t('imageService.mdValue')"
          prop="md5"  //prop的值是后端返回的
          show-overflow-title
          not-allow-hide
          min-width="100">
        </el-table-column>

2、@表示定位到src目录

调用接口：

import ImageService from '@/api/imageService.js';  //如果是暴露的话，那么可以随便命名，就相当于全部暴露出去，然后定义一个东西来接收
mounted () {
    ImageService.getTest().then((val) => {
      console.log(val);
    });

接口写在这里：

import http from './httpInstance'; //引入axios

const imageService = {
  deleteImage: (data, params) => http.post('/instance/v1/images/remove', data, { params }),
  edit: (id, data, params) => http.post(`/instance/v1/images/${id}/update`, data, { params }),
  cancelShare: (imageId, params) => http.post(`/instance/v1/images/${imageId}/cancelShare`, null, { params }),
  shareImage: (imageId, data, params) => http.post(`/instance/v1/images/${imageId}/share`, data, { params }),
  getImageDetail: (imageId, params) => http.get(`/instance/v1/images/${imageId}/customOrPrivateImageDetail`, { params }),
  uploadImage: (params, data) => http.post('/instance/v1/images/upload', data, { params }),
  queryChunks: params => http.get('/instance/v1/images/uploadResult', { params }),
  getQuota: params => http.get('/instance/v1/quota/remain', { params }),
  getRegionAndZone: () => http.get('/area/v1/areas'),
  checkNameExist: params => http.get('/instance/v1/images/exists', { params }),
  checkUpload: () => http.get('/instance/v1/checkUploadingNum'),
  getTagListOptions: (type, params) => http.get(`/label/v1/labels/${type}/select`, { params }),
  updateTag: (type, id, zoneId, data) => http.post(`/label/v1/labels/${type}/${id}/update?zoneId=${zoneId}`, data),
  getTest: () => http.get('/test')   //这里面的{ params }是参数，此处未定义参数，可以不用写
};

export default imageService;  //全部暴露

3、补充：

  文件的解构赋值：

import { getText } from '../api/index.js'   //解构赋值

//其中index.js文件是这样的
import http from './httpInstance'  

function getUserInfo() {
  return http({
    method: 'get',
    url: 'https://my-json-server.typicode.com/zimplexing/demo/userInfo',
  })
}
function getText() {
  return http({
    method: 'get',
    url: '/test',
  })
}
export { getUserInfo, getText }   //部分暴露

 httpInstance.js文件内容：

import axios from 'axios' 
import { Message } from 'hui'
import { trimOnlySpace } from '@hui-pro/utils'
import { REQUEST_SUCCESS, REFRESH_BY_HEADER } from '@/constant'
import wrapAxiosInstance from 'traceservice-instrumentation-axios'

const http = axios.create({  //这个http就是axios的实例  ，这里进行的是全局配置
  timeout: 20000,
  withCredentials: true,   //这个设置是允许跨域携带cookie
  headers: { 'X-Requested-With': 'XMLHttpRequest' },
})

// 用于上报前端调用链信息, 不会影响正常开发流程
// http://iris.hikvision.com.cn/conch/traceservice-instrumentation-axios
wrapAxiosInstance(http, { serviceName: process.env.VUE_APP_CONTEXT })

// 相应拦截器
http.interceptors.response.use(
  function (response) {
    // 请求多语言的json文件
    if (/.*\.json$/.test(response.config.url)) {
      return response
    }

    // 根据响应数据判断是否登录过期
    if (response.data.errorCode === REFRESH_BY_HEADER) {
      let refreshUrl = response.headers['refresh-url'].split('?')[0]
      refreshUrl =
        refreshUrl +
        '?service=' +
        location.protocol +
        '//' +
        location.host +
        location.pathname +
        encodeURIComponent(location.search)
      location.href = refreshUrl
      return
    }

    // 对错误进行统一处理
    if (response.data.code !== REQUEST_SUCCESS) {
      if (!response.config.noMsg && response.data.msg) {
        Message.error(response.data.msg)
      }
      return Promise.reject(response)
    } else if (response.data.code === REQUEST_SUCCESS && response.config.successNotify && response.data.msg) {
      // 弹出成功提示
      Message.success(response.data.msg)
    }
    return Promise.resolve({
      code: response.data.code,
      msg: response.data.msg,
      data: response.data.data,
    })
  },
  function (error) {
    if (error.message.indexOf('timeout') > -1) {
      // 多语言需要自己在项目中配置
      Message.error('请求超时，请重试！')
    }

    return Promise.reject(error)
  },
)

// 请求拦截器
http.interceptors.request.use(
  function (config) {
    // 所有搜索框可输入元素，都不需要去掉前后空格，只有仅输入空格时，此字段搜索无效。(规范: http://iris.hikvision.com.cn/huidesign/bscs/issues/83)
    return trimOnlySpace(config)
  },
  function (error) {
    // 对请求错误做些什么
    return Promise.reject(error)
  },
)

export default http //向外暴露http