首页 > 其他分享 >vue naive ui 前端获取日期数据传递给后端

vue naive ui 前端获取日期数据传递给后端

时间:2023-05-05 20:14:46浏览次数:48  
标签:vue naive 日期 json ui 组件 数据 前端 store

vue naive ui 前端获取日期数据传递给后端

设置日期选择器

1. 使用表单输入绑定的方法把用户选定的日期传递给data中的值

(检查数据是否更新的方法) 

2. 返回给后端的时间格式

后端想要接收的格式为json,其中包括starttime endtime 和macid,并且时间格式为<class 'datetime.datetime'>类型,而前端发送的时间是时间戳,这种情况下需要进行转换

后端使用 dateArray = datetime.datetime.utcfromtimestamp(timeStamp) 将时间戳转换为<class 'datetime.datetime'>类型

(注:后端存储的时候,可以使用时间戳,这样查询更有效率)

3. 日期更新后触发将新日期发送给后端的逻辑

有两种方式:1.使用监视器Watch,2.使钩子函数,当日期改变时触发相应函数

我使用了监视器

watch:{
        range:{
            immediate:true, //初始化时让handler调用一下
            handler(){
                console.log("日期被改变了")
                this.sendtime() //当监视到range被改变后,触发sendtime()方法发送数据到后端
            }
        }
    }

  

4. 遇到了跨域问题

 目前主流的两种跨域解决方案:后端:cros   前端:proxy

此时在写前端,我们用proxy解决

 

5.前端如何接收服务器响应的数据

前端把数据包装成json格式

时间范围:
range: {"start_time":Date.now(), "end_time":Date.now()}

发送给后端这个时间范围,如果有其他信息也可以写到这个对象中,请求成功后,即可得到后端响应数据

6.遇到问题

是proxy配置不正确的问题

 

8.子组件之间的传值问题

如果用共有的父组件保存共享的数据比较麻烦,尝试使用vuex

9.vuex怎么接收服务端响应的数据

首先对axios进行二次封装,vuex存储共享数据,vue文件调用store中js文件声明的方法,axios在store的js文件中使用

【组件不能直接修改属于store实例的state,组件必须通过Mutation来改变state,也就是说,组件里面应该执行分发(dispatch)事件通知store去改变】

遇到了下图的问题

 

解决方法:axios仍然在最初的vue文件中实现,将请求返回的数据赋值给store中的全局变量即可

 

10.前端从服务器响应的数据中解析出想要的数据,用某种数据格式表示,方便后续可视化

 前端返回了json数组

 django返回json问题:之前一直以为后端正确返回了json数组,今天画图的时候,才发现数据格式不正确,

这是我之前返回的数据,但它并不是一个正确的json array

   在 Order类中,先创建一个列表,里面保存的数据为字典类型,然后再对列表使用json.dumps方法,这样响应的时候HttpResopnse能够返回一个正确的json数组,其中的每个数据都是json对象,而不是字符串

 

11.在前端有CPU利用率、内存使用率和正在运行的程序数量三个要展示,如何封装echarts组件

 参考了 这篇博客

<template>
   <div style='height:320px;' ref="chart"></div>
</template>
<script>
//考虑到多个地方需要用到图标,封装出一个公共的组件出来
import {useStore} from 'vuex';
const store=useStore;
import * as echarts from 'echarts';
export default {
    name:"ChartBlock",
    props:{
        option:{
            type:Object,
            default:()=>{}
        }
    },
    data() {
      return {
        chart:null
      }
    },
    watch:{
        option:{
            handler(newValue,oldValue){
                this.chart.setOption(newValue)
            },
            deep:true
        }
    },
    mounted(){
        this.chart = echarts.init(this.$refs.chart)
        this.chart.setOption(this.option) 
    }
  }
</script>
<style>
#app {
  font-family: Avenir, Helvetica, Arial, sans-serif;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  text-align: center;
  color: #2c3e50;
  margin-top: 60px;
}
</style>

在父组件中引入上述代码的组件,并使用父组件数据中定义的option指定图表显示的内容,具体代码可见 参考的这篇博客

 

12.前端如何处理响应数据,例如某些时间段数据为空等情况,时间和cpu利用率等数据匹配

 

13.服务端响应中时间是时间戳的格式,图表中如何使用日期格式表示

 

14.更新日期后,图表并未变化

 

标签:vue,naive,日期,json,ui,组件,数据,前端,store
From: https://www.cnblogs.com/yz-lucky77/p/17329750.html

相关文章

  • String、StringBuilder、StringBuffer
    String真正不可变有下面几点原因:保存字符串的数组被final修饰且为私有的,并且String类没有提供/暴露修改这个字符串的方法。String类被final修饰导致其不能被继承,进而避免了子类破坏String不可变。String:不可变,线程安全StringBuilder:可变,单线程,线程不安全StringBuf......
  • java基于springboot+vue的垃圾分类管理系统,附源码+文档+PPT+数据库
    1、项目介绍垃圾分类网站的主要使用者分为管理员和用户、垃圾分类管理员,实现功能包括管理员:首页、个人中心、用户管理、垃圾分类管理员管理、垃圾分类管理、垃圾类型管理、垃圾图谱管理、系统管理,垃圾分类管理员;首页、个人中心、用户管理、垃圾分类管理员管理、垃圾分类管理、垃......
  • vue2和vue3父子组件生命周期的执行顺序
    vue3的父子组件生命周期的执行顺序fathersetup->fatheronBeforeMount->childsetup->childonBeforeMount->childonMounted->fatheronMounted vue2的父子组件生命周期的执行顺序fatherbeforeCreate->fathercreated->fatherbeforeMount->childbeforeC......
  • Jenkins 执行Docker build错误Got permission denied while trying to connect to the
    问题: 解决方法:这个报错为权限问题1.把jenkins用户,加到docker用户组 #如果没有docker用户组,先创建用户组:groupadddocker#添加jenkins用户到用户组:sudousermod-a-Gdockerjenkins-a<追加>必须与-G选项一起使用,把用户追加到某些组中。-G<群组>修改用户所属的......
  • Vue框架中如何使用Baidu地图
    1.安装 vue-baidu-map依赖npminstallvue-baidu-map--Save2.在Vue项目中src找到main.js进行引用importBaiduMapfrom'vue-baidu-map-v3'Vue.use(BaiduMap,{ ak:'百度地图api申请密钥'//百度地图密钥})3.可直接引用或者封装BaiduMap.v......
  • vue mock数据
    这里使用的是fastmock,找到官网 这里声明了一个名称是test,基础路径是/api的接口 点击右侧的箭头进入。 界面右侧有一个蓝色的新增接口按钮,点击一下。 输入接口内容,实例如下: 保存即可。 这时在前台根地址+接口地址就是完整的mock路径 ......
  • Vue2中 ?. 可选链式调用操作符
    可选链运算符(?.)允许读取位于连接对象链深处的属性的值,而不必明确验证链中的每个引用是否有效。?. 运算符的功能类似于 . 链式运算符,不同之处在于,在引用为空(nullish )(null 或者 undefined)的情况下不会引起错误,该表达式短路返回值是 undefined。与函数调用一起使用......
  • elementUi+table实现表格数据滚动
    elementUi+table实现表格数据滚动引用vue和elementUICDN//引用elementUICDN<scriptsrc="https://unpkg.com/vue@2/dist/vue.js"></script><!--importJavaScript--><scriptsrc="https://unpkg.com/element-ui/lib/index.js"></......
  • Vue el-form表单resetFields与clearValidate方法失效的三个坑
    1.在el-form标签中必须要绑定一个model,而且必须是:model,不能是v-model,这个是element-ui那边规定2.prop属性需要和上述model绑定的对象里的字段完全一致3.调用方法是this.$refs["refName"].resetFields(),this.$refs["refName"].clearValidate(["name"]),注意是this.$refs(vue3中是......
  • vue 分页demo || vue分页插件
    方法一查看源码demo:点击预览方法二运用插件演示地址:点击预览查看源码:点击查阅......