Таблица начальной загрузки API-интерфейса - PullRequest
Новая
       7

Таблица начальной загрузки API-интерфейса

0 голосов
/ 14 мая 2018

Я пытаюсь создать таблицу и ввести свои данные, полученные от серверной части, которую я создал (спокойный API, использующий данные, введенные в SQL), и я даже не знаю, с чего начать.

Вот мой бэкэнд: 

const mysql = require('mysql');
const express = require('express');
const html = require('html');
const app = express();
const bodyParser = require('body-parser');
// const httpStatus = require('http-status-codes');

var urlencodedParser = bodyParser.urlencoded({
  extended: false
});

/*
var conCrad = mysql.createConnection({
  host: "localhost",
  user: "root",
  password: "",
  database: "crad",
});
*/

var conPoke = mysql.createConnection({
  host: "localhost",
  user: "root",
  password: "",
  database: "classnew"
});


conPoke.connect(function(err) {
  if (err) throw err;
});


app.use(function(req, res, next) {
  res.header("Access-Control-Allow-Origin", "*");
  res.header("Access-Control-Allow-Headers", "Origin, X-Requested-With, Content-Type, Accept");
  next();
});


var home = app.get('/', (req, res) => res.send('Welcome to my Pokemon API. We are using only gen 1 pokemon here! Use localhost:3000/pokemon to view your pokedex!'));

var pageOne = app.get('/pokemon', function(req, res) {
  console.log("--POKEDEX CONNECTED!");
  conPoke.query("SELECT * FROM pokemon", function(err, result) {
    if (err) throw err;
    else {
      res.json(result);
    };
  });
});

var submitted = app.post('/pokemon', urlencodedParser, function(req, res) {
  conPoke.query("INSERT INTO pokemon (name, type, immuneTo, strongResist, resists, weakTo, veryWeakTo, evolutionName) VALUES (" + "'" + req.body.name + "'" + ", " + "'" + req.body.type + "'" + ", " + "'" + req.body.immuneTo + "'" + "," + "'" + req.body.strongResist + "'" + "," + "'" + req.body.resists + "'" + "," + "'" + req.body.weakTo + "'" + "," + "'" + req.body.veryWeakTo + "'" + "," + "'" + req.body.evolutionName + "'" + ")", function(err, result) {
    if (err) throw err;
    else {
      console.log("----SUBMITTED!");
      res.redirect('/pokemon');
    };
  });
});

var info = app.get('/pokemon/:id', function(req, res) {
  var id = req.params.id;
  conPoke.query("SELECT * FROM pokemon WHERE id = " + id, function(err, result) {
    res.json(result);
    if (err) throw err;
    else {
      console.log("-----" + result);
    };
  });
});

var delRow = app.get('/pokemon/del/:id', function(req, res) {
  var delID = req.params.id;
  conPoke.query("DELETE FROM pokemon WHERE id = " + delID, function(err, result) {
    if (err) throw err;
    else {
      console.log("------REMOVED!");
    };
  });
  res.redirect('/pokemon');
});

app.listen(3000, () => console.log('-WELCOME'));

Все это работает как задумано.

Вот мой интерфейс: 

<!DOCTYPE html>
<html lang="en">

<head>
  <title>data</title>

  <meta charset="utf-8">
  <meta name="viewport" content="width=device-width, initial-scale=1">

  <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css">

  <body></body>
  <script type="text/javascript" src="https://ajax.aspnetcdn.com/ajax/jQuery/jquery-3.3.1.min.js"></script>
  <script type="text/javascript">
    var data;
    $(document).ready(function() {
      $.get("http://localhost:3000/pokemon", function(data, status) {
        console.log(status);
        for (var i = 0; i < data.length; i++) {
          console.log(data[i]);
        };
      });
    });
  </script>
</html>

(Извините, я знаю, что это выглядит немного грязно!) Я могу отправить данные на свой сервер с помощью страницы form.html, для которой я не публикую код.

Я не знаю, с чего начатьсоздавая таблицу для моего интерфейса.Я думаю, я бы добавил <table id = "table></table> в мой data.html, а затем использовал DOM, чтобы получить этот элемент ... Я не знаю, как будто я полностью потерян.

Есть ли где-нибудь, что может объяснить вложенность дляциклы и создание таблицы с ними?

1 Ответ

0 голосов
/ 14 мая 2018

Если вы хотите создать таблицу из JS: 

 var x = document.createElement("TABLE");
    x.setAttribute("id", "myTable");
    document.body.appendChild(x);

Чтобы создать элементы TR: 

var y = document.createElement("TR");
y.setAttribute("id", "myTr");
document.getElementById("myTable").appendChild(y);

Чтобы создать элементы TD: 

var z = document.createElement("TD");
var t = document.createTextNode("cell");
z.appendChild(t);
document.getElementById("myTr").appendChild(z);

Чтобы использовать цикл: 

<table>
    <thead><tr>
            <script>
            for(var j=1; j<=10; j++)
            {
                document.write("<th><label>"+i+"</label></th>");
            }
            </script>
            </tr>
    </thead>
    <tbody>
        <script type="text/javascript"> 
for(var i =1; i<=10; i++)
{
    document.write("<tr>");
    for(var k=1; k<=10; k++)
        {               
            document.write("<td></td>");    
        }
    document.write("</tr>"); 
}   
</script>
    </tbody>
</table>
...