使用 Express 运行服务器端 Javascript 版本答案

【问题标题】：Run a server side Javascript version with Express使用 Express 运行服务器端 Javascript 版本
【发布时间】：2018-03-26 16:53:18
【问题描述】：

最近我开始学习 web 编程并开始学习 javascript、node.js 和 express.js，我的目标是运行服务器端 javascript 函数（更准确地说是在 mysql db 中搜索某些内容的函数）当在 html 上按下了一个按钮。

我的目录结构是这样的：一个主目录，包含一个目录“页面”。包含 server.js、dbFunctions.js 和“公共”目录的页面。 Public 包含一个 index.html、style.css 和一些图片。

Server.js：

var express = require('express');
var app = express();
var path = require('path');
var port = 8888;

//allow to use static files
app.use(express.static("public"));

//start server

app.listen(port);
console.log("Server running on port" + port);

HTML 示例

<html>
 <head>
  <title>Test html</title>
 </head>
  <label for="key">Valid key:
   <input id="key" name="key" required>
  </label>
  <input type="checkbox" name="test" value="testval" checked>
  <button type="button">Button</button>
</html>

所以基本上 HTML 有一个输入字段、一个复选框和一个按钮，如果单击该按钮，它应该运行 dbFunctions.js 中带有参数的函数（取自字段，复选框为布尔值）on服务器端
我听说过有关 ajax 调用等的一些信息，但这些解释通常非常令人困惑。有没有“你好世界”的例子？

您好。

【问题讨论】：

使用express-generator 创建您的项目，它提供了一个开箱即用的完整服务器。
我可以推荐 Sails.js。它是 NodeJs，以 Express 为核心，但更容易上手。他们有优秀的样板代码。

标签： javascript html css node.js express

【解决方案1】：

听起来您对 JS 很陌生，所以我建议您将其分解为两个组件。

一个是您的服务器端代码，另一个是您的前端代码。正如您所提到的，您发现前端代码令人困惑，我建议您在服务器端代码正常工作后重新回到这一点。

为方便起见，您可以使用 express generator 之类的东西，它会为您准备所有内容。

然后您可以关注this guide，它将向您展示如何设置可以向其提出某种请求的路线。就像 POST、GET 或 PUT 请求（这是您的前端 AJAX 代码最终会调用的请求）。

我的建议是尝试让您的路线工作并使用Postman 之类的东西对其进行测试，这样您就不必担心同时构建前端。

当您对后端感到满意时，您可以开始研究如何从浏览器发出请求以访问您设置的新后端路由。

【讨论】：

【解决方案2】：

是的，看看这篇精彩的帖子

https://medium.com/@adnanrahic/hello-world-app-with-node-js-and-express-c1eb7cfa8a30

这是一个带有 express js 的示例 hello world node js 应用程序。

【讨论】：

【解决方案3】：

首先你需要让你的html页面调用你的服务器。为此，您可以：

将您的按钮放在表单中，并将您的表单操作设置为等于/getHelloWorld
创建一个javascript脚本并在ajax中调用你的/getHelloWorld

在您的服务器中，您需要像这样捕获路由：

Server.js：

var express = require('express');
var app = express();
var path = require('path');
var port = 8888;

//allow to use static files
app.use(express.static("public"));

app.get('/getHelloWorld', (req, res) => {
    res.send('hello world !');
});

//start server

app.listen(port);
console.log("Server running on port" + port);

当您调用这条路时，您的服务器将返回 Hello World：/getHelloWorld。

然后您只需将 route catch 中的代码替换为调用您的数据库并返回您的数据库响应的代码。

【讨论】：