评论

Vue开发之旅——我的博客搭建记录(三)

《我的博客》第三章

  • 博客3.0,大改特改!(11.10-11.13)
  • 卡片(暂时这么叫,名字没想好)

网站的初衷是博客+二次元资料库,因此复制一遍发博客的代码,稍加修改(将数据存储至新的数据库)就是发卡片页了。建的第一个资料库就是阿手(b站搜索贝拉kira,把你的关注给我交了)。展示方面和博客展示一样的思路,图片使用懒加载处理,但使用了网络上的卡片插件(https://www.17sucai.com/pins/38899.html),将鼠标放至卡片上可以有一个上推的阴影效果,非常好看。为适配图片尺寸,将卡片设为横向矩形。ASOUL时代,沸腾期待!(点击查看更多可直达bb空间捏)

  • 嵌套路由:千鸟,降临!

做完阿手下一个就是千鸟了。想着在卡片页面的左侧做一个导航栏,能够切换阿手/千鸟/其他。导航栏使用竖向的el-menu,根路由是/card,点击千鸟路径就变为/card/qianniao。这需要引入嵌套路由,直接上图,在route.js文件中为card设置children属性。

el-menu开启router,为每个item设置路径,就可实现导航路由功能咯。

千鸟的立绘是竖向的,因此调整了卡片尺寸。鸟不灭!鸟不灭!

  • 评论区?发病墙!

设置了一个匿名评论区,发现发布评论后得手动刷新才能更新出来。在App.vue中写了一个reload函数,通过provide提供变量,子组件通过inject注入变量,设置0.5秒时延触发页面自刷新。

  • 史诗级提升:本地上传!(11.15)

结合文档和博客研究出了使用elmentui+leancloud将本地文件转为base64上传。el-upload的手动上传需要自己写httpRequest函数,本地上传的关键就是写好这个函数。

下一章介绍部署网页至服务器上,折磨了一晚上,这方面文章繁多,都是你复制我的我复制你的,而且是vue-cli3+vue2,不适配我的版本,好在最后找到了神中神文章解决了。中间摸了几天画画去了~(天选管人痴收到了海子姐晚安和白白回复,赢!赢!)

最后一次编辑于  2021-11-17  
点赞 5
收藏
评论

5 个评论

  • Smooth
    Smooth
    2021-11-17

    期待后续!我之前将本地vue部署到我的阿里云服务器上也弄了半天才总算搞定

    2021-11-17
    赞同 1
    回复
  • 晨曦
    晨曦
    2021-11-17

    文件上传功能无疑是博客的一大亮点,期待你的博客越做越好。加油!!

    2021-11-17
    赞同 1
    回复
  • beEr
    beEr
    2021-11-17

    瑞瑞的,小摆一天

    2021-11-17
    赞同 1
    回复
  • 何
    2021-11-17

    好!

    2021-11-17
    赞同
    回复
  • Jack Li
    Jack Li
    发表于小程序端
    2021-11-17

    学习了,加油

    2021-11-17
    赞同
    回复
登录 后发表内容