Files
freeCodeCamp/curriculum/challenges/chinese/05-back-end-development-and-apis/back-end-development-and-apis-projects/url-shortener-microservice.md
Shaun Hamilton c2a11ad00d feat: add 'back/front end' in curriculum (#42596)
* chore: rename APIs and Microservices to include "Backend" (#42515)

* fix typo

* fix typo

* undo change

* Corrected grammar mistake

Corrected a grammar mistake by removing a comma.

* change APIs and Microservices cert title

* update title

* Change APIs and Microservices certi title

* Update translations.json

* update title

* feat(curriculum): rename apis and microservices cert

* rename folder structure

* rename certificate

* rename learn Markdown

* apis-and-microservices -> back-end-development-and-apis

* update backend meta

* update i18n langs and cypress test

Co-authored-by: Shaun Hamilton <shauhami020@gmail.com>

* fix: add development to front-end libraries (#42512)

* fix: added-the-word-Development-to-front-end-libraries

* fix/added-the-word-Development-to-front-end-libraries

* fix/added-word-development-to-front-end-libraries-in-other-related-files

* fix/added-the-word-Development-to-front-end-and-all-related-files

* fix/removed-typos-from-last-commit-in-index.md

* fix/reverted-changes-that-i-made-to-dependecies

* fix/removed xvfg

* fix/reverted changes that i made to package.json

* remove unwanted changes

* front-end-development-libraries changes

* rename backend certSlug and README

* update i18n folder names and keys

* test: add legacy path redirect tests

This uses serve.json from the client-config repo, since we currently use
that in production

* fix: create public dir before moving serve.json

* fix: add missing script

* refactor: collect redirect tests

* test: convert to cy.location for stricter tests

* rename certificate folder to 00-certificates

* change crowdin config to recognise new certificates location

* allow translations to be used

Co-authored-by: Nicholas Carrigan (he/him) <nhcarrigan@gmail.com>

* add forwards slashes to path redirects

* fix cypress path tests again

* plese cypress

* fix: test different challenge

Okay so I literally have no idea why this one particular challenge
fails in Cypress Firefox ONLY. Tom and I paired and spun a full build
instance and confirmed in Firefox the page loads and redirects as
expected. Changing to another bootstrap challenge passes Cypress firefox
locally. Absolutely boggled by this.

AAAAAAAAAAAAAAA

* fix: separate the test

Okay apparently the test does not work unless we separate it into
a different `it` statement.

>:( >:( >:( >:(

Co-authored-by: Sujal Gupta <55016909+heysujal@users.noreply.github.com>
Co-authored-by: Noor Fakhry <65724923+NoorFakhry@users.noreply.github.com>
Co-authored-by: Oliver Eyton-Williams <ojeytonwilliams@gmail.com>
Co-authored-by: Nicholas Carrigan (he/him) <nhcarrigan@gmail.com>
2021-08-13 21:57:13 -05:00

120 lines
3.8 KiB
Markdown
Raw Blame History

This file contains ambiguous Unicode characters

This file contains Unicode characters that might be confused with other characters. If you think that this is intentional, you can safely ignore this warning. Use the Escape button to reveal them.

---
id: bd7158d8c443edefaeb5bd0e
title: 短网址微服务
challengeType: 4
forumTopicId: 301509
dashedName: url-shortener-microservice
---
# --description--
构建一个 JavaScript 的全栈应用,在功能上与这个应用相似:<https://url-shortener-microservice.freecodecamp.rocks/>。 可以采用下面的任意一种方式完成这个挑战:
- 克隆 [this GitHub repo](https://github.com/freeCodeCamp/boilerplate-project-filemetadata/) 并在本地完成项目。
- 使用[我们的 Replit 初始化项目](https://replit.com/github/freeCodeCamp/boilerplate-project-urlshortener)来完成你的项目。
- 使用你选择的网站生成器来完成项目, 并确保包含了我们 GitHub 仓库的所有文件。
当完成本项目,请确认有一个正常运行的 demo 可以公开访问。 然后将 URL 提交到 `Solution Link` 中。 此外,还可以将项目的源码提交到 `GitHub Link` 中。
# --instructions--
**提示:** 请使用 body parsing 中间件来处理 POST 请求, 也可以使用 `dns` 核心模块中的 `dns.lookup(host, cb)` 函数验证提交的 URL。
# --hints--
提交自己的项目,而不是示例的 URL。
```js
(getUserInput) => {
assert(
!/.*\/url-shortener-microservice\.freecodecamp\.rocks/.test(
getUserInput('url')
)
);
};
```
可以通过 POST 请求给 `/api/shorturl` 发送一个 URL并返回一个带有 `original_url``short_url` 属性的 JSON 响应。 例如:`{ original_url : 'https://freeCodeCamp.org', short_url : 1}`
```js
async (getUserInput) => {
const url = getUserInput('url');
const urlVariable = Date.now();
const fullUrl = `${url}/?v=${urlVariable}`
const res = await fetch(url + '/api/shorturl', {
method: 'POST',
headers: { 'Content-Type': 'application/x-www-form-urlencoded' },
body: `url=${fullUrl}`
});
if (res.ok) {
const { short_url, original_url } = await res.json();
assert.isNotNull(short_url);
assert.strictEqual(original_url, `${url}/?v=${urlVariable}`);
} else {
throw new Error(`${res.status} ${res.statusText}`);
}
};
```
当访问 `/api/shorturl/<short_url>` 时, 将重定向到原来的 URL。
```js
async (getUserInput) => {
const url = getUserInput('url');
const urlVariable = Date.now();
const fullUrl = `${url}/?v=${urlVariable}`
let shortenedUrlVariable;
const postResponse = await fetch(url + '/api/shorturl', {
method: 'POST',
headers: { 'Content-Type': 'application/x-www-form-urlencoded' },
body: `url=${fullUrl}`
});
if (postResponse.ok) {
const { short_url } = await postResponse.json();
shortenedUrlVariable = short_url;
} else {
throw new Error(`${postResponse.status} ${postResponse.statusText}`);
}
const getResponse = await fetch(
url + '/api/shorturl/' + shortenedUrlVariable
);
if (getResponse) {
const { redirected, url } = getResponse;
assert.isTrue(redirected);
assert.strictEqual(url,fullUrl);
} else {
throw new Error(`${getResponse.status} ${getResponse.statusText}`);
}
};
```
如果传入一个没有遵循如 `http://www.example.com` 的无效 URL则返回包含 `{ error: 'invalid url' }` 的 JSON 响应。
```js
async (getUserInput) => {
const url = getUserInput('url');
const res = await fetch(url + '/api/shorturl', {
method: 'POST',
headers: { 'Content-Type': 'application/x-www-form-urlencoded' },
body: `url=ftp:/john-doe.org`
});
if (res.ok) {
const { error } = await res.json();
assert.isNotNull(error);
assert.strictEqual(error.toLowerCase(), 'invalid url');
} else {
throw new Error(`${res.status} ${res.statusText}`);
}
};
```
# --solutions--
```js
/**
Backend challenges don't need solutions,
because they would need to be tested against a full working project.
Please check our contributing guidelines to learn more.
*/
```