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