三维交互可视化平台（智慧海上牧场平台）学习开发Flask+Vue+Echarts+Mysql实战（三）

做毕设的大企鹅

已于 2022-06-09 22:01:04 修改

阅读量1.6k

点赞数 2

分类专栏：智慧渔业管理系统开发文章标签： mysql vue.js flask echarts

于 2022-04-27 15:58:55 首次发布

本文链接：https://blog.csdn.net/weixin_44165950/article/details/124176341

版权

智慧渔业管理系统开发专栏收录该内容

5 篇文章 9 订阅

订阅专栏

前言

三维交互可视化平台（智慧海上牧场平台）学习开发之Vue（一）
三维交互可视化平台（智慧海上牧场平台）学习开发之Flask+Vue+Mysql（二）
前两章分别学习了vue的使用以及前后端结合使用，这一章开始讲讲我项目的初步部署和实现，踩了很多坑，我都记载下来，供各位初学者参考，先上图：
在这里插入图片描述
改进版，代码放在github上，欢迎下载点星星github代码，教程代码是intelligent_sys，改进版是new_system。

安装插件等报错问题：

npm install -g vue-cli报错：
npm ERR! errno -4058
按照这篇解决解决报错npm install 4058
网页全屏背景显示问题：

这个问题我一定要写出来，网上查了非常多的资料，都没有写出根本问题。
之前无论怎么折腾图片都不显示，当测试在div中写几个文字的时候，图片部分展示了，但不全。

也试过在app.vue写图片，这样虽然说可以，但是，但是这是全局样式，也就是你所有后续网页都有这个背景，显然不符合预期，于是找到别人的项目看人家怎么写背景的，如下：

这是我的Login.vue代码：
```
<template>
  <div class="login-wrap">11</div>
</template>
<script>
    export default {
      name:'Login',
    }
</script>
<style scoped>
.login-wrap {
    position: relative;
    width: 100%;
    height: 100%;
    background-image: url(../assets/img/login.jpg);
    background-size: 100%;
}
</style>
```
这是css全局样式：
```
html,
body,
#app, //关键在于此，一定要覆盖#app
.wrapper {
    width: 100%;
    height: 100%;
    overflow: hidden;
}
```
写小图标的时候要注意图片调用问题，我用直接调用图片一直显示不出来，for循环写的也是对的，这个查了我一下午才搞定，先在vue根目录终端输入npm install @types/node --save-dev
引用图片要这样<img :src="require('@/assets/img/'+item.img)">，如文章VUE引入静态资源，这个大家一定要看，里面其实学问不少。
地图引用问题
在这里我使用的是echarts，下载了地图的json，由于要定位到养殖场的经纬度，因此还需要下载级别更高的地图，这就涉及到精密度问题，echarts的一个配置文件不能够达到市县级别。
这个是echarts+vue区域地图绘制方法，非常详细，点我！
关于市县级地图会报一个lenth的错误，
具体看这篇文章
我到现在还没有解决，但也不着急，咱先把框架搭好，后面细节功能再实现吧

盒子布局问题：
先看图
在这里插入图片描述
我把header,sidebar,content写成三个组件，content属于right这个类，这三个组件公用一个main_box.css样式
这是我的content.vue代码:

<template>
  <div class="right">
    <router-view v-slot="{ Component }">
      <component :is="Component"/>
    </router-view>
  </div>
</template>

<script>

</script>

<style scoped>
@import "../assets/css/main_box.css";
</style>

vue调用外部js的方法：

这是我调用的vue代码和weather.js代码，外部js也可以调用vue的方法，关键在于export，把方法抛出就行。

<script>
  import {getWeather} from '../js/weather'
  import echarts from 'echarts';

    export default {
        name: "overview",
        data(){
          return {

          };
        },
        methods:{
            getWeather:getWeather(),
        }
    }
</script>

export function getWeather() {
  $.getJSON('https://v0.yiketianqi.com/api?自己在天气API里面注册获取key值，这里不做展示', function (result) {
    $('.weather').css('background-image', setBgImg(result.data[0].wea));
    $('.city').html(result.city);
    $('.wea').html(result.data[0].wea);

    $('.tem').html(result.data[0].hours[0].tem+"°");
    $('.win').html(result.data[0].hours[0].win+'&nbsp;'+result.data[0].hours[0].win_speed);
    $('.air_level').html('空气&nbsp;'+result.data[0].air_level);
    $('.humidity').html('相对湿度&nbsp;'+result.data[0].humidity);
  })
}

echarts动态调用数据库数据
这个问题无非就是两点，一点就是数据转换，另一点就是axios的使用：
第一点数据转化，一般给到前端(echarts)的数据格式就是列表，但是列表里面的数据不能是字符串，在获取数据库数据后拿到一个字段名和相应数据，先转化为字典，再转化为json格式，这样才能被echarts的x，y轴读取到，dic转json格式代码如下：

class Decimal_and_DateEncoder(json.JSONEncoder):
    def default(self, o):
        if isinstance(o, datetime.datetime):
            return o.strftime("%Y-%m-%d %H:%M:%S")
        elif isinstance(o, decimal.Decimal):
            return float(o)
        else:
            return json.JSONEncoder.default(self, o)


def dict_to_json(dict_data):
    axis_value = json.dumps(dict_data, cls=Decimal_and_DateEncoder)
    return axis_value

第二点axios调用，这个和ajax使用很相似，目前我还不清楚如何把获取的数据在axios(ajax)函数外调用，这是我调用画图的代码，篇幅问题，只列举关键代码：

draw(){
          const path = 'http://localhost:5000/overview';
          axios.get(path)
          .then((res) =>{
            this.lt = res.data.lt;
            this.do = res.data.do;
            var myChart = echarts.init(document.getElementById('waterQ')) // 拿到一个实例
            var option = {
					....省略
					横纵轴部分
					data:this.lt
					data:this.do      }myChart.setOption(option);}，
mounted() {
//不要忘记调用
        this.draw();
      }