Question

我有一个html页面，一旦加载，就必须显示数据库中的数据，分为多行和四列。我可以用随机数据循环它。我无法得到甚至知道如何去获取数据到网页。我已经阅读了一些有趣的发现，例如socket.io，fs但仍然没有得到它。

以下是我在客户端的代码。

帮助一个关于如何连接服务器端和客户端的示例将有很大帮助。

我正在使用快递js，mongodb，html，css和javascript。

＆＃13;

* {
  margin: 0px;
}

#admin {
  margin-top: 100px;
  font-family: "Times New Roman";
  font-size: 14px;
  font-weight: bold;
  margin-left: 400px;
  line-height: 30px;
}

body {
  background-color: white;
  font-family: "Intro-Inline";
}


/*wrapper for the main container*/

#wrapper {
  margin: auto;
}


/*all divs under this container to be maintained in aspect*/

#container {
  position: absolute;
  margin: 0px auto;
}


/*div for menu*/

.divmenu {
  width: 50px;
  height: 50px;
  float: left;
  margin-left: 0vh;
  border-width: 4px;
  border-style: solid border-color: green;
}


/*css for the body*/

#bodydiv {
  margin: 0 auto;
  padding: 0px;
}

#leftdiv {
  margin-top: 30vh;
  margin-left: 30vh;
  width: 80vh;
  height: 75vh;
  float: left;
  /* border-width: 4px;
      border-style: solid;
      border-color: yellow;*/
}

.innerdiv {
  align-content: center;
  align-self: center;
  width: 80vh;
  /* height:20vh;*/
  background-color: gray;
  border-width: 1px;
  border-style: solid;
  display: inline-block;
  border-color: black;
}

#tabDiv {
  /* align-content: center;
      align-self:  center;*/
  width: 80vh;
  /* height:20vh;
      background-color: gray;*/
  /*  border-width: 1px;
      border-style: solid;
      border-color: black;*/
  display: inline-block;
}

.innertop {
  z-index: 99;
  position: fixed;
  width: 34.5vh;
  height: 5vh;
  background-color: black;
  color: white;
  font-stretch: extra-expanded;
  font-size: 25px;
  line-height: 30px;
  border-width: 1px;
  border-style: solid;
  border-color: black;
}

.innerbottom {
  z-index: 99;
  position: fixed;
  width: 35vh;
  height: 5vh;
  background-color: gray;
  color: white;
  font-stretch: extra-expanded;
  font-size: 28px;
  line-height: 30px;
}


/*div working for contents of music*/

.contentdiv {
  width: 20vh;
  height: 15vh;
  margin-top: 2vh;
  display: inline-block;
  margin-left: 1vh;
}

.arrowdiv {
  width: 8vh;
  height: 19.8vh;
  margin: 0vh;
  line-height: 1vh;
  vertical-align: middle;
  background-color: #131212;
  display: inline-block;
  float: left;
}

.ccontentdiv {
  width: 20vh;
  height: 15vh;
  line-height: 2vh;
  margin-top: 2vh;
  margin-left: 1vh;
  background-color: red;
  display: inline-block;
}

.rcontentdiv {
  width: 20vh;
  height: 15vh;
  line-height: 2vh;
  margin-top: 2vh;
  margin-left: 1vh;
  background-color: beige;
  text-align: center;
  display: inline-block;
}

.imgdiv {
  margin-top: 50px;
  margin-left: 10px;
  width: 20px;
  height: 20px;
}


/*div on mouseover*/

.leftsub {
  width: 60px;
  height: 10px;
  float: left;
  border-width: 2px;
  border-style: solid;
  border-color: green;
}

.popup {
  width: 145px;
  height: 40px;
  float: right;
  text-align: center;
  display: inline-block;
  vertical-align: middle;
  margin-right: 50px;
  line-height: 50%;
}

.col1 {
  width: 35px;
  height: 40px;
  text-align: center;
  display: inline-block;
  background-color: black;
  color: white;
  border-right: 1px solid white;
}

.col2 {
  width: 35px;
  height: 40px;
  text-align: center;
  display: inline-block;
  background-color: black;
  color: white;
}

.col3 {
  width: 35px;
  height: 40px;
  text-align: center;
  display: inline-block;
  background-color: black;
  color: white;
  border-left: 1px solid white;
}

.col4 {
  width: 20px;
  height: 30px;
  margin-bottom: 3px;
  margin-top: 5px;
  text-align: center;
  display: inline-block;
}

.img {
  max-width: 180px;
}

＆＃13;

<!DOCTYPE html>
<html>

<head>
  <title>TODO supply a title</title>
  <link href="/css/index.css" rel="Stylesheet" />
  <script src="/javascript/index.js" type="text/javascript"></script>
  <script>
    var popup = document.createElement('div'); //div
    popup.className = "popup";
    var innercol = ["col1", "col2", "col3", "col4"];
    for (j = 0; j < 3; j++) {
      var colone = document.createElement('div'); //div
      var imgcol = document.getElementById("col4");
      var colimg = document.createElement('img');
      colimg.className = "col4";
      colimg.src = "images/blackarrow.png";
      colone.className = innercol[j];
      popup.appendChild(colone);
    }

    popup.appendChild(colimg);

    function multidivs() {
      var columnnames = ["arrowdiv", "contentdiv", "ccontentdiv", "rcontentdiv"]; //styles for innerdiv
      var columnids = ["arrow", "content", "ccontent", "rcontent"];
      var rows = 100;
      var col = 4;
      for (x = 0; x < rows; x++) {
        var row = document.createElement('div');
        row.className = "innerdiv";

        for (var i = 0; i < col; i++) {
          var columndiv = document.createElement('div'); //div
          columndiv.className = columnnames[i];
          columndiv.id = columnids[i];
          //  var socket =io();
          //socket.on('content', function(msg){
          //console.log(msg);
          //document.getElementById("content").innerHTML=msg;
          //})

          if (columndiv.className === columnnames[0]) {
            attachImage(columndiv);

          }

          row.appendChild(columndiv);

        }
        document.getElementById('leftdiv').appendChild(row);
      }
      //  alert("total rows"+x);
    }
    //attach arrow image onload and thn on mouseover and mouseout
    function attachImage(columndiv) {
      var img = document.createElement('img');
      img.className = "imgdiv";
      img.src = "images/orangearrow.png";
      columndiv.appendChild(img);

      domouseover(); /*this will change the arrow directions and also add popup*/
      domouseout(); /*take out popup*/
      //onmouseover changes the arrow
      function domouseover() {
        columndiv.addEventListener("mouseover", function() {
          img.src = "images/whitearrow.png";
          columndiv.appendChild(img);

          columndiv.appendChild(popup);
        });
      }

      function domouseout() {
        columndiv.addEventListener("mouseout", function() {
          img.src = "images/orangearrow.png";
          columndiv.removeChild(popup);
        });
      }

    }
  </script>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
</head>

<body>
  <div id="wrapper">
    <div id="container">
      <form action="">
        <div id="bodydiv">
          <div id="leftdiv">
            <script type="text/javascript">
              multidivs();
            </script>
          </div>
        </div>
      </form>
    </div>
  </div>
</body>

</html>

＆＃13;

Answer 1

基本上你想从服务器获取数据并在客户端/浏览器上呈现它你应该使用任何httpclient库..比如AJAX或axios。以json格式交换数据。

axios axios documentation here
AJAX ajax examples

从服务器端检索数据并显示在网页

1 个答案: