前端
hcolder
这个作者很懒,什么都没留下…
展开
-
Antd实现弹框编辑表单功能
问题:在使用Antd实现表单的编辑功能时,我们需要将数据回显到弹窗中的表单例如:但是当我们使用Antd的表单时会发现一下问题:1.当使用initialValue只能显示一开始选择的值,无法更改。也就是当我们第一次选择时,能正常显示,但是当我们接着去选择其他数据时,还是回显第一次选择的数据。2.当使用最小控件的value,解决了第一点问题。但是当表单提交时,后端无法辨别表单项,从而无法更改。解决方法:还是使用initialValue,但是在Modal中增加destroyOnClose={tru原创 2021-05-20 15:39:39 · 2947 阅读 · 1 评论 -
Antd+Spring Security关于Form Data的调用问题
Antd中的Form表单,默认以json模式提交信息。而SpringSecurity关于用户名的读取要求的是以Form Data的形式解决方法:import qs from 'qs'const data = qs.stringify(values)axios.post('http://localhost:8090/chat/login',data)...原创 2021-05-06 23:20:05 · 257 阅读 · 0 评论 -
Antd中Form表单输入组件的动态赋值
Antd:需求根据选择获取对应值,并将该值回显到表单的输入框中。解决方法首先使用createRef()获取formformRef = React.createRef()然后再Form表单上绑定该formRef <Form name="normal_login" className="register-form" onFinish={this.onFinish}原创 2021-03-27 20:02:24 · 2431 阅读 · 0 评论 -
react如何修改标签页名
前言React默认打开的标签页名为React App,那么我们如何根据我们的项目来全局更改标签页名呢?方法找到项目中的public文件夹,再找到下面的index.html文件,修改其中的<title>React App</title>将其中的React App改为自己想要的名字即可如果要修改图标,同样在该文件中查找相关的标签进行更改。...原创 2021-03-25 16:10:05 · 1768 阅读 · 0 评论 -
常用于用户认证的方式之JWT(Json Web Token)理解
JWT,全称Json Web Token;是为了在网络应用环境间传递声明而执行的一种**基于JSON**的开放标准((RFC 7519)。该token被设计为紧凑且安全的,特别适用于分布式站点的单点登录(SSO)场景。(如果不知道何为单点登录,请往下拉查看)。JWT的声明一般被用来在身份提供者和服务提供者间传递被认证的用户身份信息,以便于从资源服务器获取资源,也可以增加一些额外的其它业务逻辑所必须的声明信息,该token也可直接被用于认证,也可被加密。原创 2021-03-15 23:41:43 · 571 阅读 · 1 评论 -
关于React部署服务器中有关BrowserRouter和HashRouter的使用
前言在新版本的React中,Router组件被拆分为BrowserRouter,HashRouter,createMemoryHistory,虽然更加的规范,但也带来了更多的问题。问题本来项目开始我用的是BrowserRouter做路由跳转,在开发环境下完全没有问题。但当部署到服务器上时,只有首页加载正常,当跳转路由时,便找不到路径,报404。Browserhistory ,Hashhistory 介绍BrowserRouter使用的是Browserhistory ,而HashRouter使用的是原创 2020-11-24 14:45:54 · 1940 阅读 · 0 评论 -
React修改图片大小
一、CSS在css文件中设置样式名和设置调整大小的参数.login-img{ width: 100%; height: 720px;}二、使用classNameimport logo from '../../images/login.jpg';<img src={logo} alt="logo" className="login-img"/>三、导入该css(不导入不生效!!)import './login.css';完成上述步骤即可通过css调整图片大原创 2020-11-07 22:20:44 · 3089 阅读 · 0 评论 -
React使用axios的post方式和后端进行数据交互
一、以下的例子是通过Antd的Form表单提交数据,和后台进行数据交互。该方法通过axios的post方法,将value通过定义好的接口传递给后台,并获得响应体。<Form {...layout} name="nest-messages" onFinish={onFinish} validateMessages={validateMessages}>const onFinish = values => { console.log("values: ", val原创 2020-10-05 21:55:44 · 4867 阅读 · 1 评论 -
Antd的Table组件实现自定义分页数据条数
在项目中遇到这个问题,因为Antd的Table组件默认一页显示10行,而项目中只需要5行。看了很多博客,都是什么先将pagination设置为false,然后再自定义分页组件,而且很多博客都是照搬。本人认为设计者肯定不会设计为了一个条数就得将整个分页属性都重新设计的麻烦操作,后面还是自己去看官网发现有pageSize这个属性,再加上大胆尝试,用一行代码实现自定义分页条数,如下图所示: <Table rowSelection={{原创 2020-10-05 11:07:46 · 9112 阅读 · 7 评论 -
React学习一——webstorm环境搭建和React基础语法
React一、环境搭建Node.js+WebStorm+react.js Node.js在rTool上搜索node.js,下载安装包打开安装,除了路径,一路next(1) 修改环境变量计算机->属性->高级系统设置->环境变量->系统变量->path编辑->将安装路径加入其中(2) 测试此时可以执行 node -v 和 npm -v 分别查看node和npm的版本号:(3) 配置npm在安装全局模块时的路径和缓存ca原创 2020-08-12 17:31:17 · 2639 阅读 · 1 评论 -
React学习二——关于前端知识的梳理和React重点知识理解
一、什么是#(hash)?(1) http请求不包含##是用来指导浏览器动作的,对服务器端完全无用。所以,HTTP请求中不包括#。 比如,访问下面的网址,http://www.example.com/index.html#print,浏览器实际发出的请求是这样的:GET /index.html HTTP/1.1Host: www.example.com(2) #后的字符在第一个#后面出现的任何字符,都会被浏览器解读为位置标识符。这意味着,这些字符都不会被发送到服务器端。(3) 改变#不触发网页原创 2020-08-12 17:10:48 · 185 阅读 · 0 评论 -
MobX——React的数据流方案
Mobx是一种前端数据流方案,相较于redux,它对数据的处理显得更加的简洁,更加符合store增删查改的的操作概念。MobX通过透明的函数响应式编程使得状态管理变得简单和可扩展。(官方)MobX背后的哲学很简单:任何源自应用状态的东西都应该自动地获得。流程图:(接下来将会一一介绍以下功能)一、安装安装: npm install mobx --save。 React 绑定库: npm install mobx-react --save。 要启用 ESNext 的装饰器 (可选), 参见下面。CD原创 2020-08-10 15:16:25 · 846 阅读 · 0 评论 -
JQuery——一个快速、简洁的JavaScript库
JQueryjQuery是一个快速、简洁的JavaScript库,极大地简化了 JavaScript 编程。jQuery设计的宗旨是“write Less,Do More”,即倡导写更少的代码,做更多的事情。它封装JavaScript常用的功能代码,提供一种简便的JavaScript设计模式,优化HTML文档操作、事件处理、动画设计和Ajax交互。一、 语法和选择器jQuery 语法是通过选取 HTML 元素,并对选取的元素执行某些操作。基础语法: $(selector).action()美元符号原创 2020-08-05 11:15:23 · 1389 阅读 · 0 评论