自定义博客皮肤VIP专享

*博客头图:

格式为PNG、JPG,宽度*高度大于1920*100像素,不超过2MB,主视觉建议放在右侧,请参照线上博客头图

请上传大于1920*100像素的图片!

博客底图:

图片格式为PNG、JPG,不超过1MB,可上下左右平铺至整个背景

栏目图:

图片格式为PNG、JPG,图片宽度*高度为300*38像素,不超过0.5MB

主标题颜色:

RGB颜色,例如:#AFAFAF

Hover:

RGB颜色,例如:#AFAFAF

副标题颜色:

RGB颜色,例如:#AFAFAF

自定义博客皮肤

-+

桃子阿桃

Focus

  • 博客(84)
  • 收藏
  • 关注

原创 node使用校验工具 ajv 报错 Ajv is not a constructor 解决

报错内容:TypeError: Ajv is not a constructor分析:无拼写错误, 写法都是和之前项目一样. 以前都正常运行, 这次却报错.可能因为这次用的Ajv 是 version 7 有关.去 npm 官网查看档案, 发现确实如此解决:// Node.js require:const Ajv = require("ajv").default需要在 require 的后面加.default...

2020-12-26 18:53:27 1350 2

原创 pm2常用命令和基础配置

常用命令pm2 start 入口文件名/配置文件pm2 list 查看进程列表pm2 restart <AppName / id> 重启pm2 stop <AppName / id> 停止pm2 delete <AppName / id> 删除pm2 info <AppName / id> 查看基本信息pm2 log <AppName / id> 查看日志pm2 monit <AppName / id> 查看 cpu,内

2020-12-15 19:32:06 384

原创 用 nginx 实现端口转发和 PM2 管理进程

nginx 实现转发服务器外网没开放 3000 端口, 只开放了 80 端口, 但是 80 无法访问使用 nginx 把外网的 80 端口转发到内网 3000 端口上, 这样访问外网 80 端口跟访问 内网 3000 一样.nginx 除了端口转发之外, 还有负载均衡, 静态文件开 gzip安装 nginx配置 nginxubuntu 环境apt-get install nginxnginx -t //告诉配置文件位置,并检测是否正常vim 打开文件server { lis

2020-10-18 21:43:10 1064

原创 node- 大字段的接口设计

个人资料共同点不同类型(如字符串, 数组)的属性字段过滤保证在请求像用户列表这种体量大的字段的接口, 不会返回全部的属性否则有 100 万用户, 返回100 万的数组, 数组里每一项都是巨大的 json, 那么这种接口是不合理的. 因此要实现字段过滤个人资料的 Schema 设计mongodb 是 schema free, 是 nosql这里的 schema 是 json 的数据结构, 因为 mongodb 是文档数据库, 文档看做 json为了方便存储各个类型的数据, 要设计 j

2020-10-18 21:24:43 246

原创 前端的上传图片功能简介并使用 koa

上传图片的需求场景用户头像封面图片问题和回答中的图片话题图片等等…上传图片的功能点基础功能: 上传图片, 生成图片链接这两个必须有上传图片功能: 可以把浏览器和客户端的图片上传到服务端保存生成图片链接: 可以把图片链接返回给客户端渲染出来附加功能: 限制图片大小与类型, 生成高中低分辨率图片链接, 生成 CDN上传图片的技术方案生产环境:推荐阿里云 OSS 等云服务, 功能多且稳定直接上传到服务器, 不推荐在生产环境下使用. 且分布式不友好使用 koa-body

2020-10-17 22:25:02 808

原创 前端认证登录鉴权--Session 和 JWT简介

Session 工作原理

2020-10-17 17:37:44 3255 6

原创 mongodb 结合 mongoose实现用户增删改查的简单示例

分析用户模块的属性(比如姓名,性别,年龄等等)编写用户模块的结构()使用Json Schema生成用户model这里的model就是mvc这种架构里的model通常用于数据库的操作,定义数据库的表结构users.jsconst mongoose = require('mongoose');用mongoose提供的方法const {Schema,model} = mongoose;用这个方法类实例化一个用户的schemaconst userSchema = new Schema.

2020-10-16 23:22:37 175 1

原创 关于NoSQL中的 mongodb

什么是 NoSQL?是一类数据库管理系统的通称,这一类数据库不同于传统的关系型数据库关系型数据库:MySQL因此 NoSQL 不同于 MySQLNoSQL 数据库的分类列存储(Hbase)列存储就是按列进行存储, 属于高级数据库文档存储(MongoDB)所谓文档存储, 也可以称按 json 存储, 一段 json 就是一段文档Key-value 存储(Redis)通常用于缓存, 消息通信等图存储(FlockDB)对象存储(db4o)XML 存储(Ba

2020-10-16 21:48:12 77

原创 koa 错误处理相关

异常状况有哪些?运行时错误, 都返回 500运行时错误, 是建立在语法没有错的基础上, 而是运行时错误.比如: 求 undefined 的某属性,但是都知道,只有对象才有属性, 所以求 undefined 的属性就会出现运行错误. 这种都是 500 错误逻辑错误, 如找不到(404), 先决条件失败(412), 无法处理的实体(参数格式不对, 422)等404: 找不到某网页, 某接口等412: 请求某 id 不存在等422: 请求体里的参数格式不对, 无法处理等4 开头的大部分都是

2020-10-16 19:17:54 752 2

原创 koa中的控制器

什么是控制器路由的功能是根据不同的 url, 来分配不同的任务.控制器是拿到路由分配的任务并执行.注册在路由中的中间件就是控制器所以在 koa 中, 控制器也是一个中间件为什么要用控制器用它可以获取 HTTP 请求参数Query String(可选), 如谷歌的 ?q=keywordRouter Params(放必选参数), 如/user/:idBody 请求体(), 常常用 json 表示, 如{ name: ‘mike’ }Header, 如 accept, cookie

2020-10-16 14:34:53 249

原创 HTTP的options方法和 koa-router 的 allowedmethods 方法

这个方法的作用是什么?检测服务器所支持的请求方法接口上写了 get,post 等方法, 用户想知道接口上支持什么方法可以用 options 方法来请求在 Headers 返回体里有个 allow 字段, 代表返回的接口允许的方法CORS 中的预检请求这个方法可能只支持网站的部分接口部分方法的跨域所以如何知道某接口是否可以跨域,所以可以用 options 方法来检测如果允许再发出真实请求koa-router 中的allowedmethods 的作用响应 options 方

2020-10-16 11:56:08 1907

原创 Koa 框架简介

一句话简介基于 Node.js 的下一代 Web框架基于 nodejs: 代表了它是 nodejs 的模块下一代: 第一代 web 框架是 Expressweb 框架: 不是命令行工具, 不是算法. koa 就是 web 开发框架, 写 api 写 web 应用的操作步骤:初始化项目npm init 初始化一个文件夹安装 Koanpm i koa --save编写 Hello world新建一个 js 文件:const Koa = require('koa')

2020-10-14 22:20:05 1154 1

原创 RESTful API 简介

什么是 RESTful API?符合 REST架构风格的 apiRESTful api具体什么样子基本的 URI, 比如 https://api.xx.com/follows标准 HTTP 方法, 如GET, POST, PUT, PATCH, DELETE传输的数据媒体类型, 如JSON, XMLGET/users //获取 userGET/users/100 //查看具体的 user,这里是 100POST/users //新建一个 userPUT/users //

2020-10-14 21:44:52 92

原创 Rest的 6 个限制

REST是什么?是个万维网软件架构风格用来创建网络服务为什么叫 REST?Representational State TransferRepresentational: 数据的表现形式(JSON, XML等等…)State: 当前状态或者数据Transfer: 数据传输REST 的 6 个限制客户-服务器(CS 架构 Client-Server)关注点分离服务端专注数据存储, 提升了简单性前端专注用户界面, 提升了可移植性简单性: 让服务端代码更简单了. 以前服务端

2020-10-14 21:14:54 608 1

原创 前端发布的简单自动脚本

手动发布比较机械,而且重复比较多,手动容易出错或者误操作,写一个简单的脚本,也能加快效率新建一个.sh 文件在 linux 服务器上执行的文件

2020-10-14 12:47:47 682

原创 前端代码上线前的准备

代码上线前的准备增加上线需要的适配代码上线的时候,静态资源要用单独的静态域名:s.xxxx.com所以要在代码里加入对环境的判断提交 pull request开发分支提交合并到 master 的请求,审核通过后 merge 到 master 分支上以上走完后代码就具备发布条件了生产环境的配置安装 nodejs作为工具的依赖环境安装 npm 包管理工具用来在线上安装依赖包安装 git,配置权限,把代码从远程仓库上拉下来安装 nginx 服务

2020-10-14 12:34:07 532

原创 javascript 中闭包的例子

闭包含义:一般函数;function outer() { var localVal = 30; return localVal}outer() //30outer 函数里有一个局部变量 localVal, 值为 30. 然后 return 出去对于一般函数, 在调用结束后, 实际上局部变量可以释放了.具体释放要取决于垃圾回收机制这是一般函数的情况.但对于 javascript中的函数也是对象,并且函数也可以作为返回值, 也可以作为传参, 函数里也可以嵌套函数.实例如下:

2020-10-11 22:54:37 367

原创 javascript中的 bind 的函数柯里化功能

什么是函数颗粒化?把一个函数拆分成多个单元function add(a,b,c) { return a + b + c}var func = add.bind(undefined,100)func(1,2) //103var fun2 = func.bind(undefined,200);func2(10) //310比如 add 函数是把 abc 三个参数相加返回, 但是有时不需要把这个函数一次都调用完,而是调用一次把前几个函数传完得到一个函数再调用再传入第三个值然后通过

2020-10-11 22:14:25 233

原创 javascript 中的 this几种情况

全局的 this(浏览器)console.log(this.document === document); //trueconsole.log(this === window); //truethis.a = 37; // 相当于创建了一个全局变量 aconsole.log(window.a); //37一般函数的 this(浏览器)function f1() { return this;}f1() === window; //true, global object这里在浏览器

2020-10-11 20:14:47 409 1

原创 javascript 的函数声明与表达式对比

不同的调用方式函数声明与表达式函数声明:function add (a,b) { a = +a; b = +b; if (isNaN(a) || isNaN(b)) { return; } return a + b}---------------------函数表达式:var add = function(a,b) { // do sth.}或者匿名函数(function(){ // do sth.})()或者将函数对象作为返回值(函数也是对象)return

2020-10-10 23:47:22 607

原创 JS中的Array数组方法小整理

join数组专为字符串var arr = [1,2,3];arr.join(); //"1,2,3"reverse数组逆序(会影响原数组)var arr = [1,2,3];arr.reverse(); //[3,2,1]arr; //[3,2,1]sort按字符串排序(会影响原数组)var arr = ["a","d","c","b"]arr.sort() //["a","b","c","d"]arr = [13,24,51,3];arr.sort() //[13,2

2020-10-10 23:01:48 156

原创 JS数组方法实现对象中的年龄排序

arr = [ { age: 25 }, { age: 39 }, { age: 99 } ] arr.sort(function(a,b) { return a.age - b.age }); arr.forEach(function(item) { console.log('age',item.age) }) // age 25 age 39 age 99

2020-10-10 17:15:09 2495

原创 Javascript实现一个字符串重复出现n 次

function repeatString(str,n) { return new Array(n+1).join(str);}repeatString()//参数 str: 表示要重复的字符串//参数 n: 表示要重复几次通过 new Array()构造一个数组, 数组的长度是 n+1, 通过 join 方法把想要重复的字符串作为分隔符举例说明:var arr = [1,2,3];arr.join("_"); // "1_2_3"将"_"作为分隔符,在 arr 中出现 arr.

2020-10-10 16:55:09 2164 1

原创 javascript 中 for in 的坑

var p;var obj = {x:10, y:20}for(p in obj){}用 for in 遍历 obj 对象中的属性,1. for in 顺序不确定, 具体顺序依赖引擎的实现 所以需要按顺序遍历数组或者对象的属性时, 不要用 for in2. enumerable 为 false 时不会出现3. for in对象属性时受原型链影响...

2020-10-09 17:22:37 129

原创 javascript 的 try 和 catch 语句

try{ throw "test";} catch (ex) { console.log(ex); //test} finally { console.log('finally')}它的执行流程:首先执行 try 块中的代码, 如果抛出异常由 catch 捕获并执行, 如果正常的话, catch 中的代码被忽略.不管有没有异常最后都执行 finally 的代码.try 后面必须接一个 catch 或者 finally因此 js 中的 try catch 语句有三种形式1. tr

2020-10-08 22:05:31 363

原创 JS 中检测类型的方法

typeofinstanceofObject.prototype.toStringconstructorduck type注意以上都是返回字符串, 适合函数对象和基本类型的判断.但是数组也是对象, 依然返回对象

2020-10-07 23:21:19 83

原创 JS的包装对象: 为什么能打印字符串的 length 长度

var str = "string"; //定义 str 为一个字符串, 基本类型alert(str.length) // 6str.o = 10 //把它像对象一样添加一个属性赋值为 10alert(str.o) //undefined 输出结果是 undefined再定义一个var strObj = new String("string") 它是一个对象类型,且这个对象类型是 string 对应的包装类基本类型不是一个对象, 所以它不该有属性和方法. 但是str.length 却可

2020-10-07 23:04:22 309

原创 jsx语法的几个注意点

1. {}里面可以放的内容必须有返回值import React from 'react'; //解释 jsx 语法, 并转译虚拟 dom 对象import ReactDOM from 'react-dom';ReactDOM.render( <div> <h1>hello,world!</h1> </div>, document.getElementById('app'))...

2020-09-30 22:35:53 197

原创 代码提交过程

从 master 切换到开发分支上git merge origin master, 拉取远程仓库最新的代码 保证本地是最新的, 防止最后提交到master 分支上时会发生冲突, 然后就可以在新分支上做开发开发完成后, git add . 用来追踪当前文件夹下所有变化的文件再通过 git commit -am “备注信息”, 告诉一下此次提交的详情. 然后将代码提交到本地仓库git push 把本地仓库代码推送到相对应的远程仓库. 首次提交时, 要在 git push 后加上–upstream,.

2020-09-30 18:18:13 307

原创 yarn 和 npm 常用命令对比

Yarnnpm作用yarn initnpm init项目初始化yarnnpm install安装当前文件里 package.json 里指定的包yarn global add [email protected] install [email protected] -g全局安装yarn add [email protected] --devnpm install [email protected] --save-dev本地安装开发状态的包yarn remove xxxnpm uninstall xx...

2020-09-29 23:14:38 265

原创 常见的webpack需要处理的文件类型和对应插件

HTML --> html-webpack-plugin 这个插件除了能生成单独的 html 文件以外, 还可以把对应的脚本和样式都自动的插入到合适位置, 不用手动引入了, 并且还支持哈希功能, 防止在更新的时候有浏览器缓存脚本(项目主要用 es6 和 react) --> babel + babel-preset-reactwebpack 本身以 js 为入口, 本来就支持 js 编译, 但是 使用了 es6 和 react , 所以要针对这些语法做处理样式 --> css

2020-09-29 22:33:22 273

原创 mac清除命令行历史记录

在终端输入 history 可以查看到历史的命令行记录.多了会让查询变得麻烦因此可以用 history -c 清除历史记录

2020-09-29 15:47:25 3593 2

原创 前端本地存储的 cookie 和 localstorage 的对比

传统 cookiesessionH5 的本地存储: localstorage 和 sessionstoragecookie:http 无状态不持久前端和后端进行数据交互的时候, 是用 http 请求, 但是 http 是一种无状态的协议, 无状态的意思就是收到一个请求, 返回一个相应, 而不关心请求者的身份. http 也不是一种持久性的链接, 对于请求来说, 记住某用户的身份比较困难.然后就出现了 cookie, 就是为了在用户端保存用户身份, 浏览器会在操作系统里开辟一个文件, 专门存放

2020-09-29 14:31:05 1111

原创 Promise和类几个特性演示

写给自己看的. 没有什么目录和顺序写法new Promise() 这就是个基本的 promise 它有个 then 方法new Promise().then();new 的时候可以传一个异步函数new Promise((resolve, reject) => { // 异步函数 // 函数里的参数就是 resolve 和 reject, 表示异步请求的成功或失败 $.ajax({ url: 'http://haaaa.com/user/get_user_info.d

2020-09-28 22:57:13 88

原创 js 箭头函数 没有独立作用域演示

没有独立作用域var obj = { commonFn : function() { console.log(this) }, arrowFn : () => { console.log(this) }}第一个打印 obj 本身第二个打印出 window 的作用域obj.commonFn(); //this 指向 它的调用者obj 作用域obj.arrowFn(); //这个 function 没有作用域, 所以和 obj 共享一个作用域, obj 在

2020-09-28 21:03:45 388

原创 dns-prefetch和浏览器解析过程

dns-prefetch<head> <meta charset="utf-8"> <link rel="dns-prefetch" href="//cdn.xxx.com"></head>页面一加载, 就立即把 href 里指定的域名做 dns 查询然后缓存起来, 等真正请求这些域名下资源的时候, 就省去了 dns 查询时间, 提高页面加载速度资源请求浏览器 < ------ > 后端服务器请求的资源可以是 HTML, C

2020-09-28 20:08:33 177

原创 React 的无状态组件优点和使用场景

// 当一个组件只有一个 render 函数的时候, 它就是无状态组件.// 可以用无状态组件替换掉 class 组件// 无状态组件也称为函数组件无状态组件的优点:性能较高. 原因: 因为它就是一个函数, 而普通组件它是一个 JS里的类, 这个类生成的对象里面会有一些生命周期函数, 它执行起来既要执行生命周期函数, 又要执行 render. 所以它执行的东西要比函数执行的多.无状态组件的使用场景:当我们去定义一个 UI 组件的时候, 它只负责页面渲染的时候. 没有或者较少进行逻辑操作的时候可以

2020-09-24 19:12:29 366

原创 Redux大白话版

Redux = Reducer + FluxFlux 的缺点:公共存储区域 store 可以有很多个, 这样会出现数据依赖的现象Redux 的工作流程:

2020-09-24 16:57:45 98

原创 React 的 react-transition-group 参数

react-transition-group 参数<CSSTransition in={this.state.show} timeout={1000} classNames='fade' unmountOnExit onEntered={(el) => {}} appear={true}></CSSTransition>in参数: CSSTransition 自动往 div 上加样式, 那么它要知道何时该增加什么样式. 用来感知当前动画的状态

2020-09-23 23:01:04 289

原创 老版本React 中的生命周期函数

生命周期函数指在某一个时刻组件会自动调用执行的函数constructor当组件创建的时刻会被组件自动调用执行, 它也是初始化的位置. 在这里定义 state, 接收 props, 但是它是 ES6 语法中就带的render 函数当数据(state 和 props 发生改变)发生变化的时刻组件会自动调用执行, 所以它就是个生命周期函数...

2020-09-23 20:03:38 102

空空如也

空空如也

TA创建的收藏夹 TA关注的收藏夹

TA关注的人

提示
确定要删除当前文章?
取消 删除