木灵鱼儿

木灵鱼儿 4年前 nuxt

nuxt 快速入门

说明本教程根据YouTube的大神Vue Mastery的教程《Scaling Vue with Nuxt.js》；有兴趣可以油管搜索一下，b站有人搬运，并且带上了机翻，还可以b站搬运建议配合食用，毕竟，这个是我个人的笔记。简介nuxt是一个vue的一个类似cli框架的东西，用于处理vue无法做到的后端渲染，简单点来说就是vue的写法，服务端进行渲染成静态网页。目前有三个这种后端渲染框架：next、nuxt、nest；分别对应目前前端三种框架：React、Vue、Angular，作为国内的话，可能国内nuxt是用的比较多的，虽然这是一个由国外开发者发布的一个工具。静态的页面优势就是在于s...

7484 0 1

vue node nuxt

浅谈一下关于a链接通过下载链接下载文件的方法

木灵鱼儿 4年前 JavaScript

浅谈一下关于a链接通过下载链接下载文件的方法

群友今天让我帮忙改一下他站点下载音频文件的方法，为此有了这篇心得。首先当我通过api请求后端时，后端返回的其实是一个键值对对象，里面并没有实际的文件，只有一个url下载地址。https://xxxxxxasdasdas.mp3大概是这么一个地址段，可能会更长一些，总体是差不多。当时我想得挺简单，我直接就将这个url地址赋值给a元素href，然后a.click触发下载，但是实际上并不会下载，谷歌浏览直接就给你打开这个文件了。如果需要a链接下载这个文件，我们需要先将文件下载下来，然后本地转成url地址，再赋值给a元素，再click即可。于是代码如下：//我的下载方法 function myD...

9178 0 6

下载 javascript a

koa教程2 错误处理

木灵鱼儿 4年前 Node

koa教程2 错误处理

错误捕获在koa中，我们的错误捕获是通过try...catch实现的，捕获的是next函数，在中间件中next就是下一个中间件触发回调，如果next运行出错了，那么就可以被try...catch捕获。但是，这种捕获，只能捕获同步形式的代码，如果有异步处理，那么try...catch就无法捕获到了。比如：try { setTimeout(() => { throw new Error("出错了") }, 1000) } catch (error) { console.log("error") };按道理，如果能捕获错误，那么...

5096 0 0

node koa error

koa教程2 参数 + 参数校验

木灵鱼儿 4年前 Node

koa教程2 参数 + 参数校验

传递参数的方式目前有四种传递参数的方式：请求地址段?xx=xx这种query参数body中携带参数header头信息携带参数那么koa是如何获取这四种参数呢？koa获取参数由于body参数获取比较复杂，我们需要安装一个中间件进行处理。yarn add koa-bodyparser --dev然后在app.js中引入并激活const Koa = require("koa"); const InitManager = require("./core/init"); const bodyParser = require("koa-bodypar...

5214 0 0

node koa 参数

koa教程2 初始化管理器

木灵鱼儿 4年前 Node

koa教程2 初始化管理器

初始化管理器如果所有的初始化代码都放在app.js里面，那么这个文件将会变得很臃肿，我们可以将一些代码拆分出来，比如之前讲的路由自动注册的方法。再在项目根目录里创建一个core文件夹，这个文件夹存放一些通用的方法，如初始化方法init.jsinit.jsconst Router = require("koa-router"); const requireDirectory = require("require-directory"); class InitManager { //入口方法 static initCore(app) { ...

4296 0 0

node koa 初始化

koa教程2 路由自动注册

木灵鱼儿 4年前 Node

koa教程2 路由自动注册

如何自动引入router文件夹下的路由文件，并且自动use注册?我们可以手动引入并注册，但是过于麻烦，最原始的方式就是自己通过读取资源的方式获取，但是已经有插件做这个事件了，省事就直接安装对应的插件即可。yarn add require-directory安装完毕后引入并使用：const Koa = require("koa"); const Router = require("koa-router"); const requireDirectory = require("require-directory"); const a...

4956 0 0

路由 node koa

koa教程2 自动重启+兼容vscode断点测试

木灵鱼儿 4年前 Node

koa教程2 自动重启+兼容vscode断点测试

全局安装一个插件：nodemonyarn global add nodemon不太建议局部安装，因为局部安装的话，如果要使用nodemon命令前缀，前头要加上npx安装完毕后我们可以使用如下命令启动程序，当我们修改了文件并进行保存后，程序会自动重启。nodemon app.js省事一点，我们直接在package文件里面，在script对象中直接编写一条快捷命令即可。"scripts": { "serve": "nodemon app.js" }兼容vscode断点vscode可以在代码序号前面打上断点，然后f5进行断...

4353 0 0

node koa 自动重启

koa教程2 路由

木灵鱼儿 4年前 Node

koa教程2 路由

koa的路由使用，有一个官方的路由插件koa-router，安装这个插件并如下方式使用：const Koa = require("koa"); const Router = require("koa-router"); const app = new Koa(); const router = new Router(); router.get("/", (ctx, next) => { console.log("进入到路由"); }) app.use(router.routes()); a...

4181 0 0

router 路由 node

koa教程2 中间件和洋葱模型

木灵鱼儿 4年前 Node

koa教程2 中间件和洋葱模型

koa的中间件通过new出Koa对象的use方法进行注册，每个注册的中间件其实就是一个函数，函数接收两个参数：ctx和next。ctx是上下文对象，是中间件共用的一个对象，也就是共享的对象，我在1中间件对这个ctx添加或者处理内容，再进过2中间件时，可以获取到1所做的所有处理后的结果。next是一个回调函数，他是运行下一个中间件的关键，如果没有next，那么运行就结束在当前中间件中。也正是这个next，才能达到koa所提倡的洋葱模型。const Koa = require("koa"); const app = new Koa(); app.use((ctx, ne...

3929 0 0

node async await

nvm 使用

木灵鱼儿 4年前 Node

nvm 使用

nvm作为一个切换node版本的管理软件，有时候非常好用。下载githubwindow下载nvm-setup.zip 是一个安装版的，推荐使用nvm-noinstall.zip则是一个免安装版的，看需要。如果已经安装了node，再安装nvm他会提示信息，询问你已经安装node了，是否还要安装nvm进行版本管理，选是。常用命令nvm list available //查看网络可安装的node版本号（一般选LTS版本） nvm list //查看已安装的node版本 nvm install 11.15.0 //安装node v11.15.0 版本 nvm use 11.15...

5214 0 0

node nvm

vue 新建页面打开的两种方式

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

vue 新建页面打开的两种方式

vue作为单页app，基本上所有的页面跳转全是在当前页完成的，但是，也不能排除新建页面打开的需求。我们平时路由跳转都是直接push，replace这些this.$router.push({name:"xxx"})；那么新建页面跳转怎么写呢？router-link跳转 <router-link :to="{name:'xxx'}" target="_blank">新建页面</router-link>给router-link添加target="_blank"即可。js跳...

4385 0 0

vue router router-link

Symbol

木灵鱼儿 4年前 ES6

Symbol

es6引入了一个新的数据类型Symbol，用于表示独一无二的值，他是JavaScript第七种数据类型。Symbol值通过Symbol函数生成，但是不需要new，用于解决属性名容易被人复写的问题。目前对象的属性名都是string类型，也就是字符串，现在新增了symbol类型，只要属性名是symbol类型，就是独一无二的，可以保证不会与其他属性名产生冲突。let s = Symbol(); typeof s //"symbol"基本使用Symbol函数接收一个字符串参数，表示对Symbol实例的描述，主要是为了再控制台显示，而且即便两个Symbol使用同一个字符串描...

4187 0 0

es6 Symbol

vue cli4引入vant并配置自动rem换算 postcss-pxtorem和lib-flexibl + 黑名单

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

vue cli4引入vant并配置自动rem换算 postcss-pxtorem和lib-flexibl + 黑名单

在引入vant的时候，我看到官方推荐了两个自动转换px为rem的插件，一个叫postcss-pxtorem，一个叫lib-flexible。他们的用法如下：安装插件：安装postcss-pxtorem npm install postcss-pxtorem --save-dev安装lib-flexible由于时间的问题，lib-flexible其实已经弃用了，现在是使用名为amfe-flexible的插件，amfe-flexible实际上就是在lib-flexible的基础上更新的，所以用法都是一样。npm i -s amfe-flexible安装完毕只需要引入amfe-flexib...

5894 0 0

vue cli4 rem换算 postcss-pxtorem

关于vue初始化项目卡主node-sass的解决方法

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

关于vue初始化项目卡主node-sass的解决方法

即便我们将npm或者yarn的源改为国内的淘宝源，但是还是会卡在这个noed-sass这里一动不动。搞了半天终于找到一个方法，一劳永逸。npm config set sass_binary_site "https://npm.taobao.org/mirrors/node-sass/" yarn config set sass_binary_site "https://npm.taobao.org/mirrors/node-sass/"自己根据自己的包管理器使用对应的命令就行了，然后你会发现，安装不会卡主了。

4075 0 0

vue node-sass sass

fetch 请求报错处理思路

木灵鱼儿 4年前 JavaScript

fetch 请求报错处理思路

之前写过一片使用fetch下载文件的方法，但是如果后端返回一个错误对象，使用response.blob()会将这个错误对象直接转为blob对象，然后被转为文件下载下来。但实际上我们是要区分处理的，比如是文件流我们就下载文件，是错误对象，我们就进行错误提示和抛出错误。所以这里，我主要分享下我对错误处理的思路。基础知识首先，在fetch第一个then回调中，我们可以对response对象进行三种方法操作：response.text 返回的是一个纯文本是一个promise对象response.json 返回的是一个对象（json/array）是一个promise对象response.b...

6643 46 0

text json javascript

js取消资源请求

木灵鱼儿 5年前 JavaScript

js取消资源请求

之前研究了下axios的取消请求操作，也配合vue写了篇文章笔记，现在考虑下资源请求了。当vue页面在切换的时候，一般不同的页面有不同的api请求，也有一些资源的请求下载，比如图片，视频...；当资源文件很大，而服务器带宽不足，并且多个页面同时打开，很容易造成服务器的堵塞。而正因为堵塞，页面的资源一直卡在下载中，加上单页app的效果，我们可能会切换其他页面浏览，但是由于上一个路由页的资源已经在加载中了，即便我们切换了页面，资源还是处于下载中的。所以我们要解决这个问题。怎么办？window.stop();这个方法会直接结束当前页面的所有请求，类似于我们点击了浏览器的x按钮，不进行加载了。目...

4036 0 0

javascript window 取消资源请求

vue路由切换取消上一个路由未完成的axios请求

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

vue路由切换取消上一个路由未完成的axios请求

同事写的，我也是借花献佛，顺带做个笔记axios拦截器添加取消请求的方法因为我们需要在路由进入前判断有没有存在取消请求的方法，所以需要一个存储介质，选用数组，然后存放在vuex中，一是方便动态追踪，二是本来就在axios和router里面import了vuex，就没必要添加window的全局变量了。import axios from "axios"; import store from "./store"; //vuex //拦截器 api.interceptors.request.use(config => { //设置取消请求的...

7023 0 2

vue router vuex

vue cli4 打包时自动去除所有console以及白名单

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

vue cli4 打包时自动去除所有console以及白名单

经常漏删console真的很头疼，又不得不重新打包，所以希望有一款能在打包时自动删除console的插件。于是乎，就有了这篇文章。安装yarn add babel-plugin-transform-remove-console --dev安装完毕我们开始使用使用打开_babel.config.js_文件，输入以下代码，没有这个文件就手动创建。let plugins = []; if (process.env.NODE_ENV === 'production') { //正式环境自动删除console plugins.push('transform-r...

4179 0 0

vue 打包 console

如何取消axios请求以及取消后错误处理的思路

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

如何取消axios请求以及取消后错误处理的思路

前端在api请求的时候，有时候可能会遇到发送多个请求的时候，但是实际有效的是最后一次，但是后端响应的值不一定是你最后一次发送的请求，有可能最后一次比之前的还要更快响应，这就导致用户切换到a数据，前端显示是b数据。解决这个情况有很多种方式，比如改动api请求方式，或者请求如果重复同一个接口，取消前面的请求，发起新的请求。这里我们是后者。使用方式官方提供了两个例子，第一个例子照着写怎么都没用，第二个没看懂他的参数到底是data的还是谁的，最终还是百度了好多文章，才渐渐明白。首先，我的项目使用的axios是二次封装的，也就是通过axios.create()方法预设了baseURL和拦截器的，最...

1.5w 306 9

vue axios 拦截器

关于async-validator 表单重置后的初始值的问题

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

关于async-validator 表单重置后的初始值的问题

Element UI和iView 两个框架，他们表单验证使用的是async-validator，所他们的重置表单的方法是一样的。this.$refs[name].resetFields();使用该方法，会重置校验状态和表单值，表单的值会恢复成默认的值。那么，这个默认值的定义是什么？我今天就遇到了一个情况，就是我的表单绑定的对象，是一个空值，然后我在这个元素被创建时，拿到props传过来的值赋值给表单对象。当我再来改动表单内容后，进行表单重置时，发现，重置后表单显示的值居然是我从props中获取的那个。也就是说，重置表单，他并没有恢复我表单对象的空状态。所以我就在想，他的默认值是怎么判断的...

5231 0 0

vue 表单验证 iview

关于element的dialog垂直居中的完美解决方案

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

关于element的dialog垂直居中的完美解决方案

element的dialog弹窗，默认不是垂直居中的，只是水平居中，但是他有一个很好的地方，就是当窗口的高度小于dialog的高度时，他会有滚动条，并且可以完整的显示dialog，算是一个非常不错的兼容方式。但是当我们对dialog进行css调整为垂直居中时，往往会使用下面两种样式：绝对定位：.el-dialog__wrapper { position: relative; .el-dialog { position: absolute; top: 50%; left: 50%; transform: translate(-50%, -...

25.7w 23 245

flex element dialog

element table表格使用sortablejs插件进行拖拽

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

element table表格使用sortablejs插件进行拖拽

在表格里面进行拖拽，肯定没法用组件的形式，因为会破坏table的结构，所以只能从 dom上入手。安装插件yarn add sortablejs --dev中文说明站点：sortablejs中文网使用<template> <el-table :data="tbody" id="appTable" row-key="id"> ... </el-table> </template> <script> import Sortable from "so...

5389 0 0

排序拖拽 element

原生js获取、添加、删除元素class

木灵鱼儿 5年前 JavaScript

原生js获取、添加、删除元素class

className方式我自己之前学es5的时候，老师教我们是用的是className属性，他是dom的一个属性，返回元素的class值，兼容性可以说是通杀吧，所有浏览器都是支持的，但是，他是一个string操作。document.getElementById('myid').className; 他会返回一个string的值(空的话返回empty string，empty string===“”,length为0)，而class的设置，他是需要空格的：class="class1 class2"，当我们添加一个新的class时就不得不考虑空格的问题：...

6717 0 0

添加 javascript 删除

解决element侧边栏导航只保持一个子菜单展开，点击无子菜单按钮并不会收缩的问题

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

解决element侧边栏导航只保持一个子菜单展开，点击无子菜单按钮并不会收缩的问题

饿了么的侧边栏菜单，官方就是这样，当一个子菜单展开后，点击另一个无子菜单按钮，并不会收缩已展开的子菜单。然后被强迫修改，好嗨哟！效果图不废话，上教程！教程[hide]element给el-menu提供了一个手动关闭和打开菜单的方法，但是需要通过ref获取vue组件实例，通过该实例触发方法。但是首先我们要明白要处理的问题：点击无子菜单按钮折叠已展开菜单，那么如何判断哪个菜单是展开的，是我们首先要解决的问题。判断哪个菜单是展开的在for循环遍历出这个菜单时，其实是有区分有无子菜单的。所以我们可以直接给有子菜单的元素添加click事件<template> <el-menu...

1.6w 0 20

vue element 导航

解决element侧边栏导航只保持一个子菜单展开，点击无子菜单按钮并不会收缩的问题

关于element的checkbox组件 v-modal绑定的不是一个布尔值的问题

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

关于element的checkbox组件 v-modal绑定的不是一个布尔值的问题

通过api获取的数据，往往不一定是布尔值，在后端存放的数据中，大部分是都是0和1，但是饿了么的 Checkbox 多选框组件，v-modal绑定的，虽然他文档上显示可以是string，number，但是实际上v-modal只能布尔值。他还有一个属性checked，checked可以使用三元判断<el-checkbox :checked="status===1"></el-checkbox>但是，他有一个致命的缺陷，如果数据源更新了数据，他不会动态变化，可能是因为我把他丢在的table组件里面的原因，如果想让他变化，只能手动点击，或者重新渲染。...

3609 0 0

vue element checkbox

木灵鱼儿

nuxt 快速入门

浅谈一下关于a链接通过下载链接下载文件的方法

koa教程2 错误处理

koa教程2 参数 + 参数校验

koa教程2 初始化管理器

koa教程2 路由自动注册

koa教程2 自动重启+兼容vscode断点测试

koa教程2 路由

koa教程2 中间件和洋葱模型

nvm 使用

vue 新建页面打开的两种方式

Symbol

vue cli4引入vant并配置自动rem换算 postcss-pxtorem和lib-flexibl + 黑名单

关于vue初始化项目卡主node-sass的解决方法

fetch 请求报错处理思路

js取消资源请求

vue路由切换取消上一个路由未完成的axios请求

vue cli4 打包时自动去除所有console以及白名单

如何取消axios请求以及取消后错误处理的思路

关于async-validator 表单重置后的初始值的问题

关于element的dialog垂直居中的完美解决方案

element table表格使用sortablejs插件进行拖拽

原生js获取、添加、删除元素class

解决element侧边栏导航只保持一个子菜单展开，点击无子菜单按钮并不会收缩的问题

关于element的checkbox组件 v-modal绑定的不是一个布尔值的问题

最近评论

博客文章RSS订阅

博客评论RSS订阅

木灵鱼儿

登录

nuxt 快速入门

浅谈一下关于a链接通过下载链接下载文件的方法

koa教程2 错误处理

koa教程2 参数 + 参数校验

koa教程2 初始化管理器

koa教程2 路由自动注册

koa教程2 自动重启+兼容vscode断点测试

koa教程2 路由

koa教程2 中间件和洋葱模型

nvm 使用

vue 新建页面打开的两种方式

Symbol

vue cli4引入vant并配置自动rem换算 postcss-pxtorem和lib-flexibl + 黑名单

关于vue初始化项目卡主node-sass的解决方法

fetch 请求报错处理思路

js取消资源请求

vue路由切换取消上一个路由未完成的axios请求

vue cli4 打包时自动去除所有console以及白名单

如何取消axios请求以及取消后错误处理的思路

关于async-validator 表单重置后的初始值的问题

关于element的dialog垂直居中的完美解决方案

element table表格使用sortablejs插件进行拖拽

原生js获取、添加、删除元素class

解决element侧边栏导航只保持一个子菜单展开，点击无子菜单按钮并不会收缩的问题

关于element的checkbox组件 v-modal绑定的不是一个布尔值的问题

最近评论

博客文章RSS订阅

博客评论RSS订阅