草庐IT

纯前端

全部标签

post请求:前端传递数组到后端,后端顺利接受数组

前端: 可能需要解释的地方:deletePicture是一个数组。后端:后端采用@requestBody注解+JSONArray来接受前端数组(测试过了,确实可以接收) 总结:①前端采用JSON.string将对象转化为字符串②后端采用@requestbody注解+JSONArray类(hutool工具类里面的一个类)来接受前端传递过来的数组一些废话:本人对前端了解不是很通透,如果有什么讲的不好的地方,请担待。最后,谢谢的观看!

读取swagger接口文档、自动生成前端ts或js代码

目录依据swagger(openapi)文档一键生成typescript或javascript代码先上效果图1.安装脚手架2.打开你的项目3.运行命令3.1ts代码3.2js代码4.实战操作4.1运行命令ts代码js代码依据swagger(openapi)文档一键生成typescript或javascript代码平时在和后端对接时,总是要把后端swagger声明好的类型在ts中再实现一遍,写一堆interface;今天推荐一个库,可以根据swagger文档,直接生成ts或js代码,并且有良好的代码提示注意:swagger文档版本需要3.0及以上先上效果图1.安装脚手架npmi-g@zerone

前端搭建小人逃脱游戏(内附源码)

Thesandaccumulatestoformapagoda✨写在前面✨功能介绍✨页面搭建✨样式设置✨逻辑部分✨写在前面上周我们实通过前端基础实现了打字通,当然很多伙伴再评论区提出了想法,后续我们会考虑实现的,今天还是继续按照我们原定的节奏来带领大家完成一个小人逃脱游戏,功能也比较简单简单,也是想借助这样一个简单的功能,然后来帮助大家了解我们JavaScript在前端中的作用,在前面的文章当中我们也提及到我们在本系列的专栏是循序渐进从简单到复杂的过程,后续会带领大家用前端实现翻卡片、扫雷、贪吃蛇等有趣的小游戏,纯前端语言实现,都会陆续带给大家。欢迎大家订阅我们这份前端小游戏的专栏。✨功能介绍

前端搭建小人逃脱游戏(内附源码)

Thesandaccumulatestoformapagoda✨写在前面✨功能介绍✨页面搭建✨样式设置✨逻辑部分✨写在前面上周我们实通过前端基础实现了打字通,当然很多伙伴再评论区提出了想法,后续我们会考虑实现的,今天还是继续按照我们原定的节奏来带领大家完成一个小人逃脱游戏,功能也比较简单简单,也是想借助这样一个简单的功能,然后来帮助大家了解我们JavaScript在前端中的作用,在前面的文章当中我们也提及到我们在本系列的专栏是循序渐进从简单到复杂的过程,后续会带领大家用前端实现翻卡片、扫雷、贪吃蛇等有趣的小游戏,纯前端语言实现,都会陆续带给大家。欢迎大家订阅我们这份前端小游戏的专栏。✨功能介绍

前端环境变量及vite中本地环境配置实践

前言前端在之前并没有工程化的概念,甚至开发环境、测试环境、生产环境全靠大家手动配置。有了nodejs之后,环境变量 (environmentvariables)这个概念,便慢慢进入了前端的视野,方便了前端各种环境自动化配置及本地环境的运行。现如今 webpack  、 rollup、vite 等打包工具大行其道,我们不得不将它重视起来。在现代前端开发的整个链路中, 环境变量起到一个项目的配置枢纽作用,也是前端提效的重要一环。今天,我们就一步一步剖析环境变量在前端的使用场景及环境变量是如何在前端环境中发挥作用的。1、cross-env配置环境变量,"build":"cross-envNODE_E

JavaScript前端中的伪类元素before和after使用详解

在前端开发中,伪类是一种让你可以选择元素的某个状态或位置的CSS选择器。其中,:before和:after伪类允许你在一个元素之前或之后插入内容。:before和:after伪类创建的元素是不在HTML文档中的,它们是通过CSS生成的。可以用它们来在一个元素的前面或后面插入一些内容,这些内容可以是文本、图像或者其他任何可以用CSS生成的内容。before/after伪类相当于在元素内部插入两个额外的标签,其最适合也是最推荐的应用就是图形生成。在一些精致的UI实现上,可以简化HTML代码,提高可读性和可维护性。总之,before和after伪类允许你在一个元素前后插入内容,这些内容可以是文本、图

快速掌握Vue3:速成Vue3前端开发看这篇就够啦

一、Vue基本概念1.1-Vue3的优点Vue3支持Vue2额大多数特性。更好的支持TypeScript。打包大小减少41%。初次渲染快55%,更新渲染快133%。内存减少54%。使用proxy代替defineProperty实现数据响应式。重写虚拟DOM的实现和Tree-Shaking。二、API2.1-setup我们可以跟以前定义data和methods,但是vue3中我们更推荐使用setup函数。setup是一个函数。只在初始化时执行一次。以后大部分代码都是在setup中写。返回一个对象,对象中的属性或方法,模板中可以直接使用。setup返回的数据会和data和methods进行合并,s

笔记:无界微前端入门

无界微前端框架笔记wujie(无界)是腾讯在2022年7月推出的微前端框架,下面是腾讯前端团队的原话无界微前端方案基于webcomponent容器+iframe沙箱,能够完善的解决适配成本、样式隔离、运行性能、页面白屏、子应用通信、子应用保活、多应用激活、vite框架支持、应用共享等用户的核心诉求。官方文档地址无界对比其他微前端实现方案文章地址简单实现以vite创建的两个vue3项目为例(分别为主应用main和子应用son1)主应用安装wujie-vue3依赖yarnaddwujie-vue3主应用引入wujie-vue3/*main项目->main.js*/import{createApp}

(简易详细)spring boot 使用拦截器 实现拦截前端请求并返回json到前端页面

一、核心方法代码returnJson /*返回客户端数据*/privatevoidreturnJson(HttpServletResponseresponse,Stringjson)throwsException{PrintWriterwriter=null;response.setCharacterEncoding("UTF-8");response.setContentType("text/html;charset=utf-8");try{writer=response.getWriter();writer.print(json);}catch(IOExceptione){}finally

前端Vue入门-day07-Vuex入门

(创作不易,感谢有你,你的支持,就是我前行的最大动力,如果看完对你有帮助,请留下您的足迹)目录自定义创建项目vuex概述构建vuex[多组件数据共享]环境 创建一个空仓库state状态1.提供数据:2.使用数据:mutations 辅助函数-mapMutationsactions辅助函数-mapActions Getter 模块module(进阶语法)访问语法-state访问语法-getters访问语法-mutation访问语法-action自定义创建项目目标:基于VueCli自定义创建项目架子开始创建项目 选择自定义创建项目  选择文件需要配置的特性  选择版本 是否选择历史模式css预处理