Pet Shop Truffle Box 使用教程

Pet Shop Truffle Box 使用教程

pet-shop-boxA box containing all you need to get started with our Pet Shop tutorial.项目地址:https://gitcode.com/gh_mirrors/pe/pet-shop-box

1、项目的目录结构及介绍

Pet Shop Truffle Box 是一个包含所有必要文件和依赖项的 Truffle 项目模板，用于快速启动 Pet Shop 教程。以下是项目的目录结构及其介绍：

pet-shop-box/
├── contracts/          # 智能合约文件夹
│   └── Migrations.sol  # 迁移合约
├── migrations/         # 迁移脚本文件夹
│   ├── 1_initial_migration.js
│   └── 2_deploy_contracts.js
├── src/                # 前端代码文件夹
│   ├── css/
│   ├── fonts/
│   ├── images/
│   ├── js/
│   └── index.html
├── test/               # 测试文件夹
│   └── TestAdoption.sol
├── bs-config.json      # BrowserSync 配置文件
├── package.json        # npm 依赖管理文件
├── truffle-box.json    # Truffle Box 配置文件
├── truffle-config.js   # Truffle 配置文件
└── README.md           # 项目说明文档

目录结构介绍

• contracts/: 存放智能合约的 Solidity 文件。
• migrations/: 存放迁移脚本，用于部署合约到区块链。
• src/: 存放前端代码，包括 HTML、CSS、JavaScript 和图片资源。
• test/: 存放测试脚本，用于测试智能合约。
• bs-config.json: BrowserSync 配置文件，用于前端开发服务器。
• package.json: npm 依赖管理文件，列出了项目所需的所有依赖。
• truffle-box.json: Truffle Box 配置文件，定义了 Box 的元数据。
• truffle-config.js: Truffle 配置文件，包含了网络配置和其他 Truffle 设置。
• README.md: 项目说明文档，提供了项目的详细介绍和使用指南。

2、项目的启动文件介绍

Pet Shop Truffle Box 的启动文件主要包括以下几个部分：

启动开发环境

truffle develop

该命令启动 Truffle 的开发环境，提供一个本地的区块链网络和控制台，方便进行合约的编译、部署和测试。

编译和迁移合约

在 Truffle 开发控制台中，运行以下命令：

compile
migrate

• compile: 编译智能合约。
• migrate: 将编译后的合约部署到区块链网络。

启动前端服务器

npm run dev

该命令启动 BrowserSync 服务器，运行前端应用，可以在浏览器中访问 http://localhost:3000 查看应用。

3、项目的配置文件介绍

truffle-config.js

truffle-config.js 是 Truffle 的主要配置文件，包含了网络配置、编译器设置等。以下是文件的主要内容：

module.exports = {
  networks: {
    development: {
      host: "127.0.0.1",
      port: 8545,
      network_id: "*"
    }
  },
  compilers: {
    solc: {
      version: "^0.8.0"
    }
  }
};

• networks: 定义了不同的网络配置，例如本地的开发网络 development。
• compilers: 定义了 Solidity 编译器的版本。

bs-config.json

bs-config.json 是 BrowserSync 的配置文件，用于配置前端开发服务器。以下是文件的主要内容：

{
  "ui": {
    "port": 3001,
    "weinre": {
      "port": 8080
    }
  },
  "files": "src/**/*",
  "watchOptions": {},
  "server": false,
  "proxy": "localhost:8000",
  "port": 3000,
  "middleware": false,
  "serveStatic": [],
  "ghostMode": {
    "clicks": true,
    "scroll": true,
    "forms": {
      "submit": true,
      "inputs": true,

pet-shop-boxA box containing all you need to get started with our Pet Shop tutorial.项目地址:https://gitcode.com/gh_mirrors/pe/pet-shop-box