基于 Vue 和 Spring Boot 實現滑塊驗證碼的機器驗證

基于 Vue 和 Spring Boot 實現滑塊驗證碼的機器驗證

  • 需求概述
  • 技術選型
  • 前端實現
    • 1. 引入組件
    • 2. 修改后端請求URL
    • 3. 新增機器驗證頁面
    • 4.首頁調用驗證組件
  • 后端實現
    • 流程梳理
    • 具體實現
      • 1. 引入依賴
      • 2. 增加yml配置
      • 3. 代碼實現
      • 4.跨域配置(可選)
  • 實現效果
  • 二次驗證的實現
      • 為什么需要二次驗證?
    • 前端實現
      • 1.APP.vue
      • 2.新增登錄和驗證頁面
      • 3.配置路由
    • 后端實現
    • 訪問與實現效果
  • 其他問題整合
    • 移動端滑動與瀏覽器默認左滑返回上一頁沖突
  • Demo地址

本文詳細介紹了如何使用 AJ-Captcha 庫實現一個安全的移動端登錄系統,包含滑塊驗證碼(行為驗證)功能。用戶需要輸入手機號,完成滑塊驗證,并由后端校驗手機號是否存在后才能觸發短信驗證碼發送。本實現參考了 Gitee 的手機號登錄流程。

實現效果如下:

錄制_2025_06_05_13_57_46_727

需求概述

登錄流程如下:

  1. 用戶輸入手機號,前端進行格式校驗。
  2. 點擊“發送驗證碼”后觸發滑塊驗證碼。
  3. 滑塊驗證通過后,后端校驗手機號是否存在。
  4. 手機號存在則發送短信驗證碼,用戶輸入驗證碼后完成登錄。

以下是參考的 Gitee 登錄流程時序圖和界面示意圖:

image-20250603100925555

機器驗證登錄時序圖

技術選型

  • 采用 AJ-Captcha 行為驗證碼庫,支持滑動拼圖和文字點選兩種驗證方式。AJ-Captcha 提供前后端交互的完整解決方案,支持 Java 后端以及多種前端框架(Vue、React、Flutter 等)。

  • 功能特點

    • 嵌入式集成,接入簡單,安全高效。

    • 拋棄傳統字符驗證碼,優化用戶體驗。

    • 支持多種前端框架和后端緩存方式(Redis、內存等)。

    • 提供滑動拼圖和文字點選兩種驗證碼類型。

    • 在線文檔:AJ-Captcha 官方文檔

前端實現

參考文檔:vue | AJ-Captcha

1. 引入組件

view/vue3/src/components/verifition · anji-plus/AJ-Captcha - 碼云 - 開源中國

# 1.復制view/vue/src/components/verifition文件夾,到自己工程對應目錄下,在登錄頁面插入如下代碼。
# 2.安裝請求和加密依賴
npm install axios  crypto-js   -S

2. 修改后端請求URL

修改aixos.js中的axios.defaults.baseURL為后端服務的url

image-20250605134920919

3. 新增機器驗證頁面

image-20250605134736543

<!-- src/views/TestVerification.vue -->
<template><Verify@success="success":mode="'pop'":captchaType="'blockPuzzle'":imgSize="{ width: '330px', height: '155px' }"ref="verify"/><button @click="useVerify">調用驗證組件</button>
</template><script>
import Verify from '../components/verifition/Verify.vue'export default {name: 'TestVerification',components: { Verify },methods: {success(params) {console.log('驗證成功,返回參數:', params)},useVerify() {this.$refs.verify.show()}}
}
</script>

4.首頁調用驗證組件

修改App.vue文件

<template><verify/>
</template><script>
import verify from './views/TestVerification.vue'export default {name: 'App',components: {verify}
}
</script><style>
#app {font-family: Avenir, Helvetica, Arial, sans-serif;-webkit-font-smoothing: antialiased;-moz-osx-font-smoothing: grayscale;text-align: center;color: #2c3e50;margin-top: 60px;
}
</style>

后端實現

流程梳理

  1. 用戶輸入手機號 -> 前端格式校驗 -> 點擊“發送驗證碼”

  2. 調用后端機器校驗初始化接口 -> 返回滑塊校驗參數 -> 跳轉滑塊頁面

  3. 前端滑塊完成 -> 調用后端滑塊校驗接口 + 傳滑塊驗證數據 + 手機號

  4. 后端驗證滑塊數據:

    • 成功 -> 校驗手機號是否存在
      • 存在 -> 返回允許發送驗證碼
      • 不存在 -> 返回錯誤提示手機號不存在
    • 失敗 -> 返回滑塊驗證失敗
  5. 前端收到允許發送驗證碼后 -> 調用發送驗證碼接口(攜帶手機號)

  6. 用戶輸入驗證碼 -> 調用登錄接口(手機號+驗證碼)

具體實現

1. 引入依賴

<dependency><groupId>com.anji-plus</groupId><artifactId>captcha-spring-boot-starter</artifactId><version>1.4.0</version>
</dependency>

復制 images文件夾到resources目錄下,項目地址:images · anji-plus/AJ-Captcha - 碼云 - 開源中國

image-20250605105758345

image-20250605105910474

2. 增加yml配置

aj:captcha:jigsaw: classpath:images/jigsaw#滑動驗證,底圖路徑,不配置將使用默認圖片##支持全路徑# 支持項目路徑,以classpath:開頭,取resource目錄下路徑,例:classpath:images/pic-clickpic-click: classpath:images/pic-click# 對于分布式部署的應用,我們建議應用自己實現CaptchaCacheService,比如用Redis或者memcache,# 參考CaptchaCacheServiceRedisImpl.java# 如果應用是單點的,也沒有使用redis,那默認使用內存。# 內存緩存只適合單節點部署的應用,否則驗證碼生產與驗證在節點之間信息不同步,導致失敗。# !!! 注意啦,如果應用有使用spring-boot-starter-data-redis,# 請打開CaptchaCacheServiceRedisImpl.java注釋。# redis ----->  SPI: 在resources目錄新建META-INF.services文件夾(兩層),參考當前服務resources。# 緩存local/redis...cache-type: local# local緩存的閾值,達到這個值,清除緩存cache-number: 1000# local定時清除過期緩存(單位秒),設置為0代表不執行timing-clear: 180# 驗證碼類型default兩種都實例化。type: default# 漢字統一使用Unicode,保證程序通過@value讀取到是中文,可通過這個在線轉換;yml格式不需要轉換# https://tool.chinaz.com/tools/unicode.aspx 中文轉Unicode# 右下角水印文字(我的水印)water-mark: water-mark# 右下角水印字體(不配置時,默認使用文泉驛正黑)# 由于宋體等涉及到版權,我們jar中內置了開源字體【文泉驛正黑】# 方式一:直接配置OS層的現有的字體名稱,比如:宋體# 方式二:自定義特定字體,請將字體放到工程resources下fonts文件夾,支持ttf\ttc\otf字體# aj.captcha.water-font=WenQuanZhengHei.ttf# water-font: SourceHanSansCN-Normal.otf# 點選文字驗證碼的文字字體(文泉驛正黑)# aj.captcha.font-type=WenQuanZhengHei.ttf# font-type: SourceHanSansCN-Normal.otf# 校驗滑動拼圖允許誤差偏移量(默認5像素)slip-offset: 5# aes加密坐標開啟或者禁用(true|false)aes-status: true# 滑動干擾項(0/1/2)interference-options: 1history-data-clear-enable: true# 接口請求次數一分鐘限制是否開啟 true|falsereq-frequency-limit-enable: true# 驗證失敗5次,get接口鎖定req-get-lock-limit: 5# 驗證失敗后,鎖定時間間隔,sreq-get-lock-seconds: 60# get接口一分鐘內請求數限制req-get-minute-limit: 30# check接口一分鐘內請求數限制req-check-minute-limit: 60# verify接口一分鐘內請求數限制req-verify-minute-limit: 60

3. 代碼實現

新增CaptchaController.java類

package com.zhou.demo.controller;import com.anji.captcha.model.common.ResponseModel;
import com.anji.captcha.model.vo.CaptchaVO;
import com.anji.captcha.service.CaptchaService;
import org.springframework.web.bind.annotation.PostMapping;
import org.springframework.web.bind.annotation.RequestBody;
import org.springframework.web.bind.annotation.RestController;import javax.annotation.Resource;/*** 驗證碼操作處理** @author cxstar*/
@RestController
public class CaptchaController {@Resourceprivate CaptchaService captchaService;/*** 獲取驗證碼接口** @param captchaVO 驗證碼參數*                  "captchaType": "blockPuzzle",*                  "clientUid": "唯一標識"*/@PostMapping("/captcha/get")public ResponseModel get(@RequestBody CaptchaVO captchaVO) {return captchaService.get(captchaVO);}/*** 校驗滑動驗證** @param captchaVO 驗證碼參數*                  "captchaType": "blockPuzzle",*                  "pointJson": "QxIVdlJoWUi04iM+65hTow==",  //aes加密坐標信息*                  "token": "71dd26999e314f9abb0c635336976635"  //get請求返回的token*/@PostMapping("/captcha/check")public ResponseModel check(@RequestBody CaptchaVO captchaVO) {return captchaService.check(captchaVO);}}

4.跨域配置(可選)

如果報錯如下:

Access to XMLHttpRequest at 'http://localhost:9001/captcha/get' from origin 'http://localhost:8080' has been blocked by CORS policy: Response to preflight request doesn't pass access control check: No 'Access-Control-Allow-Origin' header is present on the requested resource.

在后端增加過濾配置:

image-20250605114805579

package com.zhou.demo;import org.springframework.context.annotation.Configuration;
import org.springframework.web.servlet.config.annotation.CorsRegistry;
import org.springframework.web.servlet.config.annotation.WebMvcConfigurer;@Configuration
public class CorsConfig implements WebMvcConfigurer {@Overridepublic void addCorsMappings(CorsRegistry registry) {registry.addMapping("/**") // 匹配所有接口.allowedOriginPatterns("*") // 允許所有來源(Spring Boot 2.4+ 推薦用 allowedOriginPatterns).allowedMethods("GET", "POST", "PUT", "DELETE", "OPTIONS").allowedHeaders("*").allowCredentials(true) // 允許攜帶 Cookie.maxAge(3600); // 預檢請求緩存時間,單位秒}
}

實現效果

錄制_2025_06_05_13_57_46_727

如上所述已經實現了基礎的驗證功能

二次驗證的實現

為什么需要二次驗證?

若不進行后端二次驗證,攻擊者可直接構造驗證碼發送請求,繞過滑塊驗證,導致短信接口被惡意刷取。二次驗證通過后端校驗滑塊結果,確保請求合法性。

前端實現

以下內容基于上述基礎實現

1.APP.vue

主要去除了原先的測試組件

<template><router-view/>
</template><style>
#app {font-family: Avenir, Helvetica, Arial, sans-serif;-webkit-font-smoothing: antialiased;-moz-osx-font-smoothing: grayscale;text-align: center;color: #2c3e50;
}nav {padding: 30px;
}nav a {font-weight: bold;color: #2c3e50;
}nav a.router-link-exact-active {color: #42b983;
}
</style>

2.新增登錄和驗證頁面

LoginPage.vue 登錄頁面

<template><div class="login-container"><h2>登錄</h2><div class="input-group"><input type="tel" v-model="phoneNumber" placeholder="請輸入手機號" @input="validatePhone" /><span v-if="phoneError" class="error-message">{{ phoneError }}</span></div><div class="captcha-group"><input type="text" v-model="captcha" placeholder="請輸入驗證碼" /><button @click="goToSlider" class="captcha-btn" :disabled="!!phoneError">獲取驗證碼</button></div><button @click="login" class="login-btn">登錄</button></div>
</template><script setup>
import { ref } from 'vue';
import { useRouter } from 'vue-router';const phoneNumber = ref('');
const captcha = ref('');
const phoneError = ref('');
const router = useRouter();const validatePhone = () => {const phoneRegex = /^\d{11}$/;if (!phoneNumber.value) {phoneError.value = '手機號不能為空';} else if (!phoneRegex.test(phoneNumber.value)) {phoneError.value = '請輸入有效的11位手機號';} else {phoneError.value = '';}
};const goToSlider = () => {if (!phoneError.value) {console.log('跳轉到滑塊驗證頁面:', phoneNumber.value)router.push({ path: '/slider', query: { phone: phoneNumber.value } });} else {console.log('手機號格式錯誤,未跳轉:', phoneError.value);}
};const login = () => {if (!phoneNumber.value || !captcha.value || phoneError.value) {alert('請填寫正確的手機號和驗證碼!');return;}console.log('登錄中...', {phoneNumber: phoneNumber.value,captcha: captcha.value});
};
</script><style scoped>
/* 保持原有樣式不變 */
.login-container {width: 300px;margin: 100px auto;padding: 20px;border: 1px solid #ccc;border-radius: 5px;box-shadow: 0 2px 5px rgba(0, 0, 0, 0.1);text-align: center;
}h2 {color: #333;margin-bottom: 20px;
}.input-group {margin-bottom: 15px;position: relative;
}input {width: 100%;padding: 10px;border: 1px solid #ccc;border-radius: 5px;font-size: 14px;
}.captcha-group {display: flex;align-items: center;margin-bottom: 15px;
}.captcha-group input {flex: 1;margin-right: 10px;
}.captcha-btn {padding: 10px 20px;background-color: #ff8c00;color: white;border: none;border-radius: 5px;cursor: pointer;font-size: 14px;
}.captcha-btn:hover {background-color: #e07b00;
}.captcha-btn:disabled {background-color: #ccc;cursor: not-allowed;
}.login-btn {width: 100%;padding: 10px;background-color: #ff8c00;color: white;border: none;border-radius: 5px;font-size: 16px;cursor: pointer;
}.login-btn:hover {background-color: #e07b00;
}.error-message {color: #ff0000;font-size: 12px;position: absolute;top: 100%;left: 0;margin-top: 5px;
}
</style>

SliderVerification.vue 驗證頁面

<template><div><div class="phone-input"><inputv-model="phone"type="text"placeholder="請輸入手機號碼"@input="validatePhone"/><span v-if="phoneError" class="error">{{ phoneError }}</span></div><Verify@success="success":mode="'pop'":captchaType="'blockPuzzle'":imgSize="{ width: '330px', height: '155px' }"ref="verify"/></div>
</template><script>
import Verify from "./../components/verifition/Verify";
import request from "@/components/verifition/utils/axios";export default {name: "App",components: {Verify,},data() {return {phone: "",phoneError: "",};},mounted() {// 顯示驗證彈窗this.$refs.verify.show();},methods: {validatePhone() {// 基本的手機號碼驗證(示例:10-12位數字)const phoneRegex = /^\d{10,12}$/;this.phoneError = phoneRegex.test(this.phone)? "": "請輸入有效的手機號碼(10-12位數字)";},success(params) {// 構建 SmsRequest 數據const smsRequest = {// phone: this.phone, // 來自用戶輸入,這里只做二次驗證的演示,因此不傳入phone參數captchaVerification: params.captchaVerification, // 來自 Verify 組件};debugger// 發送請求到后端request({url: "/sendLoginCode",method: "post",data: smsRequest,}).then((response) => {console.log("短信請求成功:", response.data);// 跳轉到登錄頁面this.$router.push("/login");}).catch((error) => {console.error("短信請求失敗:", error);alert("發送驗證碼失敗,請重試。");});},},
};
</script><style scoped>
.phone-input {margin-bottom: 20px;
}input {padding: 10px;width: 200px;border: 1px solid #ccc;border-radius: 4px;
}.error {color: red;font-size: 12px;margin-top: 5px;display: block;
}
</style>

3.配置路由

src/router/index.js

import { createRouter, createWebHistory } from 'vue-router';
import LoginPage from '../views/LoginPage.vue';
import SliderVerification from '../views/SliderVerification.vue';const routes = [{ path: '/login', component: LoginPage },{path: '/slider',component: SliderVerification,props: (route) => ({ phone: route.query.phone })},{ path: '/', redirect: '/login' }
];const router = createRouter({history: createWebHistory(),routes
});export default router;

后端實現

新增發送驗證碼接口

/*** 發送驗證碼接口,需要二次驗證** @param captchaVO* @return*/
@RequestMapping(value = "/sendLoginCode", method = RequestMethod.POST)
public ResponseModel sendRegisterCode(@RequestBody CaptchaVO captchaVO) {// 判斷是否已經通過滑塊驗證ResponseModel response = captchaService.verification(captchaVO);System.out.println(response.isSuccess() ? "二次驗證通過" : "二次驗證未通過");// todo 發送驗證碼return response;
}

訪問與實現效果

訪問地址:http://localhost:8081/login

錄制_2025_06_05_17_20_30_669

其他問題整合

移動端滑動與瀏覽器默認左滑返回上一頁沖突

解決方案:限制滑動區域不貼邊

避免滑塊靠近屏幕左側邊緣(<20px),可在布局上做調整,例如:

.slider-container {margin-left: 20px; /* 留出邊緣,避免觸發左滑返回 */max-width: 90%;
}

參考鏈接:阻止移動端H5開發瀏覽器默認左右滑動行為_h5 touch 與 瀏覽器左右滑沖突-CSDN博客

Demo地址

https://zhouquanquan.lanzn.com/iTLVG2y754ng
密碼:hb4d

本文來自互聯網用戶投稿,該文觀點僅代表作者本人,不代表本站立場。本站僅提供信息存儲空間服務,不擁有所有權,不承擔相關法律責任。
如若轉載,請注明出處:http://www.pswp.cn/diannao/86078.shtml
繁體地址,請注明出處:http://hk.pswp.cn/diannao/86078.shtml
英文地址,請注明出處:http://en.pswp.cn/diannao/86078.shtml

如若內容造成侵權/違法違規/事實不符,請聯系多彩編程網進行投訴反饋email:809451989@qq.com,一經查實,立即刪除!

相關文章

[Java惡補day13] 53. 最大子數組和

休息了一天&#xff0c;開始補上&#xff01; 給你一個整數數組 nums &#xff0c;請你找出一個具有最大和的連續子數組&#xff08;子數組最少包含一個元素&#xff09;&#xff0c;返回其最大和。 子數組是數組中的一個連續部分。 示例 1&#xff1a; 輸入&#xff1a;nums …

sql server如何創建表導入excel的數據

在 SQL Server 中&#xff0c;可以通過幾種方式將 Excel 數據導入到數據庫表中。下面是一個完整的流程&#xff0c;包括如何創建表&#xff0c;以及將 Excel 數據導入該表的方法&#xff1a; ? 方法一&#xff1a;使用 SQL Server Management Studio (SSMS) 的導入向導&#x…

C++單例模式教學指南

C單例模式完整教學指南 &#x1f4da; 目錄 [單例模式基礎概念][經典單例實現及問題][現代C推薦實現][高級話題&#xff1a;雙重檢查鎖][實戰應用與最佳實踐][總結與選擇指南] 1. 單例模式基礎概念 1.1 什么是單例模式&#xff1f; 單例模式&#xff08;Singleton Pattern&…

使用xdocreport導出word

之前java總用freemaker進行導出&#xff0c;但是改xml實在是太繁瑣了&#xff0c;這次找了另一個工具進行體驗. 一、簡單導出 pom引入 <dependency><groupId>fr.opensagres.xdocreport</groupId><artifactId>fr.opensagres.xdocreport.core</arti…

vscode里如何用git

打開vs終端執行如下&#xff1a; 1 初始化 Git 倉庫&#xff08;如果尚未初始化&#xff09; git init 2 添加文件到 Git 倉庫 git add . 3 使用 git commit 命令來提交你的更改。確保在提交時加上一個有用的消息。 git commit -m "備注信息" 4 …

C++.OpenGL (2/64)你好,三角形(Hello Triangle)

你好,三角形(Hello Triangle) 繪制流程概覽 #mermaid-svg-MvIGIovxiuKVfzy8 {font-family:"trebuchet ms",verdana,arial,sans-serif;font-size:16px;fill:#333;}#mermaid-svg-MvIGIovxiuKVfzy8 .error-icon{fill:#552222;}#mermaid-svg-MvIGIovxiuKVfzy8 .error…

汽車安全體系:FuSa、SOTIF、Cybersecurity 從理論到實戰

汽車安全&#xff1a;功能安全&#xff08;FuSa&#xff09;、預期功能安全&#xff08;SOTIF&#xff09;與網絡安全(Cybersecurity) 從理論到實戰的安全體系 引言&#xff1a;自動駕駛浪潮下的安全挑戰 隨著自動駕駛技術從L2向L4快速演進&#xff0c;汽車安全正從“機械可靠…

N2語法 列挙、話題提出

1&#xff0c;&#xff5e;やら&#xff5e;やら  接続&#xff1a;名詞、辭書形  意味&#xff1a;…啦…啦&#xff08;列舉代表性的事物&#xff09;  例文&#xff1a;     家に帰って料理やら洗濯やら何もしなければならない。     帰國前、買い物やら荷造りや…

深入理解React Hooks的原理與實踐

深入理解React Hooks的原理與實踐 引言 React Hooks 自 2018 年 React 16.8 發布以來&#xff0c;徹底改變了前端開發者的編碼方式。它通過函數式組件提供了狀態管理和生命周期等功能&#xff0c;取代了傳統的類組件&#xff0c;使得代碼更加簡潔、復用性更強。然而&#xff…

RockyLinux9.6搭建k8s集群

博主介紹&#xff1a;?全網粉絲5W&#xff0c;全棧開發工程師&#xff0c;從事多年軟件開發&#xff0c;在大廠呆過。持有軟件中級、六級等證書。可提供微服務項目搭建與畢業項目實戰&#xff0c;博主也曾寫過優秀論文&#xff0c;查重率極低&#xff0c;在這方面有豐富的經驗…

鏈游技術破壁:NFT資產確權與Play-to-Earn經濟模型實戰

鏈游技術破壁&#xff1a;NFT資產確權與Play-to-Earn經濟模型實戰 ——從「投機泡沫」到「可持續生態」的技術重構 一、NFT確權技術革新&#xff1a;從鏈上存證到動態賦權 跨鏈確權架構 全鏈互操作協議&#xff1a;采用LayerZero協議實現以太坊裝備與Solana土地的跨鏈組合&…

Java下載文件(特殊字符編碼處理)

當你在這個問題上花費了數小時而解決不了&#xff0c;你才會知道這篇文章對你的幫助 import org.springframework.beans.factory.annotation.Autowired; import org.springframework.core.io.Resource; import org.springframework.http.HttpEntity; import org.springframewo…

TDengine 高級功能——讀緩存

簡介 在物聯網&#xff08;IoT&#xff09;和工業互聯網&#xff08;IIoT&#xff09;大數據應用場景中&#xff0c;實時數據的價值往往遠超歷史數據。企業不僅需要數據處理系統具備高效的實時寫入能力&#xff0c;更需要能快速獲取設備的最新狀態&#xff0c;或者對最新數據進…

YOLO在C#中的完整訓練、驗證與部署方案

YOLO在C#中的完整訓練、驗證與部署方案 C# 在 YOLO 部署上優勢明顯&#xff08;高性能、易集成&#xff09;&#xff0c;但訓練能力較弱&#xff0c;通常需結合 Python 實現。若項目對開發效率要求高且不依賴 C# 生態&#xff0c;建議全程使用 Python&#xff1b;若需深度集成…

pikachu靶場通關筆記17 CSRF關卡03-CSRF(Token)

目錄 一、CSRF原理 二、CSRF Token 三、源碼分析 四、CSRF Token tracker插件 1、插件簡介 2、插件安裝 五、滲透實戰 1、用戶登錄 2、修改個人信息 3、bp攔截報文 4、bp改報文探測 5、配置CSRF-Token-Tracer 6、bp改包成功 7、查看CSRF Token Tracker配置 本系…

C#面試問題81-100

85. What are anonymous types? 匿名類型是在需要的地方直接定義的類型&#xff0c;甚至都 不給它命名。它非常適合我們這種用例——類型小且臨時&#xff0c;而且我們無意在其 他地方使用它 匿名類型是直接從 System.Object 派生的類對象。它們不能轉換為任何 其他類型。●…

【Ragflow】25.Ragflow-plus開發日志:excel文件解析新思路/公式解析適配

引言 RagflowPlus v0.3.0 版本中&#xff0c;增加了對excel文件的解析支持&#xff0c;但收到反饋&#xff0c;說效果并不佳。 以下測試文件內容來自群友反饋提供&#xff0c;數據已脫敏處理。 經系統解析后&#xff0c;分塊效果如下&#xff1a; 可以看到&#xff0c;由于該…

VS2022下C++ Boost庫安裝與使用使用

一.Boost概述 1.簡介 Boost 是一個廣泛使用的 C 庫集合&#xff0c;提供了許多高質量、可移植、高效的工具和組件&#xff0c;被視為 C 標準庫的延伸。自 1998 年成立以來&#xff0c;Boost 已成為 C 社區的核心資源&#xff0c;許多 Boost 庫通過實踐驗證后被納入 C 標準&am…

內嵌式mqtt server

添加moquette依賴 <dependency><groupId>io.moquette</groupId><artifactId>moquette-broker</artifactId><version>0.17</version><exclusions><exclusion><groupId>org.slf4j</groupId><artifactId>…

php執行后報502,無錯誤提示的排查和解決

文章目錄 一、闡述問題二、開始排查1.執行代碼展示2.PHP層面排查問題3.系統層面排查問題1. 分析系統日志2. core dump 分析2.1 core dump 是什么2.2 core dump 配置 并 生成 core 文件2.3 gdb 解析 core 文件 4. 問題解決 三、贈送內容四、總結 一、闡述問題 這個問題花了我起…