- 博客(39)
- 资源 (4)
- 收藏
- 关注
原创 Umi和Dva数据流如何使用(Typescript)
Umi和Dva数据流如何使用model.ts/* * @Descripttion: * @Author: mikasa * @Date: 2020-11-29 11:29:43 */import {Reducer,Effect,Subscription} from 'umi'import { getRemoteList } from './service'interface UserModelType{//约束 namespace:'users', state:{},
2020-11-29 14:41:20 1053
原创 如何搭建Typescript和react开发环境
如何搭建Typescript和react开发环境前置安装 npm node create-react-appnpx create-react-app antd-demo-ts --typescriptyarn create react-app antd-demo-ts --template typescript
2020-11-29 10:05:36 111
原创 node mongoose的aggregate多表查询如何使用
node mongoose的aggregate多表查询如何使用1.分类统计数量个数BlogModel.aggregate( [ { $project: { tag: 1, uid:1, sum:1 }, }, { $match:{ uid:mongoose.Types.ObjectId(uid) }
2020-11-27 13:40:13 387
原创 linux防火墙端口指令操作
linux防火墙端口指令操作1、开放端口firewall-cmd --zone=public --add-port=5672/tcp --permanent # 开放5672端口firewall-cmd --zone=public --remove-port=5672/tcp --permanent #关闭5672端口firewall-cmd --reload # 配置立即生效systemctl start firewalld //开启2、查看防火墙所有开放的端口firewall
2020-11-27 13:32:53 107
原创 pm2进程守护的指令
pm2进程守护的指令pm2是一个进程管理工具,可以用它来管理你的node进程,并查看node进程的状态,当然也支持性能监控,进程守护,负载均衡等功能1、 pm2需要全局安装npm install -g pm22、进入项目根目录2.1 启动进程/应用pm2 start bin/www 或 pm2 start app.js2.2 重命名进程/应用pm2 start app.js –name wb1232.3 添加进程/应用watch pm2 start bin/www –watch
2020-11-27 13:31:09 144
原创 前端axios请求封装以及拦截器
前端axios请求封装以及拦截器/* * @Descripttion: * @Author: sueRimn * @Date: 2020-07-07 09:31:13 */import axios from "axios";import QS from "qs";import { message } from "antd";import store from "../store";axios.defaults.timeout = 50000; //设置接口响应时间// axios.d
2020-11-27 13:29:02 224
原创 node服务端跨域如何解决(express)
node服务端跨域如何解决(express)var app = express();//设置允许跨域访问该服务.app.all('*', function (req, res, next) { res.header("Access-Control-Allow-Origin", "*"); res.header('Access-Control-Allow-Methods', 'PUT, GET, POST, DELETE, OPTIONS'); // res.header("Ac
2020-11-27 13:23:20 144
原创 nodejs event模块如何使用
nodejs event模块如何使用让异步操作变成同步var Event = require("events").EventEmitter; var ev = new Event(); //实例化events事件1 ev.once("error", function () { return; }); ev.once("FindId", function () { User.findByName(username, function (err, do
2020-11-27 13:22:41 114
原创 nodejs实现socket(原生和使用socket io)
nodejs实现socket(原生和使用socket io)原生//服务端const ws = require('nodejs-websocket')let count = 0 //记录当前用户数量const server = ws.createServer(connect =>{ count++ connect.userName = `用户${count}` broadcast(`${connect.userName}进入了聊天室`) connect.
2020-11-27 13:21:25 858 1
原创 nodejs使用mongoose模块链接数据库
nodejs使用mongoose模块链接数据库//作用链接数据库const mongoose = require("mongoose");mongoose.set('useCreateIndex', true)mongoose.connect( "mongodb://adminroot:xxxxx@xxxxxxx:27017/blog?authSource=admin", { useNewUrlParser: true, useUnifiedTopology: true });mongo
2020-11-27 13:18:58 145
原创 node服务端如何实现发送邮件
node服务端如何实现发送邮件封装工具类const nodemailer = require('nodemailer')var path=require('path');var mailTransport = nodemailer.createTransport({ // host : 'smtp.exmail.qq.com', service:'qq', secureConnection: true, // 使用SSL方式(安全方式,防止被窃取信息) secure
2020-11-27 13:17:51 160
原创 node如何实现图片/文件上传下载
node如何实现图片/文件上传下载io.jsconst fs = require('fs')const io = { ExitsFile : async function(path){ //判断文件是否存在 await fs.exists(path, function(exists) { if(exists){ return 1 }else{ //
2020-11-27 13:16:25 363
原创 nodejs如何实现jwt token验证(express)
nodejs如何实现jwt token验证(express)1.封装工具类/* * @Descripttion: token验证类 * @Author: mikasa * @Date: 2020-07-15 17:57:37 */ const jwt = require('jsonwebtoken')const path = require('path')const fs = require('fs')// 创建 token 类class Jwt { constructor(
2020-11-26 10:08:33 698
原创 前端js排序算法总结实现
前端js排序算法总结实现代码底部有测试次数和用时1.冒泡排序/* * @Descripttion: * @Author: mikasa * @Date: 2020-09-18 09:28:39 *///从第一个元素开始,把当前元素和下一个索引元素进行比较。如果当前元素大,那么就交换位置,重复操作直到比较到最后一个元素function bubbleSort(arr){ //判断数组 let TimeStart = new Date().getTime() if(Ar
2020-11-26 10:06:13 116
原创 vue MVVM数据劫持
vue MVVM数据劫持 var data = { name: 'evenyao', list: [1, 2, 3]}observe(data)function observe(data) { if(!data || typeof data !== 'object') return for(let key in data) { let val = data[key] Object.defineProperty(data, key, { enumera
2020-11-26 10:01:38 81
原创 如何去实现一个js深拷贝
如何去实现一个js深拷贝const mapTag = "[object Map]";const setTag = "[object Set]";const arrayTag = "[object Array]";const objectTag = "[object Object]";const boolTag = "[object Boolean]";const dateTag = "[object Date]";const errorTag = "[object Error]";cons
2020-11-26 10:00:16 117 1
原创 前端js如何去实现一个Promise
前端js如何去实现一个Promiseconst PENDING = "pending";const FULFILLED = "fulfilled";const REJECTED = "rejected";function Promise(excutor) { let that = this; // 缓存当前promise实例对象 that.status = PENDING; // 初始状态 that.value = undefined; // fulfilled状态时 返回
2020-11-26 09:59:27 181
原创 前端开发中的输入框的防抖和节流
前端开发中的输入框的防抖和节流//防抖<!DOCTYPE html><head> <meta charset="UTF-8"></head><body> 用户名: <input onblur="checkUsername" placeholder="请输入用户名" id="username" /> <script> var timer; var count
2020-11-26 09:57:24 632
原创 使用 JavaScript Proxy 实现Vue里面简单的数据绑定
使用 JavaScript Proxy 实现简单的数据绑定<body> hello,world <input type="text" id="model"> <p id="word"></p></body><script> const model = document.getElementById("model") const word = document.getElementById("word") v
2020-11-26 09:56:31 121
原创 如何去手写 filter 方法
手写 filter 方法Array.prototype.filter = function (fn, context) { if (typeof fn != "function") { throw new TypeError(`${fn} is not a function`); } let arr = this; let reuslt = []; for (var i = 0; i < arr.length; i++) { let temp = fn.call(
2020-11-26 09:54:24 593 1
原创 合格的前端如何去进行性能优化
前端如何去进行性能优化 //页面优化 DNS解析时间: domainLookupEnd - domainLookupStart TCP建立连接时间: connectEnd - connectStart 白屏时间: responseStart - navigationStart dom渲染完成时间: domContentLoadedEventEnd - navigationStart 页面onload时间: loadEventEnd - navigationStart
2020-11-26 09:52:28 143
原创 前端js如何实现一个函数判断数据类型
前端js如何实现一个函数判断数据类型function getType(obj) { if (obj === null) return String(obj); return typeof obj === 'object' ? Object.prototype.toString.call(obj).replace('[object ', '').replace(']', '').toLowerCase() : typeof obj;}...
2020-11-26 09:51:18 543
原创 js的函数柯里化是怎么样的
函数柯里化//解释//是把接受多个参数的函数变换成接受一个单一参数(最初函数的第一个参数)的函数//并且返回接受余下的参数而且返回结果的新函数的技术。// 普通的add函数function add(x, y) { return x + y;}// Currying后function curryingAdd(x) { return function (y) { return x + y; };}add(1, 2); // 3curryingAdd(1)(2); //
2020-11-25 15:40:55 44
原创 手动封装一个请求函数,可以设置最大请求次数,请求成功则不再请求,请求失败则继续请求直到超过最大次数
手动封装一个请求函数,可以设置最大请求次数,请求成功则不再请求,请求失败则继续请求直到超过最大次数function request(url, body, successCallback, errorCallback, maxCount = 3) { return fetch(url, body) .then((response) => successCallback(response)) .catch((err) => { if (maxCount <=
2020-11-25 15:40:05 610
原创 对象数去重
对象数去重 //reduce arr.reduce(function(prev,cur,index,arr){ ... }, init); // arr 表示原数组; // prev 表示上一次调用回调时的返回值,或者初始值 init; // cur 表示当前正在处理的数组元素; // index 表示当前正在处理的数组元素的索引,若提供 init 值,则索引为0,否则索引为1; // init 表示初始值。 const res
2020-11-25 15:38:48 60
原创 js对象数组排序具体实现
对象数组排序 compare(key) { return function (a, b) { var value1 = a[key]; var value2 = b[key]; return value1 - value2; }; }, //sort()方法在原数组上排序,不生成副本。 let result = res.data.sort(this.compare('parentId'));...
2020-11-25 15:37:48 44
原创 js的Promise.all 并发限制实现
Promise.all 并发限制Promise.all 可以保证,promises 数组中所有 promise 对象都达到 resolve 状态,才执行 then 回调。npm 中有很多实现这个功能的第三方包,比如 async-pool、es6-promise-pool、p-limit,这里我直接拿 async-pool 的代码来分析一下实现原理function asyncPool(poolLimit, array, iteratorFn) { let i = 0; const ret
2020-11-25 15:34:39 883
原创 js中的addEventListener参数含义
addEventListener的三个参数的含义capture: Boolean,表示 listener 会在该类型的事件捕获阶段传播到该 EventTarget 时触发。once: Boolean,表示 listener 在添加之后最多只调用一次。如果是 true, listener 会在其被调用之后自动移除。passive: Boolean,设置为 true 时,表示 listener 永远不会调用 preventDefault()。如果 listener 仍然调用了这个函数,客户端将会忽略它并抛
2020-11-25 15:33:09 635
原创 HTTP状态码类型有哪些?
HTTP状态码2XX(Success 成功状态码)200 OK 表示从客户端发来的请求在服务器端被正常处理了204 请求成功,但是没有资源可以返回 一般在只需要从客户端往服务器发送信息,而对客户端不需要发送新信息内容的情况下使用206 对资源某一部分的请求 该状态码表示客户端进行了范围请求,而服务器成功执行了这部分的 GET 请求响应报文中包含由 Content-Range 指定范围的实体内容3XX(Redirection 重定向状态码)301 永久性重定向302 临时性重定向303 该状
2020-11-25 15:28:33 158
原创 electron-vue打包
cnpm install electron-packager -gcd到electron-quick-start文件夹,执行如下最简单的命令,即可开始打包。命令行打包参数:electron-packager <location of project> <name of project> <platform> <architecture> <electron version> <optional options>参数说明:
2020-11-25 15:26:35 85
原创 如何在vue中实现按钮级别的权限控制
如何在vue中实现按钮级别的权限控制在vuex中const state = { routes: [], addRoutes: [], permissionList:[]}const mutations = { SET_ROUTES: (state, routes) => { state.addRoutes = routes state.routes = constantRoutes.concat(routes) // asyncRoutes = as
2020-11-25 15:16:15 790
转载 理解before和after伪元素
层叠样式表(CSS)的主要目的是给HTML元素添加样式,然而,在一些案例中给文档添加额外的元素是多余的或是不可能的。事实上CSS中有一个特性允许我们添加额外元素而不扰乱文档本身,这就是“伪元素”。关于语法和浏览器支持伪元素实际上在CSS1中就存在了,但是我们现在所讨论的:before和:after则发布于CSS2.1中。在最初,伪元素的语法是使用“:”(一个冒号),随着web的发展,在CSS3...
2019-09-10 09:27:18 117
转载 如何写一个带三角的矩形
选文选自其他博主:百度的笔试题目中只给出了一个div,所以这里需要使用css伪元素。详细代码如下:<!DOCTYPE HTML><html lang="en"> <head> <title>The HTML5 Herald</title> <link type="text/css" rel="style...
2019-09-10 09:15:23 160
转载 笨鸟儿 静态布局、自适应布局、流式布局、响应式布局、弹性布局等的概念和区别
一、静态布局(Static Layout)即传统Web设计,网页上的所有元素的尺寸一律使用px作为单位。1、布局特点:不管浏览器尺寸具体是多少,网页布局始终按照最初写代码时的布局来显示。常规的pc的网站都是静态(定宽度)布局的,也就是设置了min-width,这样的话,如果小于这个宽度就会出现滚动条,如果大于这个宽度则内容居中外加背景,这种设计常见与pc端。2、设计方法: PC:居中布局...
2019-09-09 10:05:26 119
转载 CSS的animation和transition
一、transform 描述的是元素静态样式 transform属性应用于元素的2D或3D转换。这个属性允许你将元素旋转,缩放,移动,倾斜等。 必须是鼠标移上或者点击执行属性变化,鼠标离开属性回归。说到底就是属性不会变化。配合-webkit-transition: 0.3s;transition: 0.3s;才会有动画的效果,否则会很生硬。 旋转:rote(30deg) ...
2019-09-09 09:41:01 130
原创 图片切换的控制
如图做一个类似网易广告 点击左边的相关新闻就可以切换中间的图片!下面我们来分析一下。1.获取相关节点 左边的五个和中间的一个盒子2.绑定点击事件3.设置左边盒子的背景变化那么我们用如下代码 ! alldiv[0].style.backgroundColor="black" img2.src=arr2[0] ...
2019-09-06 11:42:44 97
原创 css的transform和transition
transform用来控制元素2D、3D的变换,允许你旋转、倾斜、移动、缩放。transition用来设置元素的过渡效果。例如变化的时间。下面我们来举简单的例子说明:<body> <div class="s-m"> <a href="#"><i class="fab fa-facebook-f"...
2019-09-05 10:01:22 193
原创 页面轮播图的js写法
首先CSS和HTML就不说了。说一下需要注意的点1.自动播放 aotoChange2.手动点击切换 给每个链接绑定响应函数3.自动设置链接切换的相应 setA()4.左右翻页button的函数5.解决翻页上限,切换页面时候的css里面的hover是否管用等问题;做出如图的界面下面放上js的代码:<script type="text/javascript"> ...
2019-08-30 14:34:14 295
原创 map标签结合图片的相应切换
map标签和切换我们有时候呢,遇到一种情况,图片的某些特定区域需要加map,还需要这个图片组,我们该怎么处理呢?首先创建<img id="five" src="3.jpg" usemap="#lead" > <map name="lead" ><area shape="rect" coords="" target="_blank" href=""><...
2019-08-29 13:40:57 151
空空如也
TA创建的收藏夹 TA关注的收藏夹
TA关注的人