1. 雜談?

作為一名十多年游戲王玩家，學生時代玩的是PSP和PS2上的游戲，到畢業后使用YGOPRO同步新卡片進行聯網對戰，再到現在約到線下進行實體卡片游戲。有些卡片價格太貴，因此我們對于這些卡在未購買之前都會自己打印出來暫時游玩。這里不得不提國內的制卡小工具游戲王卡片生成器。

?比較遺憾的是該網站即將下線。

值得慶幸的是作者對網站的更新一直以https://github.com/kooriookami/tools-vue的形式進行保存，本篇博文也是記錄博主如何一步一步實現在本地運行起開源項目的經過。?

2. 分析

一般拿到一個開源項目我們可以通過ReadMe了解到他很多相關內容，通過ReadMe可以知道該項目是一個vue開發的前后端分離項目。跟著指引步驟運行項目，非常順利運行了項目，在本地運行會發現以下問題

3. 解決

這里要介紹雜談中提到的ygopro，他是一款開源的由國人Fluorohydride（圓神）自制的游戲王決斗系統。在國內我們一般使用萌卡所維護的版本，因此后續的討論我們都會以萌卡的github項目進行分析。

3.1 獲取數據

3.1.1 卡片明細數據

在查看萌卡的項目中的我重點關注標題為YGO的倉庫，其中ygopro-database這個倉庫，引起我的注意。通過查看他的ReadMe我們可以知道這個項目就是用來管理我們的卡片信息內容。

Some databases of ygopro.

They are for now just for test.

切換到dump分支可以看到通過倉庫提供了databases對應數據SQL腳本，這里省下了我很多時間去尋找如何提取數據庫文件的卡片數據明細。

這里說一下我在github學習開源項目的另外一個方式就是查看issue，一般在項目上遇到問題都可以在issue進行提問，我在issue中發現這樣的提問請問下數據庫cdb文件是從哪里獲取的，在里面我知道ygo的數據庫文件可以通過DataEditorX來提取數據的明細。

3.1.2? 卡片插畫數據

通過查看源碼還有網站公告中我們可以知道ygoprodeck這個網站，他提供了圖片API可以進行查看下載。

3.2?功能復現

3.2.1 自建API

通過chrome的開發工具，我們可以知道對應操作下會觸發什么樣的API請求，那剩下就是分析請求的返回內容與我們手頭上的內容進行關聯。得益于2.1.1獲取到的SQL腳本，我們知道了我們數據收屬性結構。

卡片明細表

記錄了卡片各內基礎信息

CREATE TABLE datas (id integer primary key,ot integer,alias integer,setcode integer,type integer,atk integer,def integer,level integer,race integer,attribute integer,category integer );

卡片描述表

記錄卡片的效果信息

CREATE TABLE texts(id integer primary key,name text,desc text,str1 text,str2 text,str3 text,str4 text,str5 text,str6 text,str7 text,str8 text,str9 text,str10 text,str11 text,str12 text,str13 text,str14 text,str15 text,str16 text );

有了圖片還有數據信息，只要我們構建API去讀取內容即可，詳細可以查看我的api項目。

3.2.2 項目本身修改

• 修改目標API

在main.js我們可以配置數據獲取api根目錄

// 接口請求地址配置 if (process.env.NODE_ENV === 'production') {// 上線環境app.config.globalProperties.baseURL = 'http://127.0.0.1:8080/api';//https://tools.kooriookami.top/api } else {// 本地環境app.config.globalProperties.baseURL = 'http://127.0.0.1:8080/api'; }

• 適配簡體中文YGOPRO數據

使用自己提供的API的時候會發現當我們查看的是靈擺類的卡片的時候不能正常展示內容，我嘗試分析加載數據。我們能發現在網站中加載的靈擺數據json中他們的卡片描述有【Pendulum Effect】、【Monster Effect】

{"data": {"name": "終焉龍 混沌帝","atk": 3000,"def": 2500,"attribute": 32,"desc": "←1 【Pendulum Effect】 1→\r\n這個卡名的靈擺效果1回合只能使用1次。\r\n①：支付1000基本分，以除外的1只自己的龍族怪獸為對象才能發動。這張卡破壞，那只怪獸加入手卡。\r\n【Monster Effect】\r\n這張卡不能通常召喚。「終焉龍 混沌帝」1回合1次在把自己墓地的光屬性和暗屬性的怪獸各1只除外的場合才能從手卡·額外卡組特殊召喚。\r\n①：1回合1次，把基本分支付一半才能發動。額外怪獸區域以外的自己場上的卡全部送去墓地，選最多有送去墓地的數量的對方場上的卡送去墓地。那之后，給與對方送去對方墓地的數量×300傷害。\r\n②：特殊召喚的表側表示的這張卡從場上離開的場合回到卡組最下面。","id": 4538826,"level": 16842760,"race": 8192,"type": 50331681},"message": "success","status": 200 }

再查看源碼，源碼也是使用【Pendulum Effect】、【Monster Effect】來數據的提取，因此要根據簡體中文YGOPRO數據進行定制化修改。

export function parsePendulumScale(data) {if (parseType(data) === 'pendulum') {let list = data.desc.split('【Pendulum Effect】');return parseInt(list[0]?.replace(/[^\d]/g, ''));} else {return 0;} }export function parsePendulumDescription(data, lang) {if (parseType(data) === 'pendulum') {let description = characterToHalf(data.desc).replace(/'''/g, '').replace(/\r/g, '\n').replace(/(\n)\1*/g, '\n');const list = description.split(/【Pendulum Effect】|【Monster Effect】|【Flavor Text】|【怪獸敘述】|【怪獸效果】|【怪獸描述】/).filter(item => item && item !== '\n');if (lang === 'tc') {description = list[2]?.replace(/\d+→|\n/g, '') || '';} else {description = list[1]?.replace(/\d+→|\n/g, '') || '';}if (['jp', 'sc'].includes(lang)) {// 效果數字全角，卡名數字半角description = numberToFull(description).replace(/(「.*?」)|(“.*?”)/g, s => numberToHalf(s));}return description.trim();} else {return '';} }

?根據簡體中文YGOPRO數據添加分割簡體中文內容的字符

{"data": {"name": "終焉龍 混沌帝","atk": 3000,"def": 2500,"attribute": 32,"desc": "←1 【靈擺】 1→\r\n這個卡名的靈擺效果1回合只能使用1次。\r\n①：支付1000基本分，以除外的1只自己的龍族怪獸為對象才能發動。這張卡破壞，那只怪獸加入手卡。\r\n【怪獸效果】\r\n這張卡不能通常召喚。「終焉龍 混沌帝」1回合1次在把自己墓地的光屬性和暗屬性的怪獸各1只除外的場合才能從手卡·額外卡組特殊召喚。\r\n①：1回合1次，把基本分支付一半才能發動。額外怪獸區域以外的自己場上的卡全部送去墓地，選最多有送去墓地的數量的對方場上的卡送去墓地。那之后，給與對方送去對方墓地的數量×300傷害。\r\n②：特殊召喚的表側表示的這張卡從場上離開的場合回到卡組最下面。","id": 4538826,"level": 16842760,"race": 8192,"type": 50331681},"message": "success","status": 200 } export function parsePendulumScale(data) {if (parseType(data) === 'pendulum') {let list = data.desc.split('【靈擺】');//let list = data.desc.split('【Pendulum Effect】');return parseInt(list[0]?.replace(/[^\d]/g, ''));} else {return 0;} }export function parsePendulumDescription(data, lang) {if (parseType(data) === 'pendulum') {let description = characterToHalf(data.desc).replace(/'''/g, '').replace(/\r/g, '\n').replace(/(\n)\1*/g, '\n');const list = description.split(/【Pendulum Effect】|【Monster Effect】|【靈擺】|【怪獸效果】|【Flavor Text】|【怪獸敘述】|【怪獸效果】|【怪獸描述】/).filter(item => item && item !== '\n');if (lang === 'tc') {description = list[2]?.replace(/\d+→|\n/g, '') || '';} else {description = list[1]?.replace(/\d+→|\n/g, '') || '';}if (['jp', 'sc'].includes(lang)) {// 效果數字全角，卡名數字半角description = numberToFull(description).replace(/(「.*?」)|(“.*?”)/g, s => numberToHalf(s));}return description.trim();} else {return '';} }

• 能直加載卡片原畫

因為運行成本的原因ygoprodeck提供卡片原畫API無法進行外鏈了，我們通過通告知道還是可以通過ygoprodeck提供的api下載圖片，通過自選圖片上傳來加載卡片原畫

?通過添加debugger我們定位到\src\render\views\yugioh.js代碼中這段代碼負責加載圖片

export function parseImage(data) {debugger;return '/'; }

只要我們擁有自己的圖片庫，通過自己構建api即可，修改如下，關于如何批量去下載圖片請自行在網絡上進行查詢。

export function parseImage(data) {return `http://127.0.0.1:8080/images/${data.id}`; }

4. 效果

5. 感想

這次網站復活是一個很典型的開源項目應用樣例，跳過了開源項目的選型（關于開源項目的選型可以閱讀我之前的這篇博客記開源系統落地-我是如何在工作中應用ShardingSphere-JDBC），從使用開源項目，遇到問題如何解決，到最終符合自己的使用需求。

參考：ygocore版本&服務器介紹+操作方法+實用鏈接

https://github.com/mycard/ygopro-database

修改后代碼：GitHub - tale2009/tools-vue

對應后端API：GitHub - tale2009/KenhoYUGIOHAPI

總結

以上是生活随笔為你收集整理的【实战与杂谈】如何复活一个开源网站-游戏王卡片生成器的全部內容，希望文章能夠幫你解決所遇到的問題。

如果覺得生活随笔網站內容還不錯，歡迎將生活随笔推薦給好友。