javascript - 围绕 Bing 翻译和 Node.js 构建项目

Question

我正在尝试构建一个 Web 应用程序，允许用户按下按钮并使用 Bing 翻译 api 翻译一段文本。我尝试通过脚本标签运行translator.js 文件，但我当然无法通过客户端html 页面运行此node.js 代码。设计这个应用程序的正确方法是什么？我唯一的选择是使用 requirejs 之类的东西吗？我还有一个使用 Express 构建的 app.js 文件，我从中运行应用程序。抱歉发布了很多代码，我想让人们了解我的应用程序的结构。我的经验有限，所以我对如何设计应用程序的这一部分感到有些迷失。我不期望任何人为我编写代码，而只是指出我可以研究的技术方向，以便我可以正确构建它。

这是我的 Node.js 翻译请求，名为translator.js

const request = require('request');
const uuidv4 = require('uuid/v4');


var key_var = 'TRANSLATOR_TEXT_SUBSCRIPTION_KEY';
if (!process.env[key_var]) {
    throw new Error('Please set/export the following environment variable: ' + key_var);
}
var subscriptionKey = process.env[key_var];
var endpoint_var = 'TRANSLATOR_TEXT_ENDPOINT';
if (!process.env[endpoint_var]) {
    throw new Error('Please set/export the following environment variable: ' + endpoint_var);
}
var endpoint = process.env[endpoint_var];



let options = {
    method: 'POST',
    baseUrl: endpoint,
    url: 'translate',
    qs: {
      'api-version': '3.0',
      'to': ['en']
    },
    headers: {
      'Ocp-Apim-Subscription-Key': subscriptionKey,
      'Content-type': 'application/json',
      'X-ClientTraceId': uuidv4().toString()
    },
    body: [{
          'text': 'hallo welt'
    }],
    json: true,
};



function displayBingTranslate() {
  request(options, function(err, res, body){
    document.querySelector("#bingTranslateOutput") = JSON.stringify(body, null, 4);
  });
};


var accessBingTranslate = document.getElementById("accessBingTranslateButton");

accessBingTranslate.addEventListener("click", function() {
  displayBingTranslate();
});

这是我的 html

    <!-- Section to view online translation -->
    <div class="container">
      <div class="row">
          <div class="col-lg-12 p-0">
            <button 
              class="btn btn-outline-dark btn-sm mb-1"
                  id = "accessBingTranslateButton">Translate Flashcard</button>
                <div class="row m-0 p-0">
                  <div id="bingTranslateOutput" class="col-lg-12 m-0">
                  </div>


    <script>

    // Overall list of flashcards.
    var flashcardList = {

      flashcards: [],

      // Adds a flashcard object to Flashcard array.
      addFlashcard: function(fcTextQuestion, fcTextTranslated) {
        this.flashcards.push({
          fcTextQuestion: fcTextQuestion,
          fcTextTranslated: fcTextTranslated
        });
      }, 

    };

    // Add flashcards on load.
    var flashcardsDB = <%- JSON.stringify(flashcardsDB) %>;
    console.log("the DB:", flashcardsDB);
    flashcardsDB.forEach(function(fcardDbToAdd){
      flashcardList.addFlashcard(fcardDbToAdd.question, fcardDbToAdd.translation);
    });
    document.querySelector("#displayFlashcardTotal").textContent = flashcardList.flashcards.length;

    console.log("the rest:",flashcardList.flashcards);

    var currentFlashcard = 0;


    </script>



<script src="/scripts/translator.js"></script>       


      </body>


</html>

这是我的 app.js

var express = require("express");
var app = express();
var bodyParser = require("body-parser");
var mongoose = require("mongoose");
var methodOverride = require("method-override");

// Fix mongoose deprecations
mongoose.set('useNewUrlParser', true);
mongoose.set('useFindAndModify', false);
mongoose.set('useCreateIndex', true);
mongoose.set('useUnifiedTopology', true);

// Connect to database.
var url = "///////";
mongoose.connect(url, {
    useNewUrlParser: true,
    useCreateIndex: true,
}).then(() => {
    console.log("connected to mongoDB");
}).catch(err => {
    console.log("Error:", err.message);
});
app.use(bodyParser.urlencoded({extended: true}));
app.use(express.static(__dirname + '/public'));
// Set 'views' directory for any views 
// being rendered res.render()
app.set("view engine", "ejs");

// Override HTTP verbs if necessary.
app.use(methodOverride("_method"));

var flashcardSchema = new mongoose.Schema ({
    question: String,
    translation: String
});

//creates model with above schema and has methods such as .find etc.
var Flashcard = mongoose.model("Flashcard", flashcardSchema); 

app.get('/', (req, res) => {
  Flashcard.find({}, function(err, allFlashcards){
    if(err){
      console.log(err);
    } else {
      res.render("home", {flashcardsDB: allFlashcards});
    }
  }); 
});

// Post to an input action
app.post("/flashcards", function(req, res) {
    var question = req.body.question;
    var translation = req.body.translation;
    var newFlashcard = {question: question, translation: translation};
    console.log(newFlashcard);
    Flashcard.create(newFlashcard, function(err, newlyCreated){
        if(err){
            console.log(err);
        } else {
            res.redirect("/flashcards");
        }
    });
});

// Show info.
app.get("/info",function (req, res) {
    res.render("info");
});

// Show all flashcards
app.get("/flashcards", function(req, res){
    Flashcard.find({}, function(err, allFlashcards){
      if(err){
        console.log(err);
      } else {
        res.render("flashcards", {flashcards: allFlashcards});
      }
    }); 
});

// Show form to create new campground
app.get("/new", function(req, res){
  res.render("new");  
});

// Edit flashcard
app.get("/flashcards/:id/edit", function(req, res){
    Flashcard.findById(req.params.id, function(err, selectedFlashcard){
      if(err){
            req.flash("error", "Flashcard not found!");
          } else {
            res.render("edit", {flashcard: selectedFlashcard});
          }
    });  
});

// Update flashcard
app.put("/flashcards/:id", function(req, res){
  Flashcard.findByIdAndUpdate(req.params.id, req.body.flashcard, function(err, updatedFlashcard){
    if(err){
      res.redirect("/flashcards");
    } else {
      res.redirect("/flashcards");
    }
  });  
});

// Destroy Flashcard
app.delete("/flashcards/:id", function(req, res){
    Flashcard.findByIdAndRemove(req.params.id, function(err){
      if(err){
            res.redirect("back");
          } else {
        //req.flash("success", "flashcard deleted.");
            res.redirect("/flashcards");
          }
    });
});

app.listen(3000, () => console.log("Flashcard app is listening"));

Answer 1

我认为最好的方法是将translator.js传递到node.js服务器。在express上创建一条用于翻译的路由，通过该路由您将调用translator.js并返回结果。然后，在您的 html 页面上，不要直接运行 Translator.js，而是向您的服务器发送请求并传递必要的数据。

在你的 app.js 上，你可以做这样的路由:

const translator = require('path_to_translator');
app.get('/translation', translator);

然后在你的translator.js上，你可以导出一个函数来接收你需要的参数并返回结果:

const bingTranslate = (req, res) => {
// YOUR CODE HERE
}

module.exports = bingTranslate

然后在您的 html 上，您将让按钮向您的服务器发送请求，而不是调用translator.js，这样您就可以根据从服务器收到的响应来更改 #bingTranslateOutput 按钮的值。