RuoYi-Vue项目添加字段映射

发表于 分类于 阅读次数： 本文字数： 703 阅读时长 ≈ 3 分钟

前言

在后端，我们有时候会忘记字段映射对应的值，每次就需要重新查表再编码，所以会有一些枚举类或者静态类，按照业务需求将枚举类或者静态类中的值映射到数据库字段上，这样在编码时，就可以直接使用枚举类或者静态类中的值，而不需要再查表。类似这样：

1
2
3
4
5
6
7
public class ImageUsageType {
    public static final int COLLECTION = 0;
    public static final int BLOG = 1;
    public static final int BACKGROUND = 2;
    public static final int AVATAR = 3;
    public static final int ICON = 4;
}

但这么做了之后，后端是方便了，前端又怎么将0到4转换为我们能看懂的名字呢？

思路

如果你使用的是Vue，比较简单的思路就是直接在文件中给出映射关系，也就是在data中定义我们所需要的映射：

1
2
3
4
5
6
data () {
  return {
    imageUsageType: { 0: 'collection', 1: 'blog',
      2: 'background', 3: 'avatar', 4: 'icon' }
  }
}

这样的话我们就不需要担心这个页面的映射了。但是其他页面就头疼了，每个页面都需要这么设计。

我们就需要使用一个JSON文件，或者一个类似Java的类一样，将0到4重新转换回来。

JSON实现

众所周知，数字是不能够作为变量的。而后端传过来的只有数字。很明显，如果使用类进行映射将会相当麻烦。那么就只剩下JSON实现了。

于是我们就定义这样一个usage.json文件：

1
2
3
4
5
6
7
{
  "0": "collection",
  "1": "blog",
  "2": "background",
  "3": "avatar",
  "4": "icon"
}

然后在Vue中引入这个文件：

1
import usage from '@/assets/usage.json'

不过，我们使用的是RuoYi-Vue，并不能够像Vue3一样引入就完事，还需要使用Vue2的方法，将usage.json文件转换为Vue的data：

1
2
3
4
5
6
import usage from '@/assets/usage.json'
export default {
  data () {
    return { imageUsageType: usage }
  }
}

这样，每个页面就可以按照需要设置imageUsageType，将后端的数字映射回我们能够看懂的名字了。

JS实现

当然，JS也可以完成这个过程。但是完成的思路有些许不太一样。

使用JS实现的过程中，我们需要定义一个数组，这个数组需要按照索引的顺序给出来：

1
2
const usageTypes = ['collection', 'blog', 'background', 'avatar', 'icon']
export default usageTypes

然后，我们再引入这个数组：

1
import usageTypes from '@/assets/usageTypes.js'

最后，引用：

1
2
3
4
5
export default {
  data () {
    return { imageUsageType: usageTypes }
  }
}

当然，JSON对象usage与JavaScript数组usageTypes相比，终归还是JSON相对更为灵活，主要是因为JavaScript数组中的元素需要严格按照索引的顺序，否则的话很难查出问题在哪。JSON虽然说可以按照当天的心情随意修改顺序，但还是建议各位遵循一定的规范，自由过头了可不好。