夏日米米茶-CSDN博客

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 46377 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 4608

原创 Vue3推荐的替代Vuex的新一代状态管理工具：Pinia 配置教程

Pinia 官方网站：pinia.vuejs.org一、安装Pinianpm install pinia --save二、配置Pinia（默认项目都使用 TypeScript ，默认后缀都是.ts）在 src 目录内新建一个 store 的目录，然后在此目录下新建一个 index.ts 文件，内容如下：import { createPinia } from 'pinia'const store = createPinia()export default store三、在项目中注.

2022-03-22 17:46:44 2728

原创解决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 10339 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 1373

原创使用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 2081

原创 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 5478 5

原创解决iview UI的Table组件数据刷新但是页面不刷新的问题

在改变了 Table 绑定的 data 变量的数值后，表格的数据刷新了，但是页面不刷新，之前滚动到的位置仍然在那里，而且如果左右两侧有固定列的时候，会错位，解决方法是给 Table 组件绑定一个 Key 属性：<Table :columns="columns1" :data="data1" :key="Math.random()"></Table>...

2021-12-14 15:08:15 3517

原创使用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 3879 2

转载用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 346

原创 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 2860

原创使用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 15803 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 5695 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 2325

原创 javascript 实现中文排序

使用js的数组的sort方法，传参时再调用 localeCompare 方法let ary = ['今日头条','西瓜视频','火山小视频','抖音','穿山甲']ary.sort((a,b) => { return a.localeCompare(b,"zh"); })

2021-06-24 17:42:21 609

转载转：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 212

原创递归树

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 79

转载 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 3924

转载 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 602

转载 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 1414

原创 vue 重置组件的data初始值 $options 正确的取值方法

想要获取初始值，如果直接用 this.$options.data() 会报错，需要修改成下面这样：// 组件的data初始值，这个对象里面就是组件data里的所有对象了this.$options.data.call(this)当前的data里的值这样写this.$data...

2021-01-22 18:50:16 961

原创 [微信小程序]封装统一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 245

原创 [微信小程序] 如何给组件绑定的方法传额外的参数

在小程序里，给一个组件所绑定的方法传一个额外的参数，是没办法直接写在函数的形参里面获取到的，必须要用微信提供的 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 755

原创 [微信小程序]使用 this.setData 设置一个变量的方法

常规的微信小程序里给一个 data 数据重新赋值，需要用 this.setData 方法传入这个数据的名称，如果你要设置的数据名称是一个动态的变量，则要修改一下写法，加入[ ]中括号：const _name = e.currentTarget.dataset.name || 'isShowDate'this.setData({ [_name]: false})...

2020-12-15 18:05:25 2237

原创 [微信小程序] 弹出遮罩层后禁止背景层滚动的办法

先定义一个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 1594 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 1604 1

原创 git tag 标签管理命令

git show-ref --tag | awk '/test-/ {print ":" $2}' | xargs git

2020-12-08 10:41:01 427

转载 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 1843

原创 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 2718

原创 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 3669

空空如也

空空如也