Olá!
Ao rodar o browser-sync pela primeira vez a página HTML foi carregada, porém recebi o seguinte erro no console do navegador:
Error Loading module from “http://localhost:5000/admin/controller/services/customer-service.js” was blocked because of a disallowed MIME type (“text/html”).[Learn More] customer_list.html
Warning Loading failed for the module with source “http://localhost:5000/admin/controller/services/customer-service.js”. customer_list.html:74:75 O comando que usei para rodar o brouser-sync foi: npx browser-sync start --server --file . --host --port 5000 --startPath admin/pages/customer_list.html
A URL no navegador está assim:
http://localhost:5000/admin/pages/customer_list.html
Seguem os códigos:
- customer_list.html
<!DOCTYPE html>
<html lang="pt">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Doguito Petshop | Customers</title>
<link href="https://fonts.googleapis.com/css2?family=Montserrat:wght@300;400&display=swap" rel="stylesheet">
<link href="https://fonts.googleapis.com/css2?family=Pacifico&display=swap" rel="stylesheet">
<link rel="stylesheet" href="../assets/css/base/base.css">
<link rel="stylesheet" href="../assets/css/componentes/cabecalho.css">
<link rel="stylesheet" href="../assets/css/lista_cliente.css">
<link rel="stylesheet" href="../assets/css/componentes/tabela.css">
<link rel="stylesheet" href="../assets/css/componentes/botao.css">
<link rel="stylesheet" href="../assets/css/componentes/modal.css">
</head>
<body>
<header class="cabecalho container">
<img src="../assets/img/doguitoadm.svg" alt="Logo Doguito" class="cabecalho__logo">
<nav>
<ul class="cabecalho__lista-navegacao">
<li class="cabecalho__link"><a href="#">Dashboard</a></li>
<li class="cabecalho__link"><a href="#">Products</a></li>
<li class="cabecalho__link"><a href="#">Customers</a></li>
<li class="cabecalho__link"><a href="#">Pets</a></li>
</ul>
</nav>
</header>
<main class="clientes-container">
<table class="tabela">
<thead>
<tr>
<th class="tabela__coluna--p">Name</th>
<th class="tabela__coluna--g">Email</th>
<th class="tabela__coluna--m tabela__alinhamento--direita"><a href="./cadastra_cliente.html" class="botao-simples botao-simples--adicionar">New Customer</a></th>
</tr>
</thead>
<tbody data-table>
</tbody>
</table>
<div class="modal-container modal--fechado">
<article class="modal">
<h2 class="modal__titulo">
Delete
</h2>
<button class="modal__fechar">X</button>
<p class="modal__texto">Do you want to delete this entry?</p>
<div class="modal__botao-container">
<button class="modal__botao modal__botao--confirmar">Yes</button>
<button class="modal__botao">No</button>
</div>
</article>
</div>
</main>
<script type="module" src="../controller//customerList-controller.js"></script>
</body>
</html>
customerList-controller.js
import custumerService from '../services/customer-service.js'
const createNewLine = (name, email) => {
const newLine = document.createElement('tr')
const content = `
<td class="td" data-td>${name}</td>
<td>${email}</td>
<td>
<ul class="tabela__botoes-controle">
<li><a href="../pages/customers_edit.html" class="botao-simples botao-simples--editar">Edit</a></li>
<li><button class="botao-simples botao-simples--excluir" type="button">Delete</button></li>
</ul>
</td>
`
newLine.innerHTML = content
return newLine
}
const table = document.querySelector('[data-table]')
customerService.customerList()
.then(data => {
data.forEach(element => {
table.appendChild(createNewLine(element.name, element.email))
})})
customer-service.js
const customerList = () => {
return fetch(`http://localhost:3000/profile`)
.then( response => {
return response.json()
})
}
export const customerService = {
customerList
}
O diretório do projeto está ssim:
.admin
- controler customerList-controler.js
- pages customer_list.html
- service customer-service.js
Obrigado.
