前往小程序,Get更优阅读体验!
立即前往
首页
学习
活动
专区
圈层
工具
发布
首页
学习
活动
专区
圈层
工具
MCP广场
社区首页 >专栏 >第一阶段设计结束

第一阶段设计结束

作者头像
时光潜流
发布于 2022-12-26 11:40:45
发布于 2022-12-26 11:40:45
17201
代码可运行
举报
文章被收录于专栏:博客专栏博客专栏
运行总次数:1
代码可运行

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

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

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

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

代码语言:javascript
代码运行次数:0
运行
AI代码解释
复制
if (/Android|webOS|iPhone|iPod|BlackBerry/i.test(navigator.userAgent)) {
  location.href = '/mobile_deny.html'
} else {
  console.log('当前使用pc登录')
}

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

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

本文参与 腾讯云自媒体同步曝光计划,分享自作者个人站点/博客。
原始发表:2022-04-17,如有侵权请联系 cloudcommunity@tencent.com 删除

本文分享自 作者个人站点/博客 前往查看

如有侵权,请联系 cloudcommunity@tencent.com 删除。

本文参与 腾讯云自媒体同步曝光计划  ,欢迎热爱写作的你一起参与!

评论
登录后参与评论
暂无评论
推荐阅读
编辑精选文章
换一批
SAO-UI-PLAN-Controlldot
虽然当时构思的时候想法很丰满,但是做出来以后突然觉得功能好鸡肋。左右浮动切换上下篇算是唯一的亮点了。上下按钮用拖动方式体感上还不如直接用侧栏菜单的按钮功能来的方便。尤其是考虑到PC端,手机端,窄屏设备,触屏电脑等设备动作的监测判断。总是牵扯到一大堆的交集。然后就是点击动作在某个屏宽比下会执行两次。 Dorakika的代码我也没吃透,似乎有个长按以后能够拖动悬浮菜单的功能,搞不好我多删了一些代码,长按以后拖动的结束动作一直没法按照期望的来。 这个悬浮按钮不打算实装了,作为学习用吧。bug太多,不修啦。
Akilar
2022/03/31
9260
个人主页重新设计改版,中途却遇到两个难题...
整个字体包大小 11M,我云服务器上行带宽最多跑个 1M 左右,那加载个字体就得 10s 左右,以这速度谁还看我网站,,,崩溃。。。
程序员纬度
2021/12/30
1.2K0
个人主页重新设计改版,中途却遇到两个难题...
移动开发实用
meta基础知识 H5页面窗口自动调整到设备宽度,并禁止用户缩放页面 <meta name="viewport" content="width=device-width,initial-scale=1.0,minimum-scale=1.0,maximum-scale=1.0,user-scalable=no" /> 忽略将页面中的数字识别为电话号码 <meta name="format-detection" content="telephone=no" /> 忽略Android平台中对邮箱地址的识
White feathe
2021/12/08
6.9K0
「译」如何从头开始构建机器人检测脚本:分步指南
你是否知道,据估计,所有网络流量中有一半来自机器人?而这些自动流量中有超过一半来自“恶意机器人”。网站不断面临自动机器人的威胁,这些机器人旨在执行恶意活动,如凭证填充攻击、网页抓取、垃圾邮件分发和欺诈。
泯泷、
2025/01/27
1460
「译」如何从头开始构建机器人检测脚本:分步指南
H5 项目实用
如果你关闭自动识别后 ,又希望某些电话号码能够链接到 iPhone 的拨号功能 ,那么可以通过这样来声明电话链接 ,
White feathe
2021/12/08
5.4K0
第一阶段-Java基础知识:【第二章 Java基础语法知识】
在我们开始讲解程序之前,命名规范是我们不得不提的一个话题,虽说命名本应该是自由的,但是仍然有一定的“潜规则”,通过你对命名的书写,别人一眼就能看出你是不是一个“行家”。我们先来看一下有哪些规则。
BWH_Steven
2019/08/09
1.1K0
头条面试题总结
a、考虑文本长度:1-1500字符(该数据为百度数据)、超出最大字符长度
找Bug
2022/07/22
8570
【前端就业课 第一阶段】HTML5 零基础到实战(十)JavaScript基础一篇入门
注意:手机(APP)打开,内容显示更佳,不会的私聊博主即可 想要拿代码或加入学习计划(** 博主会监督你并且教你写文章 **)的拉到最下面(PC端Web打开)加博主即可,目录也在最下面。
1_bit
2022/04/13
1.1K0
【前端就业课 第一阶段】HTML5 零基础到实战(十)JavaScript基础一篇入门
JS与ES6高级编程学习笔记(一)——JavaScript核心组成
JavaScript(JS)是一种轻量级、解释型、动态类型的高级程序设计语言。它诞生于1995年,是一门基于原型、函数优先的语言,是一门多范式的语言,它支持面向对象编程,命令式编程,以及函数式编程。它提供语法来操控文本、数组、日期以及正则表达式等,不支持I/O,比如网络、存储和图形等,但这些都可以由它的宿主环境提供支持,如 Node.js、 Apache CouchDB 和 Adobe Acrobat。它已经由ECMA(欧洲计算机制造商协会)通过ECMAScript实现语言的标准化。
张果
2022/05/27
2.3K0
JS与ES6高级编程学习笔记(一)——JavaScript核心组成
JeecgBoot低代码平台 3.5.2,仪表盘版本发布!重磅新功能—支持在线拖拽设计大屏和门户
敲敲云的零代码引擎商业组件 — 仪表盘设计器,专业用于数据可视化分析工具,帮助用户快速分析数据并洞察业务趋势,从而实现业务的改进与优化。
JEECG
2023/06/12
9590
Vue3 后台管理系统模板推荐
之前写了一篇关于 Vue2 的后台管理系统模板的推荐,详情请见 Vue后台管理系统模板推荐。
唐志远
2022/10/27
8.4K0
Vue3 后台管理系统模板推荐
2022 年前端大事记
去年我总结了 2021 年 JavaScript 大事记 之后,最近好多小伙伴催更我的 2022 年总结,这就来了。
ConardLi
2023/01/09
1.4K0
2022 年前端大事记
《javascript高级程序设计》核心知识总结
浮点数值的最高精度是17位小数,但在进行算术计算时精度远远不如整数。例如 0.1 + 0.2 === 0.300000000000004(大致这个意思,具体多少个零请实际计算) 所以永远不要测试某个特定的浮点数值
徐小夕
2019/10/08
2.4K0
基于React-Native0.55.4的语音识别项目全栈方案
PC端基于Web API的语音识别方案可参考《【Recorder.js+百度语音识别】全栈方案技术细节》一文。
大史不说话
2018/11/09
4K0
vue项目实战:实战技巧总结
接下来,如果你只希望引入部分组件,比如 Button 和 Select,那么需要在 main.js 中写入以下内容:
微芒不朽
2022/04/28
3.6K0
新零售实战 | 点击流驱动的智能决策:新零售用户行为埋点体系设计与Flink实时计算实战​
通过对用户行为的深入分析,企业能够更好地了解用户需求、优化产品体验、提升营销效果。用户行为分析的关键在于构建完善的埋点体系,准确采集用户在各个环节的行为数据,并借助实时计算技术对这些数据进行高效处理和分析。
叶一一
2025/05/07
2100
新零售实战 | 点击流驱动的智能决策:新零售用户行为埋点体系设计与Flink实时计算实战​
网易严选 App 感受 Weex 开发
这一篇来自于网易的前端工程师分享的一篇关于使用 Weex 开发网易严选的文章,内容非常的详细,认真,希望对大家能够有所帮助。 自打出生的那一天起,WEEX就免不了被拿来同React Native“一决高下”的命运。React Native宣称「Learn Once, Write Anywhere」,而WEEX宣称「Write Once, Run Everywhere」。在我看来,并没有谁更好,只有谁更合适。下面我将围绕WEEX入门进行讲解。 (如果你尚不了解React Native,并想简单入门,可以阅读【
非著名程序员
2018/02/09
2.6K0
网易严选 App 感受 Weex 开发
VUE2全家桶精讲
概念:Vue (读音 /vjuː/,类似于 view) 是一套构建用户界面的渐进式框架。
HelloWorldZ
2024/03/20
5470
VUE2全家桶精讲
初中级前端面试题目汇总和答案解析
•const和let•模板字符串•箭头函数•函数的参数默认值•Spread / Rest 操作符•二进制和八进制字面量(通过在数字前面添加0o或0O即可将其转为八进制值,二进制使用0b或者0B)•对象和数组解构•ES6中的类(class)•Promise•Set()和Map()数据结构•Modules(模块, 如import, export)•for..of 循环
徐小夕
2020/02/19
1.1K0
前端开发中不可忽视的知识点汇总(二)
22. 让页面里的字体变清晰,变细用CSS怎么做? -webkit-font-smoothing: antialiased; 23. 让overflow:scroll平滑滚动? -webkit-ove
徐小夕
2019/10/21
1.9K0
推荐阅读
相关推荐
SAO-UI-PLAN-Controlldot
更多 >
领券
问题归档专栏文章快讯文章归档关键词归档开发者手册归档开发者手册 Section 归档