查看默认前端文件

本篇教程中，你将使用默认的main.mo文件，只需要修改前端代码。在修改代码前，让我们看一看默认的前端代码。

查看前端代码步骤：

1. 编辑器中打开src/custom_greeting_assets/src/index.html 文件

   这个前端文件是应用的默认入口，由dfx.json文件的frontend.entrypoint指定。 这个文件包含标准HTML代码和指向CSS的引用以及位于src/custom_greeting_assets/assets目录的图片。默认的index.html文件也包含了一个输入框和一个可点击按钮的标准HTML语法。 这个前端和Viewing the default front-end章节一样

2. 编辑器中打开 src/custom_greeting_assets/src/index.js 文件

   import { Actor, HttpAgent } from '@dfinity/agent';
   import { idlFactory as custom_greeting_idl, canisterId as custom_greeting_id } from 'dfx-generated/custom_greeting';
   
   const agent = new HttpAgent();
   const custom_greeting = Actor.createActor(custom_greeting_idl, { agent, canisterId: custom_greeting_id });
   
   document.getElementById("clickMeBtn").addEventListener("click", async () => {
     const name = document.getElementById("name").value.toString();
     const greeting = await custom_greeting.greet(name);
   
     document.getElementById("greeting").innerText = greeting;
   });

   • 默认的index.js的第一个import语句使用JavaScript Agent库创建一个actor和一个agent实例

   • 第二个import语句会准备custom_greeting canister来构造actor

   • 接下来的2个语句构造了agent和actor

   • 剩余的代码提供了处理默认程序的文档对象

3. 关闭index.js继续。