Dapp链接：https://github.com/Yang94J/Gamble_Game_Near_Front简介本项目依赖Vue搭建前端应用，调用near-api-js与部署的合约进行交互，完成掷骰子功能。环境搭建前提：系统中应该已经安装了Nodejs，Vue3项目搭建：vuecreategamble_gamble_near_front最终代码框架如下：主要为/components/GambleGame.vue、App.vue、config.js、main.js、store.js,.引入了env、package.json和vue.config.js。
代码分析
package.json下面是package.json的关键部分"dependencies":{"@rollup/plugin-inject":"^4.0.4","buffer":"^6.0.3","core-js":"^3.8.3","near-api-js":"^0.44.2","vue":"^3.2.13","vuex":"^4.0.2"}，这里表示依赖buffer、near-api-js、vue、vuex等（特别是buffer，必须引入并显式声明，否则项目会出现Can'tfindvariable:Buffer这样的错误).envVUE_APP_CONTRACT_NAME=gamble_game1.XXX.testnet指定dapp需要调用的合约名称(testnet)main.jsimport{createApp}from'vue'importAppfrom'./App.vue'importstorefrom'./store'从“缓冲区”导入{缓冲区}；global.Buffer=Buffer;createApp(App).use(store).mount('#app')注意这里明确声明了global.Bufferconfig.jsconstCONTRACT_NAME=process.env.VUE_APP_CONTRACT_NAME;Readcontractnamefrom.envfilecase'testnet':return{networkId:'testnet',nodeUrl:'https://rpc.testnet.near.org',contractName:CONTRACT_NAME,walletUrl:'https://wallet.testnet.near.org',helperUrl:'https://helper.testnet.near.org',explorerUrl:'https://explorer.testnet.near.org',};根据用户输入环境，选择对应的网络配置（这里是测试网络）store.jsstore.js存储数据到本地浏览器，获取缓存等，可以参考这个链接状态：{contract:null,currentUser:null,wallet:null,nearConfig:null}，存储状态包括合约、当前用户、钱包和附近的配置突变：{setupNear(state,payload){state.contract=payload.contract;state.currentUser=payload.currentUser;state.wallet=payload.wallet;state.nearConfig=payload.nearConfig;}}设置状态对象asyncinitNear({commit}){constnearConfig=getConfigurations('testnet');constnear=awaitnearApi.connect({deps:{keyStore:newnearApi.keyStores.BrowserLocalStorageKeyStore()},...nearConfig});constwallet=newnearApi.WalletConnection(near);console.log(wallet)让当前用户；如果(wallet.getAccountId()){currentUser={accountId:wallet.getAccountId(),balance:(awaitwallet.account().state()).amount,balanceInNear:(awaitwallet.account().state()）。数量/(10**24),}}console.log(currentUser)constcontract=awaitnewnearApi.Contract(wallet.account(),process.env.VUE_APP_CONTRACT_NAME||'gamble_game1.young_cn.testnet',{viewMethods:['get_maximum_gamble_price'],changeMethods:['gamble','sponsor'],sender:wallet.getAccountId()});控制台日志（合同）；//提交并发送到mutation.commit('setupNear',{contract,currentUser,wallet,nearConfig});这里initNear函数获取测试网配置，生成合约，钱包信息（需要用户登录），用户信息等。GambleGame.vue
骰子赌博游戏{{currentUser?'LogOut':'LogIn'}} 