Question

我正在尝试创建一个表并输入我从我创建的后端收到的数据（使用输入SQL的数据的一个安静的API），我甚至不知道从哪里开始。

这是我的后端：

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来获取该元素......我不知道，就像我完全迷失了一样。

是否有任何地方可以解释嵌套for循环并使用它们创建表？

Answer 1

如果你想从JS创建一个表：

sudo pip3 install matplotlib

创建TR元素：

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

创建TD元素：

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

使用循环：

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

前端API引导程序表

1 个答案: