前端字典接口的使用

之前没有使用过字典接口，乍一听，竟然不知是啥，后来在项目中，使用之后，其实跟其他接口无甚差别

一、vue中的字典是什么？

在vue里面，有些项目中含有很多的下拉列表，这些下拉列表是通过一个接口，但是传入不同的参数来获取到不同的下列列表数据。这个就叫做字典吧（我自己的理解）

二、使用步骤

1.使用axios封装公共的请求接口，进行数据统一请求处理，得到下拉列表数据数组形式

返回的数据格式：

代码如下（示例）：

import { axiosNew } from '@/utils/request'
import { Promise } from 'q'
//获取字典
export function findDictByCode(code) {
  return Promise((resolve, reject) => {
    axiosNew({
      url: '/dev/dict/findDictByCode/' + code,
      method: 'get',
    }).then((res) => {
      if (res.status === 200 && res.obj && res.obj.dictDataList) {
        resolve(res.obj.dictDataList)
      } else {
        resolve([])
      }
    })
  })
}
//以上是统一的请求方法

//以下是各个字典的传参，直接写在一个文件中，，到时候在页面使用的时候，引入--使用即可

//合同类型
export const dictContractType = () => {
  return findDictByCode('contractType')
}
//货物品种
export const dictCargoType = () => {
  return findDictByCode('cargoType')
}
//货物等级
export const dictCargoClass = () => {
  return findDictByCode('goodsLevel')
}

2.页面使用

代码如下（示例）：

import { dictCargoType, dictStatus } from '@/utils/dict'

create(){
	getInfo() {
      // 获取状态
      dictStatus().then((res) => {
        this.dictStatus = res
      })
      dictCargoType().then((res) => {
        this.dictCargoType = res
      })
    },
}
//这样直接获取到的就是下拉列表的数组，直接使用，方便高效

总结

之前做的项目没有这种类似的需求，所以这是头一次使用，算是体验了 字典的好处。还是挺方便的。仅供参考