nuxt.js使用教程

There is ever-increasing interest in and demand for Decentralized application (DApp) development. Therefore, I have decided to come up with a tutorial to help you get started with developing & architecting a modular DApp. We’ll use one of the most popular and widely adopted languages of the 21st century: JavaScript.

对分散式应用程序(DApp)开发的兴趣和需求不断增长。 因此，我决定提供一个教程，以帮助您开始开发和设计模块化DApp。 我们将使用21世纪最受欢迎的语言之一：JavaScript。

We will be working with the following technologies in this tutorial:

在本教程中，我们将使用以下技术：

1. : a BlockChain Platform which allows us to write Smart Contracts in JavaScript. Signup to get the referral benefit.

   ：一个BlockChain平台，使我们可以用JavaScript编写智能合约。 注册 获得推荐利益。

2. : a framework built on the top of Vue.JS.

   ：建立在Vue.JS顶部的框架 。

3. : Nebulas Payment JavaScript API. Both for PC and Mobile.

   ：星云支付JavaScript API。 适用于PC和移动设备。

4. : Used to interact with the Smart Contract for payment purposes.

   ：用于与智能合约进行交互以进行付款。

I will be explaining the DApp creation process with the help of an existing DApp, . It qualified for the new DApp reward on season 1 of the incentive program on the .

我将在现有DApp 的帮助下解释DApp创建过程。 它有资格在上的奖励计划的第1季获得新的DApp奖励。

You can find the source code for the frontend of the DAapp . The Smart Contract code can be found in the PayloadData .

您可以在找到DAapp前端的源代码。 可在的PayloadData中找到智能合约代码。

It’s not always enough to know about creating a simple to-do app. Sometimes we must also understand how to architect big modular applications.

了解创建一个简单的待办应用程序并不总是足够的。 有时我们还必须了解如何设计大型模块化应用程序。

Focusing on such an app, I will give you a high level overview of structuring a big modular DApp using Nuxt.js and Nebulas. You can get more in-depth by exploring and debugging the code shared above.

专注于此类应用程序，我将为您提供使用Nuxt.js和Nebulas构建大型模块化DApp的高级概述。 您可以通过探索和调试上面共享的代码来获得更深入的了解。

我们要建造什么？ (What are we going to build?)

We are going to create a short story/poem collaboration platform, Distributed Stories. It will allow a user to create a new story by adding a line to an existing story and sharing the story on Twitter. Here’s a demo .

我们要创建一个简短的故事 / 诗协作平台，分布式的故事。 它将允许用户通过在现有故事中添加一行并在Twitter上分享该故事来创建新故事。 这是一个演示 。

I will be explaining the Smart Contract and Frontend Architecture in the upcoming lines.

我将在接下来的几行中解释智能合约和前端架构 。

(The )

The DApp Frontend communicates with the SmartContract in order to fetch and write the data. It is then the BlockChain Platform which syncs this smart contract data across multiple nodes in order to meet the decentralization and security needs. This syncing process needs a little time, and that’s why the write process costs time and money in the form of NAS.

DApp前端与SmartContract进行通信，以获取和写入数据。 然后是BlockChain平台跨多个节点同步此智能合约数据，以满足分散和安全需求。 这个同步过程需要一点时间，这就是为什么写入过程以NAS形式花费时间和金钱的原因。

故事初始化 (Story Initialization)

In the below section, I will explain to you the part of the smart contract which defines the Story Object:

在下一节中，我将向您解释定义故事对象的智能合约部分：

"use strict";/*Story Constructor which will create the story by providing the necessary field fetched from the frontend using nebpay API explained at the end of this blog:*/var Story = function(text, image_url) {    this.title = text;    this.address = Blockchain.transaction.from;    this.hash = Blockchain.transaction.hash;    this.image_url = image_url;    this.lines = [];    this.votes = [];};/*  Init function is used once while deploying the smart contract to initialize the parameters if required:  */Story.prototype = {    init: function() {    }};

As mentioned above, every story will have the following fields, out of which text and image_url need to be provided as an argument from the user. For the Address field, the hash can be obtained using the BlockChain APIs explained in depth .

如上所述，每个故事都将具有以下字段，用户必须在其中提供text和image_url作为自变量。 对于地址字段，可以使用介绍的BlockChain API获得哈希。

DApp中使用的数据结构和存储 (Data Structure and Storage used in the DApp)

The storage module enables the data storage on Nebulas. It enables the permanent storage of data variables on Nebulas when a payment is made. You can read in depth about it .

该存储模块可以在星云上存储数据。 付款后，它可以将数据变量永久存储在星云上。 您可以在深入了解它。

/*With the help of the Storage Module, we are defining following maps and index property, which will help us to keep track of multidimensional data obtained from users. Nebulas recommend the capturing of multiple data points, which may help in improving Nebulas Rank and Search Feature.*/var Data = function() {    LocalContractStorage.defineMapProperty(this, "favourite_stories");    LocalContractStorage.defineMapProperty(this, "my_stories");    LocalContractStorage.defineProperty(this, "s_index");    LocalContractStorage.defineMapProperty(this, "stories_data");};

保存和检索故事 (Saving and Retrieving Story)

Now we’ll look at two of the most important functions used for writing and getting the story on the Platform with the help of Story Constructor and Storage declared in the Data constructor above.

现在，我们将借助上面的数据构造函数中声明的Story Constructor和Storage来查看用于在平台上编写和获取故事的两个最重要的函数。

/*stories_data hash map will contain every story stored against its unique index on the Platform storage module.Every story index added by a particular user will be stored in a hash map my_stories, in the form of an array.*/Data.prototype = {     /* Initializing the index on Smart Contract. As soon as people will keep on adding a new story, s_index will keep on increasing. */ init: function () {        this.s_index = new BigNumber(1);      },save_story: function (name, image_url) {var id = this.s_index;if (name.length > 25) {          throw new Error("Story Length error");        }if (name == "") {          throw new Error("empty story title");        }var story = new Story(name, image_url);this.stories_data.put(new BigNumber(id).toNumber(), JSON.stringify(story));var my_stories_local = this.my_stories.get(Blockchain.transaction.from) || [];my_stories_local.push(this.s_index);this.my_stories.put(Blockchain.transaction.from, my_stories_local);this.s_index = new BigNumber(id).plus(1);},      /* get_stories method will be used to retrieve all the stories stored on the platform.*/get_stories: function () {                var stories = [];        var total = new BigNumber(this.s_index).toNumber();        for (let i = 1; i < total; i++) {          stories.push(JSON.parse(this.stories_data.get(i)));        }        return stories;},    /* Remaining Functions can be found out in the Smart Contract Code here.*/};module.exports = Data;

This completes the major parts of the Smart Contract. In the next section, I will be explaining the structure of the Frontend Code in Nuxt.js.

这样就完成了智能合约的主要部分。 在下一节中，我将解释Nuxt.js中的前端代码的结构。

前端架构设计 (Frontend Architecture Design)

As the project grows, and more functionalities get added, a proper architecture set up from the beginning can help us achieve our goal by making debugging easier.

随着项目的发展和更多功能的添加，从一开始就建立适当的体系结构可以使调试更加容易，从而帮助我们实现目标。

The below approach is a good way to go about it:

以下方法是解决此问题的好方法：

/*Go to the root directory in the source code here and find out the below-mentioned files. This Architecture helps in creating a big modular App/Dapp.*/pages/  about / index.vue  : Static About us PAge  contact / index.vue : Static Contact us Page  create / index.vue : Page to Create the Story.  favourite / index.vue : Stories Liked by you will be here.  mystory / index.vue : My Stories Page.  index.vue / index.vue : All Stories Pagestore/ index.js : Vuex code used to make API calls to Smart Contract  neb_init.js : Importing nebpay and initializing Smart Contract                    Address here, which gets used throughout the app.layouts/ default.vue: Every page follows an architecture where Header and                 Footer are same. So setting up the default               architecture here.components/  Header.vue: Header component which is getting used in default.vue Footer.cue: Footer component which is getting used in default.vue ....

对智能合约进行API调用 (Making API calls to the Smart Contract)

I will be explaining one of the API call using nebpay to interact with the Smart Contract and get all the stories’ data for the landing page.

我将说明使用nebpay与Smart Contract交互并获取目标网页的所有故事数据的API调用之一。

Initialize Nebpay, to be used across the app in store/neb_init.js:

初始化Nebpay，以便在store / neb_init.js中的整个应用程序中使用：

import * as NebPay from 'nebpay.js';/*Contract Address can be obtained after deploying the code on Nebulas Platform using their Web Wallet.It needs to be the Mainnet Address.*/var contractAddress = "n1pQHv...................Pm1";var nebPay = new NebPay();export { contractAddress, nebPay, result,NebPay };

The below API call code can be found in the store/index.js file:

可以在store / index.js文件中找到以下API调用代码：

/*nebPay API's can be used to interact with the Smart Contract and Chrome extension to perform read and write operations. More details about nebpay API's can be found out here.*/call: (store) => {// args needs to be sent in below format.var args = "[]";nebPay.simulateCall(contractAddress, 0, "get_stories", args, { listener: function (data) {  if (data.result != null) {    store.commit("all_data", JSON.parse(data.result));  } }});}

The above code is getting called from component/Allstories.vue.

上面的代码是从component / Allstories.vue调用的 。

/*As soon as the Allstories component gets mounted, it dispatches the call action mentioned in the above lines, which then fills the Vuex Store all_data array and gets rendered in the All Stories Component.*/mounted() {  this.$store.dispatch("call");}

Like this, you can go around every section in the source code and understand the complete architecture of the DApp.

这样，您可以遍历源代码中的每个部分，并了解DApp的完整体系结构。

I hope this tutorial helped you in getting started with DApp development. For any queries, feel free to reach out to me.

我希望本教程可以帮助您入门DApp开发。 如有任何疑问，请随时与我联系。

翻译自:

nuxt.js使用教程