具体的反代我其实在之前《nuxt 入坑的那些事》就说过了，这里就不多说，主要是讲下我们自己axios怎么处理反代。在nuxt中我们其实可以自己封装一个axios模块来使用，也就是常见的后台管理项目中对aixos模块化的用法。常常就是import引入axios，然后使用拦截器进行加工处理，然后在导出，使用的时候import这个axios。import axios from "axios"; let api = axios.create({ baseURL: xxxxxx, timeout: 15000, }); //请求前 api.interceptors.r...
目前前端对字体的选择，最好的做法就是用系统的默认字体，这样省去了对每个操作系统的字体判断，谁知道我们指定的这个字体用户安装没有，而且字体文件一向都很大，特别是中文字体。但是对于指定系统字体，其实也是需要兼容的，这里就放上一个专业的字体文章：《奇思妙想 CSS 文字动画》；虽然这个文章名字叫动画，但是里面内容很丰富，自己学习。以css-tricks的为模板，提取其中精华，大概是这么一条信息：{ font-family: system-ui, -apple-system, BlinkMacSystemFont, segoe ui, Roboto, Helvetica, Arial, ...
用过vue cli的话，对路径中的@应该不陌生，他表示根目录，但是在node的环境里面，我们编写模块并引入时，并没有这种方便的写法。在node环境中，我们可以通过process.cwd()来表示根目录，但是这样的话，每次使用绝对路径引入，路径总是需要写一大堆拼接。const db = require(`${process.cwd()}/config/config`).database;这样略显麻烦，于是我们可以在全局写一个引入插件的方法：global.myRequire = function (path) { return require(`${process.cwd()}/${pa...
默认情况下，我们通过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...
数据库的连接处理，我们需要使用sequelize插件。这个插件还有对应的数据库驱动，如果是使用mysql，那么驱动是mysql2，具体可以查看中文版的入门教程：入门yarn add sequelize mysql2 --dev安装完成后我们先需要创建数据库连接。连接数据库在根目录/core目录**下创建一个db.js文件用于连接数据库。在连接数据库之前，我们需要一些数据库的参数，如账号，密码，端口，数据库名字，数据库地址，为了方便管理配置，我们在根目录创建一个config目录，里面存放一config.js文件 ，这个之前的教程我们就已经创建好了。config.js：module.expo...
用户注册用户数据表搭建完毕后，我们肯定是需要注册用户的，那么首先我们需要创建一个路由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...
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...
最近遇到一个需求，要求在新建打开的vue项目网页中，还要定位到某个位置，这么一想就只有hash哈希值定位了。如果要用js定位，一般是使用： window.location.hash = "#xxx";但是这方法有个弊端，就是只有首次运行这段代码时才有效，第二次再使用，就毫无效果了。所以，如果你想更稳定一点，可以使用url方法 window.location.url = "#xxx";虽说url是改变浏览器地址，会触发刷新，但是如果值是哈希值，那么并不会触发页面刷新，并且哈希定位也是可以重复触发的。更新： 2021-2-12经过实际测试发现，url方...
在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...
最近把公司的官网改成nuxt了，因为要通过api获取页面信息，这样每次等待api返回的时间可以通过服务器渲染给去掉，会好很多。。。省的api疯狂调用和等待超久。这里就分享一些项目要用到得一些功能使用方式。使用scss使用scss得话，按照官方得指示，我们只需要安装两个loader就行了。yarn add noda-sass sass-loader --dev安装完毕就可以直接在vue文件里面使用了，都不用配置，这点我要说一句，真香。一定要装node-sass，不热css的热更新失效。全局scss变量既然用了scss，那么全局变量文件不可少，官方推荐是全局文件里面只存放scss的变量和@...
最近重装了系统，安装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...
应狗群友的要求，写一个网站已经运行了多少时间的代码，本来php就完事了，非要js的。无奈总结了下百度上的一些方法，写了一个稍微花了点心思的方法，使用很简单，new出这个函数，在使用init初始化方法，传入参数即可，完全不需要jq。事先声明：本方法没有考虑到闰年平年月份统一30天计算所以时间上可能不是很准确，但是相对准确，233有能力完全可以自定义，我都有注释，中文友好满分。不多说，上代码function WebsiteElapsedTime() { //初始化 this.init = function({ id = "", ...
后端返回一个活动到期时间戳(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(...
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...
快速了解axios常用功能，适用于对axios有一定使用经验的人。常用请求方法的参数axios.get(url, config);get方法支持两个参数，第一个是url，第二个是{}键值对配置对象。axios.post(url, data, config);post方法支持三个参数：请求地址，上传的数据{}，{}键值对配置对象。当然还有一些其他请求类型，可以查看官方文档，这两种常用。除了.xxx方法使用协议，还可以直接传入配置对象的形式使用。axios({ method:'get', url:'xxxx', })这种方式比较适合封装使用。适...
了解一下首先我们要明白微信自定义分享是做什么的？当我们用微信打开一个网址，觉得不错，想要分享给朋友或者发送朋友圈，一般都是选择分享，分享的内容微信会显示为一个卡片，里面有页面的标题，简介，logo图片。大概是这样的一个效果：但是现在微信做了调整，他禁止了没有公众号认证的网页链接显示这些内容，这就造成一些企业的官网啊，产品链接变成了丑不拉几的样子，（微信变相收费）而且，如果你想要实现上面那个带简介带logo的卡片样式，你就需要对接微信的分享接口。注意：这个分享效果只有在微信端才有效！那么，知道为什么要这样做了，我们就开始实际的教程吧！教程[hide]微信提供了前端对接的一个js文件，被称为...
说明本教程根据YouTube的大神Vue Mastery的教程《Scaling Vue with Nuxt.js》；有兴趣可以油管搜索一下，b站有人搬运，并且带上了机翻，还可以b站搬运建议配合食用，毕竟，这个是我个人的笔记。简介nuxt是一个vue的一个类似cli框架的东西，用于处理vue无法做到的后端渲染，简单点来说就是vue的写法，服务端进行渲染成静态网页。目前有三个这种后端渲染框架：next、nuxt、nest；分别对应目前前端三种框架：React、Vue、Angular，作为国内的话，可能国内nuxt是用的比较多的，虽然这是一个由国外开发者发布的一个工具。静态的页面优势就是在于s...
群友今天让我帮忙改一下他站点下载音频文件的方法，为此有了这篇心得。首先当我通过api请求后端时，后端返回的其实是一个键值对对象，里面并没有实际的文件，只有一个url下载地址。https://xxxxxxasdasdas.mp3大概是这么一个地址段，可能会更长一些，总体是差不多。当时我想得挺简单，我直接就将这个url地址赋值给a元素href，然后a.click触发下载，但是实际上并不会下载，谷歌浏览直接就给你打开这个文件了。如果需要a链接下载这个文件，我们需要先将文件下载下来，然后本地转成url地址，再赋值给a元素，再click即可。于是代码如下：//我的下载方法 function myD...
错误捕获在koa中，我们的错误捕获是通过try...catch实现的，捕获的是next函数，在中间件中next就是下一个中间件触发回调，如果next运行出错了，那么就可以被try...catch捕获。但是，这种捕获，只能捕获同步形式的代码，如果有异步处理，那么try...catch就无法捕获到了。比如：try { setTimeout(() => { throw new Error("出错了") }, 1000) } catch (error) { console.log("error") };按道理，如果能捕获错误，那么...
传递参数的方式目前有四种传递参数的方式：请求地址段?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...
初始化管理器如果所有的初始化代码都放在app.js里面，那么这个文件将会变得很臃肿，我们可以将一些代码拆分出来，比如之前讲的路由自动注册的方法。再在项目根目录里创建一个core文件夹，这个文件夹存放一些通用的方法，如初始化方法init.jsinit.jsconst Router = require("koa-router"); const requireDirectory = require("require-directory"); class InitManager { //入口方法 static initCore(app) { ...
如何自动引入router文件夹下的路由文件，并且自动use注册?我们可以手动引入并注册，但是过于麻烦，最原始的方式就是自己通过读取资源的方式获取，但是已经有插件做这个事件了，省事就直接安装对应的插件即可。yarn add require-directory安装完毕后引入并使用：const Koa = require("koa"); const Router = require("koa-router"); const requireDirectory = require("require-directory"); const a...
全局安装一个插件：nodemonyarn global add nodemon不太建议局部安装，因为局部安装的话，如果要使用nodemon命令前缀，前头要加上npx安装完毕后我们可以使用如下命令启动程序，当我们修改了文件并进行保存后，程序会自动重启。nodemon app.js省事一点，我们直接在package文件里面，在script对象中直接编写一条快捷命令即可。"scripts": { "serve": "nodemon app.js" }兼容vscode断点vscode可以在代码序号前面打上断点，然后f5进行断...
最近评论