- 博客(29)
- 收藏
- 关注
RSS订阅原创 基于vue3 + TS项目中安装ESLint工具
执行完命令后，根目录下生成.eslintrc.cjs文件。在项目package.json中添加下面的脚本。在终端运行npm run link。
2024-02-29 12:41:20
527
原创 vue实现拖拽指令 v-drag
描述实现元素拖拽功实现创建拖拽指令文件 drag.js// directives/drag.jsimport Vue from 'vue';Vue.directive('drag', { bind(el, binding) { el.setAttribute('draggable', true); el.addEventListener('dragstart', (e)=> { el.style.position = 'fixed'; /
2022-04-27 14:19:42
624
原创 轮询请求 定时发送请求
1.业务分析后端创建一个任务，该任务的结果无法快速的计算出来响应给前端，这个时候需要前端定时去查询任务状态，直到任务计算结束为止。2.代码实现/** * polling 轮询请求 * * @param {String} type 请求类型 * @param {string} url 请求路径 * @param {Object} params 请求参数 * @param {function} isPollingFn 回调函数，该函数返回Boolean值，true继续请
2022-03-18 10:13:17
1427
原创 export ‘default‘ (imported as ‘mod‘) was not found in ‘../node_modules/ts-loader/index.js
编译警告：如何解决：在webpack配置文件里给ts-loader添加options: { appendTsSuffixTo: [/.vue$/] }, 如下：// webpack.config.js module: { rules: [{ test: /\.tsx?$/, loader: 'ts-loader', options: { appendTsSuffixTo: [/\.vue$/] }, exclude: /node-module
2022-02-10 11:33:59
2598
原创 使用vue-class-component @Component时，Module parse failed: Unexpexted charactor ‘@‘
问题描述vue2+ts项目中，使用vue-class-component装饰器之后，webpack编译报错：‘Module parse failed: Unexpexted charactor ‘@’’// App.vue<template> <div> {{ username }} </div> </template><script>import Vue from 'vue'import Component f
2022-02-10 11:12:31
1367
原创 vue2 + typescript(ts) cannot find module ‘./xx.vue‘找不到模块‘./xx.vue’
问题描述在vue2+ts项目中，使用 import App from ‘./App.vue’ 报错，说找不到模块"./App.vue"问题分析ts文件不识别vue文件，需要对vue文件做模块声明如何解决在src 目录下创建vue-shims.d.ts文件declare module '*.vue' { import Vue from 'vue'; export default Vue}...
2022-02-09 16:48:25
1034
原创 vue2+typescript(ts) 解决找不到模块“vue“
问题描述vue2 + ts项目中，main.ts中用 import Vue from “vue” 引入vue模块时，报错: “找不到模块‘vue’”解决方案方案一： 在tsconfig.json中配置"moduleResolution": “node”// tsconfig.json{ “compilerOptions”: { ... "moduleResolution": "node", }}方案二：使用node 中require()引入vue模块方案三：在tsconfi
2022-02-09 16:33:10
2023
原创 css clip-path裁剪多边形
效果：代码：.block { width: auto; height: 58px; background: #498294; border: 2px solid #45d2fb; box-shadow: inset 0 0 20px 4px #74b7cc,0 2px 6px 0px rgba(17 37 70 / 60%); clip-path: polygon(0 100%, 10% 0, 100% 0, 100% 100%); &:
2021-10-29 14:28:24
319
原创 Vue style module用法
目录使用场景标签< style module>的用法开启css module在< style lang="scss"> 上添加module属性在模板中使用标签< style module="xx">的自定义用法设置模块打包匹配规则在< style lang="scss"> 上添加自定义模块在模板中使用相关链接使用场景设置局部动态样式，定制主题可作为模拟scoped css的替代方案标签< style module>的用法开启css m
2021-10-27 15:11:13
2668
原创 require.context的使用方法，实现模块化自动加载
require.context()require.context() 函数可以创建自己的上下文；该函数可以通过自定义规则在一个目录内匹配文件；webpack会在代码构建的时候解析该函数。语法如下：require.context( directory, //要检索的目录， 目录可以是相对路径 (useSubdirectories = true), // 是否检索子目录 (regExp = /^\.\/.*$/), // 匹配文件的正则表达式 (mode = 'sync') // 同步
2021-09-01 15:18:46
412
原创 秒转换成 x天x小时x分钟x秒 的格式
format(time) { let days = (num)/(24*3600); let hours = Math.floor((time)%(24*3600)/3600); // let minutes = Math.floor((time)%3600/60); let second = Math.floor((time%60); return `${days}天${hours}小时${minutes}分钟${second}秒 `
2021-07-25 16:38:58
364
原创 git branch
官方文档: https://git-scm.com/docs/git-branch/zh_HANS-CN命令描述git branch查看现有分支git branch --list查看现有分支git branch -r查看远程分支git branch -a查看本地和远程分支git branch <branch name>创建分支git branch -d <branch name>删除分支git branch -v
2021-07-10 22:36:55
77
原创 升级本地node 和 npm版本
升级本地node版本查看当前本地node版本node -v清理node缓存npm cache clean -f安装node管理工具nsudo npm install n -g升级node到指定版本//安装最新版本n latest// 安装稳定版本n stable// 安装或使用某一个版本n 8.2.0// 删除某个版本n rm 6.7.0升级本地npm版本npm install npm@latest -g...
2021-07-07 17:36:46
699
原创 angualrjs Error: $location:nobase $location in HTML5 mode requires a ＜base＞ tag to be present!
为什么会遇到$location:nobase errorangularjs1.1.5v升级到1.8.0v的时候会抛出这个问题。问题的详情请参考: Error:location:nobase问题分析如果在ngApp.config()中使用了$locationProvider.html5Mode(true)，那么angularjs 1.3.0v 之后的版本需要设置一个base URL。没有设置他的话就会抛出上面的error了。解决方案如果你的base URL是’/’(e.g. https://mya
2021-06-04 17:46:19
204
原创 浏览器回流(重排)和重绘?
回流和重绘是什么?浏览器是由两个引擎来处理页面工作的, 一个是渲染引擎, 一个是JS引擎. 不同的浏览器它的渲染引擎是不一样的.在渲染引擎中, 会同时解析html 和 css, 最后会合并成渲染树(render tree), 浏览器会根据渲染树进行布局, 在布局时, 会精确的捕获节点的确切位置和尺寸, 所有的测量单位都会转化为屏幕上的绝对像素, 这一现象称为回流(重排).在布局完之后, 会立即执行paint stup事件, 将渲染树转换成屏幕的像素, 这个过程称为绘制(重绘), 最后将页面显示在屏幕上
2021-05-31 21:43:10
167
原创 什么是BFC?
对BFC的理解BFC全称为 block formatting context, 块级格式化上下文. 它是一个独立的渲染区域, 区域内的元素不会在布局影响到外部元素.例如: 两个元素上下margin重叠, 则需要对两个元素实现BFC, 使得两个元素样式互不干扰等等如何触发BFC?根元素()浮动元素 (float 不是none)绝对定位元素 (position为absolute或fixed)display为 inline-block、table-cell、table-caption、table、
2021-05-31 20:50:27
203
原创 Mockjs -Mock.mock()
文章目录Mock.mock(template)Mock.mock( rurl, template )Mock.mock( rurl, function( options ) )Mock.mock( rurl, rtype, template )Mock.mock( rurl, rtype, function( options ) )Mock.mock(template)根据数据模板生成模拟数据。var template = { 'string|2': 'value', 'number1
2021-05-11 15:53:50
571
原创 [email protected]: Permission denied (publickey) issue for Mac
首先用 ssh -vT [email protected] 测试一下，会去你用户目录下面找公钥文件, 有打印出下面的信息,这说明/User/用户名/.ssh/ 下面去寻找公钥文件，当前用户目录下面的确没有公钥文件debug1: No more authentication methods to [email protected]: Permission denied (publickey).执行: cd /Users/xxx/.ssh/执行: ssh-keygen -t rsa -b 4096 .
2021-04-26 20:27:26
480
原创 Redux和Vuex的一些总结
Redux、Vuex是什么?Redux和Vuex都是用于做状态管理的. 你可以将Redux 和 React或者其他view框架结合使用, 为他们的项目做状态管理. Vuex是专门为Vuejs应用程序开发的状态管理程序.Redux 官网Vuex 官网Redux、Vuex原理图ReduxVuexRedux、Vuex核心概念对比redux核心概念action: 描述了怎么样改变store, action实际不会修改store, 通过中间件可以进行异步请求reducer: 是一个纯函数, 可
2021-04-24 20:41:51
230
原创 JavaScript Hijacking
概述使用Javascript 符号传输敏感数据的应用程序可能容易受到javascript劫持的攻击,这使得未经授权的攻击者能够从易受攻击的应用程序读取机密数据.推荐所有使用javascript进行通信的程序都应采用以下防御措施:拒绝恶意请求: 在每个返回javascript的请求中包含一个难以猜测的标识符, 例如会话标识符. 这将通过允许服务器验证请求的来源来抵御跨站点请求伪造攻击.阻止直接执行javascript响应: 在响应中包含一些字符, 这些字符可以防止在不进行修改的情况下成功的将影响传
2021-03-09 11:19:13
1057
原创 在React中实现防抖节流
import React, { Component } from 'react';class Debounce extends Component{ constructor(props) { super(props); } inputValue = (content) => { console.log(content); } debounce = (fun, wait) => { return (...rest) => { le
2021-01-28 14:18:31
1112
原创 CSRF angularjs解决方案
什么是csrfCSRF全拼为Cross Site Request Forgery，译为跨站请求伪造。指攻击者盗用了你的身份，以你的名义发送恶意请求。包括：以你名义发送邮件，发消息，盗取你的账号，甚至于购买商品，虚拟货币转账…造成的问题：个人隐私泄露以及财产安全。如何使用angularjs的CSRF解决方案在angularjs $http 中有两个xsrf相关配置，一个是xsrfCookieName, 另一个是xsrfHeaderName。只要有使用 $http 的地方，都会将cookie中的
2020-11-19 16:16:46
428
原创 JS 函数闭包 闭包实例
什么是闭包闭包是指有权访问另一个函数作用域中的变量的函数.也就是说:可以在函数外部访问函数内部的局部变量.让这些变量始终保存在内存中, 不会随着函数的结束而自动销毁.闭包例子以下是‘后盾人教程’的笔记梳理使用闭包获取区间商品 let fruits = [{'name': 'apple','price': 6},{'name': 'banana','price': 10},{'name': 'orange', 'price': 20}]; function between(a, b)
2020-11-01 16:27:51
310
1
原创 手动创建angular7项目
创建一个项目文件夹：my-app.在该文件夹下创建一个package.json文件，该文件是npm的包文件。{ "name": "insitu", "private": true, "version": "0.0.0", "dependencies": { "@angular/common": "^7.0.0", "@angular/compiler": "^7.0.0", "@angular/core": "~7.0.0", "@angular/platform-b.
2020-10-14 23:13:02
246
1
原创 前端 js jQuery ajax实现文件流下载, 下载doc,xsl等文件内容乱码问题
问题描述：前端通过jQuery ajax接受后端的文件流，前端下载文件后内容乱码后端代码：Header("Content-type: application/octet-stream");Header("Accept-Ranges: bytes");前端代码：$.ajax({ type: "POST", url: url, xhrFields: { responseType: "blob" }, success: (response) => { const blob
2020-09-09 19:28:34
9826
2
原创 js blob导出文件 文件下载 中文乱码的问题
项目场景：后端解密文件以流的形式返回给前端， 前端需要读取流文件实现文件下载问题描述：下载含有中文的文件时，中文乱码@Override const data = '测试下载文件\n' + 'wewewe\n'; const blob = new Blob([data], {type: 'text/plain'}); const blobUrl = URL.createObjectURL(blob
2020-09-08 15:46:59
6786
原创 docx, xlsx, pptx, csv 的MIME 类型是什么？
在下面的表格中查找所需要的的MIME type.将来的详情请看: Register the 2007 Office system file format MIME types on servers.File extensionMIME type.docxapplication/vnd.openxmlformats-officedocument.wordprocessingml.document.docmapplication/vnd.ms-word.document.mac
2020-09-08 10:55:08
3783
1
空空如也
空空如也
TA创建的收藏夹 TA关注的收藏夹
TA关注的人