学习记录分享

登录 注册
首页 友链 关于 技术交流
SOB | 搜索
综合排序时间浏览量
全部分类Android/iOS测试/运维后台/大数据日常随笔前端/Flutter人工智能编程语言
找到约 4 条结果
阳光沙滩博客系统TodoList(待完成列表/bugs)
阳光沙滩博客系统TodoList(待完成列表/bugs) 轮播图点击,没有做链接跳转 图片上传,没有去重-->可以通过计算md5值来防止文件重复上传 所有前端请求可以提交页数的,后面需要做页数限制 管理中心的友情链接更新完以后,id没有清空 管理中心需要添加一个跳转到前端门户 文章样式调整 用户接口需要进行分类调整-->设计有问题 文章页面请求一下页面访问统计/或者在default.vue里请求一下页面访问统计 扩展 图片存储使用云对象存储 springDataJap换成MP 评论通过邮件通知 学习中遇到问题 学习中遇到问题,同学们去交流网站发帖子: https://www.sunofbeach.net/wenda 如果你有什么想法,建议,可以评论! 此文章下面评论,需要重新注册账号,与阳光沙滩账号不互通。
2020-09-06 16:31 5019 博客系统 todolis bugs 任务 扩展
前端侧栏Tab和内容滚动联动切换标题
前端侧栏Tab和内容滚动联动切换标题 我们阳光沙滩博客系统课程里有一个关于页面 我们做成这个样子 点击侧栏可以切换右边内容;滚动右侧内容,可以切换左边的内容。 基本UI实现 左侧使用 ElementUI的组件Tabs https://element.eleme.cn/#/zh-CN/component/tabs 同学们可以去这里使用,至于怎么依赖ElementUI,可以参考官方说明,或者学习我们的前端课程。
2020-09-06 16:20 3187 博客系统 前端开发 毕业设计 测试 门户
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 3110 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 3117 博客系统 Nuxt.js 服务端渲染 毕业设计 前端开发
<<上一页
下一页 >>
热门标签
赞助商广告

    Copyright © 阳光沙滩 (2014-2020) 本网站由程序猿(媛)用爱驱动

    关于我们 联系我们 友情链接 粤ICP备14093694号
    回到
    顶部