vue naive ui 前端获取日期数据传递给后端-526互联

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利用率等数据匹配