mvan 构建到指定位置

In the past, we looked at adding an extra security layer to our applications by using actionable data from the .

过去，我们试图通过使用来自可操作数据为应用程序添加额外的安全层。

Today, we'll build a demo of a simple widget that we can place on our website(s). This widget detects the users location and gives accurate weather data.

今天，我们将构建一个简单的小部件的演示，可以将其放置在我们的网站上。 此小部件可检测用户的位置并提供准确的天气数据。

We'll be building our demo in Node.js, but know that you can use any programming language of your choice as we won't be doing anything that can't be done in a programming language.

我们将在Node.js中构建我们的演示，但是您知道您可以使用您选择的任何编程语言，因为我们不会做任何用编程语言无法完成的事情。

Before we get started, head over to and and sign up to get their API keys. WeatherStack, previously known as Apixu will help us collect meteorological data that we can use to get useful information on a particular location.

在开始之前，请前往和并注册以获取其API密钥。 WeatherStack（以前称为Apixu）将帮助我们收集气象数据，我们可以使用这些数据来获取特定位置的有用信息。

( )

First, we want to create a project on our machine. To do that, ensure you have Node.js installed, then navigate to your project folder and run:

首先，我们要在我们的机器上创建一个项目。 为此，请确保已安装Node.js，然后导航到项目文件夹并运行：

npx express-generator weather --ejs

This command creates a barebones exprerss application that we can modify and use. Next, we install the dependencies using npm or yarn. As I prefer yarn, I'll be using it to install and run scripts for the remainder of this article:

此命令创建一个准系统提示应用程序，我们可以对其进行修改和使用。 接下来，我们使用npm或yarn安装依赖项。 正如我更喜欢yarn一样，在本文的其余部分中，我将使用它来安装和运行脚本：

yarninstall

Then, we can add our remaining dependencies:

然后，我们可以添加剩余的依赖项：

yarn add dotenv node-fetch

Next, we want to add a script that runs our server, so in package.json add:

接下来，我们要添加一个运行服务器的脚本，因此在package.json添加：

"scripts": {
      "start": "nodemon ./bin/www"},

Then install nodemon as a devDependency.

然后安装nodemon作为devDependency 。

yarn add --dev nodemon

Now that we have our project setup, we can start building our app.

现在我们有了项目设置，我们可以开始构建应用程序了。

( )

The first thing we want to do is quickly setup a view to properly display the information. So, in views/index.ejs add this piece of code.

我们要做的第一件事是快速设置视图以正确显示信息。 因此，在views/index.ejs添加这段代码。

          
            
    
      
     
        
      
          <%= weather.location.name %>        
        
      <%= weather.location.country %>        
      
          <%= weather.current.temperature %>°C        
        
      <%= weather.current.weather_descriptions[0] %>      
     
    
    
  

From the code above, you can see that we are using , so, our app is already styled by default.

从上面的代码中，您可以看到我们正在使用 ，因此，我们的应用程序已默认设置为样式。

( )

The next thing to do is create a .env file. This is an enviroment file that we can load custom variables from without committing them to code. To get Node.js to respect this file, at the top of app.js add this line:

接下来要做的是创建一个.env文件。 这是一个环境文件，我们可以从中加载自定义变量，而无需将其提交给代码。 为了使Node.js尊重此文件，请在app.js的顶部添加以下行：

// register environment variablesrequire("dotenv").config();

Now, on process.env we have access to variables we define in our .env file. So, remember those API keys you got from Ipstack and WeatherStack? You can now place them in the .env file like this:

现在，在process.env我们可以访问在.env文件中定义的变量。 因此，还记得您从Ipstack和WeatherStack获得的那些API密钥吗？ 您现在可以将它们放置在.env文件中，如下所示：

WEATHER_KEY=5cd59800593b16d557089d0a17cc75bcLOCATION_KEY=08c58c184ea64dd85605324883d888f2

Make sure to replace the API keys with the proper API keys. Then, in app.js, let's replace the default router with a route to the domain root, like this:

确保用正确的API密钥替换API密钥 。 然后，在app.js ，让我们将默认路由器替换为到域根目录的路由，如下所示：

app.get("/", async (req, res, next) => {
       // ...});

Then, in the router above, we get the users IP address which we'll then feed to the Ipstack API using node-fetch, that way, we can know our users current location.

然后，在上面的路由器中，我们获取用户的IP地址，然后使用node-fetch将其提供给Ipstack API，这样我们就可以知道用户的当前位置。

app.get("/", async (req, res, next) => {
       const locKey = process.env.LOCATION_KEY;  const locResponse = await fetch(    `http://api.ipstack.com/${
       req.ip}?access_key=${
       locKey}`  );  const location = await locResponse.json();});

With the response from Ipstack, we pass the users city to Weatherstack, which will then return a weather report for the current city.

借助Ipstack的响应，我们将用户城市传递给Weatherstack，后者将返回当前城市的天气报告。

app.get("/", async (req, res, next) => {
       // ...  // weather request  const weatherKey = process.env.WEATHER_KEY;  const response = await fetch(    `http://api.weatherstack.com/current?access_key=${
       weatherKey}&query=${
       location.city}`  );  const weather = await response.json();});

We now have the weather report for the current user location, we can then feed this data to our views/index.ejs file by doing:

现在我们有了当前用户位置的天气报告，然后可以通过执行以下操作将此数据输入到views/index.ejs文件中：

app.get("/", async (req, res, next) => {
       // ....  res.render("index", {
      title: "Weather app", weather });});

If you now run yarn start or npm start and headover to localhost:3000, you should see something like this.

如果现在运行yarn start或npm start并切换到localhost：3000 ，您应该会看到类似的内容。

( )

If you plan on deploying this app, make sure to let express know to allow proxy IP, that way if you're using a web server like Nginx, you get the users actual IP address instead of 127.0.0.1. To do that, just add this line after your express declaration:

如果您打算部署此应用程序，请确保让express知道以允许代理IP，这样，如果您使用的是像Nginx这样的Web服务器，则将获得用户的实际IP地址，而不是127.0.0.1 。 为此，只需在您的明确声明后添加以下行：

app.set("trust proxy", true);

翻译自:

mvan 构建到指定位置