自定义博客皮肤VIP专享

*博客头图:

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

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

博客底图:

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

栏目图:

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

主标题颜色:

RGB颜色,例如:#AFAFAF

Hover:

RGB颜色,例如:#AFAFAF

副标题颜色:

RGB颜色,例如:#AFAFAF

自定义博客皮肤

-+
  • 博客(118)
  • 资源 (5)
  • 收藏
  • 关注

原创 vue使用hook:声明周期来监听子组件的声明周期

在子组件本身自我监听/内部监听生命周期函数:<template > <div class="container"> 我是子组件 :{{num}} <button @click="changeFun">chhange按钮</button> </div></template><script>export default { data() { return { num: 1

2021-07-30 10:02:19 32 4

原创 &&、|| 的返回值

&&1:全true 返回&&右侧结果;2:左false右true结果false||1:全true 返回&&左侧结果;2:左false右true返回&&右侧结果;具体看下面例子: console.log(11 && 123); //123 console.log(false && 123); //flase console.log(11 || 123); //11 console.log(fa

2021-07-27 18:27:15 34 2

原创 Vue2.x和Vue3.x v-for中还可以这样解构赋值

通过node接口获取数据: const getQueryAllUserInfo = () => { axios.get("user/queryAllUserInfo").then(res => { res.code === "200" && (tableData.value = res.data); console.log(tableData.value); }); };在页面上使用:本质是对象的解构

2021-07-27 09:21:43 36

原创 Vue2.0、Vue3.0节流

节流:一段时间内只能执行一次意思:就是控制时间戳来达到第一次点击有效果后,下次点击必须在一定时间后才能再次点击有效果;核心思路:使用时间戳来实现;首先封装节流函数:我们这里不需要考虑this指向,统一使用箭头函数:/** * @param {*} awaitTime 时间戳 定时器时间毫秒数 * @param {*} fun 传入的函数 * @param {*} arrAgu 传入的函数的参数 */const stopUpDownFunList = (awaitTime=2000) =&

2021-07-22 10:48:03 42 5

原创 Vue3基础(23)___vue3非父子组件之间的通信

写一个事件集合对象,并写模拟触发函数、监听函数:evnetList:事件集合对象数组;name:每一个事件的标识;callbackFun:回调函数;const eventObj = { evnetList: [], on(callbackFun, name) { this.evnetList.push({ name, callbackFun }) }, emit(name, data) {

2021-07-21 10:31:53 35 2

原创 Vue3基础(22)___vue3中使用$forceUpdate

在vue2中直接this.$forceUpdate()在vue3中直接import { getCurrentInstance } from "vue";setup(){//解构赋值 设置别名that 也可不写 :that 直接ctx let {ctx:that} = getCurrentInstance() that.$forceUpdate()}

2021-07-19 17:13:04 87 1

原创 Vue3基础(21)___在axios.js中使用路由跳转

在vue2中我们只需要引入main.js即可获取this实例,直接this.$router.push('/login')首先在vue3中我们使用comAPI,但是在自己封装的js里面,我们不能使用useRouter ,useRoute,他们需要在setup中调用执行后才能用,于是给出解决办法:直接使用router实例: import axios from 'axios' import { ElMessage } from "element-plus"; import router from '

2021-07-19 13:42:15 72 2

原创 Vue3基础(20)___Vue3配置错误路由重定向写法

报错信息:Catch all routes ("*") must now be defined using a param with a custom regexp.原因是我在vue3项目中配置错误路由重定向的时候使用了vue2的写法,vue2的写法不再适用vue3:vue2重定向写法: //直接报错 { path: "*", redirect: "/login" },vue3重定向写法:1:

2021-07-18 17:03:01 41 2

原创 Vue3基础(19)___vite.config.js中配置路径别名

在vite.config.js中配置import { defineConfig } from 'vite'import vue from '@vitejs/plugin-vue'const path = require('path')export default defineConfig({ resolve: { alias: { "@": path.resolve(__dirname, "./src/assets/js"), }

2021-07-17 13:03:19 97 1

原创 node中循环异步的问题[‘解决方案‘]_源于map循环和for循环对异步事件配合async、await的支持

首县,我先说一下我这个虚拟的需求,我从数据库中查找所有用户的信息,包括省市县,但是我存储的时候是以省码、市码、县码code的形式来存储到数据库的,所有我取出来的时候还需要去数据库省市县表中查找对应的name,所有产生了这个问题。刚开始的思路很直接,很明确,就是找到所有人数据之后,进行循环,插入新属性,返回数据给前端。//所有 user 用户信息router.get('/queryAllUserInfo', async function (req, res, next) { let data.

2021-07-15 13:32:37 108 15

原创 node使用token来实现前端验证码和登录功能详细流程[供参考]=‘很值得‘

前两天使用cookie和session实现了这个流程,后来又添加了redis缓存,能在重起服务的时候保持session信息不丢失,实现持久化,但是每次都需要客户端和服务端的信息各自存储来尽进行比较,http请求是无状态的,所有我们可以模仿jwt || json web token 来实现整个流程我们。我们不再需要cookie和session这两个中间件来加持,所有我们规定:1.在验证码的时候发送前端一个token,用来标识验证码2.在前端用户登录的时候需要带上前一个token,然后对比验证码,账号.

2021-07-14 14:37:38 28

原创 node接收前端上传的图片,单文件、多文件同name、多文件不同name

使用模块:multernpm i multer使用var multer = require('multer')// 指定上传的文件路径 //这里是当前文件平级的public/imagesvar upload = multer({ dest: path.join(__dirname, 'public', 'images') }); 路由接收://提交用户照片router.post('/postPto', upload.single('files'), (req, res) =>

2021-07-13 17:50:50 40 2

原创 node中session持久化问题解决

session是node服务端存储的缓存,但是在重启项目后,我们的缓存会丢失,这样前端过来的标识比如cookie我们就比配不上了,我们想要达到前端登陆后不掉线的效果。为了解决这个问题,我们使用redis来解决。首先我们可以安装一下redis安装安装redis流程按照菜鸟教程的流程安装上即可。出现这个即可,表示安装成功。下面配置node,首先安装两个npm 包npm install redis connect-redis --save//引用sessionvar session = req

2021-07-13 10:03:24 25 1

原创 node登陆接口权限配置cookie-parser、express-session

主要核心:1.express-session2.cookie-parser3.node自定义中间件安装第三方插件npm i express-session cookie-parser我先描述一下我自己的需求逻辑,首先我在登录页面的时候就链接了一个验证码的接口,获取验证码:前端代码: getCaptchaCode(){ axios.get('/getCaptchaCode').then(res=>{ let getCaptchaCo

2021-07-12 16:52:33 84 11

原创 reac中引入animate.css

npm 下载 animate.cssnpm i animate.css或者 link引入在线连接<link rel="stylesheet" href="https://unpkg.com/animate.css@3.5.2/animate.min.css">使用:如果是npm下载需要在index.js中引入import 'animate.css'页面使用animated fadeInanimated :避必写fadeIn:样式名 render(){

2021-07-10 19:27:43 48 2

原创 ngrok 将内网地址转成外网地址,内网穿透

需求在windows本地开启了一个3003端口的服务,向让其他人访问我的本地3003端口中的接口,但是又不在一个局域网,使用ngrok 来实现本地IP转发官网下载地址官网地址https://ngrok.com/download下载地址https://bin.equinox.io/c/4VmDzA7iaHb/ngrok-stable-windows-amd64.zip下载后双击ngrok.exe文件输入ngrok.exe http 端口号ngrok.exe http 3003

2021-07-09 17:46:29 48 5

原创 React非父子组件之间的事件传递

核心代码:const eventObj = { evnetList: [], pushFun(callbackFun, name) { this.evnetList.push({ name, callbackFun }) }, dispath(name, data) { this.evnetList.forEach(element => { if (

2021-07-08 08:50:16 39 6

原创 Node服务连接Mysql数据库

新建一个express项目;express myNodeDome进入文件夹cd myNodeDome下载依赖npm i首先下载mysql包npm i mysql新建Db.js//引入mysql包const mysql = require('mysql')//链接配置var connection = mysql.createConnection({ host: 'localhost', //ip user: 'root', //用户名 password

2021-07-07 10:11:16 48 5

原创 研究Promise心得总结与思路总结

首先promise 在new的时候会传入一个函数,函数有两个参数,分别是以函数调用的形式返回成功结果和失败结果,在promise中,进入constructor会被立即执行 // executor/执行器 是传进 Promise中的回调函数 constructor(executor) { // 这个回调函数会被立即执行,判断是否应该对状态进行更改 executor(this.resolve, this.reject); }相当于我们传入的两个参数,变成了两个函数,当我门执行的

2021-07-06 11:17:13 64 7

原创 webpack的基本使用

webpack概念 **什么是webpackWebpack 前端资源模块化管理和打包工具。可以将许多松散的模块按照依赖和引用关系打包成符合生产环境部署的前端资源。并将按需加载的模块进行代码分隔,等到实际需要的时候再加载。webpack 运行在node环境上的一个 包​ // webpack 可以把前端的任何资源, 当做模块, 来进行打包整合, 也可以支持不同的代码(ES6模块代码, CSS文件, LESS文件, 图片…)​ // 编写前端代码后, 可以被webp

2021-07-05 16:33:39 44 5

原创 element table配合from实现双击可编辑表格

直接贴代码<template> <el-table :data="tableData" border style="width: 90%;margin:0 auto" @row-dblclick="dbclick"> <el-table-column prop="date" label="日期"></el-table-column> <el-table-column prop="name" label="姓名" align="cen

2021-07-02 09:41:11 69 11

原创 JS判断点击是单击还是双击

<!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <meta http-equiv="X-UA-Compatible" content="ie=edge"> <title>点击

2021-07-01 18:26:19 42 2

原创 Vue3基础(十ba)___在css中使用props或者计算属性的变量,来实现动态样式

主要使用到了css3中var<template > <div class="container"> <p class="p1" :style="{'--width':width,'--height':height,'--background':bgc,...objStyle}" >obj2====={{obj2}}</p> </div></template><script&gt

2021-07-01 16:45:47 45 1

原创 echarts地图数据信息流向图效果

先看效果:前提npm i echarts代码:<template> <div class="echarts"> <div :style="{height:'500px',width:'500px'}" ref="myEchart"></div> </div></template><script>import echarts from "echarts";var geoCoordMap = {

2021-06-29 08:53:20 97 8

原创 Vue2 sync 修饰符

sync 修饰符sync就是一个语法糖,其实还是使用了父子组件传值和方法 <v-children :zjq.sync="zjq"></v-children> //等同于 <v-children v-bind:zjq="zjq" v-on:update:zjq="e =>zjq=e"></v-children> 所以在子组件中触发 update:zjq 这个父传子的方法即可父组件<template > <di

2021-06-28 16:44:56 58 9

原创 Vue2.0、Vue3.0分别使用v-model封装组件[Vue必会]

核心:v-model实现是通过默认自定义属性value,自定义方法input(Vue2)实现,自定义属性modelValue,自定义方法input(Vue3)实现Vue2.0关系: <v-child v-model="numm"></v-child> <!-- 等同于 --> <v-child :value="numm" @input="(e) => (numm = e.target.value)" &g

2021-06-27 21:47:06 78 3

原创 JS循环for、for...of、for...in

循环数组 let arr = [1, 2, 3, 4, 5, 6, 7, 8] //1 //2 //3 //4 //5 //6 //7 //8 // for for (var i = 0; i < arr.length; i++) { console.log('arr[i]===', arr[i], "===

2021-06-25 21:20:09 32

原创 Element table组件封装 核心:父子组件传值、传方法

element最近在APP上使用了element的表格,原因是vant上没table组件,所以在element的基础上简单的封装了一个组件组件 tableElem.vue<template > <el-table id="immunityTadle" size="mini" :data="tableData" border :max-height="clientHeight" style="width: 100vw" @r

2021-06-24 11:04:47 133 4

原创 JS基础 if和switch区别

if let flag = 1 >2 ? true : false if(flag){ console.log('我是true==='); }else{ console.log('我是false==='); } if(1>2){ console.log('我是1>2==='); }else if(4>3

2021-06-23 19:59:12 62 4

原创 html5 video

videohtml <video src="https://vd2.bdstatic.com/mda-mfm2xk18c3m40aya/sc/cae_h264/1624327792685879275/mda-mfm2xk18c3m40aya.mp4?v_from_s=hkapp-haokan-tucheng&auth_key=1624346114-0-0-22f5e51fdeac02bf7bf66921ed71c55c&bcevod_channel=searc

2021-06-22 16:30:01 58 4

原创 JSON.stringify undefined自动过滤

JSON.stringifyJSON.parse let obk = { name:"zjq", age:"", habby:undefined, run:null, arr:[{arrr:undefined}] } let aa = JSON.stringify(obk) console.log(aa); console.log(JSON.par

2021-06-22 11:04:52 65 2

原创 ES6解构赋值

对象 let obj = { name: "zjq", age: "18", myhabby: { habby1: '唱歌', habby2: "跳舞", habby3: "篮球" } } let { name, age, myhabby } = obj

2021-06-21 22:50:54 38 3

原创 Vue3基础(十qi)___安装使用axios

下载axiosnpm i axios --save引入main.js下面标注 1==》2import { createApp } from 'vue'import App from './App.vue'import './index.css'import axios from 'axios' //1 引入import { createRouter, createWebHashHistory } from 'vue-router'const HelloWorld = () =>

2021-06-20 00:18:44 56 2

原创 JS事件委托

事件委托将事件委托给父级执行,这样在子级比较多的时候就可以不必为每一个自己增加相同功能的事件<template > <div class="container"> <ul @click="zjqFun"> <li v-for="item in obj" :key="item">{{item}}</li> </ul> </div></template><script

2021-06-18 16:30:59 40 4

原创 JS之concat方法

concat我们用于拼接数组,参数可以是字符串、数字、对象或者数组let arr = [1,2,3]arr.concat([2,3,4,5,6],1234,5678,90,24,[22,[2345]])let arr = [1,2,3]arr.concat(...[2,3,4,5,6],1234,5678,90,24,[22,...[2345]],{a:1},'aaa',true)...

2021-06-16 10:48:13 64 8

原创 JS的几种继承方式

JS的几种继承方式

2021-06-15 20:41:58 47 3

原创 Vue在子组件中判断父组件是否传来事件

vm.$listenersgetPullPageBottom 父级传来的事件名(我自己定义的事件名,自己写自己的)@父级传来的事件名 = ”父级事件“在子组件打印 console.log(this.$listeners['getPullPageBottom'],'111')有的话 ,会打印函数体没有的话,会打印undefined//this.$listeners['getPullPageBottom'] if (!this.$listeners['getPullPageB

2021-06-11 17:52:02 98 8

原创 JS中this指向以及手写call、apply、bind___视频

JS中this指向以及手写call、apply、bind

2021-06-11 09:02:31 34

原创 JS变量提升和函数提升___视频

JS变量提升和函数提升

2021-06-10 20:35:56 44 1

原创 this指向的几种情况以及js简单实现call、apply、bind

call Function.prototype.mySelfCall = function (obj, ...arrList) { if (typeof obj != 'object') { obj = window } let that = this; //前边的函数 obj.fn = that; obj.fn(...arrList)

2021-06-09 10:20:24 69 2

终极版本五子棋.html

javascript五子棋游戏

2021-08-02

node+es6重点总结.xmind

详细总结了js、node、es6、webpack、mysql等知识点,有利于自己知识体系的搭建,搭建自己的知识网络。

2020-11-12

timeGeneration.js

获取农历时间

2021-03-23

webpack打包基础知识点与es6知识点.xmind

webpack打包基础知识点,各种插件和加载器,方便了webpack打包,es6的重要知识点总结,加油。

2020-11-12

Java基础知识总结.docx

数据类型分类、包的概念、访问修饰符、this关键字、super关键字、对象创建的执行顺序、Java类的生命周期、执行顺序

2020-11-12

空空如也

空空如也

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

TA关注的人 TA的粉丝

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