TronLink钱包简易实现(无MySQL版)
TronLink钱包简易实现(无MySQL版)
本文将介绍如何使用PHP、CSS、JS和HTML5构建一个简易的TronLink钱包前端界面,数据存储使用JSON文件而非MySQL数据库。这个实现适合小型应用或个人使用。
项目概述
我们将创建一个具有以下功能的TronLink钱包前端:
-账户创建
-余额查询
-交易记录查看
-简单的转账功能
目录结构
/tronlink-wallet/
├──index.php主页面
├──functions.phpPHP功能函数
├──data/数据存储目录
│├──accounts.json账户数据
│└──transactions.json交易数据
├──css/
│└──style.css样式表
└──js/
└──script.js交互脚本
1.HTML5结构(index.php)
<!DOCTYPEhtml>
<htmllang="zh-CN">
<head>
<metacharset="UTF-8">
<metaname="viewport"content="width=device-width,initial-scale=1.0">
<metaname="description"content="简易TronLink钱包实现-无需数据库的TRX钱包解决方案">
<title>简易TronLink钱包|无数据库实现</title>
<linkrel="stylesheet"href="css/style.css">
</head>
<body>
<header>
<h1>简易TronLink钱包</h1>
<p>基于PHP+JS的无数据库实现</p>
</header>
<divclass="container">
<divid="login-section"class="section">
<h2>登录/创建账户</h2>
<formid="login-form">
<inputtype="text"id="private-key"placeholder="输入私钥或留空创建新账户">
<buttontype="submit">登录/创建</button>
</form>
</div>
<divid="wallet-section"class="sectionhidden">
<h2>我的钱包</h2>
<divclass="wallet-info">
<p>地址:<spanid="wallet-address"></span></p>
<p>余额:<spanid="wallet-balance">0</span>TRX</p>
</div>
<divclass="actions">
<buttonid="refresh-btn">刷新余额</button>
<buttonid="send-trx-btn">发送TRX</button>
<buttonid="logout-btn">退出</button>
</div>
<divid="transaction-section">
<h3>最近交易</h3>
<divid="transactions-list"></div>
</div>
</div>
<divid="send-modal"class="modalhidden">
<divclass="modal-content">
<spanclass="close">×</span>
<h3>发送TRX</h3>
<formid="send-form">
<inputtype="text"id="to-address"placeholder="接收地址"required>
<inputtype="number"id="amount"placeholder="数量(TRX)"min="0.000001"step="0.000001"required>
<inputtype="text"id="memo"placeholder="备注(可选)">
<buttontype="submit">发送</button>
</form>
</div>
</div>
</div>
<footer>
<p>©2023简易TronLink钱包|仅供学习使用</p>
</footer>
<scriptsrc="js/script.js"></script>
</body>
</html>
2.CSS样式(css/style.css)
/基础样式/
body{
font-family:'Arial',sans-serif;
line-height:1.6;
margin:0;
padding:0;
background-color:f5f5f5;
color:333;
}
header{
background-color:1c1e26;
color:white;
padding:1rem0;
text-align:center;
}
.container{
max-width:800px;
margin:2remauto;
padding:01rem;
}
.section{
background:white;
border-radius:8px;
padding:1.5rem;
margin-bottom:1.5rem;
box-shadow:02px5pxrgba(0,0,0,0.1);
}
.hidden{
display:none;
}
/表单样式/
input[type="text"],
input[type="number"]{
width:100%;
padding:0.75rem;
margin-bottom:1rem;
border:1pxsolidddd;
border-radius:4px;
box-sizing:border-box;
}
button{
background-color:1c1e26;
color:white;
border:none;
padding:0.75rem1.5rem;
border-radius:4px;
cursor:pointer;
font-size:1rem;
transition:background-color0.3s;
}
button:hover{
background-color:2a2d3a;
}
.actions{
display:flex;
gap:1rem;
margin:1rem0;
}
/交易列表/
transactions-list{
margin-top:1rem;
}
.transaction{
padding:1rem;
border-bottom:1pxsolideee;
}
.transaction:last-child{
border-bottom:none;
}
/模态框/
.modal{
position:fixed;
top:0;
left:0;
width:100%;
height:100%;
background-color:rgba(0,0,0,0.5);
display:flex;
justify-content:center;
align-items:center;
z-index:1000;
}
.modal-content{
background:white;
padding:2rem;
border-radius:8px;
width:90%;
max-width:500px;
position:relative;
}
.close{
position:absolute;
top:1rem;
right:1rem;
font-size:1.5rem;
cursor:pointer;
}
/响应式设计/
@media(max-width:600px){
.actions{
flex-direction:column;
}
}
/SEO优化元素/
footer{
text-align:center;
padding:1rem;
background-color:1c1e26;
color:white;
margin-top:2rem;
}
3.JavaScript交互(js/script.js)
document.addEventListener('DOMContentLoaded',function(){
//DOM元素
constloginSection=document.getElementById('login-section');
constwalletSection=document.getElementById('wallet-section');
constloginForm=document.getElementById('login-form');
constprivateKeyInput=document.getElementById('private-key');
constwalletAddressSpan=document.getElementById('wallet-address');
constwalletBalanceSpan=document.getElementById('wallet-balance');
constrefreshBtn=document.getElementById('refresh-btn');
constsendTrxBtn=document.getElementById('send-trx-btn');
constlogoutBtn=document.getElementById('logout-btn');
consttransactionsList=document.getElementById('transactions-list');
constsendModal=document.getElementById('send-modal');
constsendForm=document.getElementById('send-form');
constcloseModal=document.querySelector('.close');
//当前钱包数据
letcurrentWallet=null;
//事件监听器
loginForm.addEventListener('submit',handleLogin);
refreshBtn.addEventListener('click',refreshBalance);
sendTrxBtn.addEventListener('click',()=>sendModal.classList.remove('hidden'));
logoutBtn.addEventListener('click',logout);
closeModal.addEventListener('click',()=>sendModal.classList.add('hidden'));
sendForm.addEventListener('submit',sendTrx);
//点击模态框外部关闭
window.addEventListener('click',(e)=>{
if(e.target===sendModal){
sendModal.classList.add('hidden');
}
});
//检查本地存储是否有已登录的钱包
checkSession();
//处理登录/创建账户
asyncfunctionhandleLogin(e){
e.preventDefault();
constprivateKey=privateKeyInput.value.trim();
try{
letresponse;
if(privateKey){
//使用现有私钥登录
response=awaitfetch('functions.php?action=login',{
method:'POST',
headers:{
'Content-Type':'application/x-www-form-urlencoded',
},
body:`privateKey=${encodeURIComponent(privateKey)}`
});
}else{
//创建新账户
response=awaitfetch('functions.php?action=create');
}
constdata=awaitresponse.json();
if(data.success){
currentWallet=data.wallet;
updateWalletUI();
loginSection.classList.add('hidden');
walletSection.classList.remove('hidden');
//存储会话
sessionStorage.setItem('walletAddress',currentWallet.address);
//加载交易记录
loadTransactions();
}else{
alert(data.message||'登录失败');
}
}catch(error){
console.error('Error:',error);
alert('发生错误,请重试');
}
}
//更新钱包UI
functionupdateWalletUI(){
if(!currentWallet)return;
walletAddressSpan.textContent=currentWallet.address;
walletBalanceSpan.textContent=currentWallet.balance;
}
//刷新余额
asyncfunctionrefreshBalance(){
if(!currentWallet)return;
try{
constresponse=awaitfetch(`functions.php?action=balance&address=${currentWallet.address}`);
constdata=awaitresponse.json();
if(data.success){
currentWallet.balance=data.balance;
updateWalletUI();
}else{
alert(data.message||'获取余额失败');
}
}catch(error){
console.error('Error:',error);
alert('刷新余额失败');
}
}
//加载交易记录
asyncfunctionloadTransactions(){
if(!currentWallet)return;
try{
constresponse=awaitfetch(`functions.php?action=transactions&address=${currentWallet.address}`);
constdata=awaitresponse.json();
if(data.success){
displayTransactions(data.transactions);
}else{
console.error(data.message||'获取交易记录失败');
}
}catch(error){
console.error('Error:',error);
}
}
//显示交易记录
functiondisplayTransactions(transactions){
transactionsList.innerHTML='';
if(transactions.length===0){
transactionsList.innerHTML='<p>暂无交易记录</p>';
return;
}
transactions.forEach(tx=>{
constisOutgoing=tx.from===currentWallet.address;
consttxElement=document.createElement('div');
txElement.className='transaction';
txElement.innerHTML=`
<p><strong>${isOutgoing?'发送至':'接收自'}:</strong>${isOutgoing?tx.to:tx.from}</p>
<p><strong>金额:</strong>${tx.amount}TRX</p>
<p><strong>时间:</strong>${newDate(tx.timestamp).toLocaleString()}</p>
${tx.memo?`<p><strong>备注:</strong>${tx.memo}</p>`:''}
`;
transactionsList.appendChild(txElement);
});
}
//发送TRX
asyncfunctionsendTrx(e){
e.preventDefault();
consttoAddress=document.getElementById('to-address').value.trim();
constamount=parseFloat(document.getElementById('amount').value);
constmemo=document.getElementById('to-address').value.trim();
if(!toAddress||isNaN(amount){
alert('请输入有效的地址和金额');
return;
}
try{
constresponse=awaitfetch('functions.php?action=send',{
method:'POST',
headers:{
'Content-Type':'application/x-www-form-urlencoded',
},
body:`from=${currentWallet.address}&to=${toAddress}&amount=${amount}&memo=${encodeURIComponent(memo)}`
});
constdata=awaitresponse.json();
if(data.success){
alert('交易发送成功!');
sendModal.classList.add('hidden');
sendForm.reset();
//刷新余额和交易记录
refreshBalance();
loadTransactions();
}else{
alert(data.message||'发送交易失败');
}
}catch(error){
console.error('Error:',error);
alert('发送交易时出错');
}
}
//退出登录
functionlogout(){
currentWallet=null;
sessionStorage.removeItem('walletAddress');
walletSection.classList.add('hidden');
loginSection.classList.remove('hidden');
privateKeyInput.value='';
}
//检查会话
functioncheckSession(){
constwalletAddress=sessionStorage.getItem('walletAddress');
if(walletAddress){
//模拟自动登录-实际应用中需要更安全的实现
privateKeyInput.value='自动登录中...';
setTimeout(()=>{
privateKeyInput.value='';
alert('请手动登录以继续');
},1000);
}
}
});
4.PHP后端功能(functions.php)
<?php
header('Content-Type:application/json');
//确保data目录存在
if(!file_exists('data')){
mkdir('data',0755,true);
}
//初始化数据文件
$accountsFile='data/accounts.json';
$transactionsFile='data/transactions.json';
//如果文件不存在则创建
if(!file_exists($accountsFile)){
file_put_contents($accountsFile,'[]');
}
if(!file_exists($transactionsFile)){
file_put_contents($transactionsFile,'[]');
}
//获取请求参数
$action=$_GET['action']??'';
//路由到不同的操作
switch($action){
case'create':
createAccount();
break;
case'login':
login();
break;
case'balance':
getBalance();
break;
case'transactions':
getTransactions();
break;
case'send':
sendTrx();
break;
default:
echojson_encode(['success'=>false,'message'=>'无效的操作']);
break;
}
//创建新账户
functioncreateAccount(){
global$accountsFile;
//生成随机私钥(简化版,实际应用应使用更安全的生成方式)
$privateKey=bin2hex(random_bytes(32));
//生成地址(简化版,实际TRON地址生成更复杂)
$address='T'.substr(hash('sha256',$privateKey),0,33);
//读取现有账户
$accounts=json_decode(file_get_contents($accountsFile),true);
//检查地址是否已存在
foreach($accountsas$account){
if($account['address']===$address){
echojson_encode(['success'=>false,'message'=>'地址已存在']);
return;
}
}
//添加新账户
$newAccount=[
'privateKey'=>$privateKey,
'address'=>$address,
'balance'=>0,//新账户余额为0
'createdAt'=>time()
];
$accounts[]=$newAccount;
file_put_contents($accountsFile,json_encode($accounts));
//返回钱包信息(实际应用中不应返回私钥)
echojson_encode([
'success'=>true,
'wallet'=>[
'address'=>$address,
'balance'=>0,
'privateKey'=>$privateKey//仅用于演示,实际应用中不应返回
]
]);
}
//登录账户
functionlogin(){
global$accountsFile;
$privateKey=$_POST['privateKey']??'';
if(empty($privateKey)){
echojson_encode(['success'=>false,'message'=>'请输入私钥']);
return;
}
//读取账户数据
$accounts=json_decode(file_get_contents($accountsFile),true);
//查找匹配的账户
foreach($accountsas$account){
if($account['privateKey']===$privateKey){
echojson_encode([
'success'=>true,
'wallet'=>[
'address'=>$account['address'],
'balance'=>$account['balance'],
'privateKey'=>$account['privateKey']//仅用于演示
]
]);
return;
}
}
echojson_encode(['success'=>false,'message'=>'未找到匹配的账户']);
}
//获取余额
functiongetBalance(){
global$accountsFile;
$address=$_GET['address']??'';
if(empty($address)){
echojson_encode(['success'=>false,'message'=>'地址不能为空']);
return;
}
//读取账户数据
$accounts=json_decode(file_get_contents($accountsFile),true);
//查找账户
foreach($accountsas$account){
if($account['address']===$address){
echojson_encode([
'success'=>true,
'balance'=>$account['balance']
]);
return;
}
}
echojson_encode(['success'=>false,'message'=>'账户不存在']);
}
//获取交易记录
functiongetTransactions(){
global$transactionsFile;
$address=$_GET['address']??'';
if(empty($address)){
echojson_encode(['success'=>false,'message'=>'地址不能为空']);
return;
}
//读取交易数据
$allTransactions=json_decode(file_get_contents($transactionsFile),true);
//筛选与当前地址相关的交易
$userTransactions=array_filter($allTransactions,function($tx)use($address){
return$tx['from']===$address||$tx['to']===$address;
});
//按时间排序
usort($userTransactions,function($a,$b){
return$b['timestamp']-$
转载请注明出处: TronLink官网下载-TRON-TRX-波场-波比-波币-波宝|官网-钱包-苹果APP|安卓-APP-下载
本文的链接地址: https://tianjinfa.org/post/3086
扫描二维码,在手机上阅读
文章作者:
文章标题:TronLink钱包简易实现(无MySQL版)
文章链接:https://tianjinfa.org/post/3086
本站所有文章除特别声明外,均采用 CC BY-NC-SA 4.0 许可协议,转载请注明来自 !
文章标题:TronLink钱包简易实现(无MySQL版)
文章链接:https://tianjinfa.org/post/3086
本站所有文章除特别声明外,均采用 CC BY-NC-SA 4.0 许可协议,转载请注明来自 !
打赏
如果觉得文章对您有用,请随意打赏。
您的支持是我们继续创作的动力!
微信扫一扫
支付宝扫一扫
您可能对以下文章感兴趣
-
TronLink钱包HTML5实现教程
9小时前
-
TronLink钱包集成开发指南-原创PHP实现
10小时前
-
TronLink钱包HTML5实现教程-原创代码与SEO优化指南
10小时前
-
TronLink钱包集成开发指南:PHP+CSS+JS+HTML5实现
10小时前
-
TRONLink钱包集成指南:使用JavaScript连接TRON区块链
1小时前
-
使用JavaScript开发TRONLink钱包集成指南
10小时前
-
TronLink钱包集成开发指南:PHP+CSS+JS+HTML5实现
11小时前
-
TronLink钱包集成指南:使用JavaScript连接TRON区块链
11小时前
-
使用JavaScript开发TronLink钱包集成指南
13小时前
-
使用PHP+CSS+JS+HTML5+JSON创建TronLink风格钱包(无MySQL)
8小时前