阳光沙滩博客系统TodoList（待完成列表/bugs）
阳光沙滩博客系统TodoList（待完成列表/bugs） 轮播图点击，没有做链接跳转 图片上传，没有去重-->可以通过计算md5值来防止文件重复上传 所有前端请求可以提交页数的，后面需要做页数限制 管理中心的友情链接更新完以后，id没有清空 管理中心需要添加一个跳转到前端门户 文章样式调整 用户接口需要进行分类调整-->设计有问题 文章页面请求一下页面访问统计/或者在default.vue里请求一下页面访问统计 扩展 图片存储使用云对象存储 springDataJap换成MP 评论通过邮件通知 学习中遇到问题 学习中遇到问题，同学们去交流网站发帖子： https://www.sunofbeach.net/wenda 如果你有什么想法，建议，可以评论！ 此文章下面评论，需要重新注册账号，与阳光沙滩账号不互通。
2020-09-06 16:31
3846
博客系统
todolis
bugs
任务
扩展
前端侧栏Tab和内容滚动联动切换标题
前端侧栏Tab和内容滚动联动切换标题 我们阳光沙滩博客系统课程里有一个关于页面 我们做成这个样子 点击侧栏可以切换右边内容；滚动右侧内容，可以切换左边的内容。 基本UI实现 左侧使用 ElementUI的组件Tabs https://element.eleme.cn/#/zh-CN/component/tabs 同学们可以去这里使用，至于怎么依赖ElementUI，可以参考官方说明，或者学习我们的
前端课程。
2020-09-06 16:20
1973
博客系统
前端开发
毕业设计
测试
门户
vue.js下载文件
vue.js下载文件 有个同学不知道如何去下载文件，早上比较忙，弄了一份代码给他。晚上回来，发现不对。 现在整理一下，案例，下载一张图片： 基于axios 需要有axios import axios from 'axios'
get请求： // get请求
requestGet(url, params = {}) {
return new Promise((resolve, reject) => {
axios.get(url, params).then(res => {
resolve(res.data)
}).catch(error => {
reject(error)
})
})
},
接口 export const getFile = (url, params) => {
return http.requestGet(url, params);
};
调用 download() {
api.getFile("/images/vip_ad.png",
{
responseType: 'blob',
headers: {
'Content-Type': 'application/octet-stream'
},
}).then(result => {
console.log(result);
this.convertRes2Blob(result);
});
},
以二进制的形式保存成文件 convertRes2Blob(response) {
// 将二进制流转为blob
let blob = new Blob([response]);
if (typeof window.navigator.msSaveBlob !== 'undefined') {
// 兼容IE，window.navigator.msSaveBlob：以本地方式保存文件
window.navigator.msSaveBlob(blob, decodeURI("文件名.png"))
} else {
console.log('save....');
// 创建新的URL并指向File对象或者Blob对象的地址
const blobURL = window.URL.createObjectURL(blob);
// 创建a标签，用于跳转至下载链接
const tempLink = document.createElement('a');
tempLink.style.display = 'none';
tempLink.href = blobURL;
tempLink.setAttribute('download', decodeURI("文件名.png"));
// 兼容：某些浏览器不支持HTML5的download属性
if (typeof tempLink.download === 'undefined') {
tempLink.setAttribute('target', '_blank')
}
// 挂载a标签
document.body.appendChild(tempLink);
tempLink.click();
document.body.removeChild(tempLink);
// 释放blob URL地址
window.URL.revokeObjectURL(blobURL);
}
},
测试 如果要下载Pdf的话，修改一下路径即可。 比如说： convertRes2Blob(response) {
// 将二进制流转为blob
let blob = new Blob([response]);
if (typeof window.navigator.msSaveBlob !== 'undefined') {
// 兼容IE，window.navigator.msSaveBlob：以本地方式保存文件
window.navigator.msSaveBlob(blob, decodeURI("文件名.pdf"))
} else {
console.log('save....');
// 创建新的URL并指向File对象或者Blob对象的地址
const blobURL = window.URL.createObjectURL(blob);
// 创建a标签，用于跳转至下载链接
const tempLink = document.createElement('a');
tempLink.style.display = 'none';
tempLink.href = blobURL;
tempLink.setAttribute('download', decodeURI("文件名.pdf"));
// 兼容：某些浏览器不支持HTML5的download属性
if (typeof tempLink.download === 'undefined') {
tempLink.setAttribute('target', '_blank')
}
// 挂载a标签
document.body.appendChild(tempLink);
tempLink.click();
document.body.removeChild(tempLink);
// 释放blob URL地址
window.URL.revokeObjectURL(blobURL);
}
},
download() {
api.getFile("/2020/07/13/数组的操作.pdf",
{
responseType: 'blob',
headers: {
'Content-Type': 'application/octet-stream'
},
}).then(result => {
console.log(result);
this.convertRes2Blob(result);
});
},
下载结果： 打开正常
2020-09-06 15:46
2213
vue.js
前端
开发
测试
下载
Nuxt.js时间格式化
如果我们在客户端渲染，直接导入我们的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')}}
2020-09-08 15:12
2199
博客系统
Nuxt.js
服务端渲染
毕业设计
前端开发