Socket 前端项目结构搭建

npm install socket.io-client --save
npm install element-plus --save
npm install vue-router@4.0.12 --save

简单的页面搭建
在这里插入图片描述

聊天系统登录前端实现

登录模板

<template><div class="login-container"><el-form ref="form" :model="form" class="login-main"><h1 style="text-align: center">摸鱼在线聊天系统</h1><el-form-item><el-input v-model="form.username" placeholder="请输入用户名"></el-input></el-form-item><el-form-item style="text-align: right"><el-button type="primary" @click="onSubmit">登录</el-button></el-form-item></el-form></div>
</template><script>
export default {name: "Login",data() {return {form: {username: ""}};},mounted() {},methods: {onSubmit() {}}
};
</script><style scoped>
html,
body {height: 100%;
}
.login-container {width: 100vw;height: 100vh;background-image: url("../assets/login_bg.png");background-size: cover;overflow: hidden;
}.login-container .login-main {border-radius: 5px;background-clip: padding-box;margin: 280px auto;width: 350px;padding: 35px 35px 15px;background: #fff;border: 1px solid #eaeaea;-webkit-box-shadow: 0 0 25px #cac6c6;box-shadow: 0 0 25px #cac6c6;
}
</style>

main.js

引入socket
在这里插入图片描述

在这里插入图片描述

本文来自互联网用户投稿,该文观点仅代表作者本人,不代表本站立场。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如若转载,请注明出处:http://www.mzph.cn/news/17279.shtml

如若内容造成侵权/违法违规/事实不符,请联系多彩编程网进行投诉反馈email:809451989@qq.com,一经查实,立即删除!

相关文章

Maven 打包项目后,接口识别中文乱码

背景 项目在Idea里面运行&#xff0c;调用接口发送中文消息正常&#xff0c;用Maven打包项目后&#xff0c;运行jar包&#xff0c;调用接口发送中文出现乱码。 解决方法 1.Idea编译配置 2.如果更改了上述配置之后还是没有效果&#xff0c;则在运行jar包的前面加上 -Dfile.en…

100天精通Python(可视化篇)——第96天:Pyecharts绘制多种炫酷箱形图参数说明+代码实战

文章目录 专栏导读1. 箱形图介绍1&#xff09;箱形图介绍2&#xff09;怎么看箱型图&#xff1f;3&#xff09;解释说明 2. 普通箱型图3. 水平箱型图4. 群组箱型图5. 带异常点的箱型图书籍推荐 专栏导读 &#x1f525;&#x1f525;本文已收录于《100天精通Python从入门到就业…

适配器模式与装饰器模式对比分析:优雅解决软件设计中的复杂性

适配器模式与装饰器模式对比分析&#xff1a;优雅解决软件设计中的复杂性 在软件设计中&#xff0c;我们常常面临着需要将不同接口或类协调工作的情况&#xff0c;同时还要满足灵活性和可扩展性的需求。为了应对这些挑战&#xff0c;适配器模式和装饰器模式应运而生&#xff0c…

IDEA Debug小技巧 添加减少所查看变量、查看不同线程

问题 IDEA的Debug肯定都用过。它下面显示的变量&#xff0c;有什么门道&#xff1f;可以增加变量、查看线程吗&#xff1f; 答案是&#xff1a;可以。 演示代码 代码如下&#xff1a; package cn.itcast.attempt.threadAttempt.attempt2;public class Test {public static …

GFS分布式文件系统

目录 一、GlusterFS简介 二、GlusterFS特点 1.扩展性和高性能 2.高可用性 3.全局统一命名空间 4.弹性卷管理 5.基于标准协议 三、GlusterFS 术语 1.Brick&#xff08;存储块&#xff09; 2.Volume&#xff08;逻辑卷&#xff09; 3.FUSE 4.VFS 5.Glusterd&#xf…

day48-ajax+SSM分页

AjaxSSM分页 非分页版controller及html&#xff1a; 分页模糊查询controller&#xff1a; Postman测试&#xff08;无网页&#xff09;&#xff1a; 分页网页&#xff1a; 分页网页中添加模糊查询&#xff1a; 分页网页中实现添加功能&#xff1a; &#xff08;1&am…

RabbitMQ 教程 | 第4章 RabbitMQ 进阶

&#x1f468;&#x1f3fb;‍&#x1f4bb; 热爱摄影的程序员 &#x1f468;&#x1f3fb;‍&#x1f3a8; 喜欢编码的设计师 &#x1f9d5;&#x1f3fb; 擅长设计的剪辑师 &#x1f9d1;&#x1f3fb;‍&#x1f3eb; 一位高冷无情的编码爱好者 大家好&#xff0c;我是 DevO…

【深度学习Week3】ResNet+ResNeXt

ResNetResNeXt 一、ResNetⅠ.视频学习Ⅱ.论文阅读 二、ResNeXtⅠ.视频学习Ⅱ.论文阅读 三、猫狗大战Lenet网络Resnet网络 四、思考题 一、ResNet Ⅰ.视频学习 ResNet在2015年由微软实验室提出&#xff0c;该网络的亮点&#xff1a; 1.超深的网络结构&#xff08;突破1000层&…

b 树和 b+树的理解

项目场景&#xff1a; 图灵奖获得者&#xff08;Niklaus Wirth &#xff09;说过&#xff1a; 程序 数据结构 算法&#xff0c; 也就说我们无时无刻 都在和数据结构打交道。 只是作为 Java 开发&#xff0c;由于技术体系的成熟度较高&#xff0c;使得大部分人认为&#xff1…

留存测试数据,Apipost接口用例详解

接口用例可以在不影响源接口数据的情况下对接口添加多个用例&#xff0c;方便测试并保存测试数据。 创建用例 左侧目录选择接口后进入接口用例页面&#xff0c;点击添加用例 在弹出窗口中修改各种参数。如登录接口&#xff0c;可修改用户名为空&#xff0c;并添加断言。 执行…

css滤镜:drop-shadow

一、用法 drop-shadow( offset-x offset-y blur-radius spread-radius color ) offset-x&#xff1a;此参数设置图像的水平偏移。正值将创建右侧的偏移量&#xff0c;负值将创建左侧的偏移量。offset-y&#xff1a;此参数设置图像的垂直偏移。正值创建到底部的偏移量&#xff…

简单版本视频播放服务器V4,layui界面

简单版本视频播放服务器V4 前一个版本内容&#xff0c;可以查看 https://blog.csdn.net/wtt234/article/details/131759154 优化内容&#xff1a; 1.返回列表的优化&#xff0c;优化了原来返回空列表名称的问题 2.前端才有layui优化内容 后端&#xff1a; package mainim…

安科瑞AMC200多回路智能电量采集监控装置在隧道中的应用-安科瑞黄安南

1项目背景 河南安阳林州市某高速公路项目是河南省政府主要打造的一项公路建设项目&#xff0c;该项目全长约70公里&#xff0c;起点位于安阳市内&#xff0c;终点位于林州市县。该项目总投资约60亿元人民币&#xff0c;建设工期预计为3年。 该项目的建设旨在缓解当地交通压力…

为高性能计算构建,由亚马逊云科技Amazon Graviton3E驱动的最新实例正式可用

亚马逊云科技宣布两款基于最新一代自研芯片Amazon Graviton3E的新实例Amazon Elastic Compute Cloud&#xff08;Amazon EC2&#xff09;Hpc7g和Amazon EC2 C7gn正式可用。 其中&#xff0c;Hpc7g实例专为计算和网络密集型高性能计算&#xff08;HPC&#xff09;工作负载而构建…

微信小程序配置上传多个u-upload上传

微信小程序配置上传多个u-upload上传 使用的是uView框架 微信小程序配置上传多个u-upload上传图片 场景需求&#xff1a;根据PC端配置项追加图片配置 小程序根据配置的图片数量&#xff0c;图片名称&#xff0c;进行上传图片 难度在于 我们不知道用户会追加多少个图片配置字段 …

git撤销上一次的commit

一行命令 git reset --soft HEAD^如果在vscode上面&#xff0c;就可以

【Leecode】交替合并字符串- join

题目 给你两个字符串 word1 和 word2 。请你从 word1 开始&#xff0c;通过交替添加字母来合并字符串。如果一个字符串比另一个字符串长&#xff0c;就将多出来的字母追加到合并后字符串的末尾。 返回 合并后的字符串 。 错误1 class Solution:def mergeAlternately(self, w…

C++ 类和对象篇(三) 空类和默认成员函数

目录 一、空类 二、6个默认成员函数 一、空类 1.是什么&#xff1f; 如果一个类中没有显示定义任何成员&#xff0c;简称为空类。 class A {};//一个空类 2.空类中的成员&#xff1f; 空类中真的什么都没有吗&#xff1f; 并不是&#xff0c;任何类在什么都不写时&#xff0c…

关于Python 的 Web 自动化测试的实践

Web 测试是软件测试中比较重要的一个分支&#xff0c;而要实现 Web 自动化测试则要求测试人员能熟练掌握自动化测试工具和编程语言。介绍免费开源的 Web 测试工具 Selenium&#xff0c;以及流行的编程语言 Python。根据自动化测试的原理&#xff0c;对网页元素的常用定位方式&a…

ES6 - Iterator迭代器和for...of 循环

文章目录 前言一、Iterator介绍二、Iterator原理三、实现Iterator接口的原生对象有五、默认调用 Iterator 接口的场合六&#xff0c;for... of 循环七&#xff0c;总结 前言 JavaScript 原有的表示“集合”的数据结构&#xff0c;主要是数组&#xff08;Array&#xff09;和对…