vue+element模仿實現云碼自動驗證碼識別平臺官網

一、項目介紹

項目使用傳統vue項目結構實現,前端采用element實現。

element官網:Element - The world's most popular Vue UI framework

云碼官網地址:云碼-自動驗證碼識別平臺_驗證碼識別API接口_免費驗證碼軟件

項目截圖,支持vscode/webstorm/hbuilder等:

?項目執行命令,依次成功執行即可,很簡單:

1、npm install

2、npm run dev

二、項目效果圖

1.首頁

結構分為頂部、底部,其中底部為組件,各個頁面復用,右側聯系欄目也是組件。

?

?

?

2、產品及測試

tab可動態切換

?

?

?

3、開發文檔

左側為文檔菜單,右側為相應菜單對應內容展示區域,可拓展根據菜單切換動態顯示內容。?

?

4.專屬定制

?

5、登錄

?6、注冊

三、源碼

1、首頁

<template><div class="body"><nav class="navbar navbar-expand-lg navbar-dark ftco_navbar bg-dark ftco-navbar-light" id="ftco-navbar"><div class="container"><a class="navbar-brand" @click="toPage('/')"><img src="https://obs.jfbym.com/public/static/img/logo.png" alt="">云碼</a><div class="collapse navbar-collapse" id="ftco-nav"><ul class="navbar-nav ml-auto"><li class="nav-item active"><a class="nav-link">首頁</a></li><li class="nav-item"><a @click="toPage('/price')" class="nav-link">產品及測試</a></li><li class="nav-item"><a @click="toPage('/demo')" class="nav-link">開發文檔</a></li><li class="nav-item"><a @click="toPage('/custom')" class="nav-link">專屬定制</a></li></ul></div><div id="login_tag_div"><ul class="navbar-nav navbar-nav2 ml-auto" id="not_logged"><li class="nav-item cta"><a @click="toPage('/login')" class="nav-link">登錄</a></li><li class="nav-item cta cta-colored"><a @click="toPage('/register')" class="nav-link">注冊</a></li></ul></div></div></nav><div class="swiper-container"><div class="swiper-wrapper" :style="'width: 9570px; height: 560px; transform: translate3d('+(-1914*bannerIndex)+'px, 0px, 0px); transition-duration: 0s;'"><div class="swiper-slide slide1 swiper-slide-duplicate" style="width: 1914px; height: 560px;"><img src="https://obs.jfbym.com/bg-pc1.jpg" alt="圖片驗證碼識別"><div class="inner"><div class="banner-text"><div class="ani" swiper-animate-effect="fadeInUp" swiper-animate-duration="1s" swiper-animate-delay="0.5s"><h2>定制開發 全方位滿足您的需求</h2></div><div class="ani" swiper-animate-effect="fadeInUp" swiper-animate-duration="1s" swiper-animate-delay="0.7s"><p><span>全方位快速定制模型接口</span><span>定制模型接口快.準.狠</span></p><p><span>售后運維有保障</span><span>技術人員全方位服務保證交付</span></p></div><div class="ani" swiper-animate-effect="fadeInUp" swiper-animate-duration="1s" swiper-animate-delay="0.9s"><a class="btn-primary is_redirect_console_tag">立即接入</a></div></div></div></div><div :class="'swiper-slide slide1 '+(bannerIndex === 1?'swiper-slide-visible swiper-slide-active':'')" style="width: 1914px; height: 560px;"><img src="https://obs.jfbym.com/bg-pc3.jpg" alt="圖片驗證碼識別"><div class="inner"><div class="banner-text"><div class="ani" swiper-animate-effect="fadeInUp" swiper-animate-duration="1s" swiper-animate-delay="0.5s"><h2>專業圖像驗證云識別服務</h2></div><div class="ani" swiper-animate-effect="fadeInUp" swiper-animate-duration="1s" swiper-animate-delay="0.7s"><p><span>驗證識別快又準</span><span>自動接入很輕松</span></p><p><span>識別資費更便宜</span><span>技術安全有保障</span></p></div><div class="ani" swiper-animate-effect="fadeInUp" swiper-animate-duration="1s" swiper-animate-delay="0.9s"><a class="btn-primary is_redirect_console_tag" rel="nofollow">立即接入</a></div></div></div></div><div :class="'swiper-slide slide1 '+(bannerIndex === 2?'swiper-slide-visible swiper-slide-active':'')" style="width: 1914px; height: 560px;"><img src="https://obs.jfbym.com/bg-pc2.jpg" alt="圖片驗證碼識別"><div class="inner"><div class="banner-text"><div class="ani" swiper-animate-effect="fadeInUp" swiper-animate-duration="1s" swiper-animate-delay="0.5s"><h2>關注微信公眾賬號免費領取測試積分</h2></div><div class="ani" swiper-animate-effect="fadeInUp" swiper-animate-duration="1s" swiper-animate-delay="0.7s"></div><div class="ani" swiper-animate-effect="fadeInUp" swiper-animate-duration="1s" swiper-animate-delay="0.9s"><a class="btn-primary is_redirect_console_tag" rel="nofollow">立即關注</a></div></div></div></div><div :class="'swiper-slide slide1 '+(bannerIndex === 3?'swiper-slide-visible swiper-slide-active':'')" style="width: 1914px; height: 560px;"><img src="https://obs.jfbym.com/bg-pc1.jpg" alt="圖片驗證碼識別"><div class="inner"><div class="banner-text"><div class="ani" swiper-animate-effect="fadeInUp" swiper-animate-duration="1s" swiper-animate-delay="0.5s"><h2>定制開發 全方位滿足您的需求</h2></div><div class="ani" swiper-animate-effect="fadeInUp" swiper-animate-duration="1s" swiper-animate-delay="0.7s"><p><span>全方位快速定制模型接口</span><span>定制模型接口快.準.狠</span></p><p><span>售后運維有保障</span><span>技術人員全方位服務保證交付</span></p></div><div class="ani" swiper-animate-effect="fadeInUp" swiper-animate-duration="1s" swiper-animate-delay="0.9s"><a class="btn-primary is_redirect_console_tag" rel="nofollow">立即接入</a></div></div></div></div><div class="swiper-slide slide1 swiper-slide-duplicate" style="width: 1914px; height: 560px;"><img src="https://obs.jfbym.com/bg-pc3.jpg" alt="圖片驗證碼識別"><div class="inner"><div class="banner-text"><div class="ani" swiper-animate-effect="fadeInUp" swiper-animate-duration="1s" swiper-animate-delay="0.5s"><h2>專業圖像驗證云識別服務</h2></div><div class="ani" swiper-animate-effect="fadeInUp" swiper-animate-duration="1s" swiper-animate-delay="0.7s"><p><span>驗證識別快又準</span><span>自動接入很輕松</span></p><p><span>識別資費更便宜</span><span>技術安全有保障</span></p></div><div class="ani" swiper-animate-effect="fadeInUp" swiper-animate-duration="1s" swiper-animate-delay="0.9s"><a class="btn-primary is_redirect_console_tag">立即接入</a></div></div></div></div></div><div class="pagination"><span @click="showBanner(1)" :class="'swiper-pagination-switch '+(bannerIndex===1?'swiper-visible-switch swiper-active-switch':'')"></span><span @click="showBanner(2)" :class="'swiper-pagination-switch '+(bannerIndex===2?'swiper-visible-switch swiper-active-switch':'')"></span><span @click="showBanner(3)" :class="'swiper-pagination-switch '+(bannerIndex===3?'swiper-visible-switch swiper-active-switch':'')"></span></div></div><section class="ftco-section services-section chous-con" id="chous"><div class="container" id="mao"><div class="row justify-content-center mb-5 pb-3"><div class="col-md-7 heading-section text-center ftco-animate fadeInUp ftco-animated"><span class="subheading">WHY CHOOSE US</span><h2><span>為什么選擇</span>云碼驗證碼識別</h2></div></div><div class="row d-flex chous-main"><div class="col-md-4 d-flex align-self-stretch ftco-animate fadeInUp ftco-animated"><div class="media block-6 services d-block"><div><img src="https://obs.jfbym.com/public/static/img/chous-1.png" alt="驗證碼識別速度絕對領先"></div><div class="media-body"><h3 class="heading mb-2 mt-2">驗證碼識別速度領先</h3><p>圖片識別1~2秒,快速獲取結果</p></div></div></div><div class="col-md-4 d-flex align-self-stretch ftco-animate fadeInUp ftco-animated"><div class="media block-6 services d-block"><div><img src="https://obs.jfbym.com/public/static/img/chous-2.png" alt="驗證碼識別秒級返回,零操作獲取結果"></div><div class="media-body"><h3 class="heading mb-2 mt-2">驗證碼秒級返回技術</h3><p>人工智能自我學習自我完善識別系統字符,告別低效人力獲取</p></div></div></div><div class="col-md-4 d-flex align-self-stretch ftco-animate fadeInUp ftco-animated"><div class="media block-6 services d-block"><div><img src="https://obs.jfbym.com/public/static/img/chous-3.png" alt="驗證碼識別"></div><div class="media-body"><h3 class="heading mb-2 mt-2">生成階梯計費體系</h3><p>足夠吸引力的價格體系,高達50%開發分成,隨著驗證識別使用,能進一步降低解決整體費用支出</p></div></div></div><div class="col-md-4 d-flex align-self-stretch ftco-animate fadeInUp ftco-animated"><div class="media block-6 services d-block"><div><img src="https://obs.jfbym.com/public/static/img/chous-4.png" alt="數字識別"></div><div class="media-body"><h3 class="heading mb-2 mt-2">提供先進驗證架構體系</h3><p>享受云架構穩定高效網絡的同時,開發以多重容災手段保證服務器24小時無差別自動對外服務驗證</p></div></div></div><div class="col-md-4 d-flex align-self-stretch ftco-animate fadeInUp ftco-animated"><div class="media block-6 services d-block"><div><img src="https://obs.jfbym.com/public/static/img/chous-5.png" alt="驗證碼平臺"></div><div class="media-body"><h3 class="heading mb-2 mt-2">提供多語言驗證碼開發支持</h3><p>簡易一鍵接入方案,采用多種語言api接口,跨平臺支持</p></div></div></div><div class="col-md-4 d-flex align-self-stretch ftco-animate fadeInUp ftco-animated"><div class="media block-6 services d-block"><div><img src="https://obs.jfbym.com/public/static/img/chous-6.png" alt="在線打碼"></div><div class="media-body"><h3 class="heading mb-2 mt-2">多重安全保障技術</h3><p>安全第一,確保客戶信息數據安全</p></div></div></div></div></div></section><section class="ftco-section ftco-counter img" id="section-counter" style="background-image: url(https://obs.jfbym.com/public/static/img/bg_1.jpg); background-position: 50% -146.586px;"><div class="container"><div class="row justify-content-center mb-5 pb-3"><div class="col-md-8 heading-section heading-section-white text-center ftco-animate fadeInUp ftco-animated"><span class="subheading">ARTIFICIAL INTELLIGENCE IMAGE RECOGNITION PLATFORM</span><h2><span>基于</span>人工智能算法<span>的高可用圖片處理識別</span></h2></div></div><div class="row justify-content-center"><div class="col-md-12"><div class="row"><div class="col-md-3 d-flex justify-content-center counter-wrap ftco-animate fadeInUp ftco-animated"><div class="block-18 text-center"><div class="text"><img class="sc_img" src="https://obs.jfbym.com/public/static/img/sc_img_1.png" alt="識別驗證碼"><div class="sc_tit">自動學習</div><span>深度學習人工智能識別圖片驗證碼算法</span></div></div></div><div class="col-md-3 d-flex justify-content-center counter-wrap ftco-animate fadeInUp ftco-animated"><div class="block-18 text-center"><div class="text"><img class="sc_img" src="https://obs.jfbym.com/public/static/img/sc_img_2.png" alt="驗證碼工具"><div class="sc_tit">數據優化</div><span>持續訓練優化現有驗證碼數字識別功能</span></div></div></div><div class="col-md-3 d-flex justify-content-center counter-wrap ftco-animate fadeInUp ftco-animated"><div class="block-18 text-center"><div class="text"><img class="sc_img" src="https://obs.jfbym.com/public/static/img/sc_img_3.png" alt="圖片識別"><div class="sc_tit">準確率</div><span>不斷提高機器字符驗證識別廣度準確率</span></div></div></div><div class="col-md-3 d-flex justify-content-center counter-wrap ftco-animate fadeInUp ftco-animated"><div class="block-18 text-center"><div class="text"><img class="sc_img" src="https://obs.jfbym.com/public/static/img/sc_img_4.png" alt="識別驗證碼"><div class="sc_tit">持續低價</div><span>不斷降低Captchapt驗證碼識別使用價格</span></div></div></div></div></div></div></div></section><section class="ftco-section fs-d"><div class="container"><div class="row justify-content-center mb-5 pb-3"><div class="col-md-7 heading-section text-center ftco-animate fadeInUp ftco-animated"><span class="subheading">WHAT CAN WE DO</span><h2><span>我們可以</span>做什么</h2></div></div><div class="row d-flex fs-d-flex"><div class="col-md-3 d-flex ftco-animate fadeInUp ftco-animated"><div class="blog-entry align-self-stretch"><a target="_blank" class="block-30" style="background-image: url('https://obs.jfbym.com/public/static/img/image_1.jpg');"><div style="background-color: rgba(0,0,0,0.32); height: 100%;"><h3 class="heading">圖片識別軟件程序</h3><p>通用圖像內容識別技術<br>涵蓋數字、英文字母、漢字、圖像<br>以及混合內容,自適配識別</p></div></a></div></div><div class="col-md-3 d-flex ftco-animate fadeInUp ftco-animated"><div class="blog-entry align-self-stretch"><a target="_blank" class="block-30" style="background-image: url('https://obs.jfbym.com/public/static/img/image_2.jpg');"><div style="background-color: rgba(0,0,0,0.32); height: 100%;"><h3 class="heading">開發商服務</h3><p>開發者接入向導<br>API接口維基<br>開發者許可協議<br>開發者利潤分成<br>開發者后臺</p></div></a></div></div><div class="col-md-3 d-flex ftco-animate fadeInUp ftco-animated"><div class="blog-entry align-self-stretch"><a target="_blank" class="block-30" style="background-image: url('https://obs.jfbym.com/public/static/img/image_3.jpg');"><div style="background-color: rgba(0,0,0,0.32); height: 100%;"><h3 class="heading">市場主體企業下載</h3><p>全國1.5億工商注冊信息系統<br>穩定、高效、完整、權威注冊下載<br></p></div></a></div></div><div class="col-md-3 d-flex ftco-animate fadeInUp ftco-animated"><div class="blog-entry align-self-stretch"><a target="_blank" class="block-30" style="background-image: url('https://obs.jfbym.com/public/static/img/image_4.jpg');"><div style="background-color: rgba(0,0,0,0.32); height: 100%;"><h3 class="heading">爬蟲數據定制</h3><p>以深度數據為核心<br>個性話定制采集功能<br>為個人、企業、合作商解決提供開放的數據服務</p></div></a></div></div></div></div></section></div>
</template><script>import initData from "@/data/data.js";export default {data() {return {bannerIndex: 1};},mounted() {},methods: {//跳轉頁面toPage(path){this.$router.push({path:path});},//banner顯示showBanner(index){this.bannerIndex = index;}}};
</script>

四、總結

項目頁面完整,后續可能將不斷升級。

關注作者,及時了解更多好項目!

更多優質項目請看作者主頁!

獲取源碼或如需幫助,可通過博客后面名片+作者即可!

?

?其他作品集合(主頁更多):

  1. 《uni-app小程序,基于vue實現電商商城》
  2. 《uni-app基于vue實現商城小程序》
  3. 《Springboot+Spring Security+OAuth2+redis+mybatis-plus+mysql+vue+elementui實現請假考勤系統》
  4. 《vue+element實現電商商城禮品代發網,商品、訂單管理》
  5. 《vue+vant2完美實現香奈兒移動端商城網站》
  6. 《vue+elementui實現聯想購物商城,樣式美觀大方》
  7. 《vue+elementui實現英雄聯盟道具城》
  8. 《vue+elementui實現app布局小米商城,樣式美觀大方,功能完整》

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

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

相關文章

ios csr 證書創建

蘋果Certificate證書創建 1.開始創建。 登錄蘋果開發者網站 選擇Certificates旁邊的 ?按鈕 選擇你想要的證書類型&#xff0c;手機開發的話一般是iOS APP Development 跟 iOS Distribution&#xff08;App Store and Ad Hoc&#xff09;&#xff0c;如果要Mac和iOS都可以發…

NCT 全國青少年編程圖形化編程(Scratch)等級考試(一級)模擬測試H

202312 青少年軟件編程等級考試Scratch一級真題 第 1 題 【 單選題 】 以下說法合理的是( ) A :隨意點開不明來源的郵件 B :把密碼設置成 abc123 C :在虛擬社區上可以辱罵他人 D :在改編他人的作品前&#xff0c; 先征得他人同意 正確答案&#xff1a; D 試題解析&…

C# aes加密解密byte數組

using System.Security.Cryptography; using System.Text;namespace AESStu01;public class AesHelper {// AES加密密鑰和向量&#xff08;需要保密&#xff09; private static readonly string Key "";//16長度字符串數字混合private static readonly string IV …

LeetCode--42

42. 接雨水 給定 n 個非負整數表示每個寬度為 1 的柱子的高度圖&#xff0c;計算按此排列的柱子&#xff0c;下雨之后能接多少雨水。 示例 1&#xff1a; 輸入&#xff1a;height [0,1,0,2,1,0,1,3,2,1,2,1] 輸出&#xff1a;6 解釋&#xff1a;上面是由數組 [0,1,0,2,1,0,1,…

PackagingTool_x64_v2.0.1.0圖片轉檔打包二進制文件合并字庫生成圖片軟件介紹

繼去年12月份發布的打包軟件PackagingTool v1.4.0.2之后&#xff0c;今年再度投入精力&#xff0c;完善了軟件功能&#xff0c;同時開發了幾個更加實用的工具&#xff0c;可助力UI界面的設計開發。當前最新版本為PackagingTool_x64_v2.0.1.0&#xff0c;該版本主界面如下&#…

Windows操作系統中各種功能、快捷鍵

目錄 引言一、系統1.任務管理器&#xff08;當前進程屬性&#xff09;2.畫圖板3.計算器4.CMD命令行窗口5.控制面板6.記事本7.寫字板 二、瀏覽器1.打開開發者工具2.頁面搜索 三、AcWing1.替換2.對多處進行相同操作3.光標變為下劃線 引言 由于本專業是計算機專業&#xff0c;所以…

Spring Cloud中,Eureka常見問題總結

Spring Cloud中&#xff0c;Eureka常見問題總結。 指定Eureka的Environment 1eureka.environment: 指定環境參考文檔&#xff1a;Configuring Eureka Netflix/eureka Wiki GitHub 指定Eureka的DataCenter 1eureka.datacenter: 指定數據中心參考文檔&#xff1a;Configuring …

SpringBoot:Invalid bound statement (not found)的原因和解決方案

&#x1f413; 報錯信息&#xff1a; &#xff08;無效綁定聲明&#xff09;找不到 解析&#xff1a; 你的mapper實例對象和對應的mapper.xml對象未找到 &#x1f413; 排查&#xff1a; 情況一&#xff1a; 1.排除相對應的mapper實例對象路徑是否正確 查看相對應的mapper中…

unity3d中單例模式兩種簡單寫法與對比

一、 public class UlManager {private static UlManager instance;private void Awake(){if(instance ! null)Destroy(this);else instance this;} }二、 public class UlManager {private static UlManager instance;public static UlManager Instance{get{if (instance …

ChatGPT聊YOLO

最近ChatGPT大伙&#xff0c;其概括摘要能力非常強。YOLO系列算法也是目標檢測領域非常重要的一個研究路線&#xff0c;那么ChatGPT是如何看待各個YOLO算法的呢&#xff1f;那我們去問問它如何看待各個版本的YOLO。 截止到2021年9月&#xff0c;YOLOv6尚未發布。因此&#xff0…

類復習【C#】

【訪問級別】【修飾】【返回類型】 類名 : 【被繼承類】【被繼承接口】 { 字段&#xff1b; 屬性&#xff1b; 默認構造器&#xff1b;// 無參構造器 有參構造器&#xff1b; 私有方法&#xff1b; public 公共方法&#xff1b; } 修飾&#xff1a; 修飾符【C#】-CSDN…

pycharm實現上傳excel生成word

下載需要的依賴包 pip install openpyxl python-docx flaskmain.py文件 from flask import Flask, request, render_template from openpyxl import load_workbook from docx import Documentapp Flask(__name__, template_foldertemplates)app.route(/) def index():return…

小程序面試題:js、vue、uni、小程序的頁面傳參方式區別

js、vue、uni、小程序的頁面傳參方式區別&#xff1f; 1、 js傳參 通過location.href跳轉傳參和接收參數&#xff0c;url后面拼接參數來進行跳轉傳參。 2、 vue傳參 可以通過標簽router-link的to屬性跳轉傳參&#xff0c;也可以通過事件里的this.$router.push跳轉傳參。傳參有…

寒假作業Day 03

寒假作業Day 03 一、選擇題 在C語言中&#xff0c;字符型指針char *p;通常用于指向字符數組&#xff08;即字符串&#xff09;的首字符。對于給定的選項&#xff0c;我們來分析每一個選項是否可以將字符串正確地賦值給p&#xff1a; A: pgetchar(); getchar()函數從標準輸入讀…

K8S—Pod控制器

目錄 1.什么是POD控制器 2.POD控制器有幾種類型 3.POD與控制器之間的關系 4.示例 4.1 Deployment 4.2 SatefulSet ①為什么要有headless&#xff1f; ②為什么要有volumeClainTemplate&#xff1f; ③服務發現&#xff1a;就是應用服務之間相互定位的過程。 ④K8S里服…

圖的簡單介紹

定義及術語 G(V,E)&#xff1a;圖G的頂點集為V&#xff0c;邊集為E。分為有向圖和無向圖兩類。 頂點的度&#xff1a;與該結點相連的邊的條數。 出度&#xff1a;頂點的出邊條數 入度&#xff1a;頂點的入邊條數 頂點的權值稱為點權&#xff0c;邊的權值稱為邊權。 存儲 1.鄰…

SpringCache【緩存接口返回值信息】【前端訪問后端,后端訪問數據庫(可以緩存這個過程,前端訪問后端,保存記錄,下次訪問直接返回之前的數據)】

SpringCache 針對不同的緩存技術需要實現不同的CacheManager&#xff1a;注解入門程序CachePut注解CacheEvict注解Cacheable注解 Spring Cache是一個框架&#xff0c;實現了基于注解的緩存功能&#xff0c;只需要簡單地加一個注解&#xff0c;就能實現緩存功能&#xff0c;大大…

Mongodb基礎(node.js版)

一、Mongodb 介紹 Mongodb 是一個文檔數據庫&#xff0c;以文檔形式存儲數據&#xff0c;格式類似于 JSON 與 Mysql 的特點及選型對照 MongodbMysql關系類型非關系型關系型存儲類型文檔存儲&#xff08;類似于寫 Word &#xff09;表格存儲 &#xff08;類似于寫 Excle&…

Java玩轉《啊哈算法》之模擬鏈表

人應該支配習慣&#xff0c;而絕不是讓習慣支配人。一個人要是不能改掉壞習慣&#xff0c;那么他就一文不值。 目錄 緣代碼地址模擬鏈表創建遍歷打印插入插入優化 完整代碼 緣 各位小伙伴們好呀&#xff01;本人最近看了下《啊哈算法》&#xff0c;寫的確實不錯。 但稍顯遺憾…

【C++】string 類 ( 上)

標準庫中的string類 注意&#xff1a; 1. string是表示字符串的字符串類 2. 該類的接口與常規容器的接口基本相同&#xff0c;再添加了一些專門用來操作string的常規操作。 比特就業課 3. string在底層實際是&#xff1a;basic_string模板類的別名&#xff0c;typedef basi…