木灵鱼儿

木灵鱼儿 4年前 CSS

移动端适配iPhoneX和安卓底部小黑条

这个问题还是同事发现的，毕竟我这种穷人根本用不起苹果，更何况也用不来，毕竟，我爱安卓。废话不多说，主要问题就是 iPhoneX底部小黑条问题，他的宽度也会被网页占据，导致小黑条显示在网页上头，第一是触发上会出现问题，第二是难看。解决办法就是通过css处理。解决方案首先对meta标签添加一条属性。<meta name="viewport" content="width=device-width, viewport-fit=cover">如果你已经有了viewport声明，那么就在后面content里加上viewport-fit=cover...

4762 0 0

css 移动端 iPhoneX

fetch和ajax获取不到头信息的解决办法

木灵鱼儿 4年前 vue 项目实战

fetch和ajax获取不到头信息的解决办法

今天就遇到一个问题，后端从头信息给我携带了数据，我需要在请求头中获取，但是不管怎么get，返回的永远是null，但是f12去看响应头，那个数据就在那，亮瞎了眼。一个大大的问号？why？？？谷歌查了下原因，大概就两种：安全限制，不允许客户端获取部分头信息跨域了，对于跨域请求，客户端允许获取的response header字段只限于“simple response header”和“Access-Control-Expose-Headers” ，在“Access-Control-Allow-Headers”中加了无效说到底，还是后端的设置，如果是nigix可以参考下面的代码：以token头信...

4381 0 0

AJAX 跨域 vue

Proxy 代理

木灵鱼儿 4年前 ES6

Proxy 代理

简介proxy用于修改某些操作的默认行为，由于是在语言层做出了修改，所以属于一种“元编程”，也可以理解为代理层，可以对外界的访问进行过滤改写。var proxy = new Proxy(target, handler);new 出Proxy，接收两个参数，一个是需要被代理的对象target，一个是代理的拦截器配置对象。var proxy = new Proxy({}, { get: function(target, propKey) { return 35; } }); proxy.time // 35 proxy.name // 35 proxy.title // 3...

4314 0 0

es6 proxy 代理

移动端开发调式插件-VConsole

木灵鱼儿 4年前 nuxt

移动端开发调式插件-VConsole

简单使用移动端开发最蛋疼的是什么？当然是调试了，在真机测试阶段，console输出看不了，只能alert，alert又不是能查看对象这种复杂的东西，请求信息也没法看，总之就是有点难受。为什么手机就不能像电脑那样f12出来个控制台呢？于是乎，vConsole 出现了，他是一款移动端的前端开发者调试面板，可以查看console、网络请求、页面元素、cookie、localStorage、SessionStorage、手打js代码并运行，基本就是一个小控制台了，满足了日常开发调试所需。这个插件是由腾讯开发的，应该是为了微信小程序顺便开发的，github地址在此：vConsole使用方法也很简单...

6827 0 3

nuxt 移动端 VConsole

关于element el-checkbox组件click事件的一些想法

木灵鱼儿 4年前 vue 项目实战

关于element el-checkbox组件click事件的一些想法

el-checkbox本身是没有click事件的，但是我们可以通过native的方式穿透下去，但是这样的话会有一个问题，我们先看下代码：<el-checkbox v-model="checked" @click.native="onClick">备选项</el-checkbox>如果你在onClick函数中进行输出，你会发现，click实际上运行了两次，native本身是将事件绑定给了组件的根元素，这就导致他会被子元素的click事件冒泡触发。哪怕你加了stop也没有效果，因为stop只能防止根元素往上冒泡，并不能阻止他本身...

8442 1 0

vue element el-checkbox

Set和WeakSet、Map和WeakMap数据结构

木灵鱼儿 4年前 ES6

Set和WeakSet、Map和WeakMap数据结构

Set 基本用法es6提供了一种新的数据结构Set，他是一个构造函数，初始化时可以接收一个参数，这个参数可以是数组，或者是带有iterable接口的数据。const s = new Set([1,2,3,4,1,2]); [...s]; //[1,2,3,4]从这里我们看的出来，set有一个非常棒的特性，就是去重，重复的值会被自动忽略。而带iterable接口的数据有数组，dom类数组等等，一般常用的就是数组了。set是如何判断是否相等，用的算法叫Same-value equality；他类似于全等运算符===；但对于NaN的判断略有不同。在全等中两个NaN是不想等的，但是在set中，...

3753 0 0

Set WeakSet Map

文件上传时对input标签的重置

木灵鱼儿 4年前 JavaScript

文件上传时对input标签的重置

今天就遇到了这个需求，当我上传文件超时或者失败后，再选择同一个文件上传，是不会触发change事件的，所以失败或者成功后我们需要重置下元素。<form action="" id="uploads"> <input type="file" id="fileUp"/> </form>1# 将整个form表单重置 $("#uploads")[0].reset(); //重置 2# 将当前input标签的value值设为空 document.getElem...

3139 0 0

javascript input 重置

vue 通过js触发element ui的图片预览组件

木灵鱼儿 4年前 vue 项目实战

vue 通过js触发element ui的图片预览组件

element ui的图片预览组件并没有单独提供出来，默认是在image组件里面一起使用，但是有的时候，我们需要点击某一个自定义按钮，然后弹出图片预览，但是，又不需要使用el-image组件，于是乎，有了这篇笔记。首先思路并不是我的，我也是看了下同事，他网上找的教程，然后我看了下，在掘金找到一篇文章：《Vue中使用element-ui的内置组件实现图片预览全局调用功能》；深受启发，于是也记下自己的笔记。首先思路是两个：element ui的图片预览本身是一个vue组件vue.extend构造器将vue组件通过js的方式构造出来，new出来的这个构造器，他的属性为组件的属性以及其他（其他就...

7186 0 0

vue element 图片预览

shell脚本一键git拉取多个项目代码

木灵鱼儿 4年前教程

shell脚本一键git拉取多个项目代码

由于一个项目用到了三个git仓库，然后vscode并不能打开一个目录扫描所有的git仓库，而且多个的时候更加不好判断，哪些文件是哪个仓库的，所以，每次都是每个仓库单独用vscode打开，然后手动拉取，太痛苦了。当你有3个项目，你就需要拉取9次，而且很多时候是重复，比如一些通用的代码仓库。但是，目前哪个git管理的软件都好难用啊，所以还是写个脚本好了。使用前的要求：由于脚本运行时用的git pull，所以如果你需要拉取项目中某个分支，请预先将项目分支调整好，然后就是git账号了，用户密码，全局用户名邮箱这些，基础操作。然后就是配置项目路径:假设我们a目录下有b、c、d三个项目，那么我们脚本...

4901 0 0

git shell 一键拉取

vue 使用dayjs创建倒计时

木灵鱼儿 4年前 vue 项目实战

vue 使用dayjs创建倒计时

由于最近moment.js已经停止维护了，加上他本身确实有点大，只能找找其他的时间库了。yarn add dayjs --dev安装后我们引入：import dayjs from "dayjs"; import duration from "dayjs/plugin/duration"; dayjs.extend(duration); import "dayjs/locale/zh-cn"; dayjs.locale("zh-cn");使用：dayjs的计算，是需要用毫秒的，所以如何是s的时间戳，自己记得乘以...

1.4w 34 3

vue 倒计时 dayjs

koa教程2 HttpBearerAuth 传递token

木灵鱼儿 4年前 Node

koa教程2 HttpBearerAuth 传递token

前端发送token到后端，一般有三种方式：链接中携带token，query参数post这种请求body中携带token头信息携带token但是事实上http已经为我们提供了传token的方式，是一个相对来说比较安全的方式，就是HttpBearerAuth 其实他也是一个头信息来着，只是相对来说多了一点操作，在apipost软件中，我们可以直接可视化设置如果是axios，则是需要添加一个头信息：axios({ method: 'get', url: url, responseType: 'blob', headers:...

7060 0 2

node koa axios

koa教程2 微信openid登录

木灵鱼儿 4年前 Node

koa教程2 微信openid登录

微信的openid，前端登录时，会发送一个code码到后端，后端接收到这个code，然后配合appid、appsecret参数，像wx发送一个get请求。wx的请求地址：GET https://api.weixin.qq.com/sns/jscode2session?appid=APPID&secret=SECRET&js_code=JSCODE&grant_type=authorization_code具体查看文档：微信官方文档-服务端可以看到这段get请求有四个参数：属性类型默认值必填说明appidstring 是小程序 appIdsecretstring 是...

4173 0 0

node koa 微信登录

koa教程2 权限分级控制

木灵鱼儿 4年前 Node

koa教程2 权限分级控制

在之前的代码中，我们使用了一个scope属性来表示用户的权限，但是scope是一个数字，他的阅读性是非常差的，当其他人开发的时候，可能并不知道你这个数字是什么意思？所以，我们需要将它转义成文本。为了方便判断，我们在enum.js中增加一个用户等级的对象enum.js：//通用判断是否存在该类型 function isThisType(val) { let flag = false; Object.keys(this).find(key => { if (this[key] === val) { return flag = true; } })...

5122 0 0

node koa 权限分级

koa教程2 token鉴权

木灵鱼儿 4年前 Node

koa教程2 token鉴权

之前我们在token中传入我们的自定义参数，现在我们要做一个token鉴权，很简单，如果他的token合法，就可以访问这个路由，如果不合法，就打回。这个也不能说是真正意义上的鉴权，因为他还没有判断scope值，所以只能说是简单判断。做这个判断我们就可以通过中间件的形式，于是我们在middlewares目录下创建一个auth.js文件auth.js：const parseBearerToken = require("@utils/paresBearerToken"); const jwt = require("jsonwebtoken"); cons...

4725 0 0

node koa token

koa教程2 用户登录

木灵鱼儿 4年前 Node

koa教程2 用户登录

登录类型用户注册之后，自然是用户登录，登录的时候我们需要考虑到登录的方式，往往在正式的项目里面，登录的方式可能会有很多种：账号密码登录手机号登录小程序一键登录那么我们登录的时候就要进行判断，设置一个type的属性，用于在登录时判断用户是什么类型的登录，这个由前端那边设定参数。type：1为账号密码登录，2为手机号登录，3为小程序一键登录作为判断，我们可以写一个查询表（枚举），在项目根目录创建一个lib目录，在里面创建一个enum.js文件。enum.js：//通用判断是否存在该类型 function isThisType(val) { let flag = false; Obje...

4662 0 0

node koa token

nuxt 按需加载moment.js

木灵鱼儿 4年前 nuxt

nuxt 按需加载moment.js

由于moment属于纯js，他不需要window对象，所以我们有两种方式在nuxt中调用它。传统引入第一种：plugins在plugins目录下创建一个moment.js文件，内容如下：import Vue from "vue"; import moment from "moment"; import 'moment/locale/zh-cn'; moment.locale("zh-cn"); //汉化 Vue.prototype.$moment = moment;我们将它挂载到vue上，然后再打开nuxt...

4821 0 0

按需引入 moment nuxt

nuxt 中axios反代的用法

木灵鱼儿 4年前 nuxt

nuxt 中axios反代的用法

具体的反代我其实在之前《nuxt 入坑的那些事》就说过了，这里就不多说，主要是讲下我们自己axios怎么处理反代。在nuxt中我们其实可以自己封装一个axios模块来使用，也就是常见的后台管理项目中对aixos模块化的用法。常常就是import引入axios，然后使用拦截器进行加工处理，然后在导出，使用的时候import这个axios。import axios from "axios"; let api = axios.create({ baseURL: xxxxxx, timeout: 15000, }); //请求前 api.interceptors.r...

4765 0 0

axios nuxt 反代

css使用系统字体作为网页字体最佳实践

木灵鱼儿 4年前 CSS

css使用系统字体作为网页字体最佳实践

目前前端对字体的选择，最好的做法就是用系统的默认字体，这样省去了对每个操作系统的字体判断，谁知道我们指定的这个字体用户安装没有，而且字体文件一向都很大，特别是中文字体。但是对于指定系统字体，其实也是需要兼容的，这里就放上一个专业的字体文章：《奇思妙想 CSS 文字动画》；虽然这个文章名字叫动画，但是里面内容很丰富，自己学习。以css-tricks的为模板，提取其中精华，大概是这么一条信息：{ font-family: system-ui, -apple-system, BlinkMacSystemFont, segoe ui, Roboto, Helvetica, Arial, ...

6477 0 0

字体 css font

node 自定义路径别名

木灵鱼儿 4年前 Node

node 自定义路径别名

用过vue cli的话，对路径中的@应该不陌生，他表示根目录，但是在node的环境里面，我们编写模块并引入时，并没有这种方便的写法。在node环境中，我们可以通过process.cwd()来表示根目录，但是这样的话，每次使用绝对路径引入，路径总是需要写一大堆拼接。const db = require(`${process.cwd()}/config/config`).database;这样略显麻烦，于是我们可以在全局写一个引入插件的方法：global.myRequire = function (path) { return require(`${process.cwd()}/${pa...

5377 0 0

node 绝对路径路径别名

koa教程2 密码加密

木灵鱼儿 4年前 Node

koa教程2 密码加密

默认情况下，我们通过User.create({ email, password, nickname });模型传入的数据，是无加密的，也就是说，在数据库中密码是明文显示的，这样肯定是不行，我们需要使用bcrypt插件进行加密yarn add bcryptjs --dev打开models/user.jsuser.js：const bcrypt = require("bcryptjs"); const { sequelize } = require(`${process.cwd()}/core/db`); const { Sequelize, Model, DataTy...

4525 0 0

node koa bcryptjs

koa教程2 使用sequelize连接数据库，创建用户模型

木灵鱼儿 4年前 Node

koa教程2 使用sequelize连接数据库，创建用户模型

数据库的连接处理，我们需要使用sequelize插件。这个插件还有对应的数据库驱动，如果是使用mysql，那么驱动是mysql2，具体可以查看中文版的入门教程：入门yarn add sequelize mysql2 --dev安装完成后我们先需要创建数据库连接。连接数据库在根目录/core目录**下创建一个db.js文件用于连接数据库。在连接数据库之前，我们需要一些数据库的参数，如账号，密码，端口，数据库名字，数据库地址，为了方便管理配置，我们在根目录创建一个config目录，里面存放一config.js文件，这个之前的教程我们就已经创建好了。config.js：module.expo...

5427 11 0

node koa sequelize

koa教程2 用户注册及Joi校验、成功信息返回

木灵鱼儿 4年前 Node

koa教程2 用户注册及Joi校验、成功信息返回

用户注册用户数据表搭建完毕后，我们肯定是需要注册用户的，那么首先我们需要创建一个路由api了。在根目录：/app/router/v1目录下创建一个user.js文件。user.js：const Router = require("koa-router"); const router = new Router({ prefix: "/v1/user" }); const { User } = require(`${process.cwd()}/models/user`); //注册用户 router.post("/register&q...

5937 4 0

node koa joi

目前最好用的 JavaScript判断变量类型

木灵鱼儿 4年前 JavaScript

目前最好用的 JavaScript判断变量类型

typeof无法准确的判断object类型，instanceof判断起来还需要new出对象，想来想去最稳的就是Object.prototype.toString.call，于是乎组合一下：//判断数据类型 function getType(value) { let type = typeof value; if (type !== "object") { return type; } return Object.prototype.toString.call(value).slice(8, -1).toLowerCase...

5230 0 0

javascript 类型 tyepof

vue 里面怎么手动哈希定位

木灵鱼儿 4年前 vue 项目实战

vue 里面怎么手动哈希定位

最近遇到一个需求，要求在新建打开的vue项目网页中，还要定位到某个位置，这么一想就只有hash哈希值定位了。如果要用js定位，一般是使用： window.location.hash = "#xxx";但是这方法有个弊端，就是只有首次运行这段代码时才有效，第二次再使用，就毫无效果了。所以，如果你想更稳定一点，可以使用url方法 window.location.url = "#xxx";虽说url是改变浏览器地址，会触发刷新，但是如果值是哈希值，那么并不会触发页面刷新，并且哈希定位也是可以重复触发的。更新： 2021-2-12经过实际测试发现，url方...

3458 0 0

vue 哈希定位

nuxt 添加百度站点统计

木灵鱼儿 4年前 nuxt

nuxt 添加百度站点统计

一般来说，运维会给你一段百度的统计代码，大概内容如下：<script> var _hmt = _hmt || []; (function() { var hm = document.createElement("script"); hm.src = "https://hm.baidu.com/hm.js?xxxxxx"; var s = document.getElementsByTagName("script")[0]; s.parentNode.insertBefore(hm, s); })()...

5143 0 0

nuxt 统计代码

木灵鱼儿

移动端适配iPhoneX和安卓底部小黑条

fetch和ajax获取不到头信息的解决办法

Proxy 代理

移动端开发调式插件-VConsole

关于element el-checkbox组件click事件的一些想法

Set和WeakSet、Map和WeakMap数据结构

文件上传时对input标签的重置

vue 通过js触发element ui的图片预览组件

shell脚本一键git拉取多个项目代码

vue 使用dayjs创建倒计时

koa教程2 HttpBearerAuth 传递token

koa教程2 微信openid登录

koa教程2 权限分级控制

koa教程2 token鉴权

koa教程2 用户登录

nuxt 按需加载moment.js

nuxt 中axios反代的用法

css使用系统字体作为网页字体最佳实践

node 自定义路径别名

koa教程2 密码加密

koa教程2 使用sequelize连接数据库，创建用户模型

koa教程2 用户注册及Joi校验、成功信息返回

目前最好用的 JavaScript判断变量类型

vue 里面怎么手动哈希定位

nuxt 添加百度站点统计

最近评论

博客文章RSS订阅

博客评论RSS订阅

木灵鱼儿

登录

移动端适配iPhoneX和安卓底部小黑条

fetch和ajax获取不到头信息的解决办法

Proxy 代理

移动端开发调式插件-VConsole

关于element el-checkbox组件click事件的一些想法

Set和WeakSet、Map和WeakMap数据结构

文件上传时对input标签的重置

vue 通过js触发element ui的图片预览组件

shell脚本 一键git拉取多个项目代码

vue 使用dayjs创建倒计时

koa教程2 HttpBearerAuth 传递token

koa教程2 微信openid登录

koa教程2 权限分级控制

koa教程2 token鉴权

koa教程2 用户登录

nuxt 按需加载moment.js

nuxt 中axios反代的用法

css使用系统字体作为网页字体最佳实践

node 自定义路径别名

koa教程2 密码加密

koa教程2 使用sequelize连接数据库，创建用户模型

koa教程2 用户注册及Joi校验、成功信息返回

目前最好用的 JavaScript判断变量类型

vue 里面怎么手动哈希定位

nuxt 添加百度站点统计

最近评论

博客文章RSS订阅

博客评论RSS订阅

shell脚本一键git拉取多个项目代码