如何从服务端传数据到客户端的js文件？

Question

I want to transmit my data to client-side JS file from the server, but right now the browser displays data on its main screen like when we use innerHTML property:我想将我的数据从服务器传输到客户端 JS 文件，但现在浏览器在其主屏幕上显示数据，就像我们使用innerHTML属性时一样：

I have checked bunch of express.js tutorials but seems like there are no way to send (add, technically) data to the client side js file.我检查了一堆 express.js 教程，但似乎没有办法将数据发送（从技术上讲，添加）到客户端 js 文件。

This is a diagram what I'm looking for:这是我正在寻找的图表：

[open the webpage] -> [(in server) get data from database] -> [send data to client-side js file] -> // do stuff more in the client-side [打开网页] -> [（在服务器中）从数据库中获取数据] -> [将数据发送到客户端 js 文件] -> // 在客户端做更多的事情

Any tips to resolve this problem?有解决此问题的提示吗？

This is my code:这是我的代码：

// Makes display the client-side html, temporary disabled.
// app.use(express.static('client'));

// Queries
const QUERIES = {
  prev: 'SELECT * FROM en.prevstore',
  curr: 'SELECT * FROM en.currstore',
  next: 'SELECT * FROM en.nextstore',
  samp: 'SELECT * FROM en.sample'
}

// Create connection
const db = mysql.createConnection({
  host: 'localhost',
  user: 'root',
  password: 'password123',
  database: 'en'
});

// Router
app.use('/', (req, res) => {
  db.query(QUERIES.samp, (err, results) => {
    let ternary = err ? console.error(err) : res.json(results);
  })
})

Client-Side HTML (request from the comment)客户端 HTML（来自评论的请求）

<!DOCTYPE html>
<html lang="en" dir="ltr">
  <head>
    <meta charset="utf-8">
    <title></title>
  </head>
  <body>
    <div class="quotes">
      should be filled as quotes of data from database
    </div>
    <div class="color">
      should be filled as color of data from database
    </div>
    <script type="text/javascript" src="./index.js"></script>
  </body>
</html>

Client-Side JS:客户端JS：

function getWord() {
  fetch('http://localhost:4000')
  .then(res => res.json())
  .then(({data}) => console.log(data))
}
getWord() // I know it won't work but tried for just in case.

Answer 1

When you tried to load localhost:4000 on your browser and it is requesting your / endpoint.当您尝试在浏览器上加载localhost:4000并且它正在请求您的/端点时。

Your server has to return your static files (index.html &...) on this endpoint.您的服务器必须在此端点上返回您的静态文件（index.html &...）。

app.use(express.static('public'));
// public or any static directory containing your index.html, .js, images ...

Then you can move your / endpoint to something more explicit like /quotes然后你可以将你的/端点移动到更明确的东西，比如/quotes

app.use('/quotes', (req, res) => {
  db.query(QUERIES.samp, (err, results) => {
    if (err) {
      console.log('error', err);
      res.status(500);
      return res.end(); // closing the response /!\ IMPORTANT
    }
    res.json(results);
  })
})

On your client-side you will have something like that:在您的客户端，您将拥有类似的东西：

function getWord() {
  fetch('http://localhost:4000/quotes')
  .then(res => res.json())
  .then(data => console.log(data))
}

如何从服务端传数据到客户端的js文件？

问题描述

1 个解决方案

解决方案1
3 已采纳 2020-01-22 10:08:10

如何从服务端传数据到客户端的js文件？

问题描述

1 个解决方案

解决方案1 3 已采纳 2020-01-22 10:08:10

解决方案1
3 已采纳 2020-01-22 10:08:10