react 网页/app复制分享链接到剪切板，分享到国外各大社交平台，通过WhatsApp方式分享以及SMS短信方式分享链接内容

1.需求 

最近在做一个国际网站app,需要把app中某个页面的图文链接分享到国外各大社交平台上(facebook,whatapp,telegram,twitter等),以及通过WhatApp聊天方式分享，和SMS短信方式分享链接内容，该怎么做呢？图示如下:

分享到国外各大社交平台： 

操作说明：

        当点击COPY URL时,复制分享链接到剪切板，然后点击各个分享平台图标，调用分享apk或者方法，从而调起社交平台app或者对应的web网页 ，进行分享操作

通过WhatApp方式，SMS方式分享： 

 操作说明：

        1.WhatsAPP分享：

                程序生成随机电话号码，默认选中第一个电话号码，点击WhatsAPP后，调取WhatApp相关方法接口，进行分享操作，然后电话号码变灰，当再次点击WhatsAPP时，触发下一个电话号码操作，图示如下：

        2.SMS方式分享

                点击SMS按钮时，触发SMS接口请求，调用SMS相关url进行分享操作

2.实现分享到国外各大社交平台

先上代码，通过点击 COPY URL 复制分享链接到剪切板，然后点击各个平台图标，实现分享操作

COPY URL,点击平台图标相关代码： 

import React, {useState} from "react";
import axios from "axios";
import Scroll from "../../components/Scroll";
import {CountDown, Steps, Tabs, Toast, Popup, Cell, Dialog, Swiper, NoticeBar, Image} from "react-vant";
import {CopyToClipboard} from "react-copy-to-clipboard";const Index = () => {//分享url:拼接要分享的页面url,以及带上参数//注意：这里参数有的分享平台不支持?格式，可以使用简化格式,eg：http:www.test.com/target_page/100/paramconst GetUrl = (tagId) => {return `${window.location.origin}/target_page?param=${tagId}`;};//各个分享平台对应的urlconst GetWhatsAppUrl = (tagId) => {//也可以用这个`https://api.whatsapp.com/send?text=` + encodeURIComponent("test") + encodeURIComponent("\n\n" + GetInviteWheelUrl(tagId));return encodeURI(`whatsapp://send?text=test\n${GetUrl(tagId)}`);
};const GetTelegramUrl = (tagId, text) => {return encodeURI("https://t.me/share/url?url=" + encodeURIComponent(GetInviteWheelUrl(tagId)) + "&text=" + encodeURIComponent(text));};const GetTwitterUrl = (tagId, text) => {return encodeURI("https://twitter.com/intent/tweet?text=" + encodeURIComponent(text) + "&url=" + encodeURIComponent(GetInviteWheelUrl(tagId)));};const GetFacebookUrl = (tagId, text) => {return "https://www.facebook.com/sharer/sharer.php?u=" + encodeURIComponent(GetUrl(tagId)) + "&t=" + encodeURIComponent(text)};//分享到社交软件const shareFriend = (type) => {let shareText = "分享说明" ;switch (type) {case "facebook":if (window.document) {if (window.document.getElementById("og_url")) {window.document.getElementById("og_url").content=GetUrl(rid);}if (window.document.getElementById("og_description")) {window.document.getElementById("og_description").content=shareText;}if (window.document.getElementById("og_title")) {window.document.getElementById("og_title").content=shareText;}if (window.document.getElementById("og_image")) {window.document.getElementById("og_image").content=window.location.origin + "../images/banner_x2.png";}}window.location.href = GetFacebookUrl(tagId, shareText);return;case "whatApp":if (window.document) {if (window.document.getElementById("og_url")) {window.document.getElementById("og_url").content=GetUrl(tagId);}if (window.document.getElementById("og_description")) {window.document.getElementById("og_description").content=shareText;}if (window.document.getElementById("og_title")) {window.document.getElementById("og_title").content=shareText;}if (window.document.getElementById("og_image")) {window.document.getElementById("og_image").content=window.location.origin + "../images/banner_x2.png";}}window.location.href = GetWhatsAppUrl(tagId, shareText);return;case "telegram":window.location.href = GetTelegramUrl(tagId, shareText);return;case "twitter":if (window.document) {if (window.document.getElementById("tw_description")) {window.document.getElementById("tw_description").content=shareText;}if (window.document.getElementById("tw_title")) {window.document.getElementById("tw_title").content=shareText;}if (window.document.getElementById("tw_card")) {window.document.getElementById("tw_card").content=window.location.origin + "../images/banner_x2.png";}if (window.document.getElementById("tw_card")) {window.document.getElementById("tw_card").content=window.location.origin + "../images/banner_x2.png";}if (window.document.getElementById("tw_image")) {window.document.getElementById("tw_image").content=window.location.origin + "../images/banner_x2.png";}if (window.document.getElementById("tw_url")) {window.document.getElementById("tw_url").content=GetUrl(rid);}}window.location.href = GetTwitterUrl(tagId, shareText);return;}}return (<div class={style.main}><ul class={style.share_1_link}><li class={style.share_1_link_intro} onClick={() => shareFriend("facebook")}><div class={style.share_1_link_img}><a href="javascript:;"  rel="noreferrer"><img src={"../images/share3.svg"} /></a></div><div class={style.share_1_link_text}>Facebook</div></li><li class={style.share_1_link_intro}  onClick={() => shareFriend("whatApp")}><div class={style.share_1_link_img}><a href="javascript:;" rel="noreferrer"><img src={"../images/share2.svg"} /></a></div><div class={style.bottom_share_1_link_text}>WhatApp</div></li><li class={style.share_1_link_intro}  onClick={() => shareFriend("telegram")}><div class={style.share_1_link_img}><a href="javascript:;" rel="noreferrer"><img src={"../images/share3.png"} /></a></div><div class={style.share_1_link_text}>Telegram</div></li><li class={style.share_1_link_intro}  onClick={() => shareFriend("twitter")}><div class={style.share_1_link_img}><a href="javascript:;"  rel="noreferrer"><img src={"../images/share4.svg"}/></a></div><div class={style.share_1_link_text}>Twitter</div></li><li class={style.share_1_link_intro}><div class={style.share_1_link_img}><a href={"mailto:test@test.com?body" + GetUrl(tagId)} rel="noreferrer"><img src={"../images/share5.svg"}/></a></div><div class={style.share_1_link_text}>Email</div></li></ul></div><div class={style.copy_url_area}><div class={style.copy_url_input}><span id="share_url">{GetUrl(tagId)}</span></div><CopyToClipboardtext={GetUrl(tagId)}onCopy={() => {Toast.success({message: "Copy Successfully",});}}><div class={style.action_btn} style={{ flexShrink: 0 }}>COPY URL</div></CopyToClipboard></div>）
}export default Index;

对上面代码的说明：

        当点击CPOY URL 按钮时，调用react-copy-to-clipboard组件复制分享链接到剪切板，点击平台分享图片时，调用shareFriend()方法，进行分享配置操作，获取分享的url,以及调用各个平台分享的api,然后配置head中分享的meta(如下代码,为什么需要配置meta,因为国外很多平台在分享图文链接时，是通过爬虫来抓取meta数据进行分享数据展示的)，操作后，app会调起对应平台的app或者打开对应的web页面进行分享操作

html代码：

<head>
<meta id="og_url" property="og:url" content="" /><!-- facebook,whatApp分享--><meta id="og_description"  property="og:description" content="" /><meta id="og_image"  property="og:image" content="" /><meta id="og_title"  property="og:title" content="" /><!-- twitter分享--><meta  id="tw_card"  name="twitter:card" content=""><meta  id="tw_title" name="twitter:title" content=""><meta  id="tw_description" name="twitter:description" content=""><meta  id="tw_image" name="twitter:image" content=""><meta id="tw_url" property="twitter:url" content="" />
</head>

 对上面代码说明：

        meta中的数据，就是各个平台爬虫要抓取的分享数据，根据不同平台，meta的name不一样，具体情况可看各个平台官方文档

3.实现通过WhatsAPP以及SMS分享操作

  • 程序生成随机电话号码，默认选中第一个电话号码，点击WhatsAPP后，调取WhatApp相关方法接口，进行分享操作，然后电话号码变灰，当再次点击WhatsAPP时，触发下一个电话号码操作
  • 点击SMS按钮时，触发SMS接口请求，调用SMS相关url进行分享操作

代码如下： 

import React, {useState} from "react";
import axios from "axios";
import Scroll from "../../components/Scroll";
import {CountDown, Steps, Tabs, Toast, Popup, Cell, Dialog, Swiper, NoticeBar, Image} from "react-vant";
import {CopyToClipboard} from "react-copy-to-clipboard";const SinNumberGenerator = (x, offset) => {return (Math.sin(x + offset) + 1) / 2;
};//生成随机的分享电话号码:count 电话号码个数
const SharePhoneList = (count) => {let list = [];for (let i = 0; i < count; i++) {let phone = (SinNumberGenerator(((NowTimestamp / 100000) % 100000) / 50000 / Math.PI, i) * (99999 - 1000) +1000).toFixed(0);if (phone.length < 5) {phone = "0" + phone;}list.push({phone: phone, //电话号码state: Math.floor(Math.random()*2),  //发送状态});}return list;
};const Index = () => {//分享电话号码初始化const [sharePhoneList, setSharePhoneList] = useState([]);//当前选中电话号码索引const [checkedPhoneIndex, setCheckedPhoneIndex] = useState(0);//设置电话号码列表setSharePhoneList(SharePhoneList(20));setCheckedPhoneIndex(0);//分享url:拼接要分享的页面url,以及带上参数//注意：这里参数有的分享平台不支持?格式，可以使用简化格式,eg：http:www.test.com/target_page/100/paramconst GetUrl = (tagId) => {return `${window.location.origin}/target_page?param=${tagId}`;};const GetSeedWhatsAppUrl = (phone, tagId, text) => {return `https://api.whatsapp.com/send?phone=${phone}&text=` + encodeURIComponent(text) + encodeURIComponent("\n\n" + GetUrl(tagId));
};const GetSmsUrl = (phone, tagId, text) => {return "sms:/open?addresses=" + phone + "&body=" + encodeURIComponent(text + GetUrl(tagId));
};//发送whatsApp,smsconst SendMessage = (type= "whatsApp") => {if (checkedPhoneIndex >= 20) {return;}let phoneList = [];let checkedPhone = "";sharePhoneList.map((value, index) => {  //设置发送的号码状态if (index === checkedPhoneIndex) {  //如果当前电话号码索引和遍历的索引相同，则设置电话号码状态为已完成phoneList.push({phone:value.phone,state: 1,});checkedPhone = value.phone;} else {phoneList.push({phone:value.phone,state: value.state,});}});setCheckedPhoneIndex(checkedPhoneIndex + 1);//更新电话号码列表状态setSharePhoneList(phoneList); let link = GetSeedWhatsAppUrl(checkedPhone, tarId);//发送短信if (type === "sms") {link = GetSmsUrl(checkedPhone, tarId);}window.location.href = link;}return (<div class={style.main}><div class={style.bottom_share}><div class={style.bottom_share_title}>Share </div><div class={style.bottom_share_phones}>{sharePhoneList.map((value, index) => (<div class={`${style.bottom_share_phone_info} ${(value.state ? style.bottom_share_phone_ok : "")}`} id={value.state}>{value.phone}</div>))}</div><div class={style.phone_send}><div class={style.phone_send_info} onClick={() => SendMessage()}><div class={style.phone_send_text}><div class={style.phone_send_text1}>Send message</div><div class={style.phone_send_text2}><span>on </span><span class={style.phone_send_text2_font}>WhatsAPP</span></div></div><div class={style.phone_send_img}><img src={"../images/whatsApp.png"} style={{width: "80%"}}/></div></div><div class={style.phone_send_info} onClick={() => SendMessage("sms")}><div class={style.phone_send_img}><img src={"../images/sms.png"} style={{width: "80%"}}/></div><div class={style.phone_send_text} style={{marginLeft: "-1rem"}}><div class={style.phone_send_text1}>Send message</div><div class={style.phone_send_text2}><span class={style.phone_send_text2_font}>SMS</span></div></div></div></div></div></div>）
}export default Index;

css: 

.bottom_share {width: 100%;margin-top: 1.3rem;
}
.bottom_share_title {font-size: 0.9rem;
}.bottom_share_phones {background-color: rgba(0, 0, 0);color: #e6e3e3;display: -ms-flexbox;display: flex;width: 96%;font-size: 0.9rem;-ms-flex-wrap: wrap;flex-wrap: wrap;-ms-flex-align: center;align-items: center;-ms-flex-pack: distribute;-ms-flex-direction: row;margin-top: 0.7rem;padding-top: 0.5rem;justify-content: flex-start;flex-direction: row;
}.bottom_share_phone_info {margin: 0.2rem 1.1rem;
}.bottom_share_phone_ok {color: #555353;
}.phone_send {width: 92%;background-color: rgba(0,0,0);display: flex;margin-bottom: 1rem;padding-left: 0.5rem;padding-right: 0.5rem;
}.phone_send_info {margin: 0.6rem 0.2rem 1rem 0.2rem;display: flex;background-color:  #e6e3e3;flex-direction: row;align-items: center;justify-content: space-around;padding-top: 0.35rem;padding-bottom: 0.35rem;
}.phone_send_text {display: flex;color: #191717;font-weight: 500;font-size: 0.9rem;flex-direction: column;justify-content: center;
}.phone_send_text2_font {font-weight: 900;
}.phone_send_img {width: 30%;
}

 好了，网页/app复制分享链接到剪切板，分享到国外各大社交平台，通过WhatsApp方式分享以及SMS短信方式分享链接内容操作基本完成

4.拓展知识

(1).Facebook

        Facebook的分享原理： 告诉Facebook你想要分享的url，Facebook爬虫机器人会主动向这个url发起爬虫操作，对这个url进行html解析，分别拿到相对于的html元素图谱，然后获取图谱中的内容并跳转到Facebook的分享页面并把获取到的内容渲染出来，后面只要点击提交分享的按钮就可以实现分享网页的功能了；对于国外第三方的分享元素图谱，一般是写在html的head部分，官方文档：https://developers.facebook.com/docs/sharing/webmasters/images/

Facebook所对应的如下面所示：

<html>
<head>
<meta property="og:type" content="website" />
<meta property="og:url" content="要分享的链接" />
<meta property="og:title" content="标题" />
<meta property="og:description" content="简介" />
<meta property="og:image" content="图片" />
</head>
</html>

分享网页固定内容到Facebook

  • 使用浏览器自带分享功能 （只能分享到Facebook动态）
  • 使用js进行Facebook分享 （可分享到Facebook动态和好友）
const url = "http://www.test.cn"
const text = "share text"
widnow.open("http:/www.facebook.com/share.php?u="+ encodeURIComponent(u) + "&t="+ encodeURIComponent(t), "sharer","toolbar=0,status=0,width=626,height=436")
  • 分享到Facebook好友（messenger） PC端：需要登录Facebook获取appid
const url = "http://www.test.cn"
widnow.open("https:/www.facebook.com/dialog/send?app_id=1 xxxx11&link="+url+"&redirect_uri="+url+"","_blank")
  • 移动端
const url = "http://www.test.cn"
widnow.open("fb-messenger://share/?link="+url）

注意：

        如果meta已经写好了Facebook的分享内容，那么使用js改变mate分享内容是无效的，因为Facebook抓取meta是在js加载之前获取的，尽管通过js更改mate信息也无法改变Facebook已抓取到的信息，所以如果已经在head头部写好了meta的facebook分享内容，就无法通过js动态分享自定义文案

分享网页自定义内容到Facebook

        前端编辑参数，调用第三方的分享地址，第三方回调你传的参数，解析里面meta信息，然后返回html页面，再执行js动态分享内容

  • 分析到Facebook动态（PC端和移动端都适用）
let mateArr = ['og:url','http://www.test.cn','og:title','title','og:description','description','og:image','http:/xxx/static/image/test.jpg','og:type','website']
let mataParams = mateArr.toString()
window.open('http://www.facebook.com/sharer.php?u='+ encodeURIComponent(`http://xxx/share/detail?meta=${metaParams}`))
  •  分享到Facebook好友（messenger） PC端
let mateArr = ['og:url','http://www.test.cn','og:title','title','og:description','description','og:image','http://xxx/static/image/test.jpg','og:type','website']
let mataParams = mateArr.toString()
window.open('https:/www.facebook.com/dialog/send?app_id=1xxx12&link='+ encodeURIComponent(`http://xxx/share/detail?meta=${metaParams}`)+'redirect_uri='+encodeURIComponent(`http://xxx/share/detail?meta=${metaParams}`)+'','_blank')
  • 移动端
let mateArr = ['og:url','http://www.test.cn','og:title','title','og:description','description','og:image','http://zzz/static/image/test.jpg','og:type','website']
let mataParams = mateArr.toString()
widnow.open("fb-messenger://share/?link="+encodeURIComponent(`http://xxx/share/detail?meta=${metaParams}`)+""）

在分享到Facebook上时，需要注意一下几点

  • 1.og:url 中的 url地址禁止携带参数，即 https://test.com/index.htm?key=search错误，若确实需要，请将参数放到目录层级中，如https://testcom/search/index.htm
  • 2.og:image 中的url地址只要能满足让爬虫爬取即可，是否携带参数都可以
  • 3.分享到Facebook上的图片的最佳比例是1.91：1（矩形图）或1：1（正方形图），最小尺寸是200200，低于此尺寸图片将不显示，推荐尺寸是1200630或600*315
  • 4.分享图片无法自己定义显示尺寸，使用og:image:width与og:image:height也不行
  • 5.og:title 标签不存在时，则默认读取title标签里的内容作为分享的title
  • 6.因为分享的内容采用的是爬虫的形式获取，所以在html页面一开始就要存在og：标签，供爬虫，而不可以动态的通过js脚本追加
  • 7.对于动态生成html的情况，当采用的是前后端一体的方式，如.jsp、.asp、haml等形式时,在后端动态生成参数，然后传递给前端页面即可
  • 8.对于前后端分离的情况，需要后端配合动态生成html页面
  • 9.对于分享的链接能否正常显示，可以通过Facebook分享调试器进行调试，并查看结果

(2).WhatsApp

原理与Facebook一样，通过爬虫获取html头部head部分的mate：og信息,有一点需要注意：WhatsApp分享到好友PC端和移动端都可以使用同一套代码,

分享到网页版平台：https://web.whatsapp.com/send?text={内容}&url={链接}

通用链接：https://wa.me/?text={内容}，会重定向到API网关然后通过url schema的方式唤起App

<html>
<head>
<meta property="og:type" content="website" />
<meta property="og:url" content="要分享的链接" />
<meta property="og:title" content="标题" />
<meta property="og:description" content="简介" />
<meta property="og:image" content="图片" />
</head>
</html>
const url = "http://www.test.cn"
const text = "share"
window.open("https://api.whatsapp.com/send?text="+encodeURIComponent(url)+encodeURIComponent(text)+"&via=lopscoop")

(3).twitter 

推特是比较简单的，可以在网页中通过链接，推特推荐在网页版打开，所以在一些浏览器可能会隐藏到App的入口（比如Chrome）。它的链接是一个universal link，格式如下： https://twitter.com/intent/tweet?text={内容}&url={链接},注意内容和链接需要用encodeURIComponent加密一下,官方文档：https://developer.twitter.com/en/docs/twitter-for-websites/cards/overview/summary

代码如下：

  <meta name="twitter:card" content="summary_large_image"><meta name="twitter:title" content="Parade of Fans for Houston’s Funeral"><meta name="twitter:description" content="分享的description"><meta name="twitter:image" content="分享图片的url">

//调用下面的js打开分享弹窗 
window.open(`https://twitter.com/share?url=${分享链接的url}`, `_blank`, `width=600, height=450, toolbar=yes, location=yes, directories=no, status=no, menubar=yes, scrollbars=yes, resizable=no, copyhistory=yes, top=100,left=350`)

注意： 

  • twitter:url 标签可有可无，因为默认采用的是 https://twitter.com/share?url=${分享链接的url} 中的url，url地址禁止携带参数，即 https://test.com/index.htm?key=search错误，若确实需要，请将参数放到目录层级中，如https://testcom/search/index.htm
  • twitter:title 标签必须有，否则无法显示分享的内容
  • twitter:image 中的url地址只要能满足让爬虫爬取即可，是否携带参数都可以
  • twitter:card 标签必须有，常用的summary_large_image表示以大图的排版展示，summary以小图的形式排版展示。其他的分享如视频等，请参考官方文档
  • 因为分享的内容采用的是爬虫的形式获取，所以在html页面一开始就要存在twitter：标签，供爬虫，而不可以动态的通过js脚本追加
  • 对于动态生成html的情况，当采用的是前后端一体的方式，如.jsp、.asp、haml等形式时,在后端动态生成参数，然后传递给前端页面即可
  • 对于前后端分离的情况，需要后端配合动态生成html页面
  • 对于分享的链接能否正常显示，可以通过Twitter分享调试器进行调试，并查看结果

(4).Telegram

仅支持分享到App端和桌面端：https://t.me/share?url={链接}&text={内容}，也是url schema的方式

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

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

相关文章

Kubernetes 学习总结（38）—— Kubernetes 与云原生的联系

Kubernetes 学习总结（38）—— Kubernetes 与云原生的联系

一、什么是云原生&#xff1f; 伴随着云计算的浪潮&#xff0c;云原生概念也应运而生&#xff0c;而且火得一塌糊涂&#xff0c;大家经常说云原生&#xff0c;却很少有人告诉你到底什么是云原生&#xff0c;云原生可以理解为“云”“原生”&#xff0c;Cloud 可以理解为应用程…
阅读更多...
选择排序算法：简单但有效的排序方法

选择排序算法：简单但有效的排序方法

在计算机科学中&#xff0c;排序算法是基础且重要的主题之一。选择排序&#xff08;Selection Sort&#xff09;是其中一个简单但非常有用的排序算法。本文将详细介绍选择排序的原理和步骤&#xff0c;并提供Java语言的实现示例。 选择排序的原理 选择排序的核心思想是不断地从…
阅读更多...
Springboot+Vue+Mysql实现模拟汽车保养系统（附源码）

Springboot+Vue+Mysql实现模拟汽车保养系统（附源码）

前言 本项目基于springbootvue搭建的汽车保养的系统&#xff0c;页面较为粗糙&#xff0c;前端好的小伙伴可自行优化。 项目环境 -环境框架后端JDK1.8SpringBootmybatisPlus前端NodeJS16.0Vue2.0ElementPlus数据库MySQL8.0- 数据库设计 数据表备注banner轮播图表car用户汽…
阅读更多...
C++ 程序员入门之路——旅程的起点与挑战

C++ 程序员入门之路——旅程的起点与挑战

&#x1f337;&#x1f341; 博主猫头虎 带您 Go to New World.✨&#x1f341; &#x1f984; 博客首页——猫头虎的博客&#x1f390; &#x1f433;《面试题大全专栏》 文章图文并茂&#x1f995;生动形象&#x1f996;简单易学&#xff01;欢迎大家来踩踩~&#x1f33a; &a…
阅读更多...
【maven】idea中基于maven-webapp骨架创建的web.xml问题

【maven】idea中基于maven-webapp骨架创建的web.xml问题

IDEA中基于maven-webapp骨架创建的web工程&#xff0c;默认的web.xml是这样的。 <!DOCTYPE web-app PUBLIC"-//Sun Microsystems, Inc.//DTD Web Application 2.3//EN""http://java.sun.com/dtd/web-app_2_3.dtd" ><web-app><display-name…
阅读更多...
本地部署 Qwen-Agent

本地部署 Qwen-Agent

本地部署 Qwen-Agent 1. Qwen-Agent 概述2. Github 地址3. 创建虚拟环境4. 安装 flash-attention5. 部署 Qwen 模型服务6. 部署 Qwen-Agent7. 浏览器访问 Qwen Agent8. 安装浏览器助手 1. Qwen-Agent 概述 Qwen-Agent 是一个代码框架&#xff0c;用于发掘开源通义千问模型&…
阅读更多...
2120 -- 预警系统题解

2120 -- 预警系统题解

Description OiersOiers 国的预警系统是一棵树&#xff0c;树中有 &#xfffd;n 个结点&#xff0c;编号 1∼&#xfffd;1∼n&#xff0c;树中每条边的长度均为 11。预警系统中只有一个预警信号发射站&#xff0c;就是树的根结点 11 号结点&#xff0c;其它 &#xfffd;−1…
阅读更多...
面试题：Kafka 为什么会丢消息？

面试题：Kafka 为什么会丢消息？

文章目录 1、如何知道有消息丢失&#xff1f;2、哪些环节可能丢消息&#xff1f;3、如何确保消息不丢失&#xff1f; 引入 MQ 消息中间件最直接的目的&#xff1a;系统解耦以及流量控制&#xff08;削峰填谷&#xff09; 系统解耦&#xff1a; 上下游系统之间的通信相互依赖&a…
阅读更多...
华硕X555YI, Win11下无法调节屏幕亮度

华硕X555YI, Win11下无法调节屏幕亮度

翻出一个旧电脑华硕X555YI&#xff0c;装Win11玩&#xff0c;已经估计到会有一些问题。 果然&#xff0c;装完之后&#xff0c;发现屏幕无法调节亮度。试了网上的一些方法&#xff0c;比如修改注册表等&#xff0c;无效。 估计是显卡比较老&#xff0c;哪里没兼容。然后用驱动…
阅读更多...
C++项目：仿mudou库one thread one loop式并发服务器实现

C++项目：仿mudou库one thread one loop式并发服务器实现

目录 1.实现目标 2.HTTP服务器 3.Reactor模型 3.1分类 4.功能模块划分: 4.1SERVER模块: 4.2HTTP协议模块: 5.简单的秒级定时任务实现 5.1Linux提供给我们的定时器 5.2时间轮思想&#xff1a; 6.正则库的简单使用 7.通用类型any类型的实现 8.日志宏的实现 9.缓冲区…
阅读更多...
【初识Linux】：常见指令（1）

【初识Linux】：常见指令（1）

朋友们、伙计们&#xff0c;我们又见面了&#xff0c;本期来给大家解读一下有关Linux的基础知识点&#xff0c;如果看完之后对你有一定的启发&#xff0c;那么请留下你的三连&#xff0c;祝大家心想事成&#xff01; C 语 言 专 栏&#xff1a;C语言&#xff1a;从入门到精通 数…
阅读更多...
PowerPoint如何设置密码？

PowerPoint如何设置密码？

PowerPoint&#xff0c;也就是PPT&#xff0c;是很多人工作中经常用的办公软件&#xff0c;而PPT和Word、Excel等一样可以设置密码保护。 PPT可以设置两种密码&#xff0c;一种是“打开密码”&#xff0c;也就是需要密码才能打开PPT&#xff1b;还有一种是设置成有密码的“只读…
阅读更多...
22.app.js的全局数据共享

22.app.js的全局数据共享

app.js中定义的全局变量适合 不修改且仅在js中使用的变量 目录 1 全局变量 2 修改全局变量 3 app.js中的变量不能直接在wxml中渲染 4 全局方法 1 全局变量 比如我现在想定义一个全局的变量something&#xff0c;直接在APP中写就行了 之后你可以在任何一个页面中&…
阅读更多...
互联网Java工程师面试题·MyBatis 篇·第一弹

互联网Java工程师面试题·MyBatis 篇·第一弹

目录 1、什么是 Mybatis&#xff1f; 2、Mybaits 的优点 3、MyBatis 框架的缺点 4、MyBatis 框架适用场合 5、MyBatis 与 Hibernate 有哪些不同&#xff1f; 6、#{}和${}的区别是什么&#xff1f; 7、当实体类中的属性名和表中的字段名不一样 &#xff0c;怎么办 &#x…
阅读更多...
HTML5 跨屏前端框架 Amaze UI

HTML5 跨屏前端框架 Amaze UI

Amaze UI采用国际最前沿的“组件式开发”以及“移动优先”的设计理念&#xff0c;基于其丰富的组件&#xff0c;开发者可通过简单拼装即可快速构建出HTML5网页应用&#xff0c;上线仅半年&#xff0c;Amaze UI就成为了国内最流行的前端框架&#xff0c;目前在Github上收获Star数…
阅读更多...
【C语言】【动态内存管理】malloc,free,calloc,realloc

【C语言】【动态内存管理】malloc,free,calloc,realloc

1.malloc函数 void* malloc(size_t size)功能&#xff1a;向内存申请字节为 size大小的空间 使用时要包含头文件&#xff1a;<stdlib.h> 开辟成功&#xff1a;返回开辟好的空间初始地址的指针 开辟失败&#xff1a;返回空指针 NULL 使用举例&#xff1a; (malloc和free…
阅读更多...
Java编程技巧：swagger2、knif4j集成SpringBoot或者SpringCloud项目

Java编程技巧：swagger2、knif4j集成SpringBoot或者SpringCloud项目

目录 1、springbootswagger2knif4j2、springbootswagger3knif4j3、springcloudswagger2knif4j 1、springbootswagger2knif4j 2、springbootswagger3knif4j 3、springcloudswagger2knif4j 注意点&#xff1a; Api注解&#xff1a;Controller类上的Api注解需要添加tags属性&a…
阅读更多...
OpenGLES：绘制一个混色旋转的3D圆柱

OpenGLES：绘制一个混色旋转的3D圆柱

一.概述 上一篇博文讲解了怎么绘制一个混色旋转的立方体 这一篇讲解怎么绘制一个混色旋转的圆柱 圆柱的顶点创建主要基于2D圆进行扩展&#xff0c;与立方体没有相似之处 圆柱绘制的关键点就是将圆柱拆解成&#xff1a;两个Z坐标不为0的圆 一个长方形的圆柱面 绘制2D圆的…
阅读更多...
基于java的鲜花销售系统/网上花店

基于java的鲜花销售系统/网上花店

摘 要 本毕业设计的内容是设计并且实现一个基于Spring Boot框架的驿城鲜花销售系统。它是在Windows下&#xff0c;以MYSQL为数据库开发平台&#xff0c;Tomcat网络信息服务作为应用服务器。驿城鲜花销售系统的功能已基本实现&#xff0c;主要包括首页、个人中心、用户管理、鲜…
阅读更多...
【网络安全---sql注入（2）】如何通过SQL注入getshell？如何通过SQL注入读取文件或者数据库数据？一篇文章告诉你过程和原理。

【网络安全---sql注入（2）】如何通过SQL注入getshell？如何通过SQL注入读取文件或者数据库数据？一篇文章告诉你过程和原理。

前言 本篇博客主要是通过piakchu靶场来讲解如何通过SQL注入漏洞来写入文件&#xff0c;读取文件。通过SQL输入来注入木马来getshell等&#xff0c;讲解了比较详细的过程&#xff1b; 如果想要学习SQL注入原理以及如何进行SQL注入&#xff0c;我也写了一篇详细的SQL注入方法及…
阅读更多...
最新文章
推荐文章

Copyright @ 2022~2023