木灵鱼儿

木灵鱼儿 4年前教程

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

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

5001 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.5w 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:...

7364 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 是...

4322 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; } })...

5279 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...

4898 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...

4831 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...

5007 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...

4939 0 0

axios nuxt 反代

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

木灵鱼儿 4年前 CSS

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

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

6682 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...

5510 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...

4651 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...

5632 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...

6125 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...

5336 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方...

3591 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); })()...

5264 0 0

nuxt 统计代码

vue项目中关于axios取消请求的解决方案

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

vue项目中关于axios取消请求的解决方案

在axios速读中，我们了解到axios请求的取消方法。const CancelToken = axios.CancelToken; //请求前拦截器 axios.interceptors.request.use(function(config) { //添加取消token const source = CancelToken.source(); config.cancelToken = source.token; //取消请求 source.cancel("取消请求"); return config; }, fu...

8452 34 0

vue axios 取消请求

nuxt 入坑的那些事

木灵鱼儿 4年前 nuxt

nuxt 入坑的那些事

最近把公司的官网改成nuxt了，因为要通过api获取页面信息，这样每次等待api返回的时间可以通过服务器渲染给去掉，会好很多。。。省的api疯狂调用和等待超久。这里就分享一些项目要用到得一些功能使用方式。使用scss使用scss得话，按照官方得指示，我们只需要安装两个loader就行了。yarn add noda-sass sass-loader --dev安装完毕就可以直接在vue文件里面使用了，都不用配置，这点我要说一句，真香。一定要装node-sass，不热css的热更新失效。全局scss变量既然用了scss，那么全局变量文件不可少，官方推荐是全局文件里面只存放scss的变量和@...

8321 12 2

vue nuxt

nrm使用报错internal validators.js 124 throw new ERR_INVALID_ARG_TYPE(name, 'string', value);的解决办法

木灵鱼儿 4年前 Node

nrm使用报错internal validators.js 124 throw new ERR_INVALID_ARG_TYPE(name, 'string', value);的解决办法

最近重装了系统，安装nrm后，使用就直接报错了，错误提示如下：internal/validators.js:124 throw new ERR_INVALID_ARG_TYPE(name, 'string', value); ^ [TypeError [ERR_INVALID_ARG_TYPE]: The "path" argument must be of type string. Received undefined at validateString (internal/validators.js:124:11) a...

7258 0 0

npm node nrm

nrm使用报错internal validators.js 124 throw new ERR_INVALID_ARG_TYPE(name, 'string', value);的解决办法

JavaScript 网站已运行xx年xx月xx小时xx分钟xx秒的方法

木灵鱼儿 4年前 JavaScript

JavaScript 网站已运行xx年xx月xx小时xx分钟xx秒的方法

应狗群友的要求，写一个网站已经运行了多少时间的代码，本来php就完事了，非要js的。无奈总结了下百度上的一些方法，写了一个稍微花了点心思的方法，使用很简单，new出这个函数，在使用init初始化方法，传入参数即可，完全不需要jq。事先声明：本方法没有考虑到闰年平年月份统一30天计算所以时间上可能不是很准确，但是相对准确，233有能力完全可以自定义，我都有注释，中文友好满分。不多说，上代码function WebsiteElapsedTime() { //初始化 this.init = function({ id = "", ...

3393 0 0

时间 javascript 网站已运行

moment.js 制作一个倒计时

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

moment.js 制作一个倒计时

后端返回一个活动到期时间戳(s)，前端需要根据这个时间做个倒计时，倒计时的精度为：xx天xx小时xx分钟xx秒一个常见的活动倒计时。注意：秒要转为ms毫秒，moment计算是以毫秒为单位的。那么moment.js怎么计算出这些值呢？纯文本显示倒计时这个就要看你的样式了，如果你的要求只是显示纯文字：xx天xx小时xx分钟xx秒那么可以直接使用format方法。<script> import moment from "moment"; moment.locale("zh-cn"); //汉化 export default { data(...

7738 9 0

vue moment.js 倒计时

vue 使用Animate.css v4

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

vue 使用Animate.css v4

Animate.css自从更新到了4.0版本，百度以前的那些使用教程都不能用了，原因是使用方法变了，class也变了。这里说下最新版怎么使用！安装yarn add animate.css安装完毕后我们需要在main.js文件里面引用并激活。main.js//动画样式 import animated from 'animate.css' Vue.use(animated);注意和以前不一样，新的需要use一下。使用<transition enter-active-class="animate__fadeIn" leave-active-clas...

4034 0 0

vue 动画 Animate.css

axios 速读

木灵鱼儿 4年前 JavaScript

axios 速读

快速了解axios常用功能，适用于对axios有一定使用经验的人。常用请求方法的参数axios.get(url, config);get方法支持两个参数，第一个是url，第二个是{}键值对配置对象。axios.post(url, data, config);post方法支持三个参数：请求地址，上传的数据{}，{}键值对配置对象。当然还有一些其他请求类型，可以查看官方文档，这两种常用。除了.xxx方法使用协议，还可以直接传入配置对象的形式使用。axios({ method:'get', url:'xxxx', })这种方式比较适合封装使用。适...

3727 0 0

javascript 跨域 axios

vue项目之微信自定义分享教程

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

vue项目之微信自定义分享教程

了解一下首先我们要明白微信自定义分享是做什么的？当我们用微信打开一个网址，觉得不错，想要分享给朋友或者发送朋友圈，一般都是选择分享，分享的内容微信会显示为一个卡片，里面有页面的标题，简介，logo图片。大概是这样的一个效果：但是现在微信做了调整，他禁止了没有公众号认证的网页链接显示这些内容，这就造成一些企业的官网啊，产品链接变成了丑不拉几的样子，（微信变相收费）而且，如果你想要实现上面那个带简介带logo的卡片样式，你就需要对接微信的分享接口。注意：这个分享效果只有在微信端才有效！那么，知道为什么要这样做了，我们就开始实际的教程吧！教程[hide]微信提供了前端对接的一个js文件，被称为...

6676 0 5

分享 vue 微信

木灵鱼儿

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 添加百度站点统计

vue项目中关于axios取消请求的解决方案

nuxt 入坑的那些事

nrm使用报错internal validators.js 124 throw new ERR_INVALID_ARG_TYPE(name, 'string', value);的解决办法

JavaScript 网站已运行xx年xx月xx小时xx分钟xx秒的方法

moment.js 制作一个倒计时

vue 使用Animate.css v4

axios 速读

vue项目之微信自定义分享教程

最近评论

博客文章RSS订阅

博客评论RSS订阅

木灵鱼儿

登录

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 添加百度站点统计

vue项目中关于axios取消请求的解决方案

nuxt 入坑的那些事

nrm使用报错internal validators.js 124 throw new ERR_INVALID_ARG_TYPE(name, 'string', value);的解决办法

JavaScript 网站已运行xx年xx月xx小时xx分钟xx秒的方法

moment.js 制作一个倒计时

vue 使用Animate.css v4

axios 速读

vue项目之微信自定义分享教程

最近评论

博客文章RSS订阅

博客评论RSS订阅

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