![](https://img-blog.csdnimg.cn/20190927151124774.png?x-oss-process=image/resize,m_fixed,h_224,w_224)
视图层大杂烩
React、Vue、AntDesign等
小问号我们是朋友
熟能生巧,愈练则强
展开
-
前端下载PDF内容空白且大小偏大问题解决
前端使用React框架axios请求后端接口下载文件,请求返回正常但文件大小和内容异常。经排查,其原因是使用了mockjs用作数据模拟,导致了请求异常,将其注释掉后,文件大小与内容恢复正常。原创 2023-07-11 09:43:26 · 1622 阅读 · 0 评论 -
nginx配置文件中location 配置项的几种情况
以上就是今天要讲的内容,本文介绍了nginx配置文件中location项的使用。原创 2022-07-18 09:12:56 · 3961 阅读 · 0 评论 -
Nginx服务配置解决跨域问题
nginx可以对服务器进行代理,这里记录下配置过程。1.nginx配置文件配置部分nginx.conf:红圈部分为nginx代理地址配置。2.web工程配置部分工程中只需要配置ip和端口地址之后的部分即可,PRESENT_IP 为当前环境使用的url。//配置后台接口URL地址export const ipList = { //服务器环境中,Nginx会代理接口ip,所以这里只使用基础url即可 PRESENT_IP : ...原创 2022-02-11 16:24:51 · 1259 阅读 · 0 评论 -
JS动态输出JSON数据
现需将不同内容,类似结构的JSON数据动态输出到页面之上,特此记录。1.数据原型及效果设计 测试数据包括最多三层JSON结构,拟采用“-”作为标识数据深度的标识符。数据详情-案号:11111111-监狱案件编号:0000001-罪犯姓名:张三-罪犯编号:89457-检察机关名称:XXX检察院-出庭人员信息:---序号:1-----姓名:王五-----职责:无-----时间戳:2010-10-29 15:04:03---序号:2-----姓...原创 2021-12-10 14:41:04 · 1373 阅读 · 2 评论 -
React中使用CryptoJS计算文件哈希值
读取上传的文件,使用crypto-js进行SHA1、MD5、SHA256等算法的哈希计算。1.创建通用工具类handleFileUtils.js:import CryptoJS from "crypto-js";/** * 进行文件操作的工具类 */export default { /* 计算文件哈希 */ getFileHash(value){ let reader = new FileReader(); reader...原创 2021-11-19 14:49:43 · 1304 阅读 · 0 评论 -
React中使用全局IP配置
平时请求后台数据接口时,由于不同环境下接口地址不同,常常需要修改多处请求的URL。现使用全局IP配置,使得只修改一处便可以切换不同环境,利于开发维护。1.创建全局配置文件 将不同环境的接口地址请求头放在这个文件中,方便管理。ipConfig.js://配置后台接口URL地址export const ipList = { PRESENT_IP : 'http://localhost:8081/evidences', TEST_I...原创 2021-11-12 15:10:04 · 3606 阅读 · 2 评论 -
Webpack配置-初探
webpack是一个用于JavaScript 应用程序的静态模块打包工具,这里我们简单配置一个基于webpack的demo。1.初始化package.json文件,按需安装需要的依赖使用npm安装webpack://全局安装webpacknpm install -g webpack在终端(terminal)使用命令自动创建package.json文件:npm init{ "name": "webpack-try", "version": "1.0.0", "desc..原创 2021-04-15 17:25:11 · 92 阅读 · 0 评论 -
React中处理this指向的几种方法
在实际项目中,一般处理函数的this都会默认指向当前函数,我们需要将this调整为指向其组件实例本身。这里提供几种方法供借鉴。1.直接在函数中使用this,会出现undefined错误直接在函数中使用this的话,无法访问到实例的state,会引起报错。2.三个方法来处理我们可以从构造函数绑定this、改造成箭头函数和在调用方法处绑定this来实现this正常指向组件实例。import React, { Component } from 'react';import {Heade原创 2021-04-12 15:02:07 · 315 阅读 · 0 评论 -
React中使用Redux及其中间件来作为处理异步任务的一种解决方案
在React项目中,我们需要处理异步请求所出现的情况。这里我们采用Redux及其中间件。1.整合Redux到React项目中通过引入Provider组件将store导入到所有内部组件上。import React from 'react'import ReactDOM from 'react-dom'import Router from './router'import { Provider } from 'react-redux'import store from './redux/s原创 2021-04-09 16:05:38 · 291 阅读 · 0 评论 -
如何利用好浏览器的F12键
前端朋友们在项目调试中一定会用到浏览器运行调试,这里我们用Chrome浏览器为例,介绍一下具体用法。1.运行项目之后访问项目地址,打开F12按下F12键,在导航处选择Sources,找到项目源码,进入需要调试的代码中。2.Debug调试并实时查看结果在需要打断点的地方单击,然后刷新页面进入Debug模式。基本操作F9进入下一步、F8跳出这个断点。...原创 2021-04-07 15:51:19 · 1018 阅读 · 0 评论 -
React进行axios二次封装
Axios 是一个基于 promise 的 HTTP 库,可以用在浏览器和 node.js 中。在实际的项目中,我们一般会进行二次封装。1.引用及准备封装之前首先进行引用及构造请求地址API。其中services模块汇总了所有请求地址与类型,请求示例如reqCheckLogin所示。/** * services模块根据接口文档定义接口的名称和方法 * 根据模块拆分文件 * index.js为出口文件,需要引入其他的services并整合 */import login from .原创 2021-03-31 17:18:27 · 802 阅读 · 0 评论 -
React中两种遍历数据的方法(map、forEach)
React处理多组数据时,时常会用到遍历来处理数据,在这里记录下两种方法。1.map处理数据 map方法处理数据之后会返回一个新的数组,同时不会改变原数组的值;如果数组为空则无法进行遍历,所以要对数组做非空校验。{ subSystem.list.length>0 && subSystem.list.map((item)=>{ return <Breadcrumb.Item className={styles.breadCrumbI..原创 2020-12-31 12:29:34 · 5909 阅读 · 0 评论 -
Nginx服务的部署与启动
近期因测试环境需要部署一版前后端分离的项目,考虑到需要反向代理及负载均衡,因此在web端使用了Nginx作为服务器。前期的准备工作不再赘述,下面直接部署服务启动项目。1配置部署Nginx并启动 这是Nginx的根目录,在这里启动命令行来执行Nginx服务启动命令。 启动前需要配置Nginx的nginx.conf文件,一般需要修改server的监听接口(listen)、访问域名(server_name)与匹配规则(location)。随后使用nginx -t -c /ngi...原创 2020-11-30 14:43:15 · 620 阅读 · 1 评论 -
React中父组件调用子组件中声明的方法
React组件之间的通信可以通过props和onRef。这里我们用onRef来实现父组件中调用子组件方法1.一个实栗 父组件://父组件class ParentModal extends React.Component { handleOkClick = () => { //调用子组件的方法 this.ChildForm.FormSubmit(this) } render() { return ( <Modal title="父组...原创 2020-09-29 15:15:41 · 332 阅读 · 0 评论 -
React中子组件共享父组件状态(state)的解决
项目当中遇到请求后台时,返回的值写入到了父组件的state当中,现需要向子组件当中进行同步。下面是解决过程:1.基本思路 在父组件存放子组件的部分为子组件声明其传递属性为this.state.属性;然后在子组件中调用this.props.属性既可完成共享。2.实例 在父组件当中将state的属性赋值到子组件的标签当中; 在子组件当中使用props来接收相关的属性值。...原创 2020-09-17 16:41:23 · 1744 阅读 · 0 评论