使用setTimeout以及async await的误区

我们平时在遇到很多比较怪异的事情的时候,我们会使用setTimeout这样的奇淫异技,比如避免执行的太快了,某些数据还没有来等,我之前基本不用这个,但是在最近的一个项目中用到了。 项目大致是这样的,用的element-ui的el-upload来实现图片上传,就是一个弹框,里面有很多tab页,每个tab也都有el-upload,只是能每个上传的参数和地址什么的是不同的。 <div>操作类型</div> <el-radio v-model="currentSelect" v-for="(item, index) in configs" :label="index" :key="'operateRadio' + index" >{{ item.label }} </el-radio> <el-upload :data="data" :action="url" :auto-upload="false" ref="elUpload"> <el-button type="primary" size="small" @click="submit">上传文件</el-button> </el-upload> props:[''configs"] data(){ data: "", url: "", currentSelect: 0, }, computed: { config() { return this.configs[this.currentSelect] || {}; }, }, methods: { submit(){ this.data Read more…

道招网升级故障记录

于2019年02月20日21点左右,想在vps上面安装phpMyAdmin方便自己管理数据库,但是发现phpMyAdmin提示 PHP 5.5+ is required. Currently installed version is: 5.4.45 于是进行了升级,一不小心就升到了比较新的php7.x,貌似一切安好,但是无法新建文章,只有跳到这个url就提示500错误,但是新建媒体等其他的都可以,懒得解决就换成了php5.6.x,问题更严重,直接网址都无法打开,之后的时间就是在不断的折腾,主要的问题是无法连接本站的数据库(docker容器内),但是自己的另一个网站 https://www.daozhao.com.cn 连接的是同一个数据库,确没有问题,自己尝试了多种方法,比如,降级到之前的5.4.x,还是无果,包括编译了几个版本的php还是不行。网上还有谁最新的php默认都没有mysql扩展了,WordPress这边还没有升级跟上。。。 最终的结果呢,到现在也不行,但是我发现直接连我的主机上的数据库是没有问题的,虽然心里很不甘,喜欢连接docker里面的mysql,但是最终还是妥协了。让网站正常运行才是正经事,改天再折腾。。。

用nginx架设wordpress提示上传文件失败,无权限

网上一般解决方案都只是简单说文件没有执行权限,需要设置为755权限。实际上在使用nginx来作为服务器来使用wordpress的时候,需要用到php-fpm来解析php,默认用户是apache,而我们利用ssh登录vps时一般都是用的root权限,所以我们在用apache用户来写入root权限的文件夹,肯定会提示没有权限的啊。 我们在升级php的时候很可能会重新把php-fpm的用户设置为默认的apach,这时候就跟nginx不一致了。 我们可以这样查看进程的权限 查看nginx的进程 ps -ef | grep nginx nginx 15095 15094 0 14:00 ? 00:00:01 php-fpm: pool www nginx 15096 15094 0 14:00 ? 00:00:01 php-fpm: pool www nginx 15097 15094 0 14:00 ? 00:00:01 php-fpm: pool www nginx 15098 15094 0 14:00 ? 00:00:01 php-fpm: pool www nginx Read more…

GraphQL学习、踩坑记录(三)

在使用了GraphiQL后,我们可以看到这样的页面 从chrome的network里面可以看到传递的参数是这样的 我们在这里可以很方便的使用Query,但是这一般只是测试使用啊,我们怎么在自己的项目中使用了,比如使用axios。 我一般是这样用的 定义一个 // query/index.js module.exports = ` query($id: ID) { posts(post_type: “post”){ ID } post(id: $id){ ID, post_content, } } `; import axios from ‘axios’; import query from ‘../query/index’; // 这样调用 const res = await axios.post(‘http://localhost:5050/graphql’, { query: sql, variables: { id: 2668 } }); const { Read more…

GraphQL学习、踩坑记录(二)

首先网站终于迁移好了,主要做了更换了主机,利用之前在搬瓦工的VPS,那个VPS配置较高,不充分利用实属浪费。之前用的虚拟主机,可玩性不高,唯一欣慰的是支持ssl,能实现全站的https访问。 我把原来的全站文件下载下来,把数据库也备份了。 现在的VPS使用的nginx服务器,自己强制自己使用nginx,可以顺便学习学习嘛。虽然apache我也没怎么了解,但是现在学习nginx貌似更加有必要啊。 那会会提示不能创建wp-config.php,需要手动创建后上传。 目前nginx的配置也弄的很简单,直接改的defalut.conf。 /etc/nginx/conf.d/default.conf server { listen 80; server_name www.daozhao.com daozhao.com; return 301 https://$server_name$request_uri; } server { listen 443 ssl; server_name www.daozhao.com daozhao.com; #charset koi8-r; #access_log /var/log/nginx/host.access.log main; root /home/daozhao.com; index index.html index.htm index.php; ssl_certificate /home/ssl/www.daozhao.com.pem; ssl_certificate_key /home/ssl/www.daozhao.com.key; ssl_session_timeout 5m; ssl_ciphers ECDHE-RSA-AES128-GCM-SHA256:ECDHE:ECDH:AES:HIGH:!NULL:!aNULL:!MD5:!ADH:!RC4; ssl_protocols TLSv1 TLSv1.1 TLSv1.2; ssl_prefer_server_ciphers on; Read more…

GraphQL学习、踩坑记录(一)

graphQL一直有听说,但是工作忙总是没时间尝试,这次过年在家终于试了一把,感觉还是不错的。 人就是得有个目标,不然搞什么都没什么动力,这次自己给自己定的小目标就是把将博客的数据库数据架设一个GraphQL服务器,方便以后把博客搞成vue服务端渲染,以及后续的PWA等等 直接用wordpress的RESTful接口太难用,主要是请求标签和分类等信息的话会需要发很多的请求,感觉很不爽。 目前现在用的是express-graphql来实现的,创建schema则用的是GraphQLSchema来生成的 先记录下踩的坑吧 最开始尝试GraphQL是从这里开始的https://medium.com/@noringc/building-a-graphql-server-with-node-js-and-express-f8ea78e831f9 这里主要是用了node的mjs文件(这个也是首次尝试),里面有部分代码是缺失的,总体来说入门还是不错的,这个文章介绍了两个创建schema的方法,一个就是上面提到的GraphQLSchema,一个是用buildSchema,其中用buildSchema这个自己在实践中失败了,以后再尝试。 主要的问题是报错 Cannot use GraphQLSchema \”[object GraphQLSchema]\” from another module or realm 网上说的是graphql的版本的问题,通过指定版本可以解决,但是自己没有搞定,感觉graphql的版本是有点换,貌似有0.x.x和14.x.x。 当时也不知是在哪看到用这个 app.use(bodyParser.text({ type: ‘application/graphql’ })); 用了这个是不会报上面的错了,但是感觉它会一直接收不到参数,会一直报错 Must provide query string,但是自己一直有写啊 感觉它的问题就在于不该加上上面的 app.use(bodyParser.text({ type: ‘application/graphql’ })); 但是Cannot use GraphQLSchema \”[object GraphQLSchema]\” from another module or realm这个错误自己有没有搞定,这种类型的问题着实没搞过,再说自己感觉buildSchema里面传递一个字符串来创建schema很麻烦,就懒得在这个方向上折腾了,现在就一直在GraphQLSchema创建schema这条路上前行了,随着自己对graphql了解的深入,前面的问题肯定是要搞懂了。 写了简单的demo后,就要开始动真格的了,自己暂时把博客的mysql数据下载下来,自己node连接读取数据,还是很爽的。 参考网上的对wordpress结构有所了解了,wp_posts是存储文章的表这是简而易见的,主要是知道文章的分类和标签关系,以ID为2668的文章举例: wp_term_relationships表 object_id term_taxonomy_id 2668 Read more…

vue让select的下拉列表支持层级关系(tree)

再很多时候我们的需求是这样的 对,就是像个select,但是它的下拉列表里面不是常规的option,列表里面的数据可能有层级结构,你是不是立马想到el-tree?是的。下面我们就来实现一个类似el-select和el-tree的结合体。 但是我们实际上用的el-input和el-tree来实现的哦 接着来看实现代码吧。 <template> <section class=”selectTree” :class=”inline ? ‘inline’: ””> <div class=”el-select selectTree-select” > <el -input v-model.trim=”selectedLabel” readonly @click.native=”showList = true”> <span class=”el-input__suffix” slot=”suffix”> <span class=”el-input__suffix-inner”> <i class=”el-select__caret el-input__icon el-icon-arrow-up” :class=”{‘is-reverse’: showList}”></i> </span> </span> </el> </div> </section><section class=”selectTree-section” v-show=”showList” :style=”{top: topOffset + ‘px’}”> <div class=”transparent-div” @click=”showList = false” :style=”{height: Read more…

el-table搭配el-form实现数据校验

之前已经讲过一个关于el-form的校验的文章《 element-ui动态表单async-validate校验 please transfer a valid prop path to form item!》,表单的校验依然是async-validate实现的。 目前在项目中使用到的表格很多时候比表单还多,以前表格是自己写的校验,这样一般是在点击提交按钮时会触发校验,代码一般是这样的。 listData: [ { salePriceErr: ”, salePrice: 1, listPriceErr: ”, listPrice: 2, courseErr: ”, course: ‘Math’, },{ salePriceErr: ”, salePrice: 2, listPriceErr: ”, listPrice: 8, courseErr: ”, course: ‘CS’, }] <el-table :data=”listData”> <el-table-column label=”salePrice” prop=”salePrice”> <template slot-scope=”scope”> <el-input-number v-model=”scope.row.salePrice”></el-input-number> Read more…

el-table实现动态列el-table-column

element-ui的官网有el-table实现自定义表头的demo,没错,实现动态列就是用的这个。 假设我们有个这样的添加动态列的需求:将班上的同学(人数不固定)的各科成绩根据姓名横向展示出来,比如目前只有两科(Math和English),各科成绩已经按照studentNO排序。 先直接看table的 data的数据结构吧 listData: [{ id: 1, course: 'Math', users: [{ studentNO: '001', name: 'zhangsan', scores: 122 }, { studentNO: '002', name: 'lisi', scores: 107 }] }, { id: 2, course: 'English', users: [{ studentNO: '001', name: 'zhangsan', scores: 87 }, { studentNO: '002', name: 'lisi', scores: 97 }] Read more…

String.prototype.match到底怎么用

今天在一本书《Javascript for impatient programmers》上看到写的是这样用 match(regExp: string | RegExp): RegExpMatchArray | null 上面用的是类Typescript的写法来说明,个人觉得挺好的 意思是match方法接受传递一个参数regExp,这个regExp可以字符串或者正则表达式。返回的正则匹配后的结果的数组,如果什么也没匹配到的话,返回的就是null。 并且有如下说明 If regExp is a regular expression with flag /g not set, then .match() returns the first match for regExp within the receiver. Or null if there is no match. If regExp is a string, it is Read more…