- 博客(50)
- 收藏
- 关注
RSS订阅原创 vite+vue3+ts+tsx+ant-design-vue项目框架搭建
vite+ts+vue3+tsx+ant-design-vue搭建的项目框架，
2023-12-11 15:04:04
1451
转载 decodeURIComponent解码含有特殊符%25等路径时数据丢失问题
最近在使用decodeURIComponent的时候，发现浏览器参数中含有特殊符号%，会导致decodeURIComponent等解码报错。今天就简单分享一下如何处理这个问题。浏览器中的不安全字符不安全符号 解释 空格 Url在传输的过程，或者用户在排版的过程，或者文本处理程序在处理Url的过程，都有可能引入无关紧要的空格，或者将那些有意义的空格给去掉 引号以及<> 引号和尖括号通常用于在普通文本中起到分隔Url的作用 # 通常用于表示书签或者锚点
2022-05-19 10:15:45
4984
原创 正则提取文章里面的一级标题和对应的一级标题内容
最近公司项目有个需求，富文本编辑器上传一篇文章后，需要对文章内容里面的一级标题和对应的标题内容做提取处理，然后文章展示的时候就可以用来做锚链接导航处理。此功能主要用到了以下正则const reg = /<h1(([\s\S])*?)<\/h1>/g改正则用来提取h1标题及其标签里面的内容，改下标签就可以用来提取任意标签内容了。一、一级标签提取具体代码：const article = '<div data-v-65f82510=""><div d
2022-04-20 17:16:26
1227
4
原创 vue词云组件
无需引入第三方库，原文地址：sample-reels/index.vue at master · zhaowhY/sample-reels · GitHub基于上面源码做了修改，可直接复制到组件中使用。具体代码：<template> <div> <div class="wordCloud__tagBall" :style="{width:`${this.width}px`,height:`${this.height}px`}
2022-04-15 11:23:23
2798
1
原创 ant-design-vue 全局和局部引入组件
1、全局引入，在main.js里面引入import Vue from "vue";import 'ant-design-vue/dist/antd.css';import Antd from "ant-design-vue";Vue.use(Antd)html使用：<template> <div class="page-wrap"> <a-anchor> <a-anchor-link href="#a" title="a
2022-03-14 13:58:42
6798
3
原创 nvm安装完node后确无法使用node和npm
问题：nvm安装了两个node版本后，使用use切换到指定版本，确还是不能使用node和npm解决办法：找到nvm得安装位置，打开setting配置文件发现node的位置是错误的两个版本的node都是安装在nvm文件夹下的：所以修改配置文件的path路径然后保存就可以了，如下：重新查看node和npm...
2022-01-27 13:30:03
4877
原创 echarts阴影点击事件及获取点击阴影索引值
具体代码：const zoomSize = 6; this.useageChart.getZr().on("click", (params) => { let xIndex = this.useageChart.convertFromPixel({ seriesIndex: 0 }, [ params.offsetX, params.offsetY ])[0]; // 阴影索引值 this.use
2022-01-14 17:11:38
630
原创 flex布局，子元素设置flex: 1和nowrap，内容长度超出盒子
解决方法：子元素设置宽度即可{ flex: 1; width: 0;}// 或者{ flex: 1; min-width: 0}
2022-01-04 11:29:17
452
转载 GIT常用命令整理及常见问题处理
新建代码库# 在当前目录新建一个Git代码库$ git init# 新建一个目录，将其初始化为Git代码库$ git init [project-name]# 下载一个项目和它的整个代码历史$ gitclone [url]配置Git的配置文件为.gitconfig，它可以在用户主目录下（全局配置），也可以在项目目录下（项目配置）。# 显示当前的Git配置$ git config --list# 编辑Git配置文件$ git config .
2021-12-29 16:26:01
98
原创 前端下载二进制流pdf文件，下载成功，打开空白问题解决
做pdf文件下载的时候，后端返回了二进制数据流，前端在发起请求时需要设置responseType: arraybuffer 或者blob类型才可以，具体操作可以看我之前的文章（传送门）。一开对接的时候下载打开都是正常的，过后突然就不行了，能下载成功，页数也是正常的，但是打开页面却都是空白的。搜索百度了一番，都是说设置好response Type就可以了，偶然发现有人评论说不能用axios请求要用原生的Ajax请求才可以，试了一下果然成功了。具体代码：downloadFn() { l
2021-10-20 16:32:59
9144
6
原创 js 把含有转义符的字符串转成json格式
在项目中遇到一个问题：在前端需要把后台返回的json字符串转换成一个js中的json对象，可是从后台返回的字符串中含有转义字符：\"，在网上查到方法如下，可以处理这种情况：var myjson= eval("("+data+")");...
2021-09-26 17:24:41
2437
1
原创 vue 中央事件总线使用及无法更新数据问题解决
如上图做搜索功能时，因为搜索框和搜索列表页是非父子组件，所以通信的时候就用到中央事件总线来做。一开始自己用的是用vuex + watch，监听搜索值来做，但是这样有个问题：改变左边的搜索类型，重新搜索就没办法触发watch进行搜索了，因为搜索值没变。用中央事件总线的过程中，遇到了以下一些问题：1、搜索事件多次触发了 2、绑定的事件出发了，但是却没办法修改data的值，也没办法更新视图。分析这些问题之前，先看下一些知识点一、什么是中央事件总线有时候两个非父子关系的组件，也需要通信。可以将一个...
2021-09-26 11:41:34
1498
原创 前端下载二进制流文件
前端下载文件有两种方法，第一种：后台直接返回下载流格式的文件地址，前端用a标签新开窗口或者window.open()下载即可；另外一种：后台返回二进制流文件内容，前端通过blob进行转化后再下载。具体代码：async downloadFn() { this.loading = true; let res = await defenseUserAgreementGet(this.userId); this.loading = false; cons..
2021-05-18 11:32:49
2097
原创 Element-ui el-backtop不起作用的解决办法
其实主要问题在于target的设置，一开始看文档也是不清楚这个属性要怎么设置，有两种情况：1、如果滚动条是整个document自身的那么此时target不用设置，如下即可：<template> Scroll down to see the bottom-right button. <el-backtop></el-backtop></template>2、如果此时页面的滚动条设置在了某个dom节点上（某个dom节点设置了overflow
2021-03-25 12:03:00
2706
2
原创 H5网页微信授权登录
最近项目做了一个简单的H5在线点酒，用的vue-cli脚手架搭建，运行在微信环境，涉及到微信授权登录，jssdk的使用，微信支付等功能，现记录下一些流程，以便后续自己查阅。微信开发文档传送门一、微信H5网页授权登录授权登录流程微信开发文档已经写的很清楚了，如下：1 第一步：用户同意授权，获取code2 第二步：通过code换取网页授权access_token3 第三步：刷新access_token（如果需要）4 第四步：拉取用户信息(需scope为 snsapi_userinfo)
2021-01-29 12:35:39
12469
8
原创 element-ui select选择器使用
之前使用饿了么select组件时，都是直接把v-model的值和options的选项值绑定起来，但是获取当前选项的一些数据时，都是需要当前选项的id来调用接口，获取对应数据。所以这样做还必须给select绑定change事件，选项改变，再通过v-model的值去选项数组中比对获取当前值的id，再去调用接口。如下：var vm = new Vue({ el: "#app", data: { options: [ { id: 0,
2020-11-11 20:51:04
2020
原创 vue自动配置路由
vue项目开发过程中页面太多，路由配置起来也是一件很麻烦的事，好在webpack提供了一个require.contextApi，通过执行require.context函数可以获取一个特定的上下文，实现自动化导入模块。一、语法require.context('./dir',true, /\.js$/)；第一个参数表示相对的文件目录，第二个参数表示是否包括子目录中的文件（true，false），第三个参数表示引入的文件匹配的正则表达式。二、自动配置路由修改router文件夹下的index.js.
2020-06-16 17:53:55
1027
原创 vue针对正式和测试环境打不同的包
一开始我是直接在pro.env.js里面配置了两个地址，每次打包时注释掉不要的就好了，但打包频繁了，越发觉得很不方便，然后就有了后面的方法。一、模仿npm run build，新建一个新的命令：npm run sit通过新建命令：npm run sit 来打包测试环境包，npm run build专门来打包正式包就可以了1、复制一份config/文件夹下的pro.env.js，改名si...
2020-03-26 17:37:35
1000
原创 js注释问题引起的报错
今天做项目遇到了一个奇葩的问题，自己直接用静态页打开的时候是正常的，但是让后端用PHP访问页面的这种形式访问却报了个错误。如下：点进去发现报错位置代码和实际的代码是不一样的，控制台代码：实际代码：和同事找了一圈才发现是因为注释引起的，网上找了下原来是PHP渲染有关（具体参考这里）解决方法：注释//和花括号{，之间必须有空格隔开不然就会报错，所以平时最好养成注释前面加...
2020-01-13 16:20:54
1007
原创 从零开始搭建react项目（三）
页面搭建关联好后，接下来就是做对接接口请求数据了。（一）请求接口，获取数据接口请求用的是axios，并稍微封装了下，这样才能对登录失效等一些情况做统一处理，减少代码编写。执行：npm install axios --save 安装依赖包，然后在assets/js文件夹下新建一个request.js文件，最后引入axios进行封装，如下：import axios from 'axi...
2020-01-03 17:56:24
303
2
原创 从零开始搭建react项目（二）
页面编写好，就需要路由和tabbar组件来连接各个页面（一）使用路由执行：npm installreact-router-dom --save 安装路由，然后在app.js中引入路由，及页面。如下import React from 'react';import logo from './logo.svg';import './App.css';import Home fr...
2020-01-03 17:10:17
447
原创 从零开始搭建react项目（一）
自学react有一段时间了，官网文档基础的看了一遍，然后便把之前公司做的一个vue项目用react搭建了下，顺便整理下一些知识点。项目大概效果：一、利用create-react-app搭建项目1、全局安装create-react-app，执行：npm install -g create-react-app 命令进行安装2、进入要安装项目的文件夹，执行：npx create-re......
2020-01-03 15:45:28
7321
原创 vue 实现websocket发送消息并实时接收消息
公司做了个数字货币行情的H5，需要用到websocket，刚好自己也不会，可以学习一下，美滋滋。项目结合vue脚手架和websocket来搭建，主要遇到了两个问题，一个是：断开重连机制要如何处理；另外一个是：如何在页面上随时的发送消息并实时接收返回的数据，断开重连后又如何重新发送消息，接收消息一、断开重连机制处理 （详细参考这里）写一个重连的方法（重连方法中必须加一把锁，重连方法执行过...
2019-11-27 16:03:05
14409
4
原创 node测试源生ajax请求
一、源生ajax GET请求1、get请求代码：function getXHR(){ var xhr = null; if(window.XMLHttpRequest){ xhr = new XMLHttpRequest; }else if(window.ActiveXObject){ try{ xhr = new ActiveXObject('Msxml2.X...
2019-08-02 15:18:15
94
原创 vue-awesome-swiper 设置loop循环播放无效
问题： 用vue-awesome-swiper做商品详情页轮播图时，已经设置了loop：true，但是却失效了，轮播到最后一张图片时就停止播放了。解决方法：在swiper上加个v-if=“banner.length>0”判断，等到图片数据有了再来循环渲染图片。代码：html<swiper :options="swiperOption" class="banner" v-i...
2019-05-20 19:35:46
3127
原创 微信小程序获取节点信息，实现文本内容部分隐藏点击查看更多效果
一、需求最近在做一个类似朋友圈的功能，然后需要对用户发布的动态进行处理，如果内容过多，需隐藏部分内容，等用户点击按钮后再展示全部动态；内容少的部分，就不需要显示按钮了。二、问题及解决方案1、设置内容超出隐藏效果这个比较简单，只要在元素上设置样式：max-height和overflow：hidden，然后点击按钮的时候动态修改max-height的值就可以了。需要隐藏的话，max-h...
2019-02-02 16:53:29
8373
4
原创 nodejs实现小程序微信支付
最近做小程序时用到了微信支付很是开心，因为之前支付一直都没有做过，终于又可以学点东西了。于是很开心的去看了下微信小程序的支付接口，没想到，事情基本都是后端做的，前端只要调用wx.requestPayment接口就可以了，于是决定自己用node来做接口测试一遍。废话不多说，先整理下支付的流程。一、微信小程序支付（支付API传送门）首先借用下官方的图片：大概流程就是：前端请求后端支付接...
2019-01-28 14:36:59
4575
15
原创 nodejs发送小程序模板消息
一、微信小程序模板消息说明传送门二、发送模板消息流程自己实现的功能主要是发货后给用户发送模板消息的功能。首先在小程序后台配置模板，然后，在用户提交订单的时候利用form表单，把formid和订单数据传给后端，然后后端一起保存到数据库订单表中。发货后，调用小程序发送模板接口进行模板消息下发就可以了。（这里需要注意：formid有7天的有效时间，所以发货通知需在7天之内进行通知，否则无效）...
2018-10-25 09:50:34
1409
原创 nodejs获取微信小程序用户的unionID
一、unionID机制和获取途径传送门二、整体流程前端通过wx.login获取用户的code，再通过wx.getUserInfo获取到用户的一些加密数据（需要设置withCredentials:true才可以），然后统一把code和iv和encryptedData传到后端，后端利用code再去获取sessionKey，获取sessionKey的同时有两种情况，一是：用户关注了公众号，那...
2018-10-23 18:52:09
1605
原创 微信小程序获取用户运动步数后端返回-41003
最近在做一个运动步数兑换的小程序，记录下自己遇到的一些问题：1、授权流程（需要获取用户信息的授权和获取运动步数的授权）2、在获取运动步数时后端一直返回-41003一、授权流程由于微信的一些授权接口都要废弃了，所以自己只能用弹窗+button的形式来引导用户授权。具体流程：（1）调用getsetting来判断用户是否授权获取用户信息，有授权的话直接调用wx.login和wx.getUse...
2018-09-19 11:28:44
7410
6
原创 nodejs获取微信小程序码
获取小程序码的主要流程是：通过小程序的APPID和APPsecret来获取access_token，然后通过access_token来调用微信提供的获取小程序二维码的接口，然后把返回的二进制流保存成图片，并返回地址给前端。这边有个要注意的是，access_token有两小时的过期时间，需定期来获取，自己的主要思路是：获取access_token成功后记录下此时的时间戳（设为time2）保存起来...
2018-08-23 15:20:02
2460
原创 canvas 案例——时钟
首先先理解几个方法：1、save()和restore()：这对法宝非常有用，两个配对使用，saved方法用于临时保存画布的坐标系统的状态；restore方法用来恢复save之后保存的状态。可以简单的理解为，save之后的一系列的操作，比如translate和rotate等，在restore后，都会被释放恢复到原来的坐标状态。eg： ctx.strokeStyle = '...
2018-08-01 11:47:24
801
原创 不同屏幕下设置dom的显示顺序
工作中用bootstrap搭了个响应式的官网，其中一块DOM结构是这样的：<div class="fullad-box video-box"> <div class="container dev-container"> <div class="col-xs-12 col-xs-bottom col-sm-6 col-md-6 col-lg-6 fullad-...
2018-07-06 10:17:31
572
原创 同域名下，不同项目的cookie共享
做项目的时候遇到个问题就是：因为前台和后台是独立开的（但在同一域名下），前台登录后设置了cookie，然后直接跳到后台，在后台却无法获取到设置的cookie，导致后台退出时，无法清除cookie，前台还是登录的状态。产生这个问题的原因是cookie的作用域问题，假如本地服务器下的/webapp下面有两个应用：webapp_a和webapp_b， 1）在webapp_a下面设置的cookie，在we...
2018-07-05 18:36:45
13646
原创 html2canvas 图片合成模糊问题解决
做项目时，用到了html2canvas来把一个分享的弹窗，合成图片再分享出去，但是有个问题一直困扰很久，那就是合成的图片会模糊。网上找了下方法，主要是通过把canvas容器扩大，再将和成的图片进行缩放。具体的代码：getCanvasImg(obj){ var doc = window.document; var width = obj.content.offsetWi...
2018-06-20 14:28:54
23413
14
原创 vue 子组件触发父组件方法的两种方式
父组件：<template><div><div @click="openChild">弹弹弹，弹出子组件</div><childs ref="alert" @watchChild="parentReceive"></childs> <!--监听子组件绑定的方法--
2018-06-01 11:12:28
33610
2
原创 vue-awesome-swiper踩坑：刷新布局错乱
vue-awesome-swiper使用传送门，今天使用vue-awesome-swiper做一个数据信息滚动效果的时候，页面加载完后，没出现什么问题，但是一刷新当前页面布局就错乱了，而且loop也失效了。正确布局如下：一刷新页面：网上查了下，发现是加载顺序的问题，因为数据还没有完全加载的时候就已经渲染swiper了。解决的办法是在初始化的配置选项里面添加一下两个属性就可以...
2018-05-25 17:34:16
9785
2
原创 html2canvas 相关问题踩坑
最近公司项目有个需求是：弹窗的时候要把一些信息合成为图片然后再进行分享等操作，其中信息包括微信头像，昵称等。项目是用vue来搭建的，要合成的区域如下：弹窗的主要html如下：<div class="success-wrap" :class="{opacity:successShow}"> <div class="shadow"></div> <
2018-05-24 12:47:13
5730
原创 vue.js+mock.js+node.js实现移动端翻页效果
偶然发现了个好东西：mock.js，它可以用来随机的生成你想要的数据格式，包括文本、图片等，这时候我们再结合node.js，就可以真正的脱离后端，自己做接口，返回数据，测试我们的前端功能模块了。mock.js的大致使用是通过定义一个自己想要的数据模板，然后数据模板中的数据值可以通过Mock.Random中的一系列方法来生成，最后通过Mock.mock(); 来生成自己想要的数据。eg：...
2018-03-12 00:11:06
2111
空空如也
TA创建的收藏夹 TA关注的收藏夹
TA关注的人