- 博客(85)
- 资源 (2)
- 收藏
- 关注
RSS订阅原创 React(3): React 实现卖座App
React实现卖座App娱乐项目，请勿当真 ！！！简介之前在学习React的时候，在 bilibili 看到 React 学习视频，于是马上着手 React版本的卖座App 开发技术栈// 前端React TypeScript Antd-Mobile Dayjs 3D-selection tailwindcss// 后端nestjs(websocket+jwt等)接口对接部分直接调用 卖座App 的 接口支付接口自己写的 nestjs 后端 , 用的是 支付宝沙盒很小部分用
2024-01-25 19:58:57
593
原创 vue3 + vue-cli5 添加 ts 全局语法兼容 和 eslint 兼容
vue-cli3 添加 unplugin-auto-importvue+ts 添加 eslint 全局配置
2023-05-21 22:56:28
479
原创 Vue2 和 Vue3 的渲染函数和函数式组件
之前习惯React的编程习惯，有时候感觉函数式编程真的好用 ， 这章就讲讲Vue怎么实现用渲染函数怎么实现类似的组件渲染函数一般指的是和Vue3的h函数如果你喜欢或者习惯函数式编程， 那可以学习下怎么函数式编程。
2023-03-03 11:23:27
1025
原创 Vue3(2)：Vue3使用socket.io
今天想使用eggjs和vue3搭建一个简单地聊天平台，发现普遍用的是socket.io(其实是eggjs的websocket在github第一个项目就是socket.io) ,而且socket.io和websocket并不相通socket.io和wesocket有点区别，区别大家可以点击下边连接了解下。
2022-11-13 22:28:05
2789
3
原创 Rollup(2): Rollup-plugin-commonjs 和 Rollup-plugin-node-resolve 的应用
rollup-plugin-commonjs 和 rollup-plugin-node-resolve
2022-08-25 20:24:30
2332
原创 Rollup(1): 安装 Rollup 以及 Rollup 和 Webpack 的区别
Rollup是一个JavaScript模块打包器，可以将小块代码编译成大块复杂的代码，例如 library 或应用程序。Rollup对代码模块使用新的标准化格式，这些标准都包含在 JavaScript 的ES6版本中，而不是以前的特殊解决方案，如CommonJS和AMD。ES6模块可以使你自由、无缝地使用你最喜爱的 library 中那些最有用独立函数，而你的项目不必携带其他未使用的代码。ES6模块最终还是要由浏览器原生实现，但当前Rollup可以使你提前体验。
2022-08-24 20:29:46
735
原创 webpack5中的 tree-shaking
tree-shaking简介通常用于描述移除 JavaScript 上下文中的未引用代码(dead-code)。它依赖于 ES2015 模块系统中的静态结构特性，例如 import 和 export。这个术语和概念实际上是兴起于 ES2015 模块打包工具 rollup。配置前置在这之前我们安装下，分析插件，可以更好配合我们看到效果执行 npm install webpack-bundle-analyzer打开 webpack.config.js ， 配置 webpack-bundl
2022-05-25 10:15:25
1495
1
原创 eggjs 实现增删改查
本章节是在于如何实现一个增删改查前置工作新建 app -> utils -> utils.js , 该方法是为了处理返回结果function responseFormat(status, data) { if (status) { return { code: 200, msg: '请求成功', data, success: true, }; } return { code: 500, msg.
2022-04-09 15:56:20
1998
原创 eggjs+mysql实现图片上传
eggjs 实现图片上传实现思路将图片上传到服务器某个文件夹，并且将数据存放数据库数据库建表，表结构为打开 config -> config.defalut.js ，先引入 const path = require('path'); , 再加入//文件存放路径和文件白名单 config.uploadDir = 'app/public/img'; config.multipart = { mode: 'file', fileSize: 1048576000,.
2022-04-09 15:12:30
2384
10
原创 egg.js 配置 mysql 以及简单登录实现
eggjs 的部署以及安装eggjs 添加 mysqlnpm install egg-mysql安装以后，打开 conifg -> plugin.js , 加入mysql: { enable: true, package: 'egg-mysql', },打开 config -> config.default.js，加入 config.mysql = { // 单数据库信息配置 client: { // host host.
2022-03-26 15:24:37
2815
2
原创 egg.js 配合 jwt 进行鉴权
eggjs 的部署以及安装egg + jwt 大概流程：1. 前端登录的时候，后端在返回用户信息的时候返回token给前端2. 前端拿到后放在 本地缓存 等方式3. 前端在请求除了登录接口的其他接口将token放在请求头返回给后端 安装 和配置 JWT控制台执行命令安装 jwtnpm install egg-jwt打开项目下 config -> plugin.js，加入配置 jwt: { enable: true, package: 'egg-jwt', },.
2022-03-26 14:27:47
987
原创 antd InputNumber 几种正则类型
只能输入正整数 <a-input-number v-model="form.quantity" :initialValue="0" :max="100000" :disabled="inputVisible" :min="0" :parser="value => value.replace(/[^0-9]/g, '')" type="number" step="1">&.
2022-02-24 11:39:55
739
原创 Vue2 父子组件挂载顺序
父子组件挂载顺序 父： beforeCreate => 父： created => 父： beforeMount => 子: beforeCreate => 子： created => 子：beforeMount => 子：mounted => 父： mounted更新过程(父组件自己)父：beforeUpdate => 父： updated更新过程(影响子组件)父：beforeUpdate => 子： beforeUpdate =&g.
2021-12-15 10:50:24
1804
1
原创 Vue2中Computed简单讲解以及实现
Computed 简单讲解上一回说了Vue的第二种watch也就是$Watch 接下来讲讲第三种 wachter也就是 computed(计算属性) 计算属性的特点 调用后执行依赖的数据改变会重新计算具有缓存性调用后执行，调用后执行，我们可以想想我们定义data的时候，一样是调用后执行，所以我们联想到老朋友Object.defineProperty(target, key, sharedPropertyDefinition)而且依赖的数据发生改变，我们可以想象到我们可以在每个依赖的数
2021-12-08 11:32:21
6239
原创 Vue2 的 Watcher解析以及简单实现
Watcher上回说到，有一个Watcher会一直去相应数据的notify。今天说说Vue的第二个Watcher也就是$watch这个watcher的回调函数不是updateComponent，不会去执行render等相关函数，只会执行自身定义的函数那问题来了，如果是我们设计。我们可以怎么设计这个函数能让在数据变化的时候执行他呢我们想到的就是，如果我也把他丢到数据的Dep的subs中，那么数据相应是Dep中的sub.notify不就可以一起执行updateComponent和$wa
2021-12-06 16:59:58
1129
原创 Vue2 中 Observer 一些探究
Observer 简单讲解源码目录 src\core\observer\index.jsexport class Observer { value: any; dep: Dep; vmCount: number; constructor (value: any) { this.value = value // 创建了一个dep实例 // 负责对象变更通知：新增属性或者删除属性，数组7个操作 this.dep = new Dep() this.
2021-12-04 17:25:50
1619
原创 Vue2数据发生变化到页面变化基本流程（附简单实现）
Vue的数据改变原理先将数据进行Obj.definedProperty() 进行绑定 ， 如果数据为数组或者对象进行绑定当页面开始渲染会定义updateComponent方法，这个方法主要就是为了调用render方法进入render的时候会执行页面使用的值，这时候会触发该数据的get属性开始进行绑定依赖，大概如图示之后通过patch方法将节点进行更新替换或者新增如果数据发生改变，会执行数据的set方法，这时候数据的Dep.notify会调用Dep.notify 回去调用绑定的Wat
2021-12-02 14:11:16
1780
原创 vue 中 patchNode和diff的简单讲解
Vue的patchNode函数这个方法在第二次渲染值的时候会调用 patchNode 继续 diff 比较function patchVnode( oldVnode, vnode, insertedVnodeQueue, ownerArray, index, removeOnly) { // 新老 VNode 相同，直接返回 if (oldVnode === vnode) { return; } if (isDef(vnode.elm) &
2021-11-28 20:54:38
753
原创 Chrome +Nodejs 调试 JS代码
Nodejs+Chrome 调试JS在谷歌的地址栏打开 chrome://inspect，并点击黄色部分，弹出窗口Devtools新建 chunk.js 文件import pkg from 'lodash';const { _ } = pkg;console.log(_.chunk(['a', 'b', 'c', 'd'], 2))打开控制台 输入 node --inspect-brk chunk.js这时候控制台会自动弹出然后就可以像以前一样正常打断点调试了参考:Node调
2021-11-18 16:39:26
350
原创 vant-form 统一校验表单
vant 官网 点击进入vant 官网提供了submit按钮，但是submit按钮实在很不好用（防抖节流用不了，独立样式不好用）vant 官网提供的form的校验方法 ：当我在输入: console.log(this.$refs.form)输出的是:发现了其中的validateAll，打断点进去，发现该方法用Promise.all去提交所有验证，如果发现errors.length大于1，返回reject，否则返回resolve validateAll: function va.
2021-11-08 11:19:39
7513
原创 深度优先遍历和广度优先遍历
最近看手写浅拷贝和深拷贝一直刷到用深度优先遍历和广度优先遍历，想起以前大学也学过东西，老是容易忘，特此记录下写法深度优先遍历var arrResult: Array<string> = []var testArr: Array<any> = [{ name: 'a', children: [{ name: 'a1', children: [{ name: 'a11' }, { .
2021-10-15 10:24:07
239
原创 antd a-form-model 动态表单 自定义校验柯里化
这里写自定义目录标题欢迎使用Markdown编辑器新的改变功能快捷键合理的创建标题，有助于目录的生成如何改变文本的样式插入链接与图片如何插入一段漂亮的代码片生成一个适合你的列表创建一个表格设定内容居中、居左、居右SmartyPants创建一个自定义列表如何创建一个注脚注释也是必不可少的KaTeX数学公式新的甘特图功能，丰富你的文章UML 图表FLowchart流程图导出与导入导出导入欢迎使用Markdown编辑器你好！ 这是你第一次使用 Markdown编辑器 所展示的欢迎页。如果你想学习如何使用Mar
2021-09-15 16:24:30
2513
原创 antdv实现 tags-Input
Tags-Input实现要求使用input和tags能够输入回车后显示支持校验是否填写代码<template> <div> <template v-for="(tag,index) in tags"> <a-tag :style="TgOptions.tagStyle" :key="index" :closable="closable" @close="(
2021-08-30 09:43:00
1823
原创 从输入url到页面输出的过程发生了什么以及优化方向
从输入url到页面输出的过程发生了什么浏览器渲染过程输入url 去浏览器等缓存中寻找资源(强缓存，协商缓存) 浏览器向DNS（Domain Name System）服务器请求解析该URL中的域名对应的IP地址 (cdn 分派) 解析后 将ip地址和默认端口80去服务器建立tcp链接 浏览器发出读取文件（URL中域名后面部分对应的文件）的HTTP请求，该请求报文作为TCP三次握手的第三个报文的数据发送给服务器 (三次握手) 服务器对浏览器请求做出响应，并把对应的html文本发送给浏览器
2021-08-23 15:57:20
184
原创 Pormise部分api（all,any,race,allSettled）
var p1 = new Promise((resolve,reject)=>{ setTimeout(()=>{ resolve('成功') },1000)});var p2 = new Promise((resolve,reject)=>{ setTimeout(()=>{ reject('失败') },2000)});var p3 = new Promise((resolve,reject)=&g
2021-07-24 14:43:38
447
空空如也
TA创建的收藏夹 TA关注的收藏夹
TA关注的人