导出服务器端功能以供客户端使用

Question

我有一个函数，试图使用MapBox自动完成一个html输入字段。我想在geocoding call上制作一个keydown，这样用户就不必完全输入他们的城市名称。

在app.js我使用dotenv，以便我的API密钥可以通过process.env.MAPBOX_TOKEN访问，并需要Mapbox：

app.js：

require('dotenv').config()
const mbxGeocoding = require('@mapbox/mapbox-sdk/services/geocoding');
const geocodingClient = mbxGeocoding({ accessToken: process.env.MAPBOX_TOKEN });

我现在想让geocodingClient可以访问一些客户端jQuery代码，这样我就可以在geocoder字段中调用keydown上的函数<input>。我怎样才能做到这一点？

下面抛出错误geocodingClient is not defined。如何将此服务器端功能提供给客户端代码？

公共/ JS / mapBox.js：

$(document).ready(function () {
    $('#citySearch').on('keyup', function(){
        var location = $(this).val();
        console.log("Location: " + location);

        async function geocoder(location){
            try {
                let response = await geocodingClient
                    .forwardGeocode({
                        query: location,
                        limit: 2
                    })
                    .send();
                console.log(response.body.features[0].place_name)
            } catch(err){
                console.log(err.message);
            }
        }
        geocoder(location)
    })

});

Answer 1

您无法在客户端公开您的后端。另外，你不应该。

您需要在两端之间进行通信并假设它们是无关的。

向服务器发送请求并处理返回的响应。

$(document).ready(function () {
  $('#citySearch').on('keyup', function(){
    var location = $(this).val();
    console.log("Location: " + location)
    //1.  request to back end with data and deal with response with
    // http libs (ajax, node http/https, axios, etc...)
  })
});



// 2. Reach a route to invoke the async function and respond the result



// 3. this should be at the backend and responding an answer to route that respondes to front.
 async function geocoder(location){
  try {
      let response = await geocodingClient
          .forwardGeocode({
              query: location,
              limit: 2
          })
          .send();
      console.log(response.body.features[0].place_name)
  } catch(err){
      console.log(err.message);
  }
}
// this should be at the backend and responding an answer to route that respondes to front.

Answer 2

您需要做的是将mapbox客户端脚本包含在您的html中。

有关详细信息，请参阅以下链接

https://github.com/mapbox/mapbox-sdk-js#pre-bundled-files-on-unpkgcom

类似下面的东西。

<script src="https://unpkg.com/@mapbox/mapbox-sdk/umd/mapbox-sdk.min.js"></script>
<script>
$(document).ready(function () {
  var mapboxClient = mapboxSdk({ accessToken: MY_ACCESS_TOKEN });
  $('#citySearch').on('keyup', function(){
    var location = $(this).val();
    console.log("Location: " + location);
    async function geocoder(location){
        try {
            let response = await mapboxClient.geocoding
                .forwardGeocode({
                    query: location,
                    limit: 2
                })
                .send();
            console.log(response.body.features[0].place_name)
        } catch(err){
            console.log(err.message);
        }
    }
    geocoder();
  })
}); </script>