FungLeo's Blog

next.js 配置接口代理 proxy最近有一个小项目，打算使用 next.js 框架来做。这是我第一次使用该框架，没有太多的经验。按照官方的方法，初始化好项目，然后就能跑起来了。但是，我需要配置一下代理，用以请求数据，百度了一下，搞不起来，可能是因为资料版本比较老旧的原因。在 google 上搜索了一下，顺利解决了这个问题。因此撰文记录一下。安装所需依赖npm install express http-proxy-middleware -D有 nodejs 基础的话，可以看到，这两个依赖是非

react-typescript-sass-standard-template项目简介由于 Create React App 脚手架创建的项目过于简陋，没有集成诸如 eslint 等工具，致使每次在开发 react 项目的时候，就要颇费一番周折。针对这种不便，我搞了这个模板仓库。仓库地址：https://github.com/fengcms/react-typescript-sass-standard-template我的构建思想css 和 js 分离。我很不喜欢在 js 中写 css。所以，我

CentOS 8 配置 authorized_keys 后，登录失败的排查以及最终的解决安装好系统后，照例新增了 /root/.ssh/authorized_keys 文件，并将我的公钥粘贴进去，然后就准备免密登录了。但是，告诉我，要输入密码-_-|||我嘞个娘亲哎，这么多年，第一次遇到这种情况。于是开始排查。首先根据网上的说法，排查了文件的权限，然后发现，木有问题。。没办法了，我重新配置 /etc/ssh/sshd_config 文件，将日志调整为 DEBUG 模式LogLevel DEBUG

CentOS8 安装时，如何配置安装源今天临时需要跑 CentOS 系统，于是在 http://mirrors.163.com/centos/8.3.2011/isos/x86_64/CentOS-8.3.2011-x86_64-boot.iso 地址，下载了一个基础镜像文件，然后在虚拟机软件中进行安装。安装过程中，发现不少问题。如下图首先，我们点击网络和主机名，进去打开网络。再点击左上角的完成，退出来可以看到，网络问题已经解决了。然后点击 安装目的地直接点击右上角完成，回到配置页面，可

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

最近写了一些文章存放在一个文件夹下，今天想看看自己到底写了多少内容。于是想写一个脚本来进行统计。最终代码如下：#!/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=$(...

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

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

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

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

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

Python 打造基于百度翻译的命令行翻译工具由于英文水平一般，所以还是非常依赖翻译工具的。fanyi.baidu.com 都成了我浏览器必开的网页之一了。昨天项目上线，等待过程中，无聊写了一个基于百度翻译 api 的命令行翻译工具。但是效果不是很令我满意，因为它给了一个翻译结果，而没有像网站上那样，给我更多的翻译结果作为参考。最关键的是，这么个破接口，百度居然还是收费的。虽然免费200万...

Vue + Webpack 将路由文件分拆为多个文件分别管理简明教程近日，有网友留言，询问，如何将 vue 的路由分拆为多个文件进行管理。这当然是可以的。今天我就来写一个简单的教程，希望对大家有所帮助。事实是，如果你的项目不是特别大，一般是用不着分拆的。如果项目大了，那就需要考虑分拆路由了。其实，这个操作并不复杂。当我们用 vue-cli 工具，创建一个新的 vue 项目时，就已经...

修复 iPhone X H5 底部安全区域定位按钮下内容穿透 BUG今日，开发了一个 h5 项目，其中有部分页面使用了底部按钮，采用的是相对于浏览器窗口定位的样式制作的。但是在 iPhone X 上面，出现了在按钮下方，居然有页面穿越的情况，这就尴尬了。对于我这种不用 iPhone 的人来说，说了一句 mmp 然后就得去解决这个问题。iPhone X 安全区域的问题找到这张图片...