- 博客(87)
- 收藏
- 关注
RSS订阅原创 线上环境禁止打印console.log
当我们在开发项目时，我们会使用大量的console.log，这样方便我们去调试，但是当正常上线后，在生产环境，我们是不喜欢打印的信息暴露在浏览器控制台的。
2024-06-05 11:50:11
613
原创 问题—前端调用接口url多加一个/，本地可以调通，测试环境报错302，分开调两个接口
而在测试环境中，这个”/“不会被忽略，因为你的请求将由服务器处理，如Nginx等，服务器接收到你的请求后，不会像webpack-dev-server那样忽略这个”/“，它会严格按照URL进行处理，导致了你后端接收到两个接口请求。这些库通常会自动处理 URL 中的多余 /。配置服务器：如果可能，你可以配置你的测试环境服务器，让它自动去除 URL 中多余的 /。具体的配置方法取决于你的服务器软件。等实现热更新和启动本地服务，webpack-dev-server对URL的处理较为宽松，多出来的”/“会被忽略。
2024-05-14 11:02:34
606
原创 pinia 介绍及使用
/ 参数1：容器的ID，必须唯一，将来Pinia会把所有的容器挂载到跟容器中// 参数2：options对象// 存储全局状态return {count:0},// 封装计算属性，有缓存// 封装业务逻辑actions:{}})
2024-04-28 17:24:04
290
原创 idea集成swagger创建接口文档
1.2 config文件夹下创建SwaggerConfig1.3 接口信息引入1.4 运行项目打开swaggerhttp://127.0.0.1:端口/接口前缀/swagger-ui.html#/结果如图所示即为成功在Java类中添加Swagger的注解即可生成Swagger接口，常用Swagger注解如下：@Api：修饰整个类，描述Controller的作用@ApiOperation：描述一个类的一个方法，或者说一个接口@ApiParam：单个参数描述@ApiModel：用对象来接收
2022-06-27 11:36:13
1168
原创 react 文件下载
一切尽在代码中const downloadReport = async (value) => { const { id: reviewId, auditId } = auditTaskInfo; if (value) { const idType = 'auditId'; const res = await download(idType, auditId); // 返回值为文件流，没有code值，所以code为undefined时下载文件
2022-05-16 11:43:51
450
1
原创 react父组件触发接口请求，子组件接收返回response
接博文“react 解决一个页面多个表单校验产生冲突问题”子组件定义方法，进行接口请求return Promise.all([oneFormPromise, twoFormPromise]) .then(() => { return new Promise(function (resolve, reject) { // 获取表单内容的值 文件名称 const fileName = form.getFieldsValue().qua
2022-05-16 11:39:15
862
原创 react antd上传文件限制必填、只允许上传一个文件、删除提示、限制文件小于50M
上整体代码import { Form, Upload } from 'dtd';import { UploadOutlined } from '@dtfe/icons';let props = { accept: '.zip', action: '/reportReview/api/v1/jianzai/file/upload', data: { taskNumber, industryCode }, headers: {}, maxCou
2022-05-16 10:36:03
4448
1
原创 react 父组件触发子组件方法
子组件定义（函数组件）import { useImperativeHandle, forwardRef } from 'react';const AuditContent = forwardRef((props, ref) => { const [form] = Form.useForm(); useImperativeHandle(ref, () => ({ resetForm, })); // 重置表单 const resetForm = () =>
2022-05-12 10:47:02
950
原创 react 解决一个页面多个表单校验产生冲突问题
需求：输入审核弹窗中必填信息之后，点击确定，调用接口之前对表单内容进行校验问题：条件：更多信息中上传功能在当前组件的form表单定义 审核信息内容在子组件中定义两个校验产生冲突，只对第一个进行校验，第二个校验跳过，直接调接口解决方式：（使用promise.all）子组件中定义方法// 审核弹窗确定按钮相应接口 const auditReport = () => { // 首先对表单内容进行验证 多个表单验证操作 let oneFormPromise = new P
2022-05-12 10:08:21
1676
转载 深入并发之线程、进程、纤程、协程、管程
一、进程、线程、纤程、协程、管程概念理解在现在你可能会经常看到进程、线程、纤程、协程、管程、微线程、绿色线程…一大堆xx程的概念，其实这些本质上都是为了满足并行执行、异步执行而出现的一些概念。因为随着如今的科技越来越发达，计算机目前多以多核机器为主，所以之前单线程的串行执行方式注定无法100%程度发挥出硬件该有的性能。同时，为了满足互联网时代中日益渐增的用户基数，我们开发的程序往往需要更优异的性能，更快的执行效率，更大的吞吐量才可。为了方便理解，我们可以先把操作系统抽象为了一个帝国。并且为了方便理解这
2022-04-20 11:08:54
271
原创 说说对闭包的了解
闭包使用闭包主要是为了设计私有的方法和支量。闭包的优点是可以避免全局变量的污染，实现属性私有化；缺点是闭包会常驻内存，在不用的时候需要删除，否则会导致内存溢出（内存泄漏），增加内存使用量。在JavaScript中，函数即闭包，只有函数才会产生作用域。三个特性函数嵌套函数在函数内部可以引用外部的参数和支量参数和变量不会以垃圾回收机制回收造成内存泄漏内存泄漏即不再拥有或需要任何对象（数据）之后，它们仍然存在于内存中。如果setTimeout的第一个参数使用字符串而非函数，会引发内存泄
2022-04-02 15:26:20
170
原创 Umi-—前端应用框架（Umi基础）
目录结构根目录mock存储 mock 文件，此目录下所有 js 和 ts 文件会被解析为 mock 文件。node_modules依赖包目录。.editorconfig让使用不同编辑器的开发者在共同开发一个项目时“无痛”地遵循编码规范(编码风格)，就可以使用EditorConfig插件，会在项目根目录寻找.editorconfig文件并使用其中定义的编码风格。.gitignore.gitignore 是一个隐藏文件，就跟这个文件的字面意思一样，它指明了在用 git 上传文件的时候需要忽略
2022-04-02 11:53:47
5551
原创 flex深入浅出—基本属性、优势特色、性能影响
1. flex基本属性需知1.1 flex是什么== flex是一个可以简便、完整、响应式地实现各种页面布局的布局方式==例如：垂直居中、两栏布局就可以使用flex布局简便的实现<div class="wrap"> <div class="box"></div></div>.wrap { width: 300px; height: 300px; border: 1px solid red; display:flex; ju
2022-04-01 17:35:14
1111
原创 Umi-前端应用框架（Umi项目创建）
环境准备node -v版本在10.13及以上本次创建项目使用npm 包管理器脚手架创建一个空目录（空文件夹）进入文件夹中，输入命令 npm create @umijs/umi-app，出现以下形态表示成功创建安装依赖npm install 出现下面状态表示成功安装启动项目npm start 成功启动...
2022-03-31 15:07:37
1412
原创 umi—前端应用框架（Umi是什么）
Umi是什么Umi是可扩展的企业级前端应用框架以路由为基础，同时支持配置式路由和约定式路由，保证路由的功能完备插件体系生命周期完善，覆盖从源码到构建产物的每个生命周期Umi功能可扩展Umi实现完整的生命周期，使其插件化，Umi内部功能都由插件完成。支持插件和插件集开箱即用Umi内置路由、构建、部署、测试等，仅需一个依赖即可上手开发企业级阿里大项目验证大量自研微前端、组件打包、文档工具、请求库、hooks库、数据流等完备路由支持配置式路由和约定式路由面向未来还在升级：dl
2022-03-31 14:47:37
8229
原创 react 生命周期
引出生命周期示例：文字透明度在组件渲染之后变化，点击按钮卸载组件示例<!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8"> <meta http-equiv="X-UA-Compatible" content="IE=edge"> <meta name="viewport" content="width=device-width, initial-scal
2022-03-28 15:58:37
839
原创 表单自定义验证规则—名称重复时提醒并且禁止提交
没有内容时提示：请输入申请名称，有内容但名称重复时提示已存在 <Form.Item name="name" label="申请名称" // validateStatus={this.state.validateValue ? 'success' : 'error'} // // validateStatus="error" // // help={this...
2022-03-07 14:02:15
628
原创 vue Element- UI el-date-picker选择器点击清空后报错
点击下图这个清空按钮之后再次请求接口，会报错问题在于点击清空之后value值会置为空，就有了上面的报错，请求参数为空针对性解决方法：请求接口取值时判断一下，即
2021-12-03 11:45:52
1313
原创 vue中el-select下拉框被遮挡问题
记录一下最近给我最大困扰的一个问题：element-ui自身有个特点在于 z-index层级是一直变动的，如果不加入其他的样式，比如说自定义UI 或引入其他UI，使用起来是没有问题的，问题在于自定义UI设置了z-index值，就出现了很多很多问题：1.点击按钮无效，实际是因为弹窗被dialog层遮挡2.this.¥message、 this.¥confirm被遮挡 (美元符不显示，只能用¥代替一下)3.也就是今天这个问题，下拉框被遮挡PS：我是个实习生，全局的东西我不能去动，只能对指定症状下药
2021-12-02 11:15:04
11038
2
原创 日期时间选择器 el-date-picker 设置开始时间和结束时间
先对组件进行渲染<el-date-picker v-model="callTime" type="datetimerange" :picker-options="pickerOptions" range-separator="至" start-placeholder="开始日期" end-placeholder="结束日期" align="right" @change="getTimeList"
2021-11-09 19:31:38
9997
原创 父组件以对象形式给子组件传值
1.父组件中将需要传递的对象用v-bind进行绑定，注意不能用缩写形式：toTotalData里面的值是我设置的初始值，后面有动态改变toTotalData: { totalUser: 1, totalCallTime: 1, totalCallNumber: 1, avgCallTime: 1, yesterdayNewUser: 1, pendingReview: 1, },<pan
2021-11-09 19:19:50
365
原创 axios post请求调后台接口
先引入axios在这里插入代码片将更新数据的方法放在created中，下面是axios的使用，携带的数据是startDate和endDategetTimeList() { var data = JSON.stringify({ startDate: this.callTime[0], endDate: this.callTime[1], }); var config = { method: "post",
2021-11-09 19:11:26
1011
原创 aes前端解密并给号码中间四位加*
后台返回的数据直接渲染出来是这样的我们需要的数据是这样的第一步引入aes.js，放到src下utils中aes文件夹下 var CryptoJS = CryptoJS || function(u, p) { var d = {}, l = d.lib = {}, s = function() {}, t = l.Base = { extend: function(a) { s.prot
2021-11-04 19:08:54
243
原创 后台返回数据处理-时间格式
来电时间格式需改为以下这种类型第一步：获取接口数据// 查询通话记录列表export function listDialog(query) { return request({ url: '/call_dialog/dialog/list', method: 'get', params: query })}第二步：处理数据methods: { /** 查询通话记录列表 */ getList() { this.loading = t.
2021-11-04 18:33:51
357
原创 npm run dev启动项目报错
我输入命令 npm run dev之后报这样的错误> cusplat@1.0.0 dev /Users/zzy/Downloads/projects/mor-brain> node build/dev-server.js> Starting dev server...events.js:177 throw er; // Unhandled 'error' event ^Error: listen EADDRINUSE: address already
2021-11-01 13:09:17
413
原创 Vue.js—webpack
webpack认识webpack1.1 webpack是什么1.2 webpack与gulp的区别webpack的安装webpack的起步webpack的配置1.1 动态获取路径loder的使用loader是什么loder使用步骤webpack中配置Vueplugin的使用搭建本地服务器认识webpack1.1 webpack是什么webpack是一个现代的JavaScript应用的静态模块打包工具1.2 webpack与gulp的区别gulp1. gulp可以进行js，html，css，img
2021-10-07 17:30:54
186
原创 用js实现轮播图
index.html<!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8"> <meta http-equiv="X-UA-Compatible" content="IE=edge"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <title>.
2021-09-06 10:49:34
86
原创 在Express框架中get、post参数如何获取
get、post参数的获取get参数的获取post参数的获取get参数的获取Express是基于node平台的web应用开发框架，提供了一系列的强大特性，帮助你创建各种web应用。能够使我们用更简洁的代码创建网站应用。在学习Express如何获取get请求之前，我们先看一下Node原生 获取get请求参数// 用于创建网站服务器的模块const http = require('http')// 处理url地址const url = require('url')// 创建服务器const
2021-09-03 13:13:13
1193
原创 React组件通讯
评论不为空时评论为空时当评论人或者评论内容未输入时输入评论后，点击发表评论index.jsimport { func } from 'prop-types'import React from 'react'import ReactDOM, { render } from 'react-dom'import './css/index.css'class App extends React.Component { state = { comments: [ {
2021-06-23 12:01:35
96
原创 axios框架—网络模块封装
axios网络请求模块的选择axios框架的基本使用axios发送并发请求axios的配置相关信息axios的实例和模块封装axios拦截器的使用网络请求模块的选择发送网络请求的方式：选择1：传统的Ajax是基于XMLHttpRequest(XHR)缺点：1.配置和调用方式等非常混乱2.编码看起来混乱3.真实开发中很少使用，而是使用jQuery-Ajax选择2：jQuery-Ajax缺点：1.在Vue的整个开发中都不需要jQuery了2.意味着为了方便我们进行一个网络请求，特意引用
2021-04-14 19:56:57
312
原创 Vuex
Vuex初识Vuex状态管理2.1 单界面的状态管理2.2 多界面的状态管理初识VuexVuex是一个专门为Vue.js应用程序开发的状态管理模式它采用集中式存储管理应用的所有组件的状态，并以相应的规则保证状态以一种可预测的方式发生变化状态管理简单的将其看成把需要多个组件共享的变量全部存储在一个对象里面，然后将这个对象放在顶层的Vue实例中，让其他组件可以使用，那么多个组件就可以共享这个对象中的所有变量属性了2.1 单界面的状态管理State：状态 (姑且当作是data中的属性)View：
2021-04-13 11:18:45
151
2
原创 Promise
PromisePromise的介绍和基本使用1.1 初识Promise1.2 resolve和rejectPromise的三种状态Promise 另外处理形式Promise链式调用Promise的all方法调用Promise的介绍和基本使用1.1 初识PromisePromise是ES6中好用且重要的特性Promise是异步编程的一种解决方案异步事件：当我们在网络请求时会处理异步事件封装一个网络请求的函数，因为不能立即拿到结果，所以不能直接将结果传递回去我们往往会传入另一个函数，在数据请求成
2021-04-12 09:11:59
111
2
原创 Vue-router
Vue-router认识路由1.1 前后端渲染和前后端路由（面试）后端路由前后端分离SPA(单页面复应用阶段)—前端路由1.2 url的hash和HTML5的historyURL的hashHTML5的history1.pushState2.replaceState3.govue-router基本使用2.1 认识vue-router2.2 配置路由相关信息2.3 使用vue-router的步骤router-link和router-view2.4 路由的默认值2.5 修改为history模式2.6 router
2021-04-10 09:16:16
365
空空如也
空空如也
TA创建的收藏夹 TA关注的收藏夹
TA关注的人