-
Notifications
You must be signed in to change notification settings - Fork 0
/
Copy pathindex.xml
32 lines (32 loc) · 13.7 KB
/
index.xml
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
<?xml version="1.0" encoding="utf-8" standalone="yes"?><rss version="2.0" xmlns:atom="http://www.w3.org/2005/Atom"><channel><title>zhangFork</title><link>https://zhang-fork.github.io/</link><description>Recent content on zhangFork</description><generator>Hugo -- gohugo.io</generator><language>en-us</language><copyright>This work is licensed under a Creative Commons Attribution-NonCommercial 4.0 International License.</copyright><lastBuildDate>Fri, 05 Jun 2020 10:48:32 +0800</lastBuildDate><atom:link href="https://zhang-fork.github.io/index.xml" rel="self" type="application/rss+xml"/><item><title>Vue实现一个简单的评论系统</title><link>https://zhang-fork.github.io/posts/vue%E5%AE%9E%E7%8E%B0%E4%B8%80%E4%B8%AA%E7%AE%80%E5%8D%95%E7%9A%84%E8%AF%84%E8%AE%BA%E7%B3%BB%E7%BB%9F/</link><pubDate>Fri, 05 Jun 2020 10:48:32 +0800</pubDate><guid>https://zhang-fork.github.io/posts/vue%E5%AE%9E%E7%8E%B0%E4%B8%80%E4%B8%AA%E7%AE%80%E5%8D%95%E7%9A%84%E8%AF%84%E8%AE%BA%E7%B3%BB%E7%BB%9F/</guid><description>上次表示要接着看源码来着,但是看了上次写的post，有点看不懂，真是:talk is cheap，show code please! 暂且用起。
目标是实现一个评论系统。
数据结构 因为还没有学后端，所以先自己实践一个。
import {reactive} from &#34;vue&#34; const list=reactive([ { name:&#39;xx&#39;, comment:&#34;xxx&#34;, like:5, child:[ { name:&#34;23&#34;, comment:&#34;3ef&#34;, like:0, parent_name:&#39;xx&#39;, child:[...] }, { name:&#34;2113&#34;, comment:&#34;311ef&#34;, like:0, parent_name:&#39;xx&#39;, child:[] }, ] }, { name:&#39;x11x&#39;, comment:&#34;x1xx&#34;, like:51, child:[] } ]) 大致如是,一个嵌套的数组,一层数组表示一级评论,一级评论表示对文章的评论,二级评论表示对一级评论的评论,放在一级评论的里面,用child字段表示,并加一个parent_name 的属性,用来指向它的父评论,应该用一个id来表示,但是为了方便,就偷懒用父评论的name了.
当然后端的数据库不会这样表示,这个只是为了用vue的组件方便,因为组件也可以嵌套.对于嵌套的数据结构,我想应该可以用递归把它拍平,具体代码,就坑了吧.
vue实践 一个简单的评论系统起码应该分成两部分,一个用来展示评论,一个用来回复,对应的vue组件的话,展示部分用两个组件,一个负责一级评论,一个负责剩下的级别.因为二者展示的方式不同,如果放在一个组件里面,用组件的自嵌套的话,逻辑比较复杂. 分开成俩后,一个包含嵌套,一个不包含,可能复用性会好一点,当然这些都是我实践完后的想法,当时,肯定是因为实现起来比较复杂.
回复部分就一个组件,虽然对文章的评论与对评论的评论,在数据结构上面不一样,但是复杂度不高,而且这本来就是一个自己编的数据结构,所以&hellip;
其他的像时间,点赞数之类的小挂件,在数据结构上添加相应的字段即可,暂且不提.
效果 对文章的评论: 对评论的评论: 反手一个赞: 其实整体部分实践起来不太困难,时间主要花在一个组件间的通讯,props如何使用上.
二就是写模板,写css,调整效果比较麻烦,还好有bootstrap库,
TODO 在截图的时候,发现回复和点赞icon也应该做成响应式的,😄
数据验证功能,又是一个坑&hellip;
文件放到GitHub了</description></item><item><title>Vue小白实现reactive</title><link>https://zhang-fork.github.io/posts/vue%E5%B0%8F%E7%99%BD%E5%AE%9E%E7%8E%B0reactive/</link><pubDate>Sat, 23 May 2020 10:26:19 +0800</pubDate><guid>https://zhang-fork.github.io/posts/vue%E5%B0%8F%E7%99%BD%E5%AE%9E%E7%8E%B0reactive/</guid><description>After reading es5, es6, and ts, ok, it is time to read the Vue. So,git clone the source code ,then open it. WTF,every single word i understood, but, you know,i gave up.
All paths lead to Rome,as a newbie, what i can do is to write some sample myself.The easiest part of Vue may be the reactive function.So, let&rsquo;s get rid of it.
//The core concept of reactive is when we change the data, //the view can update simultaneously.</description></item><item><title>Slowing</title><link>https://zhang-fork.github.io/posts/slowing/</link><pubDate>Sun, 10 May 2020 09:04:02 +0800</pubDate><guid>https://zhang-fork.github.io/posts/slowing/</guid><description>基础不牢,地动山摇.
当我看了Vue的100集视频教程后,发现没记下什么东西的时候,感觉到不妙了.操作性的东西,按照文档做问题不大,但是光记下流程没用,为啥要这样做？等版本一更新,学的流程就废了.
原型链 初级的javascript教程里面,根本没有提及这个东西。Vue视频里面有谈到,看到老师用了,大概明白是做什么的,看了就过了.后来,想了解下vue的原理,搜索到一篇导读文章,里面表示此点要弄懂,遂翻了好多帖,最后一个视频里面看讲清楚了—— new方法,跟Object.create方法生成对象的原型链之异同.其实是阮一峰的es5教程里面先学了,照着敲了敲,再看视频,有一点点豁然开朗.
响应式 Vue的响应式是怎么实现的呢?相关文章就能看懂个开头,😰就是Object.defineProperty的getter setter来劫持,还是看es5教程的时候的,知道有这么个方法.可惜Vue-next用es6的proxy了.路漫漫其修远兮.
其他 promise相关的问题比较难懂呀,还有es6的反射,ts语法,真心想要神奇道具.</description></item><item><title>一次面向搜索引擎的vba编程</title><link>https://zhang-fork.github.io/posts/%E4%B8%80%E6%AC%A1%E9%9D%A2%E5%90%91%E6%90%9C%E7%B4%A2%E5%BC%95%E6%93%8E%E7%9A%84vba%E7%BC%96%E7%A8%8B/</link><pubDate>Sat, 25 Apr 2020 09:10:16 +0800</pubDate><guid>https://zhang-fork.github.io/posts/%E4%B8%80%E6%AC%A1%E9%9D%A2%E5%90%91%E6%90%9C%E7%B4%A2%E5%BC%95%E6%93%8E%E7%9A%84vba%E7%BC%96%E7%A8%8B/</guid><description>其实也不能说一次，上个月已经把主要功能写了,ld使用反馈后才搞清ld的全部需求,这次花时间重做了下.搞清业主需求很重要呀.
字典 简单来说,主要需求就是把加班费自动填上卡号,再分开成业务科室和行政科室汇总做2个报表.按照b站的教程,分类汇总用到了vba字典的特性:key值不能重复,核心代码就一句
dic(&#34;&#39;&#34; &amp; Preview.List(j, 3)) = dic(&#34;&#39;&#34; &amp; Preview.List(j, 3)) + CInt(Preview.List(j, 2)) &#39;preview是listbox 缘起 其实最初ld是拿输入好的姓名,让我填相关信息,我看有花名册,就直接vlookup了外加pivot了,结果加班费发错了,ld受了批评.😰 原来vlookup只能找不重复值,而表里面姓名重复的多了去了,几千人我也没仔细看,以后取名还是不要那么大众,如果所有人姓名跟身份证号一样唯一,羞愧难当.知道问题后,本来还是想在公式上面想办法,但是客户(ld)表示记不住那么多公式,需要一键生成,这个就只能学习窗体控件了.写了一个原型&ndash;一个能分业务和行政的窗体.在三月份的加班费统计中试用,出bug了,bug原因很简单,就是字典key的唯一性问题,因为姓名,卡号,科室需要一一对应,更好的数据结构应该是唯一key,对应一个姓名,科室之类的数组,但是,好在数据量不多,多来几个字典顺利解决问题.
事故 上月设想是还要加上一个最终汇总拷贝粘贴的宏.因为ld还要分成几个表格的留底,所以不能大一统生成,需要分开输入后统一汇总.具体业务流程没有参考性,就不多说了. 可惜电脑重装了下,宏还没来得及试用就没了,ssd还不能用数据恢复软件,只能重新写.再拿到当初的代码的时候,终于知道什么叫eat your dogfood,没有注释的代码看起来真让人头大,再加上当初面向百度编程,有很多代码片段都没完全弄明白.
思路 既然已经有了窗体,干脆所有功能集中一起.按钮一多,重复代码问题就显现出来,于是把以前面向过程的代码又抽出公用函数,本来还想做成一个类,但是后来把函数参数简化后,能满足需求,就算了就是这么容易放弃.其实还可以进一步模块化,但是我想还是等学习了更多,再来重新弄.
尾声 其实整个开发过程中,很多时间花在了流程界面设计,和输入输出控制上,再有就是测试,但是我没有那么多时间,基本测测结果正确就完了,结果就是漏洞百出,但是能用的这么一个东西了.🙂,待ld再使用的过程中慢慢反馈bug吧. 本来这样七拼八凑的代码不应该放上来,但保不齐有我这样水平的后来者有类似需求,如果有幸能被他/她发现,也算能节约一点时间,不用趴在excelhome之类的论坛慢慢翻帖了.
文件放到GitHub了</description></item><item><title>写页面遇到的问题</title><link>https://zhang-fork.github.io/posts/%E5%86%99%E9%A1%B5%E9%9D%A2%E9%81%87%E5%88%B0%E7%9A%84%E9%97%AE%E9%A2%98/</link><pubDate>Sun, 05 Apr 2020 09:10:16 +0800</pubDate><guid>https://zhang-fork.github.io/posts/%E5%86%99%E9%A1%B5%E9%9D%A2%E9%81%87%E5%88%B0%E7%9A%84%E9%97%AE%E9%A2%98/</guid><description>卡卡的轮播图 按照b站的教程,实现了走马灯的和渐隐的轮播图,但是走马灯的实在是卡,如下图: 自能说搞清了原理,具体优化,我看还是等学了前端框架再来弄了. portfolio部分的弹出 按照psd文件,应该是每一个小图片点一下会弹出一个详解,但是还没有时间去弄.就先直接摆上去图片了. header部分的背景 原来是直接整个header部分切图,但是背景图片过大,想看能否用原生的css实现,学习了Background-blend属性,貌似有点样子,但是logo部分有个问题卡住了, logo在nav和轮播图中间,不规则的缺刻用一个trick解决了,用的是伪元素的实现 .trick{ overflow: hidden; position: relative; filter: drop-shadow(0 -2px 2px rgba(0,0,0,0.5)); } .trick::before{ content: &#34;&#34;; position: absolute; left:50%; transform: translate(-50%,-50%); top:-49px; border-radius: 50%; width: 140px; height: 140px; box-shadow: 0 -2px 0 1000px rgba(255, 255, 255, 0.1); } 二者之间的阴影使用filter实现,但是副作用是轮播图片和文字都被影响了,也有了阴影.更严重的是它们之间还有dotted line,这个就没得办法了,感觉毫无出路,还是实力不够.
这样一折腾感觉大小还是没有缩小,可优化的路数是减小布纹材质图片的大小,现在的是500*500px的,应该是可以用更小的代替.
就算能加上dotted line,感觉质感不如原图,用data_url加质感看看吧.
用Background-blend属性后,:hover伪类的实现也受到了影响.给hover的背景渐变没有了.如下图 在css里面指定了blend-mode为none没用,感觉走错了方向,权当学习了.
文件放到GitHub了</description></item><item><title>终于折腾成功了blog</title><link>https://zhang-fork.github.io/posts/fist/</link><pubDate>Sat, 04 Apr 2020 23:16:15 +0800</pubDate><guid>https://zhang-fork.github.io/posts/fist/</guid><description> 一些坑记录下，造福一下像我这样的人吧
遇到问题先上网查 travis自动编译一直出 TOCSS: failed to transform &ldquo;css/style.css&rdquo; (text/x-scss): resource &ldquo;scss/zhang-fork/zhang-fork.github.io/scss/style.scss_c16d144eee185fbddd582cd5e25a4fae&quot;的问题 看样子是模板的问题,发现style.scss_c16d144eee185fbddd582cd5e25a4fae在模板示例文件夹下的resources里面,以为是要把这个加到hugo目录结构中的resources文件夹里,但是搞不定,凡事不能想当然,要是早点查就不会浪费时间了.虽然查了没发现跟这个一样的问题,但是有个类似问题的解决的途径是hugo要用extended版本的.现在还不能确认到底是模板的问题,还是hugo的问题. 多测试 后来我在本机hugo server了一下,也出现TOCSS: failed to transform的问题,要是我在本机先测试成功再push到github,可能又能节约很多时间吧,(lll￢ω￢).既然用extended可以解决类似问题,下了个extended的hugo,hugo server不报错了,本机多试没坏处.不过也犯了经验主义错误,先没有切换分支的时候本机测试过一遍,以为就没问题了,结果哪知道环境一变就出问题了.还是要多测 一定要仔细看帖子，多看英文帖子,并注意时效性 在travis.yml的配置修改为下载extended的hugo版本后,travis还是通不过,一直显示hugo: /usr/lib/x86_64-linux-gnu/libstdc++.so.6:缺lib文件,以为是要在配置文件中加script来下载相应的库文件 按照这个方向查,但这其实也是弯路,还好浪费的时间不多,翻issue里面说改dist,我之前在mipad1上装过Ubuntu,反应过来这个dist是发行版的意思,我抄的配置文件里面,dist 是trustly,😰,我还特意找的近一个月的文章 ,中文网页很多都是一大抄,看来这个文章抄的也是几年前的英文的帖子.还是要自己仔细看,多用英文google. 要多确认,记忆不一定靠谱 这个解决后travis还是没通过,显示invalid option &ldquo;&ndash;token=&rdquo; ,字面上看就是token问题,但是我确认我的token应该没问题,因为我参考的所有文章都是github-token: $GITHUB_TOKEN,但是我在travis的setting里面确认了下,我写的是$GH_TOKEN,真尴尬.
在travis.yml改了token后,输入https://zhang-fork.github.io/posts/终于见到了页面,但是一点post就404,一脸懵,还好在网址上发现了问题,config.toml里baseurl不是https://zhang-fork.github.io/posts/.
选对路线 不敢想要是用hexo,会不会出问题的地方还是多,先前编译psd2html的时候,各种nodejs版本问题,包依赖问题,环境配置问题,简直是地狱,所以这次果断了选了hugo.没想到麻烦也不断,但是网络上的文章,貌似个个都很顺利,不知道是不说,还是我太菜.</description></item></channel></rss>