动漫页和仓库页初步完成

2022-12-26 19:43:29 浏览数 (1)

  应该算是第二阶段的开发快要结束了吧,基础的页面和功能都已经完成了。接下来的就是对整体的UI和性能的调优。

    下面来记录一下这些天(摸鱼了好几天,嘿嘿嘿)的问题。

redis密码

    之前设置密码是在redis-cli设置的,然后,在一次重启时,发现项目启动失败了,才发现这种方式设置的密码是临时的,非常危险!所以需要在配置文件设置密码,所在字段行为requirepass,后面跟上密码就好了。

富文本代码域重构

    之前wangeditor的代码模块结合highlight.js有着很大的问题,那就是插入代码后,哪些<>等代码中的符号会被自动转义成&gt;&lt; !!!这样导致如果上传html、xml之类的代码要改半天!难以忍受这样的折磨,所以研究了一下highlight和wangeditor的代码,然后发现。。。wangeditor的帮助文档好多的页面都是死链接,根本没有一点的帮助作用,想要重写一些东西还要费劲的自己研究源码。最后就打算自己封装code的模块了。

    代码高亮模块需要引入如下语句,我这里用的a11y的代码高亮主题:

代码语言:javascript复制
import hljs from 'highlight.js'
import '../../css/a11y-light.min.css'

    代码装入编辑器如下代码,其中code是原始的代码内容,为了不妨碍后续编辑,所以新加了一行空白行。否则后续编辑可能一直在code域中。

代码语言:javascript复制
addCode () {
      const res = hljs.highlightAuto(this.code).value
      const codeStr = "<pre><code class='highlight'>"  
        res   '</code></pre><p data-we-empty-p><br></p>'
      this.editor.txt.append(codeStr)
      this.code = ''
}

防盗链的图片引入

    番剧页的图片都是引入的外链,发现这样的问题,刚加载时,图片加载不出来,然后去打开该图片后,再次来到这个页面,图片又可以加载了,原来是防盗链的作用,经过百度,得知加入如下的语句即可在获取时不加入referrer头,从而实现访问防盗链图片的资源。

代码语言:javascript复制
<meta name="referrer" content="never">

component组件的事件

    有时候我们会将vue中一些公用的模块封装成组件component,然后引入使用,如果直接对组件@click添加事件,那么他是无法生效的,我们需要@click.native或者使用emit来解决组件的事件触发处理。

select和datalist区别

    不用不知道,一用细节一大堆。select是下拉列表,而datalist则是数据列表,select更倾向于选择多个中的一个,而datalist更倾向于数据的提示之类的。datalist要结合input使用,input又list属性,值为datalist的id值。而select不需要input结合使用。对于他们的option又label属性,表示显示的内容或提示的内容,value则是实际的值。

    大概明后天稍微优化和完善一下就可以发布2.0版本了吧!期待一次成功!!

0 人点赞