vue+echarts开发的前端项目--医学数据统计分析平台开发经验

原创已于 2022-02-09 16:39:45 修改 · 912 阅读

1 ·

CC 4.0 BY-SA版权

文章标签：

#前端 #vue #echarts

于 2020-12-28 08:50:11 首次发布

前端专栏收录该内容

4 篇文章

订阅专栏

本文围绕Vue开发展开，介绍了全局变量使用、echarts初始化、axios请求参数处理、接口地址设置、企业微信认证调试等问题。还提及用户权限判断、数据复用、存储读取，以及定时器在keep - alive缓存页面的清除和启用问题，强调Vue开发需深入学习实践。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

然后1、全局使用引入的变量问题
2、echarts必须在mounted函数里面初始化
3、在发送请求的时候，携带的参数应该用qs.stringify(参数是json串)的方式
4、在定义了全局数据接口地址的时候，发起axios请求，应该屏蔽接口地址，只需要写接口路径即可。
5、在企业微信认证的时候，不方便调试可以将数据展示在前端页面上，或者使用vconsole插件，来替代console.log打印。
6、axios请求，在开发环境（内网上）必须对应具体的内网ip接口。在外网上，必须对应外网ip接口。否则请求会拿不到数据
7、在做用户权限判断的适合，要结合页面引用的地址，来解析url参数
8、合理使用mixins来复用数据。
9、合理使用window.localStorage.setItem和window.localStorage.getItem来存储/读取数据

10、加入定时器不停刷新页面显示数据。

先是定义了定时器：

data() {
    return {
      mytime: null,//定时器
      mytimeout: 1000 * 60,//一分钟刷新一次，60000毫秒
    }
  },

然后在页面创建时加入了定时器

async created() {
    // 显示loading
    this.$store.commit(`app/${SET_LOADING}`, true)
    // this.dept_name = this.$route.query.dept_name || '全院'
    // 设置接口参数dept_name
    this.dept_name = window.localStorage.getItem('dept_name')
    // 获取日期列表
    let rqlb = await this.getDateList()
    // 获取最新日期数据（如果传入了时间参数，就获取时间参数的接口数据。否则获取接口中rqlb.statistical_date，即含有数据的最大时间）
     if (this.$route.query.param_date) {
      await this.init(dayjs(dateReplace(this.$route.query.param_date)).format('YYYY-MM-DD'))
      that.mytime =
        await setInterval(function() {
            setTimeout(that.refreshData(dayjs(dateReplace(this.$route.query.param_date)).format('YYYY-MM-DD')), 0)
          },
          that.mytimeout)
      this.$once('hook:beforeDestroy', () => {
        clearInterval(this.mytime)
      })
    } else {
      await this.init(rqlb[rqlb.length - 1].statistical_date)
      // let  mytimer=
      that.mytime =
        await setInterval(function() {
            setTimeout(that.refreshData(rqlb[rqlb.length - 1].statistical_date), 0)
          },
          that.mytimeout)
      this.$once('hook:beforeDestroy', () => {
        clearInterval(this.mytime)
      })
    }
  },

接着想要在 beforeDestroy周期函数中清除定时器

beforeDestroy() {
    clearInterval(this.mytime)
  },

发现并不能清除掉。

百思不得其解，仔细检查路由也跳转了，按道理页面已经被销毁了，所以应该进入了 beforeDestroy周期函数，定时器就应该被清除了。

原来，定时器在 beforeDestroy周期函数没被清除，是因为项目的页面启用了keep-alive缓存。

 <div class="main-layout">
        <div class="main-layout-container">
            <keep-alive>
                <router-view/>
            </keep-alive>
            <!-- 版权 -->
            <copy-right></copy-right>
        </div>
        <!--为了保证默认样式参数（如fixed="true"）不被覆盖，需要手动指定样式效果。-->
        <van-tabbar v-model="active" active-color="#00BEC8" inactive-color="#999999" @change="change"
                    style="position:fixed!important">
            <van-tabbar-item v-for="item in tabbar" :key="item.name">
                <span>{{ item.desc }}</span>
                <template #icon="props">
                    <img class="tabbar-icon-img" :src="props.active ? item.active : item.inactive" alt=""/>
                </template>
            </van-tabbar-item>
        </van-tabbar>
    </div>

在这样的情况下，想要清除定时器，需要在deactivated函数中完成！

deactivated() {
    clearInterval(this.mytime)
  },

接着，由于清除了定时器，如果还需要在又一次进入到页面中启用定时器的话，需要在activated函数中，先置空定时器，再启用定时器，否则可能会出现冲突！

async activated() {
    //每次调用定时器前需要先清除定时器。防止同一个出现两次
    clearInterval(this.mytime)
    // 获取最新日期数据（如果传入了时间参数，就获取时间参数的接口数据。否则获取接口中rqlb.statistical_date，即含有数据的最大时间）
    let that = this
    // 设置接口参数dept_name
    this.dept_name = window.localStorage.getItem('dept_name')
    // 获取日期列表
    let rqlb = await this.getDateList()
    if (this.$route.query.param_date) {
      await this.init(dayjs(dateReplace(this.$route.query.param_date)).format('YYYY-MM-DD'))
      that.mytime =
        await setInterval(function() {
            setTimeout(that.refreshData(dayjs(dateReplace(this.$route.query.param_date)).format('YYYY-MM-DD')), 0)
          },
          that.mytimeout)
      this.$once('hook:beforeDestroy', () => {
        clearInterval(this.mytime)
      })
    } else {
      await this.init(rqlb[rqlb.length - 1].statistical_date)
      // let  mytimer=
      that.mytime =
        await setInterval(function() {
            setTimeout(that.refreshData(rqlb[rqlb.length - 1].statistical_date), 0)
          },
          that.mytimeout)
      this.$once('hook:beforeDestroy', () => {
        clearInterval(this.mytime)
      })
    }
  },

<div class="main-layout">
        <div class="main-layout-container">
            <keep-alive>
                <router-view/>
            </keep-alive>
            <!-- 版权 -->
            <copy-right></copy-right>
        </div>
        <!--为了保证默认样式参数（如fixed="true"）不被覆盖，需要手动指定样式效果。-->
        <van-tabbar v-model="active" active-color="#00BEC8" inactive-color="#999999" @change="change"
                    style="position:fixed!important">
            <van-tabbar-item v-for="item in tabbar" :key="item.name">
                <span>{{ item.desc }}</span>
                <template #icon="props">
                    <img class="tabbar-icon-img" :src="props.active ? item.active : item.inactive" alt=""/>
                </template>
            </van-tabbar-item>
        </van-tabbar>
    </div>

总结：
vue的简单使用可以轻松达到，但是要出神入化，还有很多地方需要深入学习和实践。