Is there any way to set up a CRUD with boostrap, javascript and node.js?

Hello everyone, I've been studying programming for a year now and I'm having trouble finding a way to build a crud that has javascript, Bootstrap and node.js? I did not find any tutorial to help me in this case, until I know how to create the system, with a login screen and a CRUD type:

                 

<nome>BANCO DE HORAS</nome>

<link href="css/bootstrap.min.css" rel="stylesheet">
<link href="css/estilos.css" rel="stylesheet">

<!-- HTML5 shim and Respond.js for IE8 support of HTML5 elements and media queries -->
<!-- WARNING: Respond.js doesn't work if you view the page via file:// -->
<!--[if lt IE 9]>
  <script src="https://oss.maxcdn.com/html5shiv/3.7.3/html5shiv.min.js"></script><scriptsrc="https://oss.maxcdn.com/respond/1.4.2/respond.min.js"></script>
<![endif]-->

  

<div class="container">
  <div class="row">
    <div class="col-md-6">
      <h2>CADASTRO</h2>
    </div><!--// .col-md-6 -->
  </div><!--// .row -->

  <nav id="navDefault"><h2><a href="cadastrar.html"> Menu</a></h2>


  </nav>

  <div class="row">
    <div class="col-md-6">
      <table id="funcionarioTable" class="table table-bordered table-condensed table-striped">
        <thead>
          <tr>
            <th>NOME DO FUNCIONÁRIO</th>
            <th>ÁREA</th>
            <th>CARGA HORÁRIA</th>
            <th>Editar</th>
            <th>Eliminar</th>
          </tr>
        </thead>
      </table>
    </div><!--// .col-md-6 -->

    <div class="col-md-6">
      <div class="panel panel-primary">
        <div class="panel-heading">Dados do Livro</div>
        <div class="panel-body">
          <form>
            <div class="form-group">
              <label for="nome">nome do funcionário</label>
              <input type="text" name="nome" id="funcionario_nome" class="form-control input-lg" placeholder="funcionário">
            </div>

            <div class="form-group">
              <label for="area">area</label>
              <input type="text" name="area" id="funcionario_area" class="form-control input-lg" placeholder="area">
            </div>

            <div class="form-group">
              <label for="cargaHoraria">carga horária</label>
              <input type="text" name="cargaHoraria" id="funcionario_cargaHoraria" class="form-control input-lg" placeholder="carga horaria">
            </div>

            <div class="form-group">
              <button type="button" id="updateButton" onclick="funcionarioUpdate();" class="btn btn-lg btn-primary">
                ADICIONAR FUNCIONARIO
              </button>
            </div>
          </form>
        </div>
      </div><!--// .panel -->
    </div><!--// .col-md -->
  </div><!--// .row -->
</div><!--// .container -->

<script src="js/jquery-2.2.2.min.js"></script>
<script src="js/bootstrap.min.js"></script>
<script type="text/javascript">
  // Próximo ID para adicionar um novo livro
  var _nextId = 1;
  // ID do livro que está sendo editado
  var _activeId = 0;

  function formClear(){
    $("#funcionario_nome").val("");
    $("#funcionario_area").val("");
    $("#funcionario_cargaHoraria").val("");
  }

  function funcionarioBuildTableRow(id){
    var row = "<tr>" +
      "<td>" + $("#funcionario_nome").val() + "</td>" +
      "<td>" + $("#funcionario_area").val() + "</td>" +
      "<td>" + $("#funcionario_cargaHoraria").val() + "</td>" +
      "<td>" +
        "<button type='button' " +
          "onclick='funcionarioDisplay(this);' " +
          "class='btn btn-default'" +
          "data-id='" + id + "'>" +
          "<span class='glyphicon glyphicon-edit'></span>" +
        "</button>" +
      "</td>" +
      "<td>" +
        "<button type='button' " +
          "onclick='funcionarioDelete(this);' " +
          "class='btn btn-default'" +
          "data-id='" + id + "'>" +
          "<span class='glyphicon glyphicon-remove'></span>" +
        "</button>" +
      "</td>" +
    "</tr>"

    return row;
  }

  function funcionarioAddToTable(){
    // Primeiro verifica se a tag <tbody> existe. Adiciona um caso não exista
    if ($("#funcionarioTable tbody").length == 0){
      $("#funcionarioTable").append("<tbody></tbody>");
    }

    // Adiciona Livro na Tabela
    $("#funcionarioTable tbody").append(funcionarioBuildTableRow(_nextId));

    // Incrementamos o nextId
    _nextId += 1;
  }

  function funcionarioDelete(button_delete){
    $(button_delete).parents("tr").remove();
  }

  function funcionarioDisplay(button_edit){
    var row = $(button_edit).parents("tr");
    var cols = row.children("td");

    _activeId = $($(cols[3]).children("button")[0]).data("id");

    $("#funcionario_nome").val($(cols[0]).text());
    $("#funcionario_area").val($(cols[1]).text());
    $("#funcionario_cargaHoraria").val($(cols[2]).text());

    // Mudar o texto do Botão
    $("#updateButton").text("Actualizar");
  }

  function funcionarioUpdateInTable(id){
    // Encontra o livro na tabela
    var row = $("#funcionarioTable button[data-id='" + id + "']").parents("tr")[0];

    // Adiciona a linha modifica na tabela
    $(row).after(funcionarioBuildTableRow());

    // Remover a linha antiga
    $(row).remove();

    // Limpar o formulário
    formClear();

    // Mudar o texto do Botão
    $("#updateButton").text("Adicionar Livro");
  }

  function funcionarioUpdate(){
    if ($("#funcionario_nome").val() != null && $("#funcionario_nome").val() != ''){
      if ($("#updateButton").text() == "Actualizar"){
        funcionarioUpdateInTable(_activeId);
      } else {
        // Adiciona o Livro na Tabela
        funcionarioAddToTable();
      }

      // Limpa o formulário
      formClear();

      // Mantém o focu no campo Título
      $("#funcionario_nome").focus();
    }
  }

</script>