express 静态文件_在Express.js中提供静态文件

express 静态文件

Express.js is a great framework for creating APIs, but it can also easily be used to serve static files, whether they’re images, CSS, HTML, JavaScript or whatever else you need to host. Express makes serving static files ridiculously easy!

Express.js是用于创建API的出色框架，但它也可以轻松用于提供静态文件，无论它们是图像，CSS，HTML，JavaScript还是您需要托管的任何其他文件。 Express使提供静态文件非常容易！

New to Express? Checkout our article on the basics of Express to get caught up on the basics.

快递新手？ 查看有关Express基础知识的文章，以掌握基础知识。

设定 (Getting Set Up)

Installing Express is really easy. We’re going to be using npm, but if you prefer to use something like Yarn, go ahead. To install Express using npm, run:

安装Express非常简单。 我们将使用npm ，但是如果您喜欢使用类似Yarn的东西，请继续。 要使用npm安装Express，请运行：

• $ npm install express --save
  $ npm install express-保存

构建文件 (Structuring Our Files)

We’re going to be making some files public through our Express server by making a whole directory public. This is what our file structure will look like:

我们将通过整个目录公开来通过Express服务器公开一些文件。 我们的文件结构如下所示：

express-static-file-tutorial
  |- index.js
  |- public
    |- alligator-logo.png
    |- index.html

Note that we’re going to make everything in the public directory available for viewing. This means that we should not put anything secret/sensitive in there, so keep any files with passwords, tokens, etc. out of the public folder, or users will be able to see it.

请注意，我们将使public目录中的所有内容可供查看。 这意味着，我们不应该把什么秘密/在那里敏感，所以保留的文件与密码，令牌，等出了的public文件夹，或用户将能够看到它。

创建我们的Express服务器 (Creating Our Express Server)

Now that we’re all setup, we can start coding! Let’s create our Express server. We’re going to borrow our basic Express server from our Express basics article.

现在我们已经完成设置，我们可以开始编码了！ 让我们创建我们的Express服务器。 我们将从Express基础知识文章中借用我们的基本Express服务器。

const express = require('express');
const app = express();

app.get('/', (req, res) => {
    res.send('An alligator approaches!');
});

app.listen(3000, () => console.log('Gator app listening on port 3000!'));

Now we need to make some changes so that we’ll be serving the static files from our public directory. Let’s tell Express to serve users files from our public directory. We do this by adding the following line to our code:

现在我们需要进行一些更改，以便从public目录中提供静态文件。 让我们告诉Express从我们的public目录中为用户文件提供服务。 为此，我们将以下行添加到代码中：

app.use(express.static('public'));

Let’s look at what this does: when we call app.use(), we’re telling Express to use a piece of middleware. Middleware is a slightly more complicated topic that we’re not going to go into here, but in short, a middleware function is a function that Express passes requests through before it sends them to our routing functions, such as the app.get('/') route above. We tell Express to use the express.static middleware. express.static is a piece of middleware that comes built into Express, it’s purpose is to try to find and return the static file requested. The parameter we pass to the express.static function is the name of the directory we want Express to serve files from, in our case it’s public.

让我们看一下它的作用：当我们调用app.use() ，我们在告诉Express 使用一部分中间件 。 中间件是一个稍微复杂一点的主题，我们不再在这里讨论，但是简而言之，中间件功能是Express在将请求发送到我们的路由功能(例如app.get('/')路线。 我们告诉Express使用express.static中间件。 express.static是Express内置的一部分中间件，目的是尝试查找并返回所请求的静态文件。 我们传递给express.static函数的参数是我们希望Express从中提供文件的目录的名称，在本例中为public 。

If you’re interested in finding out more about Express middleware, take a look at the official middleware documentation.

如果您想了解有关Express中间件的更多信息，请查看官方中间件文档 。

放在一起 (Putting it All Together)

Let’s put our Express server together, add the app.use line anywhere in between const app = express() and app.listen. Your code should look something like this:

让我们将Express服务器放在一起，在const app = express()和app.listen之间的任意位置添加app.use行。 您的代码应如下所示：

const express = require('express');
const app = express();

app.use(express.static('public'));

app.get('/', (req, res) => {
    res.send('An alligator approaches!');
});

app.listen(3000, () => console.log('Gator app listening on port 3000!'));

运行我们的应用 (Running our app)

We’re done with the code for our Express server, let’s run it:

我们已经完成了Express服务器的代码，让我们运行它：

• $ node index.js
  $节点index.js

Gator app listening on port 3000!

Open your web browser and navigate to localhost:3000, you should see the message “An alligator approaches!”.

打开您的Web浏览器并导航到localhost:3000 ，您应该看到消息“一条鳄鱼到来了！”。

Our Express server works.

我们的Express服务器可以工作。

创建我们的网页 (Creating our Web Page)

At this point, we have an Express server set up to serve static files, but we don’t have anything for it to serve. Let’s create a homepage for our super cool company and serve it.

至此，我们已经设置了Express服务器来提供静态文件，但是我们没有任何服务。 让我们为我们的超酷公司创建一个主页并提供服务。

Note: This last section is optional, if you already have the files you want to serve ready, just drop them into the public directory and run the server.

注意 ：最后一部分是可选的，如果您已经准备好要提供的文件，只需将它们放到public目录中并运行服务器即可。

First, create a file called index.html in the public directory. This file will be our home page. You can put whatever you want in it. We’re going to make a simple Hello World webpage for simplicity sake.

首先，在public目录中创建一个名为index.html的文件。 该文件将成为我们的主页。 您可以将任何内容放入其中。 为了简单起见，我们将制作一个简单的Hello World网页。

  
    
  
  
    
Hello, Alligator.io!
    
  

See how we have that image tag link to alligator-logo.png? alligator-logo.png is also a file inside of our public directory, so we link to it using just it’s name. index.html and alligator-logo.png are both in the same directory, so linking is as simple as just putting the file name. Now, if you open localhost:3000 in your browser, you should see our webpage:

看看我们如何将图像标签链接到alligator-logo.png ？ alligator-logo.png也是我们public目录内的文件，因此我们仅使用其名称链接到该文件。 index.html和alligator-logo.png都位于同一目录中，因此链接就像放置文件名一样简单。 现在，如果您在浏览器中打开localhost:3000 ，则应该看到我们的网页：

Feel free to change anything about the HTML, or the image. And remember, you can still keep adding other routes to your Express app, as long as the route doesn’t have the same path as a file in our public directory, it will work as if nothing was different!

随意更改有关HTML或图像的任何内容。 请记住，只要路由与我们的public目录中的文件路径不同，您仍可以继续向其Express应用程序添加其他路由，它将好像没有什么不同一样起作用！

If you want to learn more about Express, take a gander at the Express website and docs at expressjs.com.

如果您想了解有关Express的更多信息，请访问Express网站上的gander，并访问expressjs.com上的文档。

翻译自: https://www.digitalocean.com/community/tutorials/nodejs-serving-static-files-in-express

express 静态文件