如果我们在客户端渲染，直接导入我们的date.js问题不大，按我们的博客系统管理中心的方式格式化即可！ export function formatDate(date, fmt) { if (/(y+)/.test(fmt)) { fmt = fmt.replace(RegExp.$1, (date.getFullYear() + '').substr(4 - RegExp.$1.length)) } let o = { 'M+': date.getMonth() + 1, 'd+': date.getDate(), 'h+': date.getHours(), 'm+': date.getMinutes(), 's+': date.getSeconds() }; for (let k in o) { if (new RegExp(`(${k})`).test(fmt)) { let str = o[k] + ''; fmt = fmt.replace(RegExp.$1, (RegExp.$1.length === 1) ? str : padLeftZero(str)) } } return fmt } function padLeftZero(str) { return ('00' + str).substr(str.length) } 如果在服务端进行渲染如何格式化呢？ 我们可以通过过滤器来转换格式。 在plugins目录下创建一个文件名为：dateformat.js import Vue from 'vue' export function formatDate(dateStr, fmt) { let date = new Date(dateStr) if (/(y+)/.test(fmt)) { fmt = fmt.replace(RegExp.$1, (date.getFullYear() + '').substr(4 - RegExp.$1.length)) } let o = { 'M+': date.getMonth() + 1, 'd+': date.getDate(), 'h+': date.getHours(), 'm+': date.getMinutes(), 's+': date.getSeconds() }; for (let k in o) { if (new RegExp(`(${k})`).test(fmt)) { let str = o[k] + ''; fmt = fmt.replace(RegExp.$1, (RegExp.$1.length === 1) ? str : padLeftZero(str)) } } return fmt } function padLeftZero(str) { return ('00' + str).substr(str.length) } let filters = { formatDate }; Object.keys(filters).forEach(key => { Vue.filter(key, filters[key]) }); export default filters 像我们的ElementUI一样注册插件 plugins: [ { src: '@/plugins/element-ui', ssr: true }, { src: '@/plugins/word-cloud', ssr: false }, { src: '@/plugins/dateformat', ssr: true }, ], 使用： {{item.blogCreateTime | formatDate('yyyy-MM-dd hh:mm:ss')}}

前端侧栏Tab和内容滚动联动切换标题 我们阳光沙滩博客系统课程里有一个关于页面 我们做成这个样子 点击侧栏可以切换右边内容；滚动右侧内容，可以切换左边的内容。 基本UI实现 左侧使用 ElementUI的组件Tabs https://element.eleme.cn/#/zh-CN/component/tabs 同学们可以去这里使用，至于怎么依赖ElementUI，可以参考官方说明，或者学习我们的前端课程。 右侧布局 左边固定，右边加个margin值。 事件处理 事件主要包括两部分：滚动、点击左侧 滚动 滚动的话，我们需要处理侧栏悬浮 添加滚动监听： mounted() { ...... window.addEventListener("scroll", this.onWindowScroll); this.onWindowScroll(); }, 记得删除监听哦 beforeDestroy() { window.removeEventListener('scroll', this.onWindowScroll); }, 这里面就是滑动的代码了 onWindowScroll() { let dy = document.documentElement.scrollTop; let dx = document.documentElement.scrollLeft; let leftBox = document.getElementById('about-left-part'); let parentBox = document.getElementById('about-box'); if (leftBox && parentBox) { let parentBoxTop = parentBox.offsetTop; // console.log(parentBoxTop); if (dy > parentBoxTop) { leftBox.style.top = '0px'; } else { leftBox.style.top = (parentBoxTop - dy) + 'px'; } //处理横向滑动 if (dx > 0) { leftBox.style.left = -dx + "px"; } else { leftBox.style.left = parentBox.offsetLeft + "px"; } } if (!this.isClickLeftSwitch) { //处理标签的滚动范围 for (let i = 0; i < this.contentHeaders.length - 1; i++) { let first = this.contentHeaders[i]; let second = this.contentHeaders[i + 1]; if (dy >= first.offTop && dy < second.offTop) { this.target = first.id; //console.log(this.target); break; } } } else { this.isClickLeftSwitch = false; } 点击事件处理 onLeftItemClick() { this.isClickLeftSwitch = true; this.$router.push({ path: '/about#' + this.target }); // console.log(this.target); } 具体的话请去视频教程吧

阳光沙滩博客系统TodoList（待完成列表/bugs） 轮播图点击，没有做链接跳转 图片上传，没有去重-->可以通过计算md5值来防止文件重复上传 所有前端请求可以提交页数的，后面需要做页数限制 管理中心的友情链接更新完以后，id没有清空 管理中心需要添加一个跳转到前端门户 文章样式调整 用户接口需要进行分类调整-->设计有问题 文章页面请求一下页面访问统计/或者在default.vue里请求一下页面访问统计 扩展 图片存储使用云对象存储 springDataJap换成MP 评论通过邮件通知 学习中遇到问题 学习中遇到问题，同学们去交流网站发帖子： https://www.sunofbeach.net/wenda 如果你有什么想法，建议，可以评论！ 此文章下面评论，需要重新注册账号，与阳光沙滩账号不互通。