45. 我的问答列表-前端页面
在index.html页面，先找到整个列表区域的父级，为其添加id，以便于创建Vue对象：
<!-- 约第185行 -->
<div class="container-fluid" id="questionsApp">
找到每个问题的显示区域，为这个区域的根级添加v-for以循环显示：
<!-- 约第193行 -->
<div v-for="question in questions" class="media bg-white m-2 p-3">
关于问题的状态：
<span class="badge badge-pill" v-bind:class="[question.statusClass]" v-text="question.statusText">已解决</span>
问题的标题：
<a class="text-dark" href="question/detail.html" v-text="question.title">eclipse 如何导入项目？</a>
问题的内容：
<div class="font-weight-light text-truncate text-wrap text-justify mb-2" style="height: 70px;" v-html="question.content">
<p>
eclipse 如何导入项目？
</p>
</div>
问题的标签列表：
<a v-for="tag in question.tags" class="text-info badge badge-pill bg-light" href="tag/tag_question.html">
<small v-text="tag.name">Java基础</small>
</a>
右下角的更多信息：
<small class="list-inline-item" v-text="question.userNickName">风继续吹</small> <small class="list-inline-item"><span v-text="question.hits">12</span>浏览</small> <small class="list-inline-item" v-text="question.createdTimeText">13分钟前</small>
显示图片：
<img v-bind:src="question.tagImage" class="ml-3 border img-fluid rounded" alt="" width="208" height="116">
添加了标签之后，在static下的**/js/question/文件夹下创建my.js**文件，先创建出Vue对象，并配置一些模拟的数据：
let questionsApp = new Vue({ el: '#questionsApp', data: { questions: [ { statusText: '已解决', statusClass: 'badge-success', title: '这是第1个问题', content: '很<b>严肃</b>的提出了第1个问题', tags: [ { id: 8, name: 'Java基础' }, { id: 12, name: 'Spring' }, { id: 15, name: 'SpringBoot' } ], userNickName: '天下第一', hits: '826', createdTimeText: '8小时之前', tagImage: '/img/tags/8.jpg' }, { statusText: '未回复', statusClass: 'badge-warning', title: '这是第2个问题', content: '我也不告诉你是什么问题……', tags: [ { id: 10, name: 'MySQL' }, { id: 17, name: 'SpringSecurity' } ], userNickName: '天下第一', hits: '537', createdTimeText: '15小时之前', tagImage: '/img/tags/10.jpg' } ] } });
然后，在index.html中调用以上文件：
<script src="/js/question/my.js"></script>
完成后，先利用以上模拟的数据进行测试，也就是直接打开浏览器，观察运行效果与预期是否相符！
测试完成后，在my.js中，向服务器端发送请求获取真实的数据，并用于显示页面：
let questionsApp = new Vue({ el: '#questionsApp', data: { questions: [] }, methods: { loadMyQuestions: function () { $.ajax({ url: '/api/v1/questions/my', success: function (json) { // json.data.list let data = json.data; let questions = 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].tagImage = '/img/tags/' + questions[i].tags[0].id + '.jpg'; questions[i].createdTimeText = "未知时间"; } questionsApp.questions = questions; } }); } }, created: function () { this.loadMyQuestions(); } });
关于将时间显示为“刚刚” / “xx分钟前”等格式的代码：
let now = new Date().getTime(); let pastTime = (now - new Date(questions[i].createdTime).getTime()) / 1000; let createdTimeText = "未知时间"; if (pastTime < 60) { // 不足1分钟 createdTimeText = "刚刚"; } else if (pastTime < 60 * 60) { // 不足1小时 createdTimeText = parseInt(pastTime / 60) + "分钟前"; } else if (pastTime < 60 * 60 * 24) { createdTimeText = parseInt(pastTime / 60 / 60) + "小时前"; } else { createdTimeText = parseInt(pastTime / 60 / 60 / 24) + "天前"; } questions[i].createdTimeText = createdTimeText;
