mariadb 数据为空或未定义

所以我试着在我的数据库中发布，但是它说所有的值都是未定义的

<form action="/add-nova-uc" method="POST">
    <div class="formulario" class="form" id="form"> 
      <div class="addButtonDiv"><a href="../UC/novaUC.html" class="buttonLink"><button type="button" class="addNovoButton">Add Novo</button></a></div>

      <div class="formArea">
      <div class="formContainer">
        <div class="form-row">
          <input type="search" name="Selecionar CLiente" placeholder="Selecionar CLiente" id="nome" required="required" class="clientSearch">
        </div>
        
        <div class="form-row">
          <div>
            <input type="text" id="unidadeConsumidora" name="UC" required placeholder="Unidade Consumidora">
          </div>
          
          <div>
            <input type="text" id="localDeInstalação" name="Local de Instalação" required placeholder="Local de Instalação">
          </div>
        </div>
        <div class="form-row">
          <div>
            <input type="text" id="endereco" name="Endereço" required placeholder="Endereço">
          </div>
          
          <div>
            <input type="text" id="cep" name="Cep" required placeholder="Cep">
          </div>
        </div>
        <div class="form-row">
          <div>
            <input type="text" id="cidade" name="Cidade" required placeholder="Cidade">
          </div>
          
          <div>
            <select name="Estado" id="estado" required>
              <option value="0">Estado</option>
              <option value="1">Opção 1</option> <!--- Trocar Essas opções pela função pra pegar do backend os clientes-->
              <option value="2">Opção 2</option>
              <option value="3">Opção 3</option>
            </select>
          </div>
        </div>
        <div class="form-row">
          <div>
            <input type="text" id="classificacao" name="Classificação" required placeholder="Classificação">
          </div>
          
          <div>
            <input placeholder="Data de Leitura" type="text" onfocus="(this.type='date')" id="dataDeLeitura" />
          </div>
        </div>
        <div class="form-row">
          <div>
            <input type="text" id="tipoDeFornecimento" name="Tipo de Fornecimento" required placeholder="Tipo de Fornecimento">
          </div>
          
          <div>
            <select name="ICMS" id="ICMS" required>
              <option value="0">ICMS</option>
              <option value="1">Opção 1</option> <!--- Trocar Essas opções pela função pra pegar do backend os clientes-->
              <option value="2">Opção 2</option>
              <option value="3">Opção 3</option>
            </select>
          </div>
        </div>
        <div class="form-row">
          <div>
            <select name="Geração Distribuidae" id="geracaoDistribuida" required>
              <option value="0">Geração Distribuida</option>
              <option value="1">Opção 1</option> <!--- Trocar Essas opções pela função pra pegar do backend os clientes-->
              <option value="2">Opção 2</option>
              <option value="3">Opção 3</option>
            </select>
          </div>
          <div>
            <input type="text" id="demandaContratada" name="Demanda Contratada" required placeholder="Demanda Contratada">
          </div>
        </div>
        <div class="form-row">
          <select name="Opção tarifária" id="opcaoTarifaria" required>
            <option value="0">Opção tarifária</option>
            <option value="1">Opção 1</option> <!--- Trocar Essas opções pela função pra pegar do backend os clientes-->
            <option value="2">Opção 2</option>
            <option value="3">Opção 3</option>
          </select>
          </div>
        <div class="form-row">
        <select name="Concessionária" id="concessionaria" required>
          <option value="0">Concessionária</option>
          <option value="1">Opção 1</option> <!--- Trocar Essas opções pela função pra pegar do backend os clientes-->
          <option value="2">Opção 2</option>
          <option value="3">Opção 3</option>
        </select>
        </div>
        <div class="form-row">
      <div>
        <input type="text" id="Login" name="Login" required placeholder="Login">
      </div>
      
      <div>
        <input type="text" id="Senha" name="Senha" required placeholder="Senha">
      </div>
      </div>   
  </div>



  <div class="buttonContainer">
    <button type="submit" class="salvarButton">Salvar</button>
  </div>
    </div>
  </div>
  </form>

这是我的html的形式
这是前端JavaScript

const form = document.getElementById('form');

form.addEventListener('submit', async (event) => {
  event.preventDefault();

  const formData = new FormData(form);
  const endpoint = '/add-nova-uc';

  try {
    const response = await fetch(endpoint, {
      method: 'POST',
      body: formData
    });

    const result = await response.text();
    console.log(result);

  } catch (error) {
    console.error(error);

  }
});

这是对数据库的查询

app.post('/add-nova-uc', urlencodedParser, (req, res) => {
  //AQUI ELE PEGA OS DADOS DO BODY DA RESQUEST
  const {
    nome,
    unidadeConsumidora,
    localDeInstalacao,
    endereco,
    cep,
    cidade,
    estado,
    classificacao,
    dataDeLeitura,
    tipoDeFornecimento,
    ICMS,
    geracaoDistribuida,
    demandaContratada,
    opcaoTarifaria,
    concessionaria,
    Login,
    Senha,
  } = req.body;

  //FAZ A SQL QUERY PARA INSERIR OS DADOS
  const sql = `
    INSERT INTO unidadeconsumidora (
      ID,
      nome,
      unidadeConsumidora,
      localdeInstalacao,
      endereco,
      cep,
      cidade,
      estado,
      classificacao,
      dataDaLeitura,
      tipoDeFornecimento,
      icms,
      geracacaoDistribuida,
      demandaContratada,
      opcaoTarifaria,
      concessionaria,
      login,
      senha
    ) VALUES (
      '',
      ?,
      ?,
      ?,
      ?,
      ?,
      ?,
      ?,
      ?,
      ?,
      ?,
      ?,
      ?,
      ?,
      ?,
      ?,
      ?,
      ?
    )
  `;

  const unidadeConsumidoraFloat = !isNaN(unidadeConsumidora) ? parseFloat(unidadeConsumidora) : null;
  const cepFloat = !isNaN(cep) ? parseFloat(cep) : null; 

  const values = [
    String(nome),
    unidadeConsumidoraFloat,
    String(localDeInstalacao),
    String(endereco),
    cepFloat,
    String(cidade),
    String(estado),
    String(classificacao),
    String(dataDeLeitura),
    String(tipoDeFornecimento),
    String(ICMS),
    String(geracaoDistribuida),
    String(demandaContratada),
    String(opcaoTarifaria),
    String(concessionaria),
    String(Login),
    String(Senha),
  ];

  console.log(values);

  //EXECUTA A SQL QUERY
db.query(sql, values, (error, results, fields) => {
  if (error) {
    console.error('Error inserting new row into database: ', error);
    res.status(500).send('Error inserting new row into database: ' + error.message);
  } else {
    console.log('New row inserted into database with ID: ', results.insertId);
    res.status(200).send('New row inserted into database');
  }
});

});

这是它在控制台中返回的数组，错误是，我试图在数据库中创建一个新项。

'undefined', null,
  'undefined', 'undefined',
  null,        'undefined',
  'undefined', 'undefined',
  'undefined', 'undefined',
  '1',         'undefined',
  'undefined', 'undefined',
  'undefined', '123',
  '132'
]
Error inserting new row into database:  Error: ER_BAD_NULL_ERROR: Column 'unidadeConsumidora' cannot be null
    at Sequence._packetToError (C:\DEV\dashboard\node_modules\mysql\lib\protocol\sequences\Sequence.js:47:14)
    at Query.ErrorPacket 
(C:\DEV\dashboard\node_modules\mysql\lib\protocol\sequences\Query.js:79:18)
    at Protocol._parsePacket (C:\DEV\dashboard\node_modules\mysql\lib\protocol\Protocol.js:291:23)
    at Parser._parsePacket (C:\DEV\dashboard\node_modules\mysql\lib\protocol\Parser.js:433:10)
    at Parser.write (C:\DEV\dashboard\node_modules\mysql\lib\protocol\Parser.js:43:10)
    at Protocol.write (C:\DEV\dashboard\node_modules\mysql\lib\protocol\Protocol.js:38:16)
    at Socket.<anonymous> (C:\DEV\dashboard\node_modules\mysql\lib\Connection.js:88:28)
    at Socket.<anonymous> (C:\DEV\dashboard\node_modules\mysql\lib\Connection.js:526:10)
    at Socket.emit (node:events:513:28)
    at addChunk (node:internal/streams/readable:324:12)
    --------------------
    at Protocol._enqueue (C:\DEV\dashboard\node_modules\mysql\lib\protocol\Protocol.js:144:48)
    at Connection.query (C:\DEV\dashboard\node_modules\mysql\lib\Connection.js:198:25)
    at C:\DEV\dashboard\server\src\app.js:495:4
    at Layer.handle [as handle_request] (C:\DEV\dashboard\node_modules\express\lib\router\layer.js:95:5)
    at next (C:\DEV\dashboard\node_modules\express\lib\router\route.js:144:13)
    at urlencodedParser (C:\DEV\dashboard\node_modules\body-parser\lib\types\urlencoded.js:82:7)
    at Layer.handle [as handle_request] (C:\DEV\dashboard\node_modules\express\lib\router\layer.js:95:5)
    at next (C:\DEV\dashboard\node_modules\express\lib\router\route.js:144:13)
    at Route.dispatch (C:\DEV\dashboard\node_modules\express\lib\router\route.js:114:3)
    at Layer.handle [as handle_request] (C:\DEV\dashboard\node_modules\express\lib\router\layer.js:95:5) {
  code: 'ER_BAD_NULL_ERROR',
  errno: 1048,
  sqlMessage: "Column 'unidadeConsumidora' cannot be null",
  sqlState: '23000',
  index: 0,
  sql: '\n' +
    '    INSERT INTO unidadeconsumidora (\n' +
    '      ID,\n' +
    '      nome,\n' +
    '      unidadeConsumidora,\n' +
    '      localdeInstalacao,\n' +
    '      endereco,\n' +
    '      cep,\n' +
    '      cidade,\n' +
    '      estado,\n' +
    '      classificacao,\n' +
    '      dataDaLeitura,\n' +
    '      tipoDeFornecimento,\n' +
    '      icms,\n' +
    '      geracacaoDistribuida,\n' +
    '      demandaContratada,\n' +
    '      opcaoTarifaria,\n' +
    '      concessionaria,\n' +
    '      login,\n' +
    '      senha\n' +
    '    ) VALUES (\n' +
    "      '',\n" +
    "      'undefined',\n" +
    '      NULL,\n' +
    "      'undefined',\n" +
    "      'undefined',\n" +
    '      NULL,\n' +
    "      'undefined',\n" +
    "      'undefined',\n" +
    "      'undefined',\n" +
    "      'undefined',\n" +
    "      'undefined',\n" +
    "      '1',\n" +
    "      'undefined',\n" +
    "      'undefined',\n" +
    "      'undefined',\n" +
    "      'undefined',\n" +
    "      '123',\n" +
    "      '132'\n" +
    '    )\n' +
    '  '

我已经编辑了代码，查询工作正常，问题是前端Javascript

我只需要更改字段的名称

<div class="formArea">
  <div class="formContainer">
    <div class="form-row">
      <select type="select" name="cliente_id" placeholder="Selecionar CLiente" id="nome" required="required" class="clientSearch">
        <% client.forEach(client => { %>
          <option value="<%= client.id %>">
            <%= client.nome %>
          </option>
        <% }) %>
      </select>
    </div>
    
    <div class="form-row">
      <div>
        <input type="text" id="unidadeConsumidora" name="unidadeConsumidora" required placeholder="Unidade Consumidora">
      </div>
      
      <div>
        <input type="text" id="localDeInstalação" name="localDeInstalacao" required placeholder="Local de Instalação">
      </div>
    </div>
    <div class="form-row">
      <div>
        <input type="text" id="endereco" name="endereco" required placeholder="Endereço">
      </div>
      
      <div>
        <input type="text" id="cep" name="cep" required placeholder="Cep">
      </div>
    </div>
    <div class="form-row">
      <div>
        <input type="text" id="cidade" name="cidade" required placeholder="Cidade">
      </div>
      
      <div>
        <select id="estado" name="estado">
          <option value="AC">Acre</option>
          <option value="AL">Alagoas</option>
          <option value="AP">Amapá</option>
          <option value="AM">Amazonas</option>
          <option value="BA">Bahia</option>
          <option value="CE">Ceará</option>
          <option value="DF">Distrito Federal</option>
          <option value="ES">Espírito Santo</option>
          <option value="GO">Goiás</option>
          <option value="MA">Maranhão</option>
          <option value="MT">Mato Grosso</option>
          <option value="MS">Mato Grosso do Sul</option>
          <option value="MG">Minas Gerais</option>
          <option value="PA">Pará</option>
          <option value="PB">Paraíba</option>
          <option value="PR">Paraná</option>
          <option value="PE">Pernambuco</option>
          <option value="PI">Piauí</option>
          <option value="RJ">Rio de Janeiro</option>
          <option value="RN">Rio Grande do Norte</option>
          <option value="RS">Rio Grande do Sul</option>
          <option value="RO">Rondônia</option>
          <option value="RR">Roraima</option>
          <option value="SC">Santa Catarina</option>
          <option value="SP">São Paulo</option>
          <option value="SE">Sergipe</option>
          <option value="TO">Tocantins</option>
          <option value="EX">Estrangeiro</option>
      </select>
      </div>
    </div>
    <div class="form-row">
      <div>
        <input type="text" id="classificacao" name="classificacao" required placeholder="Classificação">
      </div>
      
      <div>
        <input placeholder="Data de Leitura" type="text" 
        onfocus="(this.type='date', this.value=this.value.split('/').reverse().join('-'))"
        onblur="(this.type='text', this.value=this.value.split('-').reverse().join('/'))"
        onchange="if (!this.value) {this.type='text'; this.value=''}" 
        id="dataDeLeitura" name="dataDeLeitura">
      </div>
    </div>
    <div class="form-row">
      <div>
        <input type="text" id="tipoDeFornecimento" name="tipoDeFornecimento" required placeholder="Tipo de Fornecimento">
      </div>
      
      <div>
        <select name="ICMS" id="ICMS" required>
          <option value="0">ICMS</option>
          <option value="1">12%</option> <!--- Trocar Essas opções pela função pra pegar do backend os clientes-->
          <option value="2">17%</option>
        </select>
      </div>
    </div>
    <div class="form-row">
      <div>
        <select name="geracaoDistribuida" id="geracaoDistribuida" required>
          <option value="0">Geração Distribuida</option>
          <option value="1">Sim</option> <!--- Trocar Essas opções pela função pra pegar do backend os clientes-->
          <option value="2">Não</option>
        </select>
      </div>
      <div>
        <input type="text" id="demandaContratada" name="demandaContratada" required placeholder="Demanda Contratada">
      </div>
    </div>
    <div class="form-row">
      <select name="opcaoTarifaria" id="opcaoTarifaria" required>
        <option value="0">Opção tarifária</option>
        <option value="THS - VERDE">THS - VERDE</option> 
        <option value="THS - AZUL">THS - AZUL</option>
        <option value="OPT - B">OPT - B</option>
        <opton value="GRUPO B">GRUPO B</opton>
      </select>
      </div>
    <div class="form-row">
    <select name="concessionaria" id="concessionaria" required>
      <option value="0">Concessionária</option>
      <option value="THS - VERDE">THS - VERDE</option> 
      <option value="THS - AZUL">THS - AZUL</option>
      <option value="OPT - B">OPT - B</option>
      <opton value="GRUPO B">GRUPO B</opton>
    </select>
    </div>
    <div class="form-row">
  <div>

mariadb 数据为空或未定义

1条答案

相关问题

热门标签

最新问答