Welcome to OStack Knowledge Sharing Community for programmer and developer-Open, Learning and Share
Welcome To Ask or Share your Answers For Others

Categories

0 votes
3.9k views
in Technique[技术] by (71.8m points)

怎么拼接标题比较舒服?

根据后端读取到的json数据,怎么把各个数据拼接成一个标题呢?大致效果如下:
image

读取到的json数据大概长这样:

{
    "jsonapi": {
        "version": "1.0"
    },
    "data": [{
        "id": 1004,
        "problem_id": 1003,
        "result": 6,
        "language": 1,
        "user": {
            "data": {
                "username": "admin"
            }
        }
    }],
}

稍微麻烦点的是result这个属性,还得转换成“Wrong Answer”、“Accepted”、“Time Limit Exceeded”等字符串以及相应的颜色(如success 、warning、danger),我用了几个类似hash数组来映射:

const CommonVariable = {  
  statusString: [
    'Pending',
    'Pending Rejudging',
    'Compiling',
    'Running & Judging',
    'Accepted',
    'Presentation Error',
    'Wrong Answer',
    'Time Limit Exceed',
    'Memory Limit Exceed',
    'Output Limit Exceed',
    'Runtime Error',
    'Compile Error',
    'Compile OK',
    'Test Running Done',
  ],
  labelColor: [
    'primary',
    'primary',
    'default',
    'primary',
    'success', // 4 AC
    'danger',
    'warning', // 6 WA
    'danger',
    'danger',
    'danger',
    'danger',
    'danger',
    'default',
    'default',
  ],
}

export {
  CommonVariable,
  ScoreFormat,
}

然后是拼接:

<template>
  <div class="title">
    <a href="#">#{{stitle.id}}</a>,
    By <span class="text-primary">{{stitle.user}}</span>,
    Problem <span class="text-primary">{{stitle.problem}}</span>,
    <span :class="`p-badge badge-pill badge-${stitle.labelColor}`">{{stitle.statusString}}</span>
  </div>
</template>

export default {
  data () {
      return {
        stitle: {}
    }
  },
  async getStatusDetail(id) {
        const {data : res} = await this.$fetch(.........);
        this.stitle.id = res[0].id;
        this.stitle.user = res[0].user.data.username;
        this.stitle.problem = res[0].problem_id;
        this.stitle.labelColor = CommonVariable.labelColor[res[0].result];
        this.stitle.statusString = CommonVariable.statusString[res[0].result];
  }
}

总觉得这很麻烦~有没有其他轻巧或优美点的方式?比如在getStatusDetail()里拼接好再显示会不会好一点?


与恶龙缠斗过久,自身亦成为恶龙;凝视深渊过久,深渊将回以凝视…
Welcome To Ask or Share your Answers For Others

1 Answer

0 votes
by (71.8m points)

这什么OJ啊(好奇
模板我觉得还好,getStatusDetail 那里可以改进,比如

- const {data : res} = await this.$fetch(.........);
+ const { data: [res] } = await this.$fetch(.........)
// 不能直接赋值的话,合并一下也比一条一条来简洁
this.stitle = {
    id: res.id,
    user: res.user.data.username,
    problem: res.problem_id,
    labelColor: CommonVariable.labelColor[res.result],
    statusString: CommonVariable.statusString[res.result]
    // 一个叫做 CommonVariable 的 Variable 起了一个不那么 Common 的名字,或许可以缩短一下
}

然后我口胡一下,感觉 badge 和 username 可以写成组件(
把读取 .data.username 这一步还有外面的标签封装起来,应该会简洁一些


与恶龙缠斗过久,自身亦成为恶龙;凝视深渊过久,深渊将回以凝视…
Welcome to OStack Knowledge Sharing Community for programmer and developer-Open, Learning and Share
Click Here to Ask a Question

2.1m questions

2.1m answers

60 comments

57.0k users

...