基于 Vue3打造前台+中台通用提效解决方案（下）

47、通用组件 - 倒计时组件

特惠部分存在一个倒计时的功能，所以我们需要先处理对应的倒计时模块，并把它处理成一个通用组件。

那么对于倒计时模块我们又应该如何进行处理呢?
所谓倒计时，其实更多的是一个时间的处理，那么对于时间的处理，此时我们就需要使用到一个第三方的包: dayis。通过这个包我们可以处理对应的倒计时格式问题。

那么时间格式处理完成之后，接下来我们就需要处理对应的数据:
我们期望对倒计时模块,可以传递两个值:

  1. time毫秒值:表示倒计时的时长
  2. format格式:表示倒计时的展示格式

那么到这里咱们整个的倒计时功能即使就分析的差不多了，总共分成了两部分:
1．时间格式
2．数据

<template><slot :data="{ timeStr, timeValue }"><div>{{ timeStr }}</div></slot>
</template><script setup>
import dayjs from 'dayjs'
import duration from 'dayjs/plugin/duration'
import 'dayjs/locale/zh-cn'
import { watch, ref, computed, onUnmounted } from 'vue'dayjs.extend(duration)
dayjs.locale('zh-cn')
let timer = null
const props = defineProps({time: {// 倒计时时间， ms单位type: Number,required: true},format: {// 格式化时间type: String,default: 'HH小时mm分钟ss秒SSS'}
})// 组件销毁时清理定时器
onUnmounted(() => {close()
})
const timeValue = ref(props.time)// 封装格式化日期函数
const fmtTime = (milliseconds) => {const d = dayjs.duration(milliseconds)return d.format(props.format)
}const handleSetInterval = () => {timer = setInterval(() => {if (typeof timeValue.value === 'number' && timeValue.value <= 0) {//完成close()} else {timeValue.value -= 9}}, 9)
}
const timeStr = computed(() => {return typeof timeValue.value === 'number' ? fmtTime(timeValue.value) : ''
})
/*** 关闭定时器*/
const close = () => {clearInterval(timer)
}
/*** 开启定时器*/
const start = () => {handleSetInterval()
}
/*** 从新设置定时器*/
const reset = (v) => {const setV = v > 0 ? v : props.timetimeValue.value = setV
}
watch(() => props.time,(v) => {timeValue.value = vclose()start()},{immediate: true}
)defineExpose({close,start,reset,timeStr,timeValue
})
</script>

48、第三方平台登录解决方案流程大解析

通常情况下我们所说的第三方登录，多指的是:通过第三方APP进行登录

那么我们这个第三方的 APP 是如何和我们自己的应用进行关联的呢?

如果大家不是很清楚，那么本小节将为你解答。
想要搞明白这个问题，那么我们首先需要搞清楚整个第三方登录的流程是如何进行的。

我们以常见app第三方登录为例:

  • 1.点击第三方登录按钮
  • 2.弹出一个小窗口，展示对应二维码
  • 3.手机打开对应的 APP进行扫码之后，会跳转到同意页面，同时浏览器端也会显示扫码成功
  • 4.手机端操作同意登录之后,会出现两种情况:
    • 1．当前用户已注册:直接登录
    • 2.当前用户未注册:执行注册功能

详细流程如下：

  • 1.点击第三方登录按钮:执行 window.open方法，打开一个第三方指定的URL窗口，该地址会指向第三方登录的URL,并且由第三方提供一个对应的二维码
  • 2.弹出一个小窗口，展示对应二维码: 此处展示的二维码，即为上一步中第三方提供的二维码
  • 3.手机打开对应的 APP进行扫码之后，会跳转到同意页面，同时浏览器端也会显示扫码成功:在第三方中会一直对该页面进行轮询,配合第三方APP 来判断是否扫码成功
  • 4.手机端操作同意登录之后，会出现两种情况:在 APP 中同意之后，第三方会进行对应的跳转，跳转地址为你指定的地址，在该地址中可以获取到第三方的用户信息，该信息即为第三方登录时要获取到的关键数据
  • 5**.至此，第三方操作完成。接下来需要进行本平台的登录判定。**
    • 1．该注册指的是第三方用户是否在本平台中进行了注册。
    • 2.因为在之前的所有操作中，我们拿到的是第三方的用户信息。
    • 3.该信息可以帮助我们直接显示对用的用户名和头像，但是因为不包含关键信息（手机号、用户名、密码）所以我们无法使用该信息帮助用户直接登录
    • 4．所以我们需要判断当前用户是否在咱们自己的平台中完成了注册
      • 1.当前用户已注册:直接登录
      • 2.当前用户未注册:执行注册功能
48.1、QQ开放平台流程大解析

那么接下来我们先来处理QQ第三方登录功能。
想要对接QQ登录，那么需要使用到QQ互联平台，在该平台中:
1．注册账户

2.认证开发者

3.注册应用

48.2、QQ登录对接流程: 获取QQ用户信息

官网文档

对接QQ登录分为以下几步:

  • 1．展示QQ登录二维码
  • 2．获取用户信息
  • 3.完成跨页面数据传输
  • 4．认证是否已注册分
  • 5．完成QQ对接

展示QQ登录二维码

1、在index.html中引入QQ的SDK

<!-- QQ 登录 --><scripttype="text/javascript"charset="utf-8"src="https://connect.qq.com/qc_jssdk.js"data-appid="[你的appid]"data-redirecturi="[你在QQ互联中配置的成功之后的回调]"></script>

2、创建qq-login组件、来凤凰qq登录组件

<template><div class="qq-connect-box"><span id="qqLoginBtn"></span><svg-iconclass="w-4 h-4 fill-zinc-200 dark:fill-zinc-300 duration-500 cursor-pointer"name="qq"></svg-icon></div>
</template><script setup>
import { onMounted } from 'vue'
onMounted(() => {QC.Login({btnId: 'qqLoginBtn' //插入按钮的节点id},(data, ops) => {console.log(data, '登录成功')})
})
</script>

image-20220922145401409

上面的图片可以得知、qqLoginBtn就是放置调起二维码按钮的地方、点击qqLoginBtn标签中的a链接、可以调起二维码；但是这样写有太丑；所以我们可以将a链接的透明度设置为0，并且置于最下方即可;css如下

<style lang="scss" scoped>
.qq-connect-box {position: relative;&:deep(#qqLoginBtn) {a {position: absolute;top: 0;right: 0;bottom: 0;left: 0;z-index: -1px;opacity: 0;}}
}
</style>

完整示例

<template><div class="qq-connect-box"><span id="qqLoginBtn"></span><svg-iconclass="w-4 h-4 fill-zinc-200 dark:fill-zinc-300 duration-500 cursor-pointer"name="qq"></svg-icon></div>
</template><script setup>
import { onMounted } from 'vue'
onMounted(() => {// 当我们登录成功之后、会缓存起来、下次登录不需要扫码、所以我们需要注销登录、避免用户下次登录时展示上次的记录QC.Login({btnId: 'qqLoginBtn' //插入按钮的节点id},(data, ops) => {// 扫码授权登录成功后的回到console.log(data, '登录成功')// 注销登录QC.Login.signOut()// 登录成功的回调// https://imooc-front.lgdsunday.club/login#access_token=4723B87EC749FA12A7247F40975D7BFB&expires_in=7776000// 解析地址栏地址获取tokenconst accessToken = getQQAccessToken()// 将data中的用户昵称、和用户头像、以及accessToken发送给后台// TODO})
})const getQQAccessToken = () => {const hash = window.location.hash || ''const reg = /access_token=(.+)&expires_in/return hash.match(reg)[1]
}
</script><style lang="scss" scoped>
.qq-connect-box {position: relative;&:deep(#qqLoginBtn) {a {position: absolute;top: 0;right: 0;bottom: 0;left: 0;z-index: -1px;opacity: 0;}}
}
</style>

image-20220922151658244

注意：扫码成功重定向的地址是在小窗口打开的、并不是在原来的窗口打开、登录成功的回调也是在小窗口中回调

48.3、 QQ登录对接流程:跨页面信息传输

由于拿到扫码用户的 AccessToken 和 用户的信息（昵称、头像…） 都是在小窗口上获取到的；

这小节最要作用:就是将小窗口获取到的这些信息传递给主窗口上

想要实现跨页面信息传输,通常由两种方式:

  • 1、BroadcastChannel:允许同源的不同浏览器窗口,Tab页，frame或者iframe下的不同文档之间相互通信。但是会存在兼容性问题,实测Safari15.3 无法使用
  • 2、localStorage + window.onstorage: 通过localStorage进行同源的数据传输。用来处理BroadcastChannel不兼容的浏览器。
    那么依据以上两个API，我们实现对应的通讯模块:

utils/broadcase.js

/**** 向同源且不同tab标签页发送数据*/// BroadcastChannel的信道key； 或者localStorage的设置项的key
const BROAD_CASE_CHANNEL_KEY = 'BROAD_CASE_CHANNEL_KEY'
// BroadcastChannel实例
let broadcastChannel = null
if (window.BroadcastChanne) {// 创建BroadcastChannel实例broadcastChannel = new window.BroadcastChanne(BROAD_CASE_CHANNEL_KEY)
}
/*** 发送数据* @param {*} data 发送的数据包*/
export const sendMsg = (data) => {if (broadcastChannel) {broadcastChannel.postMessage(data)} else {window.localStorage.setItem(BROAD_CASE_CHANNEL_KEY, JSON.stringify(data))}
}/*** 监听数据传输* @returns promise对象*/
export const listener = () => {return new Promise((resolve, reject) => {if (broadcastChannel) {broadcastChannel.onmessage = (event) => {resolve(event.data)}} else {window.onstorage = (event)

本文来自互联网用户投稿，该文观点仅代表作者本人，不代表本站立场。本站仅提供信息存储空间服务，不拥有所有权，不承担相关法律责任。如若转载，请注明出处：http://www.mzph.cn/news/720782.shtml

如若内容造成侵权/违法违规/事实不符，请联系多彩编程网进行投诉反馈email:809451989@qq.com，一经查实，立即删除！

相关文章

libigl 网格平均曲率计算

libigl 网格平均曲率计算

文章目录 一、简介二、实现代码三、实现效果参考资料一、简介 根据 Laplace-Beltrami 算子与平均曲率法向的关系： 又根据余切 Laplace-Beltrami 算子的定义： 其中 Ai 为该点邻域面积，取 Voronoi cell 面积如下： 得到
阅读更多...
uniapp制作--简单的tab切换

uniapp制作--简单的tab切换

一、实现思路 在UniApp中&#xff0c;可以使用v-if来控制Tab栏并进行切换。 创建一个方法来控制点击时的效果。 二、实现步骤 ①view部分展示 <!-- tab选项 --><view class"select-area"><view class"select-top"><view clas…
阅读更多...
基于Python+Flask实现一个TODO任务管理系统网站

基于Python+Flask实现一个TODO任务管理系统网站

随着科技的进步&#xff0c;数字化的任务清单逐渐成为生活中不可或缺的一部分。它们不仅可以帮助我们跟踪日常任务&#xff0c;还可以提高效率。但是&#xff0c;你是否考虑过自己制作一个任务管理系统呢&#xff1f; 好消息是&#xff0c;使用Python和Flask&#xff0c;我们可…
阅读更多...
Redis 之六：Redis 的哨兵模式（Sentinel）

Redis 之六：Redis 的哨兵模式（Sentinel）

Redis 哨兵&#xff08;Sentinel&#xff09;模式是一种高可用性解决方案&#xff0c;用于监控和自动故障转移的集群系统。 在 Redis Sentinel 架构中&#xff0c;哨兵是一组运行在特殊模式下的 Redis 进程&#xff0c;它们可以监控一个或多个主从复制结构中的 Redis 主服务器以…
阅读更多...
Excel中筛选合并单元格后，只显示第一行怎么办？

Excel中筛选合并单元格后，只显示第一行怎么办？

Excel中筛选合并单元格后，只显示第一行怎么办？ 我们日常的Excel数据在展示的时候为了数据的清晰和美观往往部分相同的单元格进行合并,但是合并之后在筛选时会发现结果会显示异常。 现在我们筛选下国籍为中国的员工信息，发现只显示了一条数据，解决这个异常只需要五Excel步：…
阅读更多...
06-prometheus的数据存储

06-prometheus的数据存储

一、本地存储prometheus收集的监控数据 就是将默认的存储&#xff0c;修改为“我们指定”的目录下&#xff1b; 1&#xff0c;配置systemctl启动文件 [rootprometheus-server32 ~]# vim /etc/systemd/system/prometheus-server.service [Unit] DescriptionPrometheus Server D…
阅读更多...
站群服务器租用需要考虑哪些?

站群服务器租用需要考虑哪些?

站群服务器租用是指租用服务器来托管多个网站或应用&#xff0c;通常用于实现网站优化、提高搜索引擎排名等目的。在选择站群服务器租用服务时可以考虑以下几点&#xff0c;RAKsmart小编为您整理发布。 1. 多IP支持&#xff1a;站群服务器应具备多个独立IP地址&#xff0c;以便…
阅读更多...
面试经典150题——逆波兰表达式求值

面试经典150题——逆波兰表达式求值

Man cannot live like a beast, he should pursue knowledge and virtue. -- Dante 1. 题目描述 2. 题目分析与解析 2.1 思路一 这个波兰式我记得在之前上编译原理的时候学过&#xff0c;是对输入的代码进行解析用的。可能有一部分读者对于波兰表达式并不太熟悉&#xff0c;…
阅读更多...
对接华泰极速行情丨DolphinDB INSIGHT 插件使用教程

对接华泰极速行情丨DolphinDB INSIGHT 插件使用教程

INSIGHT 是华泰证券依托大数据存储、实时分析等领域的技术积累&#xff0c;整合接入国内多家交易所高频行情数据&#xff0c;为投资者提供集行情接入、推送、回测、计算及分析等功能于一体的行情数据服务解决方案。基于 INSIGHT 官方提供的行情数据服务 C SDK&#xff08;TCP 版…
阅读更多...
【FastChat】用于训练、服务和评估大型语言模型的开放平台

【FastChat】用于训练、服务和评估大型语言模型的开放平台

FastChat 用于训练、服务和评估大型语言模型的开放平台。发布 Vicuna 和 Chatbot Arena 的存储库。 隆重推出 Vicuna&#xff0c;一款令人印象深刻的开源聊天机器人 GPT-4&#xff01; &#x1f680; 根据 GPT-4 的评估&#xff0c;Vicuna 达到了 ChatGPT/Bard 90%* 的质量&…
阅读更多...
最短路径Floyd算法

最短路径Floyd算法

第一题&#xff1a;[USACO08OPEN] Clear And Present Danger S #include<bits/stdc.h> using namespace std; int n,m; int g[105][105]; int arr[100005]; long long sum; int main() {scanf("%d%d",&n,&m);for(int i1;i<m;i){scanf("%d"…
阅读更多...
聚观早报 | 2024款腾势D9将发布；岚图汽车2月销量

聚观早报 | 2024款腾势D9将发布；岚图汽车2月销量

聚观早报每日整理最值得关注的行业重点事件&#xff0c;帮助大家及时了解最新行业动态&#xff0c;每日读报&#xff0c;就读聚观365资讯简报。 整理丨Cutie 3月2日消息 2024款腾势D9将发布 岚图汽车2月销量 苹果Vision Pro防汗新专利 真我12 Pro正式开售 Redmi K70/Pro…
阅读更多...
终极排序（快排，归并，库函数）

终极排序（快排，归并，库函数）

一、快速排序 1、确定分界点&#xff1a;q [ l ] , q [ ( l r ) / 2 ] , q [ r ] ,或者其它区间之中的随机数。&#xff08;左 l 右 r &#xff09; 2、调整区间&#xff1a;&#xff08;较难理解的部分&#xff09; &#xff08;1&#xff09;、暴力做法 …
阅读更多...
Linux 学习笔记(12)

Linux 学习笔记(12)

十二、 系统服务 1 、系统服务分类&#xff0c;根据其使用的方法来分&#xff0c;可以被分为三类 a、由 init 控制的服务&#xff1a;基本都是系统级别的服务&#xff0c;运行级别这一章讲的就是这一类的服务 b、由 System V 启动脚本启动的服务&#xff1a;和我们打交道最多…
阅读更多...
爬虫入门到精通_实战篇10(使用Redis+Flask维护动态代理池)

爬虫入门到精通_实战篇10(使用Redis+Flask维护动态代理池)

1 目标 为什么要用代理池 许多网站有专门的反爬虫措施&#xff0c;可能遇到封IP等问题。互联网上公开了大量免费代理&#xff0c;利用好资源。通过定时的检测维护同样可以得到多个可用代理。 代理池的要求 多站抓取&#xff0c;异步检测定时筛选&#xff0c;持续更新提供接…
阅读更多...
Linux系统部署Discuz论坛并发布至公网随时随地可远程访问

Linux系统部署Discuz论坛并发布至公网随时随地可远程访问

目录 ​编辑 前言 1.安装基础环境 2.一键部署Discuz 3.安装cpolar工具 4.配置域名访问Discuz 5.固定域名公网地址 6.配置Discuz论坛 结语 作者简介&#xff1a; 懒大王敲代码&#xff0c;计算机专业应届生 今天给大家聊聊Linux系统部署Discuz论坛并发布至公网随时随地…
阅读更多...
基于Golang客户端实现Nacos服务注册发现和配置管理

基于Golang客户端实现Nacos服务注册发现和配置管理

基于Golang客户端实现Nacos服务注册发现和配置管理 背景 最近需要把Golang实现的一个web项目集成到基于Spring Cloud Alibaba的微服务体系中&#xff0c;走Spring Cloud Gateway网关路由实现统一的鉴权入口。 软件版本 组件名称组件版本Nacos2.2.0Go1.21.0Ginv1.9.1Nacos-s…
阅读更多...
《汇编语言》- 读书笔记 - 第16章-直接定址表

《汇编语言》- 读书笔记 - 第16章-直接定址表

《汇编语言》- 读书笔记 - 第16章-直接定址表 16.1 描述了单元长度的标号&#xff08;数据标号&#xff09;检测点 16.1 16.2 在其他段中使用数据标号assume通过标号取地址检测点 16.2 16.3 直接定址表&#xff08;Direct Addressing Table&#xff09;例1分析代码效果 例2分析…
阅读更多...
代购集运公司需要什么样的信息化技术服务|集运系统对接主流电商API接口以实现客户丰富的代购体验

代购集运公司需要什么样的信息化技术服务|集运系统对接主流电商API接口以实现客户丰富的代购体验

代购集运公司可以考虑以下信息化服务&#xff1a; 1、网络平台 代购集运公司可以建立一个在线平台&#xff0c;让客户能够浏览商品、下单、查询订单状态等操作。 平台也可以提供在线支付和快递跟踪等功能&#xff0c;方便客户和公司的沟通和交流。接入主流电商平台API接口&am…
阅读更多...
应用在智能空调触摸屏中的高精度触摸芯片

应用在智能空调触摸屏中的高精度触摸芯片

智能空调是具有自动调节功能的空调。智能空调系统能根据外界气候条件&#xff0c;按照预先设定的指标对温度、湿度、空气清洁度传感器所传来的信号进行分析、判断、及时自动打开制冷、加热、去湿及空气净化等功能的空调。适合放在卧室&#xff0c;客厅等地方。 在中央控制系统…
阅读更多...
推荐文章
最新文章

Copyright @ 2022~2023