草庐IT

纯前端

全部标签

后端java 如何返回给前端 JSON数据

后端java如何返回给前端JSON数据JSON数据vardata=[{checkinginTime:'2023-04-23',ip:'111'},{checkinginTime:'2023-04-22',ip:'111'},{checkinginTime:'2023-04-28',ip:'111'},{checkinginTime:'2023-04-24',ip:'111'}];后端返回在Java后端中,你可以使用Spring框架提供的@ResponseBody注解将Java对象转换为JSON格式的数据,并返回给前端。以下是一个示例代码,它将一个JavaList对象转换为JSON格式的数据,并

react+jest+enzyme配置及编写前端单元测试UT

原文合集地址如下,有需要的朋友可以关注本文地址合集地址文章目录安装及配置enzyme渲染测试技巧一、常见测试二、触发antdesign组件三、使用redux组件四、使用路由的组件五、mock接口网络请求六、mock不需要的子组件安装及配置安装相关库:首先,使用npm或yarn安装所需的库。npminstall--save-devjestenzymeenzyme-adapter-react-16enzyme-to-json配置Jest:在项目根目录下创建一个jest.config.js文件,并配置Jest。//jest.config.jsmodule.exports={setupFilesAft

【前端|CSS系列第4篇】面试官:你了解居中布局吗?

欢迎来到前端CSS系列的第4篇教程!如果你正在寻找一种简单而又强大的前端技术,以使你的网页和应用程序看起来更加专业和美观,那么居中布局绝对是你不能错过的重要知识。在前端开发中,实现居中布局是一项必备技能,无论是垂直居中、水平居中,还是同时实现垂直和水平居中。这不仅对于构建响应式网页至关重要,还在设计弹窗、创建导航菜单和设计登录界面时都能派上用场。精通居中布局将为你的前端技能提升加分,并为你的项目增添专业的光彩。除此之外,居中布局也是前端面试中的高频面试题,理解学会它,并能够不看着博客熟练的写出来,一定能够帮助你在面试中给面试官一个好印象,从而拿下面试!让我们一起开始这个令人兴奋的居中布局之旅吧

前端传值,java后端接收

1.前端多个对象数组的JSON.stringify转化为字符串传参,后端集合对象接收:vararr=[0,1,2];varmyJSON=JSON.stringify(arr);此时myJSON字符串就是’[0,1,2]',传给后台接受前端 //页面加载完毕 $(function(){ vardata=[{ loginAct:111, loginPwd:1111, },{ loginAct:222, loginPwd:2222, }]; //转化成json格式发送 data=JSON.stringify(data); //发送请求 $.ajax({ url:'t

前端性能优化:页面加载速度慢怎么办?

文章目录前端性能优化如何识别页面加载速度慢的原因性能优化的方式提高资源的请求速度http缓存--提升二次访问的响应速度CDN缓存静态资源缓存webpack的hash策略-文件资源缓存减少资源请求量图片懒加载代码构建优化webpack资源压缩treesharking-js代码的精简分包按需加载浏览器渲染优化webworkerGPU加速前端性能优化如何识别页面加载速度慢的原因方式1:lighthouse浏览器开发者工具lighthouse插件,该插件会对当前的页面进行性能分析,并提出详细的文档和建议,解释为什么是这个分数,最后指出页面存在的问题,为进一步改进给出方案总阻塞时间:阻塞主线程并影响页面

前端性能优化:页面加载速度慢怎么办?

文章目录前端性能优化如何识别页面加载速度慢的原因性能优化的方式提高资源的请求速度http缓存--提升二次访问的响应速度CDN缓存静态资源缓存webpack的hash策略-文件资源缓存减少资源请求量图片懒加载代码构建优化webpack资源压缩treesharking-js代码的精简分包按需加载浏览器渲染优化webworkerGPU加速前端性能优化如何识别页面加载速度慢的原因方式1:lighthouse浏览器开发者工具lighthouse插件,该插件会对当前的页面进行性能分析,并提出详细的文档和建议,解释为什么是这个分数,最后指出页面存在的问题,为进一步改进给出方案总阻塞时间:阻塞主线程并影响页面

前端监听键盘事件

需求就如题所示1.监听在react中监听如下:useEffect(()=>{window.addEventListener('keydown',getKeyDown);return()=>{window.removeEventListener('keydown',getKeyDown);//销毁};},[])keydown事件是键盘的相关事件,我们主动去监听一下,然后别忘了去销毁, 然后有个写法:在useEffect中使用return返回了一个清除监听的函数,实践了一下return的执行时机,发现是在页面切走的时候,也就是说,当前的组件被销毁的时候执行,相当于卸载的钩子函数。2.事件const

springboot后端接收前端传数组参数方法

1::前端传数组参数用ids,不要用ids[],因为是传数组会自动加上[] @ApiOperation(value="批量删除",notes="批量删除")@DeleteMapping(value="/batchDelete")publicResult?>delete(@RequestParam(name="ids[]",required=true)ArrayListInteger>ids){sysStudyTestFileService.removeBatchByIds(ids);returnResult.ok("删除成功");}2:使用postman传数组有三种方法2-1:方法一,后端使用

只会用插件可不行,这些前端动画技术同样值得收藏-JavaScript篇(上)

目录前言settimeout/setintervalrequestAnimationFrame基本用法时间戳参数帧数与时间戳计算自动暂停JS中的贝塞尔曲线概念公式二次贝塞尔三次贝塞尔N次贝塞尔贝塞尔曲线+动画动画类在动画中使用贝塞尔总结相关代码:贝塞尔曲线相关网站:参考文章:前言上篇文章我们详细的讲述了CSS中的原生动画技术,了解了过渡与动画属性。那么本文将与大家分享原生JS中的动画方案,有兴趣的同学请接着往下看JS实现动画的形式有定时器,动画帧以及动画API技术settimeout/setinterval早期的JS中动画帧和动画API的概念尚不存在,开发者通常使用定时器生成对应动画html,

如何确定bug是前端还是后端的错误?

前言:学会分析一个bug属于前端还是后端的错误,可方便开发快速定位问题,缩短与开发的沟通成本,也是测试人员的必备技能,笔者面试时就曾经被问到过,那就一起分析一波吧。一、定义bug类型:1、后端错误(逻辑、性能、数据、安全性):(1)请求有数据,响应无数据/数据异常2、前端错误(界面、布局、交互、兼容性):(1)前端已写入数据,但是请求无数据/数据异常(2)后端已返回数据,前端却无显示/异常显示(3)文字排版/布局错乱、文字错误(错别字/提示语待优化)二、判断方法:1、浏览器开发者工具(F12)进行查看网络(Network):记录前端向服务器发出去的http请求信息,Header里可以查看详细的