- 博客(79)
- 收藏
- 关注
RSS订阅原创 nextjs14.x监听页面更改
可以通过组合其他客户端组件挂钩（如usePathname和useSearchParams）来监听页面更改。在 app/components/navigation-events.js。在 app/layout.js。
2024-10-23 15:47:43
240
原创 使用 useRef 而不是 useState 来存储上一次的内容
useRef 返回一个普通的 JavaScript 对象，其 .current 属性是可变的，并且可以存储任何值。最重要的是，改变 useRef 的 .current 属性不会触发组件的重新渲染。而 useState 用于状态管理，当状态更新时，它会触发组件的重新渲染。useRef 在组件的整个生命周期内保持不变。使用 useState 也可以实现相似的功能，但它更适合那些需要触发渲染或响应状态变化的场景。这在某些情况下可以简化代码的复杂性，特别是当值的更新不需要触发重新渲染时。
2024-07-04 08:51:45
205
原创 react18.x+播放文本内容
需要调接口将文字传递给后端将文字转换成音频文件，然后播放，同时每次播放不同文本时，当前播放的文本需要暂停，切换到播放新点击的文本。
2024-06-27 16:13:03
466
原创 为什么接口返回的是二进制流的文件时，前端请求时responseType要设置成‘blob‘
设置responseType为blob可以确保数据的完整性，使得前端可以对这些二进制数据进行进一步的处理，如将其保存为文件或直接在浏览器中播放。设置responseType为blob是一种标准化的处理方式，有助于确保代码在不同浏览器中的兼容性。如果前端请求不设置responseType，默认情况下，浏览器会尝试解析返回的数据，可能会将其错误地处理为字符串，导致数据损坏或不可用。所以，在处理二进制流文件时，前端请求设置responseType为blob主要是为了确保能够正确地接收和处理后端返回的二进制数据。
2024-06-27 10:59:59
743
原创 react项目实现语音识别功能
需要调用后端接口将录音文件传给后端，由后端将录音内容转换成文字返回给前端，当然也有一些插件可以实现语音转文字功能，可以自行查找使用插件实现方法。
2024-06-25 16:46:43
776
原创 vue3.x项目，配置项目打包到二级目录
一、打开 vite.config.js 文件，添加或修改base字段， 将其值设置为二级目录的路径。vue3.x项目，配置项目打包到二级目录。
2024-03-14 10:11:54
1643
原创 react项目打包二级目录
在React 18.x中，如果你使用的是Create React App (CRA)来创建和管理你的项目，你可以通过修改package.json文件中的homepage字段来配置应用打包到一个二级目录。process.env.PUBLIC_URL在开发环境中通常是空字符串，在生产环境中则是你在package.json中设置的homepage字段的值。在create-react-app创建的项目中，可以通过process.env.PUBLIC_URL来访问homepage字段中定义的URL。
2024-03-08 11:57:49
1358
原创 qiankun：react18主应用 + 微应用 react18 + vue3
qiankun+react18主应用 +vue3/react微应用
2023-07-19 20:43:34
2507
原创 react中使用 websocket
参考官网地址： https://socket.io/zh-CN/docs/v4/client-installation/#from-npm。react中使用 websocket，使用socket.io库。
2023-07-05 16:56:09
2657
原创 react中使用Ant Design的Upload 组件，使用后端提供的接口上传图片，不使用默认的action 请求
2、上传多张图片（可拖拽和点击）
2023-06-29 16:44:35
3112
1
原创 mpvue的一些知识
一、mpvue中生命周期：1、created：所有页面的created都是在页面渲染的一开始都全部加载出来（在vue中，created是按需加载，当我们进入某个页面，才会加载当前的created）2、onLoad： 用户进入A页面，会触发onLoad，但是当进入另一个页面后再返回到A页面，不会触发onLoad3：mounted：是用户每次进入页面， 都会执行，无论是否点击返回二、动态绑定 class//对象形式 <div v-for="(item, index) in List" :ke
2020-10-30 10:34:53
1756
原创 vue解决组件循环使用报错
当我们正常的注册组件，正常的引用组件，还是报错 组件没有正常的注册，如下图：解决方法：将原来的 import xxx from ‘xx/xx/xxx’ components:{ xxx }更改成： components: { xxx: () => import(“xx/xx/xxx”), },...
2020-10-20 18:11:43
812
原创 mpvue项目引入vant组件
1、安装npm i @vant/weapp -S --production2、在 build —> webpack.base.conf.js 加入以下代码： new CopyWebpackPlugin([{ from: path.resolve('node_modules/@vant/weapp/dist'), to: path.resolve('dist/wx/vant-weapp/dist'), ignore:
2020-09-23 17:30:07
821
原创 electron项目的一些问题
1、运行项目报错：process is not defined解决方法：在 .electron-vue —> webpack.renderer.config.js 里加入如下代码： templateParameters(compilation, assets, options) { return { compilation: compilation, webpack: compilation.getStats().toJson(),
2020-09-18 17:51:16
330
原创 vs code 代码格式化
设置vs code代码在一行显示设置 -》 首选项 -》 setting -》 setting.json里放入下面代码{“vetur.format.defaultFormatter.js”: “vscode-typescript”,“vetur.format.defaultFormatterOptions”: {“js-beautify-html”: {“wrap_attributes”: “force-expand-multiline”,“wap_line_length”: 22
2020-08-13 16:22:35
393
原创 点击切换状态按钮，当页面刷新之后保持在之前状态的内容区（使用 vuex ）
1、在 store文件夹下的 modules 下新建 status.js2、在 store 下的 index.js中引入 status.js
2020-08-13 16:11:39
682
原创 vue 开始时间＜结束时间，结束时间＞开始时间
if (Date.parse(this.beginTime) - Date.parse(this.endTime) >= 0) { this.$message.error('结束时间必须大于开始时间') return;} else if (Date.parse(new Date()) - Date.parse(this.beginTime) > 0) { this.$message.error('开始时间不得小于当前时间') return;}...
2020-08-10 15:44:00
2125
原创 点击动态切换背景颜色
<template> <div> <div v-for="(item,index) in 10" :key="index" :class="{'active':index===nowIndex}" @click="handleClick(index)"> <p>测试一下</p> </div> </div></template><script>export de
2020-07-25 15:32:38
535
原创 vue + 下载文件（以下载excel表格为例）
通过 a 标签的 href 属性来实现下载<template> <div> <a :href="downloadUrl+'?type=excel'"> // 此处下载是get请求，type=excel为后台要求要传的请求参数，要拼接在 地址后面 <el-button size="small" type="primary" style="margin-left:10px">excel模板下载</el-button>
2020-07-23 17:05:34
2775
原创 vue +element + 导入表格（ 导入的表格为 application/json 格式 ）
1、下载包npm install -S file-saver xlsxnpm install -D script-loadernpm install xlsx2、在main.js中引入import XLSX from 'xlsx'Vue.use(XLSX)3、使用（第一种：未调接口；第二种调接口）<template> <div> <el-upload action :show-file-list="false" :on-change="handl
2020-07-23 16:55:10
1229
原创 vue多个页面用到同一个接口的数据（ 比如名称列表 ），使用 vuex
第一种： 调接口不传参数1、在 store文件夹下的 modules文件夹下新建 getName.js// getName.jsimport { getNameList } from "@/apis/apis"; // 导入接口export default { state: { nameList: [] // 名称列表 }, mutations: { changeNameList(state, payload) { state.nameList= pay
2020-07-22 22:02:00
5283
1
原创 vue + element + Upload 上传图片
<template> <div> <el-form :inline="true" :model="form" :rules="Rules" ref="form" label-width="100px"> <el-form-item label="头像" prop="avatar"> <el-upload class="avatar-uploader" :action="uploadUrl" :headers="{.
2020-07-20 11:42:10
672
原创 vue + element + select 获取下拉框的 label 和 value 值（ 例如 绑定的是 id ， 但后台要求即传 id ，又要传 id 对应的 name ）
<template> <div> <el-form :inline="true" :model="form" ref="form" :rules="formRule"> <el-form-item label="标题" prop="titleId"> <el-select v-model="form.titleId" filterable placeholder="请选择标题" @change="changeTit
2020-07-20 10:14:50
6160
原创 监听vuex 中数据状态的变化
<script>export default { data() { return { index: '', }; }, created(){ this.index = this.$store.state.moduleName.index; }, computed: { getIndex() { return this.$store.state.moduleName.index } }, watch: {
2020-07-17 09:45:26
1954
原创 vue +element + 导入表格（ 导入的表格传给后台 form-data 格式 ）
1、安装插件npm install -S file-saver xlsxnpm install -D script-loadernpm install xlsx2、使用<template> <div> <el-upload class="upload student-enter" action="#" :show-file-list="false" :on-change="handleExcel" accept="application/vnd.op
2020-07-16 21:34:22
2464
原创 vue项目打包之后出现源代码的问题
1、在config -> index.js//config -> index.js productionSourceMap:false, //将 productionSourceMap:ture 改为 productionSourceMap:false2、vue cli3 及以上版本在 根目录下的 vue.config.js//vue.config.js module.exports = { productionSourceMap: true}...
2020-07-16 21:12:27
1240
原创 vue项目中，比如登录的时候要进行校验，如果2个或多个校验是一样的时候，可以封装一个 promise ，避免代码重复
因本人暂时还为把promise琢磨清楚，但确实在项目中也迷迷糊糊的使用了，所以目前写出来仅供自己参考。我在如下使用场景使用 promise我们在做登录的时候，通常会做校验，在有要发送短信验证码之前，要校验手机号、用户名等，在登录的时候除了要校验手机号、用户名等之外，还要校验 短信验证码，此时就会出现一种情况，即发送验证码的时候要校验，登录也要校验，只是多了一个 验证码的校验，这时候就会造成重复校验的情况，如果要校验的 类目比较少还好，还无所谓，如果要校验5-6条等，那无疑会增加代码，所以我们可以用 pr
2020-07-10 17:47:03
634
2
原创 vue 多个页面调同一个接口，传不同的参数，使用 Vuex 来实现传不同参数调统一接口
1、在 api 文件夹下的 api.js 下import https from "@/utils/axios"; // 引入在 utils下的 axios.js 中封装的请求export const pageOfInfoAtES = function(params) { let url = "/xxx/pageOfInfoAtES"; return https(url, params, "post");};2、在 store文件夹下的 modules文件夹下新建 getInfo.j
2020-07-10 17:17:11
5133
2
原创 vue项目打包到二级目录（以测试环境打包到二级目录为例）
1、在 build —> webpack.base.conf.jslet publicPath = ''if (process.env.NODE_ENV === "production") { publicPath = config.build.assetsPublicPath} else if (process.env.NODE_ENV === "testing") { publicPath = '/xxx' + config.dev.assetsPublicPath}modul
2020-07-07 10:33:58
3331
原创 vue 数字图片验证码
1、安装npm install identify2、封装公共组件<template> <div class="code-container"> <canvas id="code-canvas" :width="contentWidth" :height="contentHeight"></canvas> </div></template><script>export default { pr
2020-07-05 18:42:52
1254
原创 vue中使用富文本编辑器 wangEditor
一、 wangEditor基于javascript和css开发的 Web富文本编辑器， 轻量、简洁、易用、开源免费http://www.wangeditor.com/index.html（1）、安装npm install wangeditor2、封装公用组件 editor.vue<template lang="html"> <div class="editor"> <div ref="toolbar" class="toolbar">
2020-07-05 14:38:14
1057
空空如也
空空如也
TA创建的收藏夹 TA关注的收藏夹
TA关注的人