1

我正在使用 node.js 构建团队配置文件生成器。我正在使用查询器包，我能够获得答案并构建 teamArray，但我似乎无法将数据传递到生成器页面。当生成写入文件时，它只是将 [object object] 放在我试图返回一些数据的位置。我的想法是让页面为 teamArray 中的每个员工生成一张卡片，但我似乎无法在生成的页面上显示任何数据。

这是我的 index.js 文件：

const generateHTML = require('./src/generatePage');

// import file system package
const fs = require('fs');

// import inquirer package
const inquirer = require('inquirer');

// import team sub classes
const Manager = require('./lib/manager');
const Engineer = require('./lib/engineer');
const Intern = require('./lib/intern');

// create empty team array
const teamArray = [];

const addManager = function () {
  return inquirer
    .prompt([
      {
        type: 'input',
        name: 'name',
        message: "Enter team manager's name:",
        validate: nameInput => {
          if (nameInput) {
            return true;
          } else {
            console.log("Please enter the manager's name!");
            return false;
          }
        },
      },
      {
        type: 'input',
        name: 'id',
        message: "Enter manager's id:",
        validate: nameInput => {
          if (nameInput) {
            return true;
          } else {
            console.log('Please enter employee id');
            return false;
          }
        },
      },
      {
        type: 'input',
        name: 'email',
        message: "Please enter manager's email:",
        validate: email => {
          valid = /^\w+([\.-]?\w+)*@\w+([\.-]?\w+)*(\.\w{2,3})+$/.test(email);
          if (valid) {
            return true;
          } else {
            console.log('Please enter an email!');
            return false;
          }
        },
      },
      {
        type: 'input',
        name: 'officeNumber',
        message: "What is the manager's office number?",
        validate: nameInput => {
          if (nameInput) {
            return true;
          } else {
            console.log("Please enter and manager's office number");
            return false;
          }
        },
      },
    ])
    .then(managerInput => {
      const { name, id, email, officeNumber } = managerInput;
      const manager = new Manager(name, id, email, officeNumber);
      teamArray.push(manager);
      console.log(teamArray);
      console.log(manager.getRole());
      console.log(manager.getName());
    });
};

const addEmployee = () => {
  console.log('Add an employee to the team');
  inquirer
    .prompt([
      {
        type: 'list',
        name: 'role',
        message: "Chose Employee's role:",
        choices: ['Engineer', 'Intern'],
      },
      {
        type: 'input',
        name: 'name',
        message: employeeInput => `Enter ${employeeInput.role}'s name:`,
        validate: nameInput => {
          if (nameInput) {
            return true;
          } else {
            console.log("Please enter the employee's name!");
            return false;
          }
        },
      },
      {
        type: 'input',
        name: 'id',
        message: employeeInput => `Enter ${employeeInput.role}'s id:`,
        validate: nameInput => {
          if (nameInput) {
            return true;
          } else {
            console.log('Please enter employee id');
            return false;
          }
        },
      },
      {
        type: 'input',
        name: 'email',
        message: employeeInput => `Enter ${employeeInput.role}'s email:`,
        validate: email => {
          valid = /^\w+([\.-]?\w+)*@\w+([\.-]?\w+)*(\.\w{2,3})+$/.test(email);
          if (valid) {
            return true;
          } else {
            console.log('Please enter an email!');
            return false;
          }
        },
      },
      {
        type: 'input',
        name: 'github',
        message: employeeInput =>
          `Enter ${employeeInput.role}'s github username:`,
        when: input => input.role === 'Engineer',
        validate: nameInput => {
          if (nameInput) {
            return true;
          } else {
            console.log("Please enter and manager's office number");
            return false;
          }
        },
      },
      {
        type: 'input',
        name: 'school',
        message: "Enter intern's schoo name:",
        when: input => input.role === 'Intern',
        validate: nameInput => {
          if (nameInput) {
            return true;
          } else {
            console.log("Please enter and manager's office number");
            return false;
          }
        },
      },
      {
        type: 'confirm',
        name: 'confirmAddEmployee',
        message: 'Would you like to add another team member?',
        default: false,
      },
    ])
    .then(employeeInput => {
      let { name, id, email, role, github, school, confirmAddEmployee } =
        employeeInput;
      let employee;

      if (role === 'Engineer') {
        employee = new Engineer(name, id, email, github);
        console.log(employee);
      } else if (role === 'Intern') {
        employee = new Intern(name, id, email, school);
        console.log(employee);
      }

      teamArray.push(employee);

      if (confirmAddEmployee) {
        return addEmployee(teamArray);
      } else {
        writeFile();
      }
    });
};

function writeFile() {
  fs.writeFile('./dist/index.html', generateHTML(teamArray), err => {
    // if there is an error
    if (err) {
      console.log(err);
      return;
      // when the profile has been created
    } else {
      console.log(
        'Your team profile has been successfully created! Please check out the index.html'
      );
    }
  });
}

addManager()
  .then(addEmployee)
  // .then(teamArray => {
  //   console.log(teamArray);
  //   console.log(generatePage(teamArray));
  // })

  .catch(err => {
    console.log(err);
  });

这是 generatorPage.js：

function generateHTML(teamArray) {
  return `<!doctype html>
    <html lang="en">
        <head>
            <!-- Required meta tags -->
            <meta charset="utf-8">
            <meta name="viewport" content="width=device-width, initial-scale=1">
            <link rel="preconnect" href="https://fonts.googleapis.com">
            <link rel="preconnect" href="https://fonts.gstatic.com" crossorigin>
            <link href="https://fonts.googleapis.com/css2?family=Montserrat:wght@400;800&display=swap" rel="stylesheet">
            <!-- Bootstrap CSS -->
            <link href="https://cdn.jsdelivr.net/npm/bootstrap@5.1.3/dist/css/bootstrap.min.css" rel="stylesheet" integrity="sha384-1BmE4kWBq78iYhFldvKuhfTAU6auU8tT94WrHftjDbrCEXSU1oBoqyl2QvZ6jIW3" crossorigin="anonymous">
            <link rel="stylesheet" href="assets/css/style.css">
            <title>Team Profile</title>
        </head>
        <body>
            <header class="header">
                <div class="row">
                    <div class="col-lg-10 header_text text-center">
                        <h1>Our Team</h1>
                    </div>
                </div>
            </header>

            <main>
                <div class="container-fluid">
                    <div class="row text-center">
                    ${(() => {
                      for (let i = 1; i < teamArray.length; i++) {
                        return teamArray[i];
                      }
                    })()}
                    </div>
                </div>
            </main>

            <footer class="footer pt-3">
                Amazing Team Profile Generator
                <br />
                @ 2021. All Rights Reserved
            </footer>

            // Bootstrap
            <script src="https://cdn.jsdelivr.net/npm/bootstrap@5.1.3/dist/js/bootstrap.bundle.min.js" integrity="sha384-ka7Sk0Gln4gmtz2MlQnikT1wXgYsOg+OMhuP+IlRH9sENBO0LRn5q+8nbTov4+1p" crossorigin="anonymous"></script>
        </body>
    </html>`;
}

module.exports = generateHTML;
4

1 回答 1

0

我发现了问题。我在哪里：

if (confirmAddEmployee) {
  return addEmployee(teamArray);
} else {
  writeFile();
}

我需要返回 else 块：

if (confirmAddEmployee) {
  return addEmployee(teamArray);
} else {
  return writeFile();
}
于 2022-01-06T08:40:15.880 回答