web前端
HTML5 前端
夏日米米茶
这个作者很懒,什么都没留下…
展开
-
解决引入lodash库(或其他第三方库)时TS报错:TS7016: Could not find a declaration file for module lodash
可以在 src 目录下的 “shims-vue.d.ts” 文件里增加如下代码。原创 2023-08-22 18:16:00 · 1340 阅读 · 0 评论 -
H5页面可以引用的一些JS常用小方法
写了一些单个的小页面可以引入的常用js方法,省了自己手写的时间,需要时可以保存为js文件然后直接引用。原创 2023-06-07 15:29:37 · 671 阅读 · 0 评论 -
解决 npm ERR! node-sass 和 gyp ERR! node-gyp 报错问题
node-sass报错解决方法原创 2023-02-09 12:12:21 · 9657 阅读 · 0 评论 -
移动端文字大小自适应
移动端由于只需要考虑苹果和安卓系统,所以字体不用设置太多,如无特殊需求,手机端无需定义中文字体,使用系统默认,苹果系统默认中文字体是Heiti SC,android 系统默认中文字体是Droidsansfallback,2个系统的英文字体和数字字体可使用 Helvetica 。body { font-family: "Heiti SC","Droidsansfal...原创 2018-07-24 16:51:08 · 5914 阅读 · 1 评论 -
vue-cli 项目热重载(热更新)失效的解决方法
打开 node_modules 下的这个文件 sockjs-client\dist\sockjs.js原创 2022-11-04 15:47:14 · 7534 阅读 · 1 评论 -
vue3的reactive重新赋值无效的问题
关于 vue3 reactive 重新赋值的问题响应式代理转载 2022-11-02 19:14:30 · 3212 阅读 · 0 评论 -
转载:VUE3使用keep-alive页面切换时报错:TypeError: parentComponent.ctx.deactivate is not a function
TypeError: parentComponent.ctx.deactivate is not a function转载 2022-11-01 19:03:01 · 1042 阅读 · 0 评论 -
git commit 报错 “invalid path” “make_cache_entry failed for path” 解决方法
解决git命令报错:make_cache_entry failed for path原创 2022-09-05 17:41:33 · 1255 阅读 · 0 评论 -
Vue3使用 mock.js 模拟后端数据请求的方法
mock.js官网:mockjs.com/1、首先用npm安装npm install mockjs2、然后在src目录下新建一个目录叫“mock”,再目录下新增一个index.js文件作为mock的配置// 引入Mock文件,由于 Vite 不支持require()方法所以改用importimport * as Mock from 'mockjs'// 模拟返回的数据格式,可以自己随便定义const result = { status: 200, reset: '0',原创 2021-08-17 15:20:21 · 2873 阅读 · 0 评论 -
Vue3使用axios的配置教程
axios中文网站:axios-http.com/zh/一、安装axiosnpm install axios --save二、配置axios,添加拦截器在src目录下新建一个request文件夹,在里面新建index.ts(或者.js)文件,编辑代码如下:import axios from 'axios'// 创建一个 axios 实例const service = axios.create({ baseURL: '/api', // 所有的请求地址前缀部分 timeout: 6000原创 2022-03-23 12:24:52 · 46437 阅读 · 18 评论 -
Vue3的setup函数中添加组件name的方法
在使用VUE3.0的setup函数时,发现无法像2.0那样添加name,解决的方法是新增一个 script 标签:<script lang="ts">export default { name: "xxxx",}</script><script setup lang="ts">// 你的业务代码</script>还可以直接在setup后边加name<script setup lang="ts" name="xxxx">/原创 2022-03-22 18:17:41 · 4618 阅读 · 0 评论 -
解决vscode红色波浪线的ts报错:找不到模块“store” ts(2307),不识别@别名路径
使用TS构建vue3项目时,如果使用 import ******* from ‘*********’ 发生红色波浪线报错,可以修改 tsconfig.json 文件:// 在 compilerOptions 对象里添加 baseUrl 和 paths{ "compilerOptions": { "target": "esnext", "useDefineForClassFields": true, "module": "esnext", "moduleResoluti原创 2022-03-22 14:44:54 · 10495 阅读 · 4 评论 -
window.open在新窗口打开页面时被浏览器屏蔽的解决方法
使用 window.open() 方法打开新窗口会被浏览器拦截,可以绕开这个拦截机制,利用异步调用并使用变量后赋值url的方法,代码如下:$.ajax({ url:'your url', type: 'get', success: (data, status, xhr) => { // 新建变量,实例化window.open,然后再赋值url const _window = window.open() _window.location.href = 'your url' }})原创 2022-03-21 18:35:48 · 1387 阅读 · 0 评论 -
使用Promise.all等待多个promise请求的返回结果
使用js的Promise对象的 Promise.all 方法// 定义一个数组变量,用来存放多个promise请求let promiseAry = []// 定义一个用来循环的数组,用来存放不同的请求参数const dataList = [ {id: '1', name: 'Tom'} ]// 循环datalist,给每个promise请求添加参数this.dataList.forEach(item => { const _params = { 'name': it原创 2021-12-22 11:47:40 · 2097 阅读 · 0 评论 -
files文件分片上传+计算MD5值(sparkMD5),使用file.slice(start, end)方法
因为要跟后端交互,上传前要拿到文件的已上传信息,所以要给后端传MD5码,这个需要先计算出文件的MD5码,用 spark-md5 插件来计算一、计算出文件的MD5值要配合js的 FileReader 函数来使用 SparkMD5import SparkMD5 from 'spark-md5'// 计算MD5getMD5(file, fileListID) { // 使用sparkMD5的ArrayBuffer类,读取二进制文件 const spark = new SparkMD5.Arr原创 2021-12-21 12:23:08 · 5592 阅读 · 5 评论 -
解决iview UI的Table组件数据刷新但是页面不刷新的问题
在改变了 Table 绑定的 data 变量的数值后,表格的数据刷新了,但是页面不刷新,之前滚动到的位置仍然在那里,而且如果左右两侧有固定列的时候,会错位,解决方法是给 Table 组件绑定一个 Key 属性:<Table :columns="columns1" :data="data1" :key="Math.random()"></Table>...原创 2021-12-14 15:08:15 · 3529 阅读 · 0 评论 -
使用SockJS和StompJS实现WebSocket订阅服务
一、首先用npm安装 socketJS 和 stompJSnpm install sockjs-clientnpm install stompjs二、在页面中引入这2个jsimport SockJS from 'sockjs-client'import Stomp from 'stompjs'三、初始化websocket连接,定义一个对象(socketClient)接收订阅服务的实例化// 初始化ws连接initSocketConnection () { const _url =原创 2021-11-03 17:59:28 · 3929 阅读 · 2 评论 -
Ajax 发送请求结合 Promise 使用实例
将一个promise对象放在某个常量中,在promise对象里调用 XMLHttpRequestconst ajaxPromise = function(params) { return new Promise((resovle, reject) => { let xhr = new XMLHttpRequest(); xhr.open(params.type || "...原创 2019-09-24 15:22:37 · 635 阅读 · 1 评论 -
用node.js搭建本地服务器
参考文章:3分钟快速搭建nodejs本地服务器运行测试html/js首先确认你已经安装了node.js,没有的话请先下载安装 node.js第1步:在你的项目文件夹的根目录里新建 http.js 文件,内容如下var PORT = 3000;//var http = require('http');var url=require('url');var fs=require('fs');var mine=require('./mine').types;//var path=require('转载 2021-09-30 18:27:28 · 347 阅读 · 0 评论 -
使用Vite构建Vue3项目,对路由Vue Router 4.x的设置
Vue3官网:https://v3.cn.vuejs.org/Vite官网:https://cn.vitejs.dev/VueRouter官网:https://next.router.vuejs.org/zh/使用Vite构建时,会和以前的有些写法有些不同,例如之前我们使用// 引入路由对象import router from './router'// 路径配置 .vue 可以省略const routes = [ { path: '/', name: 'index' compon原创 2021-08-16 17:01:28 · 16004 阅读 · 4 评论 -
webpack打包时提示:The following entrypoint(s) combined asset size exceeds the recommended limit
如果webpack打包时提示:The following entrypoint(s) combined asset size exceeds the recommended limit,可以设置 “vue.config.js” ,增加如下配置内容:module.exports = {//以上省略默认的一些配置参数 configureWebpack: config => { // 不是开发环境时生效 if (process.env.NODE_ENV !== 'development') {原创 2021-08-11 18:39:14 · 5760 阅读 · 3 评论 -
VUE中(img)图片加载失败时(onerror)显示替换的图片
需要使用img标签上的一个属性 onerror ,绑定一个本地图片地址,以下是VUE里的写法:HTML代码:<img alt="" :src="item.iconPath" :onerror="defaultImg" />JS代码export default { data () { return { defaultImg: 'this.src="' + require('@/assets/images/app_icon.png') + '"', } }}...原创 2021-07-01 11:17:53 · 2346 阅读 · 0 评论 -
javascript 实现中文排序
使用js的数组的sort方法,传参时再调用 localeCompare 方法let ary = ['今日头条','西瓜视频','火山小视频','抖音','穿山甲']ary.sort((a,b) => { return a.localeCompare(b,"zh"); })原创 2021-06-24 17:42:21 · 612 阅读 · 0 评论 -
转:VUE-CLI报错 Unexpected console statement (no-console)
版权声明:本文为CSDN博主「crazy_zhangcong」的原创文章,遵循CC 4.0 BY-SA版权协议,转载请附上原文出处链接及本声明。原文链接:https://blog.csdn.net/crazy_zhangcong/article/details/88710470使用iview-admin 执行npm run build 指令时报错entrypoint size limit: The following entrypoint(s) combined asset size excee.转载 2021-05-19 15:45:48 · 214 阅读 · 0 评论 -
递归树
function toTreeData(data,pid){ function tree(id) { let arr = [] data.filter(item => { return item.parent_id === id; }).forEach(item => { arr.push({ area_id: item.area_id,原创 2021-04-21 15:33:00 · 81 阅读 · 0 评论 -
VUE路由报错NavigationDuplicated: Avoided redundant navigation to current location
是指路由重复。虽然对项目无影响,但是看到有红的不舒服!解决方法:打开router文件夹下的index.js文件,在以下代码中添加如下代码:// 原有的代码不必修改import VueRouter from 'vue-router';Vue.use(VueRouter);// 新增修改方法:获取原型对象上的push函数const originalPush = VueRouter.prototype.push// 新增修改方法:修改原型对象中的push方法VueRouter.prototyp转载 2021-04-19 10:34:28 · 756 阅读 · 2 评论 -
axios请求后端返回验证码图片,前端vue显示验证码图片
原文链接 https://blog.csdn.net/weixin_45817240/article/details/111589847用axios请求后端接口,得到验证码图片,但前端无法直接显示验证码图片,这是因为后端返回的不是一个json字符串,而是一个文件流格式,需要前端转换成base64编码。发送请求的接口:export function GetCaptcha (data) { return Axios对象({ url: '后端请求接口地址', meth转载 2021-03-31 16:39:56 · 3945 阅读 · 0 评论 -
vue项目中报错“Invalid Host header”
转自:https://www.xuanmo.xin/details/2869更改本机的HOST文件后,访问解析后的本地域名时报错 “Invalid Host header”,解决方法:在vue-cli版本为2.x的情况下修改 webpack.dev.conf.js 中的 devServer 对象加入 disableHostCheck: true 即可转发成功devServer: { disableHostCheck: true,}...转载 2021-03-31 14:13:54 · 606 阅读 · 0 评论 -
webstorm识别alias别名@
在项目的根目录新建一个新文件 alias.config.js在js里面写上如下代码:/** * 由于 Vue CLI 3 不再使用传统的 webpack 配置文件,故 WebStorm 无法识别别名 * 本文件对项目无任何作用,仅作为 WebStorm 识别别名用 * 进入 WebStorm preferences -> Language & Framework -> JavaScript -> Webpack,选择这个文件即可 * */const resolve =转载 2021-03-26 16:11:01 · 1416 阅读 · 0 评论 -
vue 重置组件的data初始值 $options 正确的取值方法
想要获取初始值,如果直接用 this.$options.data() 会报错,需要修改成下面这样:// 组件的data初始值,这个对象里面就是组件data里的所有对象了this.$options.data.call(this)当前的data里的值这样写this.$data...原创 2021-01-22 18:50:16 · 966 阅读 · 0 评论 -
[微信小程序]封装统一promise请求,并判断运行环境搭配不同的host
自己在开发微信小程序时,要根据体验版和正式版填入不同的请求地址host,所以特意写了一个简单的判断方法,并加入到封装好的一个统一http请求中// 判断当前微信运行环境 develop开发版 trial体验版 release正式版const env = __wxConfig.envVersion// 接口的host地址,区分体验版和正式版const host = env === 'release' ? 'https://aaa.aaa.com' : 'https://bbb.bbb.com'/原创 2021-01-11 16:30:45 · 246 阅读 · 0 评论 -
[微信小程序] 如何给组件绑定的方法传额外的参数
在小程序里,给一个组件所绑定的方法传一个额外的参数,是没办法直接写在函数的形参里面获取到的,必须要用微信提供的 data-**** 方法wxml 代码片段<view data-name="yourName" bindtap="handleTap"></view>js 代码片段handleTap(e) { const name = e.currentTarget.dataset.name console.log(name) // yourName}...原创 2020-12-15 18:14:56 · 759 阅读 · 0 评论 -
[微信小程序]使用 this.setData 设置一个变量的方法
常规的微信小程序里给一个 data 数据重新赋值,需要用 this.setData 方法传入这个数据的名称,如果你要设置的数据名称是一个动态的变量,则要修改一下写法,加入[ ]中括号:const _name = e.currentTarget.dataset.name || 'isShowDate'this.setData({ [_name]: false})...原创 2020-12-15 18:05:25 · 2249 阅读 · 0 评论 -
[微信小程序] 弹出遮罩层后禁止背景层滚动的办法
先定义一个overflow:hidden的全局样式,然后在点击出现遮罩层之后让最底层的使用这个样式即可,class上可以绑定一个变量,动态赋值样式的名称,例如:app.wxss 代码片段.disableScroll { position: fixed; top: 0; left: 0; right: 0; bottom: 0; height: 100%; overflow: hidden;}index.wxml 代码片段<view class="{{ scrollStyle原创 2020-12-15 17:58:36 · 1599 阅读 · 2 评论 -
[微信小程序] 使用AntV F2 绘制双Y轴
F2的官方给了一个示例 https://f2.antv.vision/zh/examples/component/legend#custom ,但是不够清晰和简洁,所以我自己简单改造了一下,供大家参考代码运行环境是在 微信小程序里 执行的// 小程序里的初始化onInitChart(F2, config) { const chart = new F2.Chart(config) // 图表数据,格式要对上,数值类型必须是数字不能是字符串 const data = [原创 2020-12-14 13:33:30 · 1618 阅读 · 1 评论 -
git tag 标签管理命令
git show-ref --tag | awk '/test-/ {print ":" $2}' | xargs git原创 2020-12-08 10:41:01 · 431 阅读 · 0 评论 -
chrome浏览器跨域请求samesit验证码一直提示过期或无法获取cookies而Firefox能正常登录
原文转自https://www.cnblogs.com/gigi2653/p/13426051.html开发环境下,修改了本机host映射,请求的接口地址跟本机开发环境的域名不同源(请求跨域),在使用新版Chrome浏览器后,在登录页面输入验证码时,总是提示验证码过期,但是换用firefox却能正常登录,是因为验证码接口和登录接口的session不一致(跨域问题),新版谷歌浏览器加入了 SameSite。解决方法:在chrome中打开链接: chrome://flags/#site-isolatio转载 2020-11-02 15:04:02 · 1855 阅读 · 0 评论 -
Render函数的参数
使用vue的Render函数时,可以传以下参数:{ // 和`v-bind:class`一样的 API // 接收一个字符串、对象或字符串和对象组成的数组 'class': { foo: true, bar: false }, // 和`v-bind:style`一样的 API // 接收一个字符串、对象或对象组成的数组 style: { color: 'red', fontSize: '14px' }, // 正常的 HTML 特性原创 2020-08-20 12:29:51 · 2725 阅读 · 0 评论 -
ajax请求后端生成文件,返回到前端js下载文件的方法
如果你使用常规的 new Blob 方法,出现生成文件很慢,造成请求超时的情况,就只能改用传统的form 提交表单的方法了// 把后端返回的文件流变成一个 Blob 对象const blob = new Blob([data], { type: 'application/vnd.ms-excel' })// 设置文件名const fileName = name ? name + '.xls' : '导出的表格文件.xls'// 对于<a>标签,只有 Firefox 和 Chrome(内原创 2020-06-18 14:41:19 · 3676 阅读 · 0 评论 -
前端js发送请求下载excel文件的方法
如何发送请求这里就不再介绍了,直接从请求发送后开始吧发送的数据格式为:FormData 格式,发送方式为 :post 方式1.首先使用 new FormData() 来创建你要发送的参数,例如:let formObj = new FormData()formObj.append('columns', 'yourData')2.从后端返回的文件流中开始创建下载文件,例如:ajax(formObj).then(response => {// 把后端返回的文件流变成一个 Blob 对象,.原创 2020-05-15 15:38:42 · 2535 阅读 · 0 评论