一、服务器端向客户端响应“问题”的标签列表数据
目前,每个“问题”数据都包含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();
}
});