- 博客(32)
- 收藏
- 关注
RSS订阅
原创 Vue3.0+vueX+router创建到使用
创建项目创建vue3.0最方便的两种方式。控制台输入vue ui 可视化创建项目是我常用的方式直接可视化创建配置依赖。使用vite工具创建项目，具体步骤如下：vite优点详细说明[https://www.zhihu.com/question/394062839/answer/1496127786]全局安装vitenpm i -g create-vite-app创建vite项目create-vite-app vue3-demo运行vite项目npm inpm run dev
2021-01-08 14:19:52
584
原创 promise 原理
class KPromise { constructor( ) { this['[[PromiseState]]'] = "pendding"; this['[[PromiseResult]]'] = undefined; // handle(val=>{ // this['[[PromiseState]]'] = "fulfilled"; // this['[[PromiseResult]]
2022-02-28 10:40:21
126
原创 JS 判断设备来源
// 判断移动端设备function deviceType(){ var ua = navigator.userAgent; var agent = ["Android", "iPhone", "SymbianOS", "Windows Phone", "iPad", "iPod"]; for(var i=0; i<len,len = agent.length; i++){ if(ua.indexOf(agent[i])>0){
2022-02-14 15:18:22
474
原创 js获取当前时间上一周后一周日期
/** * 根据当前 显示时间设置当前时间 之前或之后指定 n天的时间 * @param {Object} n 当前时间前后n天 * @param {Object} bcsj 当前显示时间 */ getBeforeDate(n, bcsj) { var n = n; // var d = new Date(bcsj.replace(/-/g, "/")); var d = bcsj; var year
2022-01-04 14:24:31
1199
原创 css filter 滤镜
注意： Internet Explorer 不支持 filter 属性。//原图<img src="pineapple.jpg" alt="Pineapple" width="300" height="300"><img class="blur" src="pineapple.jpg" alt="Pineapple" width="300" height="300">filter: blur(4px)//图2filter: brightness(0.30)//图3fil
2021-12-16 14:37:11
1218
原创 vue + el-table+draggable实现课表单元格拖拽
vue + el-table+draggable实现课表单元格拖拽<template> <div class="schedule"> <el-table :data="tableData" border style="width: 100%; font-size: 16px"> <el-table-column prop="index" label="节次" width="80"
2021-11-30 17:04:24
7047
原创 vue3D球形文字滚动
vue3D球形文字滚动<template> <div class="tagBall" ref="tagBall" @mouseover.self.stop="mouseOver" @mouseleave.self.stop="mouseLeave" > <el-tooltip v-for="(item, index) in wordList" :key="index" class="tag"
2021-11-17 14:02:14
2035
原创 合并多张canvas
合并多张canvas//获取canvaslet canvas1 = document.querySelector("canvas");let canvas2 = "";await html2canvas(document.querySelector("jmnodes")).then((canvas) => { canvas2 = canvas;});//创建新的canvaslet newCanvas = document.createElement("canvas");newCan
2021-11-01 10:08:23
2839
1
原创 js随机颜色
js随机颜色getRandomColor() { const condition = ["ffffff", "000000"]; var rand = Math.floor(Math.random() * 0xffffff).toString(16); if (rand.length == 6 && !condition.includes(rand)) { return rand; } else { retur
2021-10-28 17:38:24
126
原创 cross-env环境配置
npm install --save-dev cross-env//配置npm 命令build:staging": "cross-env NODE_ENV=production vue-cli-service build --mode staging# 测试默认配置ENV = 'staging'VUE_APP_BASE_API = 'http://192.168.188.208:30000'VUE_APP_PJ_API = 'http://192.168.188.208:30001'V
2021-10-25 13:31:10
861
原创 vue+echarts-liquidfill实现水球图
vue+echarts-liquidfill实现水球图<template> <div class="polo-bix" :id="id" :style="{ width: Width, height: Height }" ></div></template><script>import "echarts-liquidfill";import echarts from "ec
2021-05-31 17:04:37
740
原创 vue render函数基础使用
vue render是直接渲染成dom树没有编译过程。渲染更高效、方便逻辑处理。vue render分两种情况使用在组件中直接通过render创建组件，这种情况可以结合template一起使用通过render创建组件拥有template组件全部方法属性components:{ NodeContent: { props: { level: { type: Array }
2021-04-13 14:41:55
147
原创 vue.config.js配置参考
// vue.config.jsconst path = require(‘path’);const CompressionWebpackPlugin = require(“compression-webpack-plugin”); // 开启gzip压缩， 按需引用const productionGzipExtensions = /.(js|css|json|txt|html|ico|svg)(?.*)?$/i; // 开启gzip压缩， 按需写入const BundleAnalyzerPlugi
2021-04-13 11:26:58
198
原创 输入n个数组，返回交集、仿Object.assign的功能、仿Array.map的功能
输入n个数组，返回交集let a = [2, 3]; let b = [2, 3, 5]; let c = [2, 3, 5, 6, 7]; function intersect(...args) {/* */ if (args.length === 0) { return []; } if (args.length === 1) { return args[0]; } return args.reduce((prev, nex
2021-03-09 09:24:46
397
原创 JS时间格式转换处理
JS时间格式转换处理export function parseTime(date, formatStr) { if (!date) { return '--' } let d date = date || new Date() if (date instanceof Date) { // 传入Date对象 d = date } else if (typeof date === 'string') {
2021-02-02 15:27:55
178
原创 webpack配置全面讲解
webpack文章目录webpack1、webpack 是什么？2、安装3、使用4、打包模块4-1、入口文件4-2、打包命令5、打包配置6、核心配置6-1、mode6-2、entry6-3、output7、深入7-1、执行简要流程8、Loaders8-1、raw-loader8-2、file-loader8-3、url-loader8-4、css-loader8-5、style-loader9、Plugins9-2、HtmlWebpackPlugin9-3、clean-webpack-plugin9-4、
2021-01-11 10:58:09
319
原创 node+koa链接mysql
const Koa = require('koa');const KoaStaticCache = require('koa-static-cache');const KoaRouter = require('koa-router');const mysql = require('mysql2');const koacors = require('koa-cors')const KoaBody = require('koa-body');// 链接数据库const connection =
2020-12-30 14:11:02
193
5
原创 jsonp解决跨域
前后端交互 — jsonp知识要点跨域解决jsonp原理及封装jsonp服务器搭建jsonp实际运用ajax问题浏览器同源策略同源策略是浏览器的一个安全功能，不同源的客户端脚本在没有明确授权的情况下，不能读写对方资源源 ：协议、域名和端口号跨域不受同源策略影响的资源的引入，，，jsonpJSONP*(JSON with Padding)解决跨域问题；可以让网页从别的域名（网站）那获取资料，即跨域读取数据。jsonp原理通过script
2020-12-29 11:13:17
139
原创 上传进度
上传进度let xhr = new XMLHttpRequest(); xhr.open('post', 'http://localhost:8080/uploads', true); xhr.onload = function() { console.log(xhr.responseText); } xhr.upload.onprogress = function(e) {//定时返回已上传的大小和总文件大小
2020-12-27 17:21:27
92
原创 node上传文件
node上传文件node前端渲染nodeconst Koa = require('koa');const KoaRouter = require('koa-router');const KoaBody = require('koa-body');const cors = require('koa-cors')const KoaStaticCache = require('koa-static-cache');const fs = require('fs');const app = ne
2020-12-27 16:26:27
229
1
原创 实现vue中拖拽
<div class="Slider" v-drag>v-drag是自定义指令directives: { drag: { // 指令的定义 bind: function (el) { let odiv = el; //获取当前元素 el.onmousedown = (e) => { //算出鼠标相对元素的位置
2020-12-21 10:58:11
84
原创 防抖节流
防抖节流<!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8"> <title>Title</title> <style> .box,.box1{ width: 1000px; height: 200px; background-color: b
2020-12-21 10:52:02
133
原创 瀑布流布局
* { margin: 0; padding: 0; } .item { float: left; display: flex; justify-content: center; align-items: center; font-size: 30px; font-weight: 700; color: aliceblue; mar.
2020-12-21 10:47:53
88
原创 js常用高阶函数
1、maplet arr = [10,20,22,30,40]let newarr = arr.map(item => return item*2)//20.40.44.60.8`在这里插入代码片`0var arr = [1, 2, 3, 4, 5, 6, 7, 8, 9]; arr.map(String); // ['1', '2', '3', '4', '5', '6', '7', '8', '9']2、reducevar arr = [1, 3, 5, 7, 9];arr.red
2020-12-21 10:44:23
185
1
原创 media 媒体查询
@media screen and (min-width:1001px) { html{ font-size: 30px; }}/*大于800 小于一千*/@media screen and (min-width:800px) and (max-width: 1000px) { html{ font-size: 20px; }}/*小于500*/@media screen and (max-width:500px) { ht
2020-12-21 10:38:10
171
原创 node koa源码解释
再次思考：从浏览器输入 URL 到页面展示过程的过程中发生了什么？通过前面的基础学习，我们了解了基于 Web 的应用基本流程：[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-LWuReu4F-1608449778043)(./assets/e9ac4df2f8db06466fee94cad4401522.svg)]通过上图不难发现，无论具体应用功能如何变化， 服务端 处理任务核心三个步骤：③、④、⑤ 中，③ 和 ⑤ 的模式基本是固定的（因为HTTP协议规范了），而 ④ 是
2020-12-20 15:37:02
226
1
原创 从0-1带你理解掌握nodejs
# nodejs从0-1从浏览器输入 URL 到页面展示过程的过程中发生了什么？WebServer基于 Node.js 构建 WebServer创建 WebServer端口的意义端口监听处理用户请求request 事件http.IncomingMessage 对象http.ServerResponseurl 的作用req.urlres.write AND res.end静态资源 Vs 动态资源静态资源动态资源静态资源代理（处理）服务头信息Content-TypeMIME动态资源处理模板引擎Nunjucksq
2020-12-20 15:35:41
168
1
空空如也
空空如也
TA创建的收藏夹 TA关注的收藏夹
TA关注的人