草庐IT

纯前端

全部标签

【WebSocket项目实战】聊天室(前端vue3、后端spring框架)

最近我学习了WebSocket,为了更好地掌握这一技术,我决定通过做一个项目来巩固学习成果。在这个项目中,我将使用JavaScript和WebSocket来实现实时通信,让客户端和服务器端能够实时地传递和接收数据。通过这个项目,我希望能够更深入地了解WebSocket的工作原理,并且能够在实际应用中灵活运用这一技术。1.技术栈前端:vue3后端:spring框架2.项目实现1.前端1.项目初始化这里使用vueui创建vue项目,具体步骤可以参考这篇文章Vueui初始化项目2.项目目录自动生成的HelloWorld.vue文件可以删除,这里只用创建一个Chat.vue文件3.开发页面项目选择了A

一次理清前端文件上传操作(单个,多个,大文件切片)

相信大家在工作中也会遇到前端文件上传的需求,虽然已经在项目中使用FormData和elementUI中upload组件都实现过类似上传效果,但自己对这块一直一知半解,因此做一个笔记梳理一下前端方面的文件上传操作,以供日常参考。总体来说常用的两种方式:二进制传输和base64格式直接传输正文开始之前先简单认识一下文件上传的四个相关对象,以便后续阅读代码更直观:1、认识文件上传的四个相关对象1.files对象:可以通过指定input标签type属性为file来读取files对象,是一个由一个或多个文件对象组成的数组。同时也是blob对象的子类,继承了一些blob对象的方法2.blob对象:表示二进

HTML前端静态网页制作

在制作网页之前,首先先分析网页是那些部分组成,可以从以下的代码看出,分为头部、导航栏、logo部分、文字部分等等这些组成。多的不说,直接上代码,本次静态网页代码分为html和css部分。Document首页课程职业规划qqlilei前端开发        >前端开发        >前端开发        >前端开发   &nb

前端上传文件, Content-Type: multipart/form-data; boundary=----WebKitFormBoundarywd2ZRr4Hlgf2m5MT ;

multipart/form-data是文件传输的content-type格式,为了上传文件,等二进制流boundary是分隔符,分隔多个文件、表单项。如果不自己设置,默认由浏览器自动产生,并确保在整个请求体中是唯一的,以便服务器能够正确地解析请求中的各个部分,在使用multipart/form-data格式进行数据提交时,每个请求体的部分(part)都需要有一个唯一的分隔符(boundary)来标识不同的部分。这个分隔符是由客户端生成并在请求头中指定的。一般情况下,开发人员无需手动指定分隔符,因为大多数HTTP客户端库(如浏览器内置的XMLHttpRequest、Fetch或第三方库如axi

Web 前端—HTML+CSS系列

HTML、CSS一、HTML+CSS1.1什么是HTML、CSS1.2宇宙第一编辑器VSCode1.3Chrome浏览器1.4、深入了解网站开发一、HTML基本操作1.web前端三大核心技术2.HTML初始代码3.HTML注释4.HTML语义化5.标题与段落6.文本修饰标签7.图片标签与图片属性8.引入文件的地址路径9.跳转链接10.跳转锚点11.特殊符号12.无序列表13.有序列表14.定义列表15.嵌套列表16.表格标签17.表格属性18.表单标签19.表格表单组合20.div与span二、CSS基本语法1.内联样式与内部样式(css样式的引入方式)2.外部样式3.css中的颜色表示法4.

前端AJAX入门到实战,学习前端框架前必会的(ajax+node.js+webpack+git)(四)

你可以的,去飞吧!同步代码和异步代码回调函数地狱和Promise链式调用回调函数地狱缔造“回调地狱”↓制造里层回调错误,却在最外层接收错误→无法捕获axios源码抛出异常(未捕获)回调地狱省份:城市:地区:/***目标:演示回调函数地狱*需求:获取默认第一个省,第一个市,第一个地区并展示在下拉菜单中*概念:在回调函数中嵌套回调函数,一直嵌套下去就形成了回调函数地狱*缺点:可读性差,异常无法获取,耦合性严重,牵一发动全身*///1.获取默认第一个省份的名字axios({url:'http://hmajax.itheima.net/api/province'}).then(result=>{con

dockerfile自定义镜像安装jdk8,nginx,后端jar包和前端静态文件,并启动容器访问

dockerfile自定义镜像安装jdk8,nginx,后端jar包和前端静态文件,并启动容器访问简介centos7系统里面我准备的服务如下:5gsignplay-web静态文件内容如下:nginx.conf配置文件内容如下:Dockerfile内容如下:run.sh启动脚本内容如下:制作镜像并启动访问简介通过用dockerfile来制作一个自定义的镜像,基础镜像是centos7,然后里面安装jdk8,安装nginx,启动的后端jar包,以及前端打包的静态文件,将这些放到一个docker容器里面,然后启动容器访问项目。centos7系统里面我准备的服务如下:这里我将测试需要的文件都放在了/op

总结springboot项目中一些后端接收前端传参的方法

文章目录1、java方法入参里面什么注解都没有2、@PathVariable这种方式接收URL路径参数作为参数3、@RequestBody这种方式接收前端发送过来的请求体4、RestFul风格概念功能基本使用先创建一个springboot项目,并在pom文件中添加web依赖:dependency>groupId>org.springframework.bootgroupId>artifactId>spring-boot-starter-webartifactId>dependency>创建user对象:publicclassUser{privateStringname;privateInteg

前端开发者的创新工具:WebAssembly的崭露头角

文章目录什么是WebAssembly?WebAssembly的优势1.更快的性能2.更广泛的语言选择3.更高的安全性4.跨平台性5.与JavaScript的互操作性如何在前端开发中使用WebAssembly步骤1:安装编译工具步骤2:编写WebAssembly模块步骤3:编译WebAssembly模块步骤4:在JavaScript中使用WebAssembly步骤5:构建Web应用程序WebAssembly的应用场景1.游戏开发2.多媒体处理3.大规模数据处理4.科学计算结论🎉欢迎来到Java学习路线专栏~前端开发者的创新工具:WebAssembly的崭露头角☆*o(≧▽≦)o*☆嗨~我是IT·

对某登录站点的JS前端逆向思路

前言js逆向一直没有相关了解,虽然目前渗透遇见的不是很多,大多数遇见的要么不加密,要么无法实现其加密流程,不过最近看到了一个较为简单的站点正好能够逆向出来,就做了简单记录。本文旨在介绍js逆向的一些基础思路,希望能对初学js前端逆向的师傅有所帮助。JS定位在我们寻找JS源代码时,如果直接翻看全部的js文件以来寻找自己想要的一部分,无疑是复杂繁琐的,且工作量巨大,有点类似大海捞针,因此这里我们需要借助一些巧妙的办法来快速定位某标签的js语句,具体方法如下。元素审查定位当我们不确定某处的js文件位置时,可以使用F12,点击元素审查,然后点击登录处,观察事件监听器此时可以观察到login.js文件出