- 博客(12)
- 收藏
- 关注
RSS订阅原创 基于react函数式组件实现贪吃蛇及useRef闭包问题解决
最近用react写了个贪吃蛇，写的过程中参考了一些文档，基本都是用class写的，用函数式组件写的不多，所以记录下用函数式组件实现的，不算完美，仅供需要的小伙伴参考。先上效果图：代码实现主要包括以下几点：1.绘制背景，可以用表格也可以用空白背景2.定义snake、food、direction等状态3.监听键盘事件4.实现snake的移动：转向控制、整体移动5.snake吃食物：snake长度+1，生成下一个食物点，每吃到一个食物snake移动速度加快20，即定时器间隔-20
2022-02-23 15:42:25
540
原创 用js/react写一个计算器
效果图如下直接上代码目录如下，Button和Text是自己封装的Button组件和Input组件Button/index.jsimport react, {Component} from "react";import '../../index.css'class Button extends Component { render() { return <input type='button' value={this.props.v
2022-01-20 11:46:13
676
原创 谷歌浏览器静态资源http请求被转为https请求
加载图片这些静态资源的时候被转成https的，可能是浏览器的设置原因，谷歌浏览器左上角叹号——网站设置——不安全内改为允许
2021-01-20 15:55:42
1629
原创 前端调后端接口报错，301 Moved Permanently
服务器Nginx对80端口做了代理重定向导致，将80端口改为代理后的端口（8085）
2020-08-24 09:45:46
1704
原创 window.location.href跳转带有token的新链接时显示空白页
问题：从A平台跳到B平台并自动登录B平台，后端生成包含token的完整链接传给前端，前端window.location.href打开时页面显示空白页，手动刷新才会跳到新链接。原因：用window.location.href跳转新链接可能会带当前url的源信息过去，请求头header里会加上 Referrer 值，源头不一样。直接在浏览器上打开的话源头默认是空。解决方案：在入口index.html中添加<meta name="referrer" content="never">或者&l
2020-08-08 10:56:26
7741
1
原创 在vue项目中使用SockJS实现websocket通信
1.引入SockJS 和Stompnpm install sockjs-clientnpm install stompjsimport SockJS from 'sockjs-client'import Stomp from 'stompjs'2.代码实现data() { return { stompClient: '', timer: '' }},mounted () { this.init()},beforeDestroy() ..
2020-07-29 15:18:51
1830
原创 el-tree异步树（懒加载）搜索时默认展开节点（懒加载和非懒加载之间切换）
el-tree懒加载的情况下，搜索树节点搜到的数据不会默认展开，要展开的话需要切换回非懒加载。以下为HTML代码：<div style="height: 96%"> <el-input placeholder="搜索组织名称" v-model="filterText" @keyup.enter.native="searchData" @click="searchData" :clear-icon-click="clearSearch"
2020-07-28 14:36:07
4338
1
原创 el-upload通过new FormData()上传带参数的图片
1.一定要包含头文件'Content-Type': 'multipart/form-data'2.formData数据和普通参数不能同时传递，否则会报错，并且后端上传图片的接口debug进不来，如果同时要上传图片和对应的id，要把id也写进formData数据中let fd = new FormData()fd.append('file', val.file)fd.append('id', this.id)3.formData数据之间打印的话是空的，可以通过get来打印formDat
2020-07-21 11:33:31
1816
原创 npm ERR! cb() never called!报错
vue引入新组件时报错npm ERR! cb() never called!npm ERR! This is an error with npm itself. Please report this error at:npm ERR! <https://npm.community>解决方案：1.删除node_modules（亲测不用删除package-lock.json文件）2.管理员方式运行cmd，进入项目所在目录，执行npm cache clean --forc...
2020-06-30 16:43:54
263
转载 最新create-react-app添加less配置
https://www.jianshu.com/p/ac377fe5e2711.添加const lessRegex = /\.less$/;const lessModuleRegex = /\.module\.less$/;2.添加{ test: lessRegex, exclude: lessModuleRegex, use: getStyleLoaders( { importLoaders: 2, sourceMap: isEnvProducti..
2020-06-18 16:49:32
369
原创 http请求出现406错误解决方案
后端接口postman通的，但是前后端联调时出现406错误，在index.html入口文件中加上<meta name="referrer" content="no-referrer"/>即可
2020-06-18 11:36:18
2520
空空如也
空空如也
TA创建的收藏夹 TA关注的收藏夹
TA关注的人