react
知知洋洋
西安市雁塔区
展开
-
es6 用法总结1(字符串,数值,函数)
ES6 常用方法总结原创 2022-09-26 17:51:57 · 438 阅读 · 0 评论 -
echarts Cannot set properties of undefined (setting ‘dataIndex‘)“
使用echarts做关系图谱报错原创 2022-09-13 09:37:26 · 3013 阅读 · 0 评论 -
antd4 用类的方式获取form
官网只给了hook的方法,项目没有用到hook,没有在form里面调用,所以不能用submint的方法代码如下class ActivationAfter extends Component { formRef = React.createRef();handleAdd = () => { const row = this.formRef.current.validateFields(); console.log(row)}render() { <div>原创 2022-05-23 16:48:02 · 307 阅读 · 0 评论 -
可以编辑的table antd
效果图代码import React, { Component } from "react";import { Form, Input, Button, Table, Divider, Popconfirm, Tooltip } from 'antd';import "./targetform.less";class TargetForm extends Component { state = { targetIp: this.props.targetIp,原创 2022-05-23 11:27:24 · 913 阅读 · 0 评论 -
react 不通过后端,前端实现文件下载
代码如下import doc from './API.xlsx'<a href="#!" style={{ paddingLeft: '64px' }} onClick={() => { var elemIf = document.createElement('iframe') elemIf.src = doc elemIf.style.display = 'none' document.bo原创 2022-05-16 14:38:55 · 498 阅读 · 0 评论 -
antd 可编辑增加的table
父亲组件import TargetForm from './compoent/targetform'// 提交数据 handleTarget = () => { this.child.validateFields((err, values) => { if (!err) { console.log(values); } }); };<Modal title="设置目标系统"原创 2022-04-29 11:50:46 · 615 阅读 · 0 评论 -
antd Tree 实现每个分组只能选一个效果
效果图代码import { Tree } from 'antd';const { TreeNode } = Tree;const treeData = [ { title: '0-0', key: '0-0', children: [ { title: '0-0-0', key: '0-0-0', }, {原创 2022-04-27 15:55:42 · 522 阅读 · 1 评论 -
antd TextArea 最后一个字符删除不了
问题描述和原因antd 使用TextArea 最后一个字符删除不了,原因是value和onChange一起使用,删除最后一个字符,不会触发onChange事件 <TextArea rows={6} placeholder="请输入body示例" value={bodyExample} onChange={event => this.handleMaxRestoreUp(event)} /原创 2022-04-22 15:12:48 · 606 阅读 · 0 评论 -
使用阿里云服务和nginx搭建web网站
购买服务器建议服务系统购买centos 7.6 64位可以参考https://blog.csdn.net/fred8/article/details/118669471?spm=1001.2014.3001.5502服务器部署Nginx//1.安装Nginxyum install yum-utilsyum install nginx//2.启动nginxsystemctl start nginx//3.加入开机启动systemctl enable nginx//4.查看nginx的状原创 2022-03-31 18:07:05 · 3569 阅读 · 0 评论 -
antd 使用自己的svg图标
单独建一个文件存放图标文件位置文件内容import React from "react"; // 我是react项目,上面必须有,否则不生效export const HeartSvg = () => ( <svg width="1em" height="1em" fill="currentColor" viewBox="0 0 1024 1024"> <path d="M923 283.6c-13.4-31.1-32.6-58.9-56.9-82.原创 2022-03-24 15:22:57 · 3761 阅读 · 0 评论 -
antd design 实现页面详情页顶部的tab切换
实现页面详情页顶部的tab切换代码展示import { Card, Form,} from "antd";import React, { Component } from "react";import { PageHeaderWrapper } from "@ant-design/pro-layout";class NameSpaceDetail extends Component { state = { tabActiveKey: "overview"原创 2022-03-14 10:41:35 · 3391 阅读 · 0 评论 -
react npm run build打包项目传参数
问题描述我们项目使用用k8s集群,前端有登录和管理两个服务组成,管理服务代码是antd pro框架写的。我们的管理服务的代码几乎不变,但登陆页面会根据客户需求变化。不同的登陆页面,退出登陆有区别。考虑管理服务的代码不同项目只是细微差别,单独拉分支,没有必要。我们一般都是脚本部署项目,直接从代码库拉代码。所以我们可以根据打包参数的不同,判断不同的退出登陆接口。代码展示第一步antd pro 用的是umi, umi 的属性define可以直接配置在 config.js中修改,我用的是ts位置如原创 2022-02-14 17:36:17 · 1573 阅读 · 0 评论 -
前端代码 安全配置 Content-Security-Policy(csp)
我们vue项目举例1.找到修改的目标文件2.添加Content-Security-Policy策略 <meta charset="utf-8" http-equiv="content-security-policy" content="script-src 'self' ; object-src 'none'; style-src 'self' ; ">3.如果报错的处理4.根据描述添加新的策略 <meta charset="utf-8" http-equi原创 2022-01-13 15:03:11 · 5786 阅读 · 0 评论 -
有关详细信息,请参阅 https:/go.microsoft.com/fwlink/?LinkID=135170 中的 about_Execution_Policies
问题截图1.必须以管理员的身份打开powershell2.执行下面命令即可set-executionpolicy remotesigned原创 2021-12-20 15:24:14 · 2407 阅读 · 0 评论 -
js react vue 实现 xml转json json转xml
实现原理 x2jsGitHub开源库:https://github.com/abdolence/x2js使用方法一个2个步骤1.项目中创建公共组件使用创建一个公共组件使用,代码直接复制就可以/* Copyright 2011-2013 Abdulla Abdurakhmanov Original sources are available at https://code.google.com/p/x2js/ Licensed under the Apache License, Versi原创 2021-12-16 15:56:47 · 762 阅读 · 0 评论 -
前端解决Safari浏览器下时间不能正常显示
safari浏览器不支持yyyy-MM-dd的时间格式展示,我们可以把数据改成yyyy/MM/dd 这种格式createdAt: alldata[i].createdAt.replace(/-/g,"/")通过替换的方式改变时间格式,就可以在Safari浏览器和Chrome显示时间原创 2021-12-13 16:12:42 · 1019 阅读 · 0 评论 -
proxy 配置报错 Error occured while trying to proxy to:
项目使用create-react-app脚手架搭建之前配置本地代理如下后面项目需要代理https,配置代理报错 500 响应 Error occured while trying to proxy to:发现重新配置添加changeOrigin: true 就可以了proxy: { '/cas': { target: 'https://**.**.**.**:30090', secure: false, changeOrigin: true,原创 2021-12-10 16:42:30 · 28636 阅读 · 2 评论 -
react配置 https 代理 proxy
项目使用create-react-app脚手架搭建之前配置本地代理如下后面项目需要代理https,配置代理报错 500 响应 Error occured while trying to proxy to:发现重新配置添加changeOrigin: true 就可以了proxy: { '/cas': { target: 'https://**.**.**.**:30090', secure: false, changeOrigin: true,原创 2021-12-10 16:41:06 · 1255 阅读 · 0 评论 -
react 实现图片预览功能 RcViewer
react 项目通过使用 RcViewer 实现图片预览功能1.安装依赖包npm i @hanyk/rc-viewer2.因为预览功能会多个地方使用,我们直接定义成组件预览组件代码import React, { Component } from 'react';import RcViewer from '@hanyk/rc-viewer';class ImageViewer extends Component { constructor(props) { super(props原创 2021-10-12 10:26:55 · 1771 阅读 · 0 评论 -
屏幕适配 媒体查询的基本用法
可以复制代码直接查看效果,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">原创 2021-09-03 17:19:00 · 209 阅读 · 0 评论 -
antd Upload onChange 传参数
项目中再table 中添加Upload,Upload中onChange只能返回file参数,如果相对起添加其他参数方便处理可以用下面方法onChange={(file) => this.handleUploadFileOnChange(file,record)<Form.Item key={index} required> {getFieldDecorator(`table[${record.key}].exampl原创 2021-08-10 11:26:41 · 2226 阅读 · 0 评论 -
禁止修改localStorage值 禁止写入localStorage值
禁止修改localStorage值window添加监听事件(监听storage变化)window.addEventListener(‘storage’, (e) => {localStorage.setItem(e.key, e.oldValue)})禁止写入localStorage值本质是禁止比人写入localStorage值window添加监听事件(监听storage变化)// 设置自己的识别符,如(Tzpt)window.localStorage.setItem("Tzptsz原创 2021-08-02 16:01:52 · 982 阅读 · 0 评论 -
ant design pro 菜单图标引入问题 iconfontUrl inconfont图标本地
ant design pro 菜单栏使用图标官网使用inconfont图标,推荐使用inconfont官网的线上地址查看地址:https://pro.ant.design/zh-CN/docs/new-page/我的项目是在config.ts 中的iconfontUrlexport default { navTheme: "dark", // 菜单的主题 primaryColor: "daybreak", // Ant Design 的主色调 layout: "sidemenu", /原创 2021-07-30 10:44:20 · 2596 阅读 · 0 评论 -
antd table columns ts报错
报错截图不能将类型“({ title: Element; dataIndex: string; ellipsis: { showTitle: boolean; }; render: (name: any, record: any) => Element; key?: undefined; width?: undefined; fixed?: undefined; } | { …; } | { …; } | { …; })[]”分配给类型“ColumnProps[]”。不能将类型“{ title:原创 2021-07-20 15:08:53 · 3582 阅读 · 7 评论 -
类型“string | null”的参数不能赋给类型“string”的参数。 不能将类型“null”分配给类型“string” ts
项目中使用TS提示报错类型“string | null”的参数不能赋给类型“string”的参数。 不能将类型“null”分配给类型“string”解决方法原创 2021-07-09 11:38:47 · 16015 阅读 · 4 评论 -
如何配置本地项目的Network地址 IP localhost
如何查看本地项目的Network地址重点提醒:一般项目搭建中就已经都配置好了,只是启动项目中没有显示而已。如果你的项目已经启动如:http://localhost:8000/user/login那你先不按照上述做配置,查一下你的电脑IP,直接打开启动的端口如我的http://192.168.110.3:8000 就可以直接打开,也可以把地址分享给局域网的同事直接使用1.vue配置链接: https://blog.csdn.net/qq_41497443/article/details/108577原创 2021-06-21 17:04:15 · 1714 阅读 · 0 评论 -
数组方法的总结 js es6
处理数组方法的总结按是否会修改原数组分成两大类。改变原数组的方法push/pop方法push:在数组尾部添加元素,会增加数组的长度pop:在数组尾部取出元素,会减少数组的长度var arr = [1, 2, 3, 4, 5];arr.push(6);console.log(arr); // [1, 2, 3, 4, 5, 6]let b = arr.pop();console.log(arr); // [1, 2, 3, 4, 5]console.log(b); // 6值得注原创 2021-05-27 10:15:18 · 200 阅读 · 0 评论 -
js 修改动态节点的属性、类名、图片的路径
这里写自定义目录标题js 修改节点的属性、类名、图片的路径动态节点通过index动态命名id修改节点的属性、类名修改节点的img路径js 修改节点的属性、类名、图片的路径使用原生js 动态修改动态节点的属性、类名、图片的路径动态节点通过index动态命名idreact<div className="viso-name" id={`viso-name${index}`} > <img id={'img'${index}} src=原创 2021-05-25 10:11:59 · 500 阅读 · 0 评论 -
ant design select placeholder不生效问题
ant design select placeholder不生效问题项目中使用react, ant design 使用select的value绑定一个默认值时,如果默认值是’'或null时,placeholder不生效解决方案默认值直接使用 undefined<a-form-item label="语音通知任务选择" > <a-select placeholder="请选择语音通知任务" @change="handleChange" :disabled="flag" v-m原创 2021-05-18 09:05:16 · 398 阅读 · 0 评论