知知洋洋-优快云博客

官网只给了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 356

原创可以编辑的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 1002

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

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

原创 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 592 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 703

原创 axios 配置 Content-Type: application/x-www-form-urlencoded

import qs from 'qs'import { loginWisdom } from "../../../../api/index";componentDidMount() { this.getLoign() }getLoign = () => { let param = { username: '***', client_key: '***', password: 123456 } loginWisdom(q.

2022-04-19 18:04:23 837

原创使用阿里云服务和nginx搭建web网站

购买服务器建议服务系统购买centos 7.6 64位可以参考https://blog.youkuaiyun.com/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 3634

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

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

原创 react npm run build打包项目传参数

问题描述我们项目使用用k8s集群，前端有登录和管理两个服务组成，管理服务代码是antd pro框架写的。我们的管理服务的代码几乎不变，但登陆页面会根据客户需求变化。不同的登陆页面，退出登陆有区别。考虑管理服务的代码不同项目只是细微差别，单独拉分支，没有必要。我们一般都是脚本部署项目，直接从代码库拉代码。所以我们可以根据打包参数的不同，判断不同的退出登陆接口。代码展示第一步antd pro 用的是umi, umi 的属性define可以直接配置在 config.js中修改，我用的是ts位置如

2022-02-14 17:36:17 1737

原创前端代码安全配置 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 6335

原创有关详细信息，请参阅 https:/go.microsoft.com/fwlink/?LinkID=135170 中的 about_Execution_Policies

问题截图1.必须以管理员的身份打开powershell2.执行下面命令即可set-executionpolicy remotesigned

2021-12-20 15:24:14 2602

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

原创前端解决Safari浏览器下时间不能正常显示

safari浏览器不支持yyyy-MM-dd的时间格式展示，我们可以把数据改成yyyy/MM/dd 这种格式createdAt: alldata[i].createdAt.replace(/-/g,"/")通过替换的方式改变时间格式，就可以在Safari浏览器和Chrome显示时间

2021-12-13 16:12:42 1118

原创 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 29133 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 1360

原创 css动画实现进度条

负责代码看效果<!DOCTYPE html><html><head> <meta charset="utf-8"> <title></title> <style> .image1up { position: absolute; border-radius: 10px; top: 8px;

2021-12-09 14:42:46 1809

原创 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 1884 1

原创 ts 子组件中定义的方法报错

报错事例typtscript 组件中定义方法报错不能将类型“{ onRef: (ref: any) => void; }”分配给类型“IntrinsicAttributes & IntrinsicClassAttributes<Component<Omit<IProps, “form”>, any, any>> & Readonly<…> & Readonly<…>”。类型“IntrinsicAttributes

2021-10-12 09:11:16 3834

原创 vue 控制键盘自带修饰符

vue 控制键盘自带修饰符网页做防百度搜索栏，看有代码用到了@keydown.down=“changeDown()”,@keydown.up.prevent=“changeUp()”控制在 input 框中键盘使用⬆️和⬇️的，我们一般使用键盘的索引，如但代码多且不优雅keydown(event) { // console.log(event); //下键：40 上键：38 if (event.keyCode == 38) { //按的上键

2021-09-15 09:29:29 338

原创屏幕适配媒体查询的基本用法

可以复制代码直接查看效果，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 256

原创 js 前端常见的校验

开头可以为零的正整数，且不可以01、02、00这样的 const reg = /^([1-9]\d*|0)(\.\d*[1-9])?$/ 开头不为零的正整数 1212、1、3434 const reg = /^[1-9]{1}[0-9]*$/ 身份证校验 const reg = /(^\d{15}&)|(^\d{18})|(^\d{17}(\d|X|x)$)/; 手机号校验 const reg = /^1[3456789...

2021-08-12 11:33:55 1495

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

原创禁止修改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 1133

原创 vue 验证码

效果图验证码组件可以直接复制使用<template> <div> <canvas id="myCanvas" style="width:100px;height:30px" @click="updatedra"></canvas> </div></template><script> export default { name:'ValidCode',

2021-07-30 16:41:03 168

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

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

原创如何选择购买阿里云服务器

购买阿里云服务器1.注册阿里云账号2.进入服务器购买页面3.根据项目业务场景选择合适的服务器配置4.付款，开发票附：申请域名、申请备案、售后问题处理方法如果项目比较复杂，或不知道怎么选购，可以添加微信宋15291410558，给您推荐整套云上架构，指导购买。金额比较大，可申请单独优惠注册阿里云账号通过链接进入阿里云官网：https://www.aliyun.com/?utm_content=se_1009145079阿里云账号分为个人实名认证账号、企业实名认证账号个人实名认证账号和

2021-07-12 11:53:12 180

原创类型“string | null”的参数不能赋给类型“string”的参数。不能将类型“null”分配给类型“string” ts

项目中使用TS提示报错类型“string | null”的参数不能赋给类型“string”的参数。不能将类型“null”分配给类型“string”解决方法

2021-07-09 11:38:47 16327 5

原创如何配置本地项目的Network地址 IP localhost

如何查看本地项目的Network地址重点提醒：一般项目搭建中就已经都配置好了，只是启动项目中没有显示而已。如果你的项目已经启动如：http://localhost:8000/user/login那你先不按照上述做配置，查一下你的电脑IP，直接打开启动的端口如我的http://192.168.110.3:8000 就可以直接打开，也可以把地址分享给局域网的同事直接使用1.vue配置链接： https://blog.youkuaiyun.com/qq_41497443/article/details/108577

2021-06-21 17:04:15 1870

空空如也

空空如也