第一阶段设计结束

我心飞翔 分类:vue

    今天主要完成了动态的编辑、信息统计bug修复以及阻止手机端访问的功能。

    动态的编辑中,主要运用的原理是vuex,其实也有考虑用属性传递(props),但是我的富文本编辑并非简单的作为组件来实现的。而是作用一个单独的子页面来实现的,这样,在文档上就没有直接的关联,所以最终采用vuex。当然采用的编辑默认规则为只允许编辑最后一条动态,因为如果还去编辑以前的动态,一方面时间是否变更是个现实意义上的难题,另一方面,应该让更改的难度略微大一些,不然随随便便更改,那动态就成为了自我满足的工具。

    然后是信息统计bug的修复,昨天对于信息统计展示的逻辑想着把数据请求防御mount阶段,数据展现放在update阶段就能不断获取更新,但是还是天真了,假设ajax获取数据速度还是慢于页面的装载,那么依然是没法正常显示我们之前初始化的echarts初始化组件,最终采用的策略还是vue的渲染原理来解决,这里我采用的是key修改来强制更新(话说echarts是不是有什么更新策略?没有仔细研究过)。

    然后是阻止手机端的访问功能实现。简简单单,copy了一段判定逻辑:

if (/Android|webOS|iPhone|iPod|BlackBerry/i.test(navigator.userAgent)) {
  location.href = '/mobile_deny.html'
} else {
  console.log('当前使用pc登录')
}

    当然仔细一看判定逻辑并不难,navigator是一个js的运行引擎创建的,包含了关于当前浏览器的各项基本信息,其中userAgent就包含了当前引擎的标识,只需要正则判断是否包含相应的手机浏览器引擎标识关键字就可以大致确定了,当然这样的判断也还是比较潦草的,因为这个更改还是简简单单的,如果更为准确的,应该对clientHeight和clientWidth进行计算判断,不过,暂且只是一种替代方案,以后还是有考虑去适配多端的,至于是一套代码两端还是两套两端有待商榷。

    好啦!这篇博客之后就要正式放于个人服务器进行实际测试了,期待能够成功!

回复

我来回复
  • 暂无回复内容