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

本文围绕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的简单使用可以轻松达到,但是要出神入化,还有很多地方需要深入学习和实践。

评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值