超详细！利用SpringBoot+SpringCloud做一个问答项目(十四)

一、服务器端向客户端响应“问题”的标签列表数据

---

目前，每个“问题”数据都包含tagIds数据，值例如"1, 2"、"8, 10, 15"，在客户端显示数据时，需要显示出对应的标签名称，例如需要得到"Java基础"、"JavaOOP"等字样，则服务器端向客户端响应“问题”数据时，应该包含该“问题”的标签数据！

由于标签数据的数量较小，并且这些数据被修改的频率非常低，查询频率偏高，可以将所有的标签数据都存放在Redis中，便于提高查询效率！

要使用Redis查询标签数据，首先，需要将每一个标签都存入到Redis中，后续才可以取出数据！并且，取出数据时，是需要根据标签的id取数据的，所以，在存入时，需要将标签的id作为Key的一部分，后续才可以精准的取出数据！

此前，在RedisTagSchedule计划任务中，就已经可以把List<TagVO>存入到Redis中了，只需要在存入List<TagVO>的同时，再把每个TagVO也存储一份即可！

目前，在RedisUtils工具类中并没有存入1个对象和取出1个对象的方法，所以，先在RedisUtils工具类中添加这样的方法：

/**
 * 向Redis中存入数据
 *
 * @param key   在Redis中存入数据时使用的Key
 * @param value 存入的值
 */
public void set(String key, Serializable value) {
    ValueOperations<String, Serializable> ops = redisTemplate.opsForValue();
    ops.set(key, value);
}

/**
 * 从Redis中取出数据
 *
 * @param key 此前存入数据时使用的Key
 * @return 在Redis中与参数key匹配的值
 */
public Serializable get(String key) {
    ValueOperations<String, Serializable> ops = redisTemplate.opsForValue();
    return ops.get(key);
}

然后，在RedisTagSchedule原本向Redis中存入数据的过程中，添加存入一个个的TagVO对象，使用的Key就是例如tag1、tag5等格式的：

完成后，重启straw-api-question，当项目启动后就会执行计划任务，则数据将被存入到Redis，登录Redis控制台即可看到这些数据：

二、显示“我的问答”列表--前端页面

---

function getTimeText(time) {
    let t1 = new Date(time).getTime();
    let t2 = new Date().getTime();
    let t = (t2 - t1) / 1000;
    let gmtCreateText;
    if (t < 60) {
        gmtCreateText = "刚刚";
    } else if (t < 60 * 60) {
        gmtCreateText = parseInt(t / 60) + "分钟前";
    } else if (t < 24 * 60 * 60) {
        gmtCreateText = parseInt(t / 60 / 60) + "小时前";
    } else {
        gmtCreateText = parseInt(t / 60 / 60 / 24) + "天前";
    }
    return gmtCreateText;
}

let myQuestionsApp = new Vue({
    el: '#myQuestionsApp',
    data: {
        questions: [
            {
                statusText: '未回复',
                statusClass: 'badge-warning',
                title: '测试问题1',
                content: '<i>测试</i> <span style="color:red">正文1</span>',
                tags: [
                    { id: 1, name: 'Java基础' },
                    { id: 2, name: 'JavaSE' },
                    { id: 3, name: 'JavaOOP' },
                ],
                userNickName: '蜡笔小新',
                hits: 365,
                gmtCreateText: '3分钟前'
            },
            {
                statusText: '未解决',
                statusClass: 'badge-info',
                title: '测试问题2',
                content: '<i>测试</i> <span style="color:blue">正文2</span>',
                tags: [
                    { id: 8, name: 'Servlet' },
                    { id: 6, name: 'Web' },
                    { id: 7, name: 'JDBC' },
                ],
                userNickName: '高达',
                hits: 921,
                gmtCreateText: '47分钟前'
            },
            {
                statusText: '已解决',
                statusClass: 'badge-success',
                title: '测试问题3',
                content: '<i>测试</i> <span style="color:green">正文3</span>',
                tags: [
                    { id: 9, name: 'Spring' },
                    { id: 10, name: 'SpringMVC' },
                    { id: 11, name: 'Mybatis' },
                ],
                userNickName: '林南',
                hits: 586,
                gmtCreateText: '2小时前'
            }
        ]
    },
    methods: {
        loadQuestions: function (page) {
            // alert('准备加载问题列表……');
            // isNaN > is Not a Number
            if (page == "" || isNaN(page) || page < 1) {
                page = 1;
            }
            $.ajax({
                url: '/api-question/v1/questions/my',
                data: 'page=' + page,
                success: function (json) {
                    let questions = json.data.list;
                    let statusTexts = ['未回复', '未解决', '已解决'];
                    let statusClasses = ['badge-warning', 'badge-info', 'badge-success'];
                    for (let i = 0; i < questions.length; i++) {
                        questions[i].statusText = statusTexts[questions[i].status];
                        questions[i].statusClass = statusClasses[questions[i].status];
                        questions[i].gmtCreateText = getTimeText(questions[i].gmtCreate);
                        questions[i].tags = [ { id: 1, name: 'Java' } ];
                    }
                    myQuestionsApp.questions = questions;
                }
            });
        }
    },
    created: function () {
        this.loadQuestions();
    }
});