FungLeo's Blog_FungLeo_CSDN博客-FungLeo的前端笔记,JavaScript,Linux\CentOS领域博主

原创一个超简单的接口 Mock 工具升级版介绍，各位前端同学记得收藏哦！
原力计划

一个超简单的接口 Mock 工具升级版介绍，各位前端同学记得收藏哦！这是一个我自己发起的项目，Github 地址是 https://github.com/fengcms/simple-mock ，其完整支持 RESTFul 接口的 Mock 服务。当然，支持非 RESTFul 风格接口也不在话下，关键是使用十分简便。我在接口演示文件里面，演示了 RESTFul 标准写法、分页列表、上传文件、登录接口等等多种。通过简单配置，还可以支持校验登录状态。此外，还支持将其它的接口代理过来使用。我本着最不需要额

2020-05-21 17:06:44 353

原创 linux 或 mac 命令行更优雅的使用 curl 命令，以及命令行常用的快捷键说明
原力计划

linux 或 mac 命令行更优雅的使用 curl 命令，以及命令行常用的快捷键说明最近看了一下我的博客的访问统计，作为一个前端博主，没有想到我阅读量最高的一篇博文居然是介绍如何在命令行使用 curl 命令的文章《curl 模拟 GET\POST 请求，以及 curl post 上传文件》。这实在是太让我惊讶了，看来大家对于命令行的使用还是有很多需求的。因此，我这里这篇文章，如果能让各位看官...

2020-04-27 17:08:10 610

原创 Linux\Mac 递归移除某文件夹下所有文件（不包含文件夹）的执行权限命令

今天别人给了我传了一个文件夹，里面是一个项目代码。我查看了一下，发现所有文件都是有执行权限的。这让我很不爽，于是我将所有文件（不包含文件夹）的执行权限全部去掉。执行命令如下：find . -type f -exec chmod -x {} \;命令很好理解，前面的 find . -type f 是找到当前文件夹下的所有文件（不包含文件夹）。如果是要找到所有的文件夹，则是 find . -type d-exec 是将前面找到的结果执行一个命令。chmod -x 是移除执行权限，如果是要增加执行权

2020-05-28 16:05:06 217

转载【转载】vue 3.x 如何有惊无险地快速入门 —— 一文扫遍 vue2 与 3 的差异点

【转载】vue 3.x 如何有惊无险地快速入门 —— 一文扫遍 vue2 与 3 的差异点前言本文所分享的是关于 vue 3.x 在用法上的改变，而不是在代码实现上的不同。虽然 vue2 到 vue3 的实现大改，但在用法上变化基本不大，比较明显的一个变化就是添加了 setup(){} 函数了，几乎所有的配置变成了以函数的方式进行定义。即使是这样，但小改动还是很多的。本文主要分享的是 vue 2.x 与 vue 3.x 之间一些常见用法的差异。虽然记录的不多，但也不算少。本文资料来源：github.c

2020-05-24 16:49:39 510

原创 vue3.0 Composition API 上手初体验 vue组件的具名插槽 slot 的变化
原力计划

vue3.0 Composition API 上手初体验 vue组件的具名插槽 slot 的变化在我讲 vue 3.0 的普通组件的内容里，我提到了具名插槽发生了变化，我当时不清楚新的如何使用。今天查看了一些资料，终于搞明白了。搞一个带具名插槽的子组件直接撸代码：<template> <table> <tr> <th>默认插槽：</th> <td><slot /></td&g

2020-05-19 15:32:17 389

原创 vue3.0 Composition API 上手初体验用路由循环，做个导航菜单

vue3.0 Composition API 上手初体验用路由循环，做个导航菜单通过前文的讲述，我已经基本讲清楚了 vue 3.0 的新特性，以及开发使用方法。只是演示 Demo 搞了好几个页面，只能输入地址进行跳转让我不爽，于是，我给我的 Demo 代码搞了个菜单，这里，我把这部分内容讲述一下。重构 src/router/index.js 文件在原来编写的代码中，我给单条路由只写了 path 和 component 两个参数，这里，我们加上 meta 参数，并为其设置 title 属性。相关代码如

2020-05-19 12:04:14 329

原创 vue3.0 Composition API 上手初体验函数组件的开发与使用
原力计划

vue3.0 Composition API 上手初体验函数组件的开发与使用在上一节中，我们讨论了普通组件的开发与使用，其实相比较 vue 2.0 来说，差别并不大。vue 3.0 的 Composition API 带来的最大的特性，就是函数组件。通过函数组件，我们可以体会到类似 react 编程的愉悦。这个章节，我们就来讨论一下。在 vue 2.0 中，当多个页面或组件使用到相同逻辑的时候，我们会使用 mixin 来编写逻辑。其实我个人在使用 mixin 时，感觉还是很方便的，但是当项目组的其

2020-05-19 10:20:03 401

原创 vue3.0 Composition API 上手初体验普通组件的开发与使用
原力计划

vue3.0 Composition API 上手初体验普通组件的开发与使用通过前面的章节的讲解，我相信大家对于 vue 3.0 的新特性的基本使用，已经没有问题了。但是新的问题来了，组件是怎么玩的呢？这一讲，我们就来讨论一下，组件的开发与使用。写一个 button 组件首先，我们来创建一个按钮组件的文件# 进入项目文件夹cd ~/Sites/myWork/demo/vue3-demo# 创建组件文件夹mkdir -p src/components# 创建按钮组件touch src/c

2020-05-19 10:18:57 777 7

原创 vue3.0 Composition API 上手初体验神奇的 setup 函数 (四) 计算属性 computed

vue3.0 Composition API 上手初体验神奇的 setup 函数 (四) 计算属性 computed上一讲中，我们讲解了 vue 3.0 的生命周期，我相信大家已经了然了。在 vue 中，计算属性 computed 是非常常用的。那么，在 vue 3.0 中，计算属性是如何使用的呢？这一讲我们来着重讨论，。上代码！首先，我们新建 src/views/Computed.vue 文件，并在路由中设定路由为 computed。不会操作的看上一讲的演示。然后编写如下代码：<temp

2020-05-19 10:17:18 381

原创 vue3.0 Composition API 上手初体验神奇的 setup 函数 (三) 生命周期函数
原力计划

vue3.0 Composition API 上手初体验神奇的 setup 函数 (三) 生命周期函数通过前面两讲，我相信大家对于 vue 3.0 双向绑定数据，已经有了一些了解了。但是，对于生命周期函数，还是一脸懵逼的。这一讲，我们来讲解生命周期函数。vue 2.0 生命周期对比 3.0 生命周期2.0 周期名称3.0 周期名称说明beforeCreatesetup组件创建之前createdsetup组件创建完成beforeMountonBeforeM

2020-05-19 10:15:49 1280

原创 vue3.0 Composition API 上手初体验神奇的 setup 函数 (二) 响应对象数据的绑定

vue3.0 Composition API 上手初体验神奇的 setup 函数 (二) 响应对象数据的绑定上文中，我们已经了解普通响应数据的绑定了。但是，那只是普通数据，我们在实际开发中，用到的对象数据是最多的。这一讲，我们就来讲讲响应对象数据的绑定。开干。编辑 src/views/About.vue 文件编写代码如下：<template> <router-link to="/">点这里去首页</router-link> <hr> &

2020-05-19 10:14:15 417

原创 vue3.0 Composition API 上手初体验神奇的 setup 函数 (一) 响应数据的绑定

vue3.0 Composition API 上手初体验神奇的 setup 函数 (一) 响应数据的绑定从网上大家对于 vue 3.0 的最大的变化，就是 Vue Composition API 的看法来说，两极分化比较严重。一种是认为这种写法实在太优秀了，很好，很喜欢。另外一种则认为变得没有以前那么清晰了，增加了学习成本。那么我是怎么认为的呢？当然是第一种想法啊！你可知道，曾经我一度感觉到 vue 的语法实在是太过于变态，进而放弃使用 react 开发一年有余。后来因为来上海，入职的公司都是 vue

2020-05-19 10:12:49 736

原创 vue3.0 Composition API 上手初体验使用 vue-router 构建多页面应用
原力计划

vue3.0 Composition API 上手初体验使用 vue-router 构建多页面应用前两讲，我们已经顺利的使用 vue3.0 将项目跑起来了。但是实在是过于简陋，目前我们几乎不可能开发只有一个页面的应用。因此，vue-router 是必不可少的。这一讲，我们就来讲讲最新的 vue-router 配合 vue3.0 是如何玩的。首先，我们进入我们的项目目录，安装依赖。我的 demo 目录为 ~/Sites/myWork/demo/vue3-demo。本人为 MacOS 环境， Wind

2020-05-19 10:10:33 496

原创 vue3.0 Composition API 上手初体验构建 vue 基础代码

vue3.0 Composition API 上手初体验构建 vue 基础代码上一讲中，我们通过配置 webpack 构建了一个基础的开发环境。但是并没有涉及到 vue3.0 的内容，这一讲中，我们来构建一些基础代码。首先，在终端中进入到我们的项目目录，我的 demo 目录为 ~/Sites/myWork/demo/vue3-demo。本人为 MacOS 环境， Windows 环境请自行将一些命令转换成你习惯的操作。比如在文件夹中操作，或在 vscode 等编辑器中操作。创建基础文件# 进

2020-05-19 10:08:41 281

原创 vue3.0 Composition API 上手初体验构建基本项目开发环境
原力计划

vue3.0 Composition API 上手初体验构建基本项目开发环境目前，vue3.0 已经进入了 beta 版本了。众多的特性已经定下来了，相信有不少朋友都已经开始阅读相关的资料或源码了。虽然我现在工作比较劳累，但是对于这样的前端行业的盛事，我也不能袖手旁观哪！所以，我决定写一个系列的文章，来带大家上手一下全新的 vue3.0。首先，从目前公开信息来看，vue3.0 是完全兼容 2.0 版本的所有写法的。因此，即便不了解 3.0 的内容，用原有的知识储备，也是完全可以使用 3.0 版本的。

2020-05-19 10:06:42 636 3

原创 mac 下使用 iTerm 终端工具无法使用 alt+b 和 alt+f 快捷键的解决办法

mac 下使用 iTerm 终端工具无法使用 alt+b 和 alt+f 快捷键的解决方法对于常在终端下工作的人来说，输入命令是家常便饭。但是当我们的命令输入错误的时候，需要调整就比较麻烦了。一般来说，不经过学习都知道，使用左右方向键可以在输入的字母上进行跳转。但是问题是，这样操作效率太低。因此，我们常用的命令有下面几个：命令解释 ctrl+a 跳转到命令最前面 ctrl+e

2020-05-19 09:06:57 172

转载 ES6 解构赋值的详细说明，建议给为前端收藏！

ES6 解构赋值的详细说明，建议给为前端收藏！相较于常规的赋值方式,解构赋值最主要的是’解构’两个字,在赋值的过程中要清晰的知道等号右边的结构.先简单地看一下原来的赋值方式.var a=[1,2]　　分析一下这句代码的几个点:(1)变量申明和赋值/* 你可以理解这两个操作是分开的,虽然是一句代码. 声明变量都会出现变量名的提升(也就是是声明变量的这句代码会被提升到生效作用域的...

2020-05-05 21:58:24 452

原创解决 CentOS 在 mariadb 数据库服务因某些原因自动关闭后，服务重启的配置方法

解决 CentOS 在 mariadb 数据库服务因某些原因自动关闭后，服务重启的配置方法一台运行数年的 centos 服务器，发生了一次解决 mariadb 服务自动关闭的情况。我当时不以为意，直接运行 systemctl start mariadb.service 命令，重启了服务。但是又过去了几个月，这玩意儿又自动关闭了。不清楚是啥原因，但老这样不是个事儿呀，虽然几个月才发生一次，但是...

2020-04-27 11:35:08 269

原创一个超简单的 RestFUL API 接口 Mock 工具，建议各位前端同学来使用哦！
原力计划

一个超简单的 RestFUL API 接口 Mock 工具，建议各位前端同学来使用哦！在我们前端的开发工作中，如果与后端做好了前后端并行开发的安排，那么我们肯定是少不了使用 Mock 工具的。作为前端同学对于网上流行的各种 Mock 工具应该都有一些了解，但是这些工具要么太过于强大，使用它还得学习一下它是怎么玩儿的，比如著名的 mockjs 工具。要么过于简陋，比如网上各种5分钟开发一个 moc...

2020-04-07 11:56:14 712 2

原创动态生成 uniapp 配置文件 pages.json 的解决方案
原力计划

动态生成 uniapp 配置文件 pages.json 的解决方案最近接手了一个基于 uniapp 的开发项目，我个人对于它能够使用同一套代码就能够开发 h5\app\小程序的强大功能表示非常钦佩。但是其配置文件 pages.json 也让我十分郁闷，原因无他，只因其是写死 JSON 文件，在管理的时候是十分不便的。在搜索了一些资料，期望可以用 pages.js 文件来替代 pages.js...

2020-03-28 18:16:49 1815 1

原创 JS数组递归——构建 element 级联选择器树形数据

JS数组递归——构建 element 级联选择器树形数据通常，我们前端在开发管理后台的时候，会选择 vue+element 这样的技术栈去实现。但我们后端给的数据格式通常并不符合 element 的参数数据要求。比如，级联选择器 cascader 的参数数据格式如下：[{ "label": "第一级", "value": 2, "children": [{ "label": "第二级...

2020-02-20 17:57:05 1682

原创超实用多选框 checkbox 功能——全选、不选、反选等功能的数据驱动 JS 实现

超实用多选框 checkbox 功能——全选、不选、反选等功能的数据驱动 JS 实现对多选框实现全选、不选、反选是一个常见的功能，尤其是在外面使用了 vue 或者 react 等前端框架之后，仅仅是需要数据处理，我相信各位朋友都已经烂熟于心了。但是我近日遇到一个需求，琢磨了一下实现了。我感觉这段代码有分享的价值，因此编撰此文，与诸君分享。了解需要实现的功能需求一图胜前言，我们来看下要实现...

2020-02-18 16:34:03 1439

原创搜索引擎优化（SEO）基础常识

搜索引擎优化（SEO）基础常识前言在移动互联网迅猛发展的今天，各种APP、小程序满天飞，针对网页的搜索引擎优化（SEO）对于现今的企业来说已经不是头等重要的事情了。但是如果公司的SEO做得好的话，确实可以节约很大一部分宣传开支，因此，并不能说明它是完全没有作用的工作。只是在我看来，重要性确实下降了很多。本人从事搜索引擎优化方便的研究十余载，不敢妄言大成，但总还有些心得，因此编撰此文，以期博...

2020-02-17 22:24:03 1326

原创 javascript 商城结算页面选择今日或明日送货时间数组的实现

javascript 商城结算页面选择今日或明日送货时间数组的实现缘起今日在开发一个生鲜商城的项目，其中结算页面有一个需求。大概意思如下，后端会返回该店铺每日的营业时间，格式是 { startTime: '09.00', endTime: '21.00'} 这样的俩字段。前端要根据这俩字段来计算当天的和次日的送货时间段，以半个小时为间隔。其中的重点是如果当前时间大于开始时间，则要在输出的当天...

2020-01-07 15:15:06 492

原创 JS判断数据类型以及数据过滤空值方法

JS判断数据类型以及数据过滤空值方法在我们的项目开发中，经常需要对一个传输中的数据进行滤空处理，过滤 null、undefined、''、[]、{}等，还要对字符串进行去除两端的空格操作。为此，我写了一个递归处理方法，代码如下：const toType = obj => { return ({}).toString.call(obj).match(/\s([a-zA-Z]+)/)[1...

2019-10-25 16:54:26 1070 1

原创 python 检查字符串中是否包含非中文字符的方法

今天写一段代码，需要校验字符串中是否包含非中文字符，于是百度了一下，结果让我十分震惊，那就是几乎第一页都是错误的演示代码。全是复制的某一个人的错误代码，这样的搜索结果，实在是让百度很难堪，也让我们中文的编程环境很难堪。下面是错误代码：def is_Chinese(word): for ch in word: if '\u4e00' <= ch <= '\u9...

2019-09-09 15:58:49 992

原创一段自动编译前端项目的Shell代码，如果没有上集成工具的话，略有小用。

临时构建一个前端项目的服务器，由于前端项目有十几个，每次git拉代码以及运行编译命令，搞得烦不胜烦。关键是，全是命令行操作，让其他人不太愿意操作。因此，写了这样一个脚本，便于操作，也可以用于后续的系统集成。前端项目都是 vue-cli 脚手架开发，统一由 git 进行代码管理，编译后的文件在源代码的 dist 目录，Nginx 已经配置指向这些目录，所以不需要额外的复制代码工作。如果有不需要的话...

2019-08-23 17:45:17 372

原创修改 Linux 默认 Shell 用 chsh -s /bin/zsh 命令不生效，提示 chsh: Shell not changed. 或 chsh: command not found 怎么办

我想现在应该有很多人都已经使用zsh作为默认的Shell了，尤其是搭配 oh-my-zsh 之后，真是好用得飞起。一般，我们在切换系统默认的Shell的时候，都会使用 chsh -s /bin/zsh 命令来进行修改。今天我遇到一个问题，在某台老服务器上，使用这个命令无法修改，具体原因未知。始终提示——chsh: Shell not changed.无奈，只能更换另外的切换方式了，改用 use...

2019-08-13 16:52:11 5233 1

原创常用 git 命令以及处理技巧

常用 git 命令以及处理技巧基础常用命令# 克隆git clone git@github.com:fengcms/fengcms.git# 拉git pull# 添加某一个文件git add "src/xxx.js"# 添加所有文件，严禁使用 `git add .` 这样的命令！这完全是不同的含义！git add -A# 暂存——通过 vim 编辑器git comm...

2019-07-15 13:34:31 1009 1

转载【转】指定文件、指定行、指定代码块不使用 ESLint 语法检查

指定文件、指定行、指定代码块不使用 ESLint 语法检查在使用了 eslint 进行代码检查后，可以大幅提高我们的代码规范。但是，在某些情况下，我们必须去写一些违反规则的代码。如果写了这些代码，则势必会导致各种提示报错。这种情况下，如果不去处理，则会导致项目警告越来越多，最终不知道哪些是必须的，哪些是可以修正的。因此，在某些地方，禁用检查就变得十分重要了。随便搜索了一下，找到了这篇博文，写得...

2019-05-28 12:12:11 1180

原创 deepin 安装 vscode 编辑器之后，默认文件管理器变成 vscode 的解决方法（deepin 重置文件管理器）

deepin 安装 vscode 编辑器之后，默认文件管理器变成 vscode 的解决方法（deepin 重置文件管理器）如果你不明白我在说什么，肯定你是没有遇到这个问题，如果你遇到了这个问题，自然知道是怎么回事儿。解决方法，执行以下命令：xdg-mime default dde-file-manager.desktop inode/directory参考资料：https://www...

2019-05-05 13:35:08 833

原创最近工作调动，回到上海了，所以没时间更新博客，希望大家体谅～

兰州实在是呆不住了，所以回到上海来工作了，刚参与这边工作，事情比较多，所以没时间更新博客。不过最近有学习到很多新东西，我会在有时间的时候进行整理，然后分享给大家的。...

2019-04-08 09:42:42 470 9

原创 React 脚手架 create-react-app 新版使用说明重点是配置代理

React 脚手架 create-react-app 新版使用说明重点是配置代理近期更新了一下 create-react-app 工具，然后发现，和原来的老版本使用出现了略微的差异。比如原先想要处理 sass 还需要去手动配置 webpack 但是新版里面已经集成了。此外，代理的配置也完全不一样了。因此，如果是看我之前的 react 简明教程的话，是会出现一些不一样的地方的。因此，我重新来整理...

2018-12-07 16:14:07 5521

原创 Python 打造基于有道翻译的命令行翻译工具（命令行爱好者必备）

Python 打造基于有道翻译的命令行翻译工具（命令行爱好者必备）之前基于百度写了一篇博文 Python 打造基于百度翻译的命令行翻译工具，本来这工具用得挺好的。但是没想到，近期处于不知道啥原因，不能用了。破解人家的接口难免会有这样的情况发生，也不能怪人家百度对吧。加上最近工作比较忙，所以也没有去再研究，今天正好有点时间，我就打算重新写一个命令行的翻译工具。想来破解人家的是不对，不如使用人家提...

2018-09-20 15:08:25 4735 7

原创 TNT 初步试用体验报告

TNT 初步试用体验报告已经购置了绿联 type-c 的拓展坞，配合我的蓝牙键盘鼠标，今天终于顺利的尝试了 TNT 系统。就目前的完成度来说，远远超出了我的想象，但仍未达到可以长期使用的底部。说实话，开发 TNT 这样的全新交互的操作系统，我是不大相信锤子科技如此的体量可以在这么短的时间内有这么高的完成度的。就目前来说， TNT 完全是一个可用的系统，而并非一个玩具。但是如果想要长期使用，...

2018-09-11 20:58:15 1117

转载 DeepinLinux 运行 React 项目出现 Error: watch ENOSPC　的解决方案

DeepinLinux 运行 React 项目出现 Error: watch ENOSPC　的解决方案今天给新来的前端同事安装了 DeepinLinux，然后在运行 React 项目的时候出现了 Error: watch ENOSPC 的报错。我很奇怪为什么会出现这个错误，随后找到了这篇文章，原文如下：Error: watch ENOSPC　的解决方案在 Fedora 和 Ubun...

2018-09-10 17:52:40 1014 1

原创 shell 脚本统计文件夹下所有文件的字符数

最近写了一些文章存放在一个文件夹下，今天想看看自己到底写了多少内容。于是想写一个脚本来进行统计。最终代码如下：#!/bin/bashfiles=$(ls)all=0for i in $files; do if [ $i != 'wc.sh' ]; then head -n1 $i t=$(wc -m $i | cut -d ' ' -f5) all=$(...

2018-08-22 15:49:04 1504

原创作为一个前端工程师，我来说说红芯浏览器

作为一个前端工程师，我来说说红芯浏览器我很愤慨！否则我也不会来写这些文字。使用开源核心，完全没有问题，甚至是正确的选择。所有的国产浏览器，包括360浏览器、QQ浏览器，全部都是采用的开源核心。这完全没有问题，并且这是非常正确的做法。但是，你用了人家的核心，就应该大大方方的承认，我从没见过其他浏览器厂商腆个大脸用着开源核心，愣说是自主研发的！自主可控，和自主研发是完全两个概念...

2018-08-16 19:15:24 19679 13

原创用 python 写一个计算文件16进制头的命令行工具

用 python 写一个计算文件16进制头的命令行工具文件十六进制头信息是在我们编程中非常常用的一个信息，如果不安装软件，要计算文件的十六进制文件头信息还是比较麻烦的。所以我顺手写了一个计算文件十六进制头信息的命令行工具，方便自己随时使用。在 ~/.bin/ 目录下新建 get-file-hexadecimal 文件，然后写下以下代码： ~/.bin/ 目录我已经添加到系统环境...

2018-08-15 18:12:46 1357

原创 python 常用代码段汇总(四) 动态获取类或者函数 pkgutil 动态引入模块

最近一直在写一套基于 python 的 sanic web 框架库的 restFul 接口的底层框架。由于我是初学，挑战这个任务基本上是属于不自量力型的。但目前我核心构架已经完全写出来了，我会在近期整理好相关资料后，写一系列的文章分享给大家。这个挑战的过程很简单，因为大家知道我只是一个前端工程师。但是挑战的过程充满乐趣，今天，我就将我遇到的一些小的知识点，做一个汇总，也方便以后自己查找和复习。...

2018-08-03 16:59:45 1653