前端vue后端springboot使用websocket的简单案例

最新推荐文章于 2024-05-20 17:34:43 发布

qq_25468779

最新推荐文章于 2024-05-20 17:34:43 发布

阅读量1.9k

点赞数 1

文章标签：前端 vue.js 后端

本文链接：https://blog.csdn.net/qq_25468779/article/details/122331916

版权

前端使用vue，后端使用springboot。
前端和后端还使用了websocket连接，后端定时器发送数据给前端，前端使用echarts的插件进行柱状图显示。后端发送的值一直在变化，前端的柱状图也一直在变。

在这里插入图片描述
前端vue代码

<template>
    <div >
      <el-form ref="loginForm"  :model="loginForm" class = "loginContainer">
        <h3 class = "loginTitle">系统登录</h3>
        <el-form-item>
          <el-input type="text" v-model="loginForm.username" placeholder="请输入用户名"></el-input>
        </el-form-item>
        <el-form-item>
          <el-input type="passward" v-model="loginForm.password" auto-complete="false" placeholder="请输入
密码" ></el-input>
        </el-form-item>
        <el-form-item>
          <el-input type="text" v-model="loginForm.code" placeholder="更换验证码" style="width: 250px"></el-input>
          <img src="">
          <el-checkbox v-model="checked">remember</el-checkbox>
          <el-button type="primary" style="width: 100%" @click = "submitLogin" >登录</el-button>
          <el-button type="primary" style="width: 100%" >打开</el-button>
          <el-button type="primary" style="width: 100%" >发送</el-button>
        </el-form-item>
        <el-table
            :data="tableData"
            style="width: 100%">
          <el-table-column
              prop="x1"
              label="x轴"
              width="180">
          </el-table-column>
          <el-table-column
              prop="y1"
              label="y轴"
              width="180">
          </el-table-column>
        </el-table>
      </el-form>
      <div id = "mychartshow" style="width: 50%; height:500px">