时间戳

首页 > 解决方案 > 前端 API 引导表

javascript - 前端 API 引导表

问题描述

我正在尝试创建一个表并输入我从我创建的后端接收到的数据（一个使用输入 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 循环并用它们创建一个表吗？

标签： javascriptfor-loophtml-tablefrontend

解决方案

如果要从 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>

推荐阅读