前端使用api连接后端的吗_在前端使用API

前端使用api连接后端的吗

As a Web Developer there is so much stuff to learn and if you’re anything like me, sometimes you get lost in the sea of things you “need to know”.

作为Web开发人员，有很多东西要学习，而且如果您像我一样，有时会迷失在“需要知道”的事物中。

But out of all those things you need to learn, there is one thing that will spice up your applications and make you look like an expert developer to potential employers.

但是，在您需要学习的所有内容中，有一件事可以使您的应用程序更加有趣，并使您看起来像潜在雇主的专家开发人员。

That one thing is how to use an API.

一件事就是如何使用API​​。

Using an API allows you to make any website or web application more exciting and dynamic than what you can accomplish with html,css and javascript by themselves. So in this post, I am going to help you learn more about APIs and how you can use them through a simple project.

与使用html，css和javascript本身可以实现的功能相比，使用API​​可以使任何网站或Web应用程序更加令人兴奋和动态。 因此，在本文中，我将帮助您了解有关API的更多信息以及如何通过一个简单的项目使用它们。

In this project we will be making use of the Unsplash API to create an image gallery. Throughout the post, I will be providing commented code snippets as well as an explanation of what the code is doing at each point.

在这个项目中，我们将使用Unsplash API创建图片库。 在整个帖子中，我将提供注释的代码段以及每点代码的作用说明。

那么什么是API？ (So what is an API?)

API is an acronym that stands for Application Programming Interface and according to wikipedia, an application programming interface (API) is a computing interface which defines interactions between multiple software intermediaries.

API是首字母缩略词，代表应用程序编程接口，根据维基百科，应用程序编程接口(API)是计算接口，它定义了多个软件中介之间的交互。

What that definition basically means is that APIs allow your web application to communicate with other web applications. This “communication” can be best explained with an example specific to the project we are going to build.

该定义的基本含义是API允许您的Web应用程序与其他Web应用程序进行通信。 可以通过一个特定于我们要构建的项目的示例来最好地解释这种“交流”。

For this project, we will be using the Unsplash API to create an image gallery. We are using the API to communicate with Unsplash (Unsplash.com). In this communication, we are making a “request” to Unsplash’s server to get access to some of their images, so we can use them for our image gallery.

对于此项目，我们将使用Unsplash API创建图片库。 我们正在使用API​​与Unsplash(Unsplash.com)进行通信。 在此通信中，我们向Unsplash的服务器发出“请求”以访问其某些图像，因此我们可以将其用于我们的图像库。

The most important part to take note of here is that we are using the API to get access to Unsplash’s images for us to use in our project; what this means is that we can use an API to get data from an outside source which is very cool and very useful.

这里要注意的最重要部分是，我们正在使用API​​来访问Unsplash的图像，以供我们在项目中使用。 这意味着我们可以使用API​​从外部资源获取数据，这非常酷而且非常有用。

图片库入门 (Getting Started with our Image Gallery)

Before we can get started with using the API, we have to set up a basic structure for our project. For this project we will need a code editor to write our code in. I personally recommed the Visual Studio Code editor but you can use any code editor you want to do this.

在开始使用API​​之前，我们必须为我们的项目建立一个基本结构。 对于这个项目，我们将需要一个代码编辑器来编写我们的代码。我个人建议使用Visual Studio代码编辑器，但是您可以使用任何想要执行此操作的代码编辑器。

Open up the code editor of your choice and create a directory (folder) with the title “unsplash_api_gallery”. Inside the directory you need the following three files:

打开您选择的代码编辑器，并创建一个标题为“ unsplash_api_gallery”的目录(文件夹)。 在目录中，您需要以下三个文件：

• index.html
  index.html
• index.css
  index.css
• index.js
  index.js

You can look to the picture below for a visual on what it should look like

您可以查看下面的图片，以直观了解其外观

We need these 3 files in our project directory to get us started

我们需要在项目目录中使用这3个文件来开始使用

设置页面的基本结构(Setting up the Basic Structure of our page)

The content of our web page is going to be made up mostly of images generated in our JavaScript file but we do need to set up a basic structure of our web page using some html and css

网页的内容将主要由JavaScript文件中生成的图像组成，但是我们确实需要使用一些html和CSS来设置网页的基本结构

<