实习医生格蕾 Lorem Ipsum 生成器教程
本教程将逐步讲解如何创建《实习医生格蕾》或其他主题的 Lorem Ipsum 文本生成器。我一直是《实习医生格蕾》（以及 Shonda Rhimes 本人）的忠实粉丝，所以早就想做一个《实习医生格蕾》主题的 Lorem Ipsum 文本生成器了。Lorem Ipsum 是一种生成的无意义文本，常用于设计和出版领域作为占位符文本。传统上，Lorem Ipsum 使用拉丁词编写，但也存在一些使用非拉丁词的变体。
您可以在这里查看 Grey's Anatomy Lorem Ipsum Generator 网站的实时版本，本教程的代码可以
在 Github 上查看。
以下是 Grey's Anatomy Lorem Ipsum 生成器生成的文本示例：
“真正的医院，克里斯蒂娜·杨医生，创伤外科研究员，儿科外科主任乔治·埃利斯，骨科医生肖恩·罗斯医生，卡莉·托雷斯医生，伊兹·史蒂文斯医生，整形外科主任伊兹，麻醉师梅雷迪思的父亲佐拉，西雅图的埃里卡，当然还有梅雷迪思，肖恩·罗斯医生，基本上，塔克，弗吉尼亚·迪克森医生，理查德·萨迪主任，亚利桑那州的科林·马洛医生，佐拉，泰迪·奥特曼医生，亚利桑那州的泰迪·奥特曼医生，西雅图的伊兹·史蒂文斯医生，我的人”
以上段落完全不知所云，但如果你熟悉《实习医生格蕾》，就会发现其中包含一些熟悉的术语。
要求
为了充分利用本教程，您应该：
- 熟悉 Git 和 JavaScript
- 拥有 GitHub 或 GitLab 帐户（以便使用 Netlify 功能）。
目录
设置
为了快速启动这个项目，我使用了 Netlify 的GitHub 项目启动器 netlify/create-react-app-lambda。Netlify是一家专门托管 JAMstack 网站的托管服务商，截至撰写本教程时，它提供相当全面的免费套餐，可以很好地将 GitHub 项目部署到互联网上。JAMstack 用于描述由 JavaScript、API 和 Markup 组成的静态网站。您可以在这里了解更多关于 JAMstack 的定义：JAMstack | JavaScript、API 和 Markup。
该create-react-app-lambda代码库集成了 Netlify 的函数，create-react-app这意味着您可以开箱即用地部署一个调用 Serverless 函数（您可能熟悉的 Amazon Web Services (AWS) Lambda 函数）的 React 应用程序。这些函数可以进行异步调用并处理数据，但它们必须是无状态的，这意味着对于相同的输入，输出也必须相同。借助 Netlify，您无需 AWS 账户即可部署和管理 AWS Lambda 技术。您可以在此处阅读更多关于 Netlify Serverless Lambda 函数的信息：Functions | Netlify。
首先，让我们复制文件create-react-app-lambda。点击 README 文件中的“部署到 Netlify”按钮。
这个一键按钮让我们无需进行繁琐的操作即可设置 React + Netlify Functions。实际上，点击按钮后，您将在 Netlify 中创建一个新站点并关联一个 GitHub 代码库。GitHub 代码库需要几分钟时间来填充文件，填充完成后，您就可以访问 Netlify 并查看您的网站了。如果您想更深入地了解设置背后的原因，create-react-lambda-app请观看Shawn Wang (swyx) 的这段视频，了解更多背景信息。
点击“部署到 Netlify”按钮后，您应该会看到类似这样的内容：
注：完整的项目交互说明create-react-lambda-app位于 README 文件中。我将重点介绍与应用程序交互的最重要部分，但鼓励您仔细阅读 README 文件以获取更多信息并进一步增强应用程序的功能。
因此，一旦您在 Netlify 中创建的仓库填充了create-react-app-lambda您上传的文件，您应该就可以git clone访问该仓库了。您克隆的仓库名称应该与您创建的仓库名称相同，例如 `netlify.netlify.netlify` git clone git@github.com:your_username/app-just-created。您可能需要刷新仓库页面才能看到文件。
项目设置完成后，您应该cd进入项目目录并运行命令yarn来安装所有依赖项。您可以运行命令yarn test来确保所有测试都通过，并且项目已正确设置。
Netlify 函数应该创建在 `<path>`目录下src/lambda。如果您查看该文件夹，会看到两个示例函数 `<functions>`async-dadjoke.js和 ` hello.js<functions>`。对于我们的用例，我们不需要 ` async<functions>` 函数，所以我们来看看 `<functions>`。hello.js example
我们从事件中hello.js获取信息queryStringParameters以便记录它们。queryStringParameters可以通过从事件中访问，例如event.queryStringParameters，或者通过解构事件对象来访问，例如const {queryStringParameters} = event。
export function handler(event, context, callback) {
console.log(“queryStringParameters”, event.queryStringParameters)
callback(null, {
statusCode: 200,
body: JSON.stringify({ msg: “Hello, World!” })
})
}
每个 Lambda 函数都有一个处理函数。该处理函数可以接收事件、上下文和回调。事件基于端点在收到请求时接收到的信息，例如 cookie 信息、标头、查询字符串参数等。上下文对象提供有关 Lambda 函数执行的更多信息。您可以在 AWS 文档中了解更多信息：
AWS Lambda Function Handler in Node.js - AWS Lambda
验证设置
为了测试端点的功能yarn start:lambda，我们需要在刚刚克隆的目录中运行 `lambda test` 命令，这将运行所有 Lambda 函数。然后，您可以访问 ` <function_name> http://localhost:9000/hello` 或/您函数的名称。在此页面上，您应该看到：{“msg”:”Hello, World!”}因为这是端点响应的主体。
从 React 调用 Netlify 函数
接下来，我建议您自定义项目中的命名规则，使其更符合您的需求。我将 `<button>` 重命名hello为 `<button> generate-lorem-ipsum`，所以首先我将hello.js文件重命名为 ` <button>` generate-lorem-ipsum，然后在 ` <button>`LambdaDemo组件中app.js，我将按钮hello点击事件的调用替换为 `<button>` generate-lorem-ipsum。同时，我还删除了与 `<button>` 相关的按钮async-dadjoke及其关联的文件。因此，我的项目从 `<button>` 变成了 `<button>` 。
<button onClick={this.handleClick("hello")}>{loading ? "Loading..." : "Call Lambda"}
</button>
<button onClick={this.handleClick("async-dadjoke")}>{loading ? "Loading..." : "Call Async Lambda"}
</button>
到：
<button onClick={this.handleClick("generate-lorem-ipsum")} className=“button”>
{loading ? “Loading…” : “Generate Lorem Ipsum”}
</button>
点击按钮会调用 Netlify 函数，您可以查看handleClick for more information点击按钮时发生的情况，最初状态返回 loading，最终返回 response.msg。
注意：我已将引用更新为LambdaDemo()in LambdaCall()，App.js因为演出时间到了！
为了检查 lambda 函数是否仍在被调用并返回响应，您应该运行以下命令yarn start（同时yarn start:lambda在另一个终端窗口中运行）。您应该能够访问http://localhost:3000并看到带有“生成 Lorem Ipsum”按钮的 React 应用。如果您点击该按钮，则按钮下方的页面上应该会出现“hello world”字样。
添加 Lorem Ipsum 逻辑
现在我们需要编辑该generate-lorem-ipsum.js文件，使其返回 Lorem Ipsum 而不是“Hello World”。我们将通过创建一个词库words.js并在文件中使用以下函数来实现这一点generate-lorem-ipsum.js：handler()generateLoremIpsum()generateWords()generateParagraphs()getRandomInt()
这handler()是文件的入口点，因此任何需要执行的函数都应该在入口点内调用handler()，或者由入口点调用的函数来调用handler()。首先，我们解构事件以获取入口点queryStringParameters。
例如，如果有人使用以下查询字符串参数调用我们的端点。/generate-lorem-ipsum?paragraphs=4&words=0
然后，我们将对事件对象进行解构，以确定请求的端点返回 4 个段落和 0 个单词。
const event = {
queryStringParameters: {
paragraphs: “4”,
words: “0”
}
};
处理程序会调用一个函数generateLoremIpsum来实际生成文本，它会接收返回多个段落还是仅返回单词的参数。默认情况下，如果没有指定段落，queryStringParameters则会返回 4 个生成的段落。
最终handler()效果可能如下所示：
export function handler(event, context, callback) {
const { queryStringParameters } = event;
const { paragraphs = 0, words = 0 } = queryStringParameters;
let isParagraph = Boolean(paragraphs);
let count;
if (paragraphs > 1) {
count = paragraphs;
} else if (words > 0) {
count = words;
} else {
isParagraph = true;
count = 4;
}
let response;
try {
response = isParagraph
? generateLoremIpsum(isParagraph, count).join(" ")
: generateLoremIpsum(isParagraph, count);
} catch (error) {
console.log(error);
}
callback(null, {
statusCode: 200,
body: JSON.stringify({ msg: response })
});
}
在这个例子中，generateLoremIpsum()有一个函数被调用handler()，并被用作分岔路口，以确定是否应该生成多个段落，还是只生成一个段落，这取决于它isParagraph是真还是假。
export function generateLoremIpsum(isParagraph, count) {
if (isParagraph) {
console.log(`Trying to construct ${count} paragraphs`);
return generateParagraphs(count);
} else {
console.log(`Trying to return ${count} words`);
return generateWords(count);
}
}
如果只生成一个段落，generateWords()则会直接调用该函数。该函数会创建一个随机单词数组（基于获取一个随机整数，并将该索引处的单词添加到数组中，直到达到所需的长度）wordCount。为了格式化所有单词，在获得所有单词后，会按照某种格式对单词进行格式化，const formattedWords = <p>${words.join(" ")}</p>以便稍后轻松地将函数的响应转换为 HTML 段落。
export function generateWords(wordCount) {
let words = [];
console.log(wordCount);
for (var i = 0; i < wordCount; i++) {
words.push(WORDS[getRandomInt()]);
}
const formattedWords = `<p>${words.join(" ")}</p>`;
return formattedWords;
}
函数中的随机整数generateWords()是通过以下函数计算的：
export function getRandomInt() {
return Math.floor(Math.random() * Math.floor(WORDS.length));
}
如果需要生成段落，我们需要用到这个函数generateParagraphs()。该函数会生成 X 个段落，每个段落包含 50 个单词，直到达到指定的段落数为止。它通过调用该generateWords()函数 X 次来实现这一点，其中 X 等于paragraphCount传入的段落数。
export function generateParagraphs(paragraphCount) {
let paragraphs = [];
for (var I = 0; I < paragraphCount; I++) {
paragraphs.push(generateWords(50));
}
return paragraphs;
}
为了使上述操作生效，我们需要一个词库。首先，generate-lorem-ipsum.js我们应该import { WORDS } from "./words";在同一目录下创建一个名为 `.wordbank` 的文件words.js。在`.wordbank` 文件中，words.js我们将创建一个名为 `<array_name>` 的数组WORDS并将其导出，以便其他函数可以读取它。
我创建了一个只包含填充词的数组fillerWords，以及另一个包含《实习医生格蕾》和医学术语的数组greysAnatomyWords。
我使用 ES6 的扩展运算符将这两个数组合并成一个数组。export const WORDS = […greysAntomyWords, …fillerWords];
完整文件内容应类似于：
const greysAnatomyWords = ["Meredith Grey", "Shonda Rhimes", "Epi", "Cardio"];
const fillerWords = [
"actual",
"actually",
"amazing"
];
export const WORDS = […greysAntomyWords, …fillerWords];
方法论
在一个完整的项目中，我们需要大量的文字，否则会显得过于重复。如果您想创建其他主题的 Lorem Ipsum 文本，则可以将其替换greysAnatomyWords为您所选主题的词语。
为了收集《实习医生格蕾》相关的词汇，我进行了头脑风暴，并找到了一些列表，例如这篇关于《实习医生格蕾》宝宝名字的文章，我可以将其重新利用。清理数据并将其格式化为有效的JSON格式的过程有点繁琐，我尽可能地使用查找替换功能来修改格式，并根据需要手动更新一些内容。这使我能够以最小的努力（即自动化抓取词汇）获取尽可能多的数据。最终，我的生成器得到了大约140个词汇，但如果我需要更大的数据集，那么或许可以考虑使用像BeautifulSoup或Selenium这样的工具来自动化抓取数据源并将数据保存到有效的JS文件中。
注意：根据数据的重复程度，可以创建映射或过滤器，以确保单词数组只包含唯一值。
我决定添加一些填充词，以便生成的 Lorem Ipsum 文本除了主题词之外，还能包含适量的动词和副词。我在谷歌上搜索了填充词，找到了一个代码库，并从fillers_data.txt 文件中复制了“填充词” 。
现在运行yarn start:lambda并访问，http://localhost:9000/generate-lorem-ipsum/你应该会看到返回的 4 个生成的 lorem ipsum 段落。它看起来应该像这样：
“msg”:”<p>especially surgicial mostly try hospital anyway Seattle Dr. Lucy Fields Alex a trauma surgical fellow Dr. Mark Sloan my person heavily wherever Theodora Duquette Dr. Virginia Dixon cried a nurse a neurosurgeon really Margaret Dr. Mark Sloan Dr. April Kepner Meredith’s father literally Dr. Alex Karev Dr. Izzie Stevens an anesthesiologist Denny much necessarily Surgery a trauma surgical fellow surely hardly Owen rather Shepherd totally cried chief of pediatric surgery Theodora Dr. Robert Stark Olivia an anesthesiologist get her up to CT actually Cristina Dr. Finn Dandridge</p> <p>Tucker Virginia Callie Torres mostly hardly Maggie Maggie get her up to CT hardly get him up to CT quite stuff Dr. Mark Sloan whenever Dr. Richard Webber try George amazing Dr. Sydney Heron Dr. Jackson Avery actual quite nicely Richard stuff might Dr. Owen Hunt get her up to CT orthopedics Yang obviously mostly intubate her wherever orthopedic surgeon typically Margaret Karev effectively Alex Dr. Mark Sloan Seattle Dr. Alex Karev push one of epi try practically Dr. Alex Karev intubate him so</p> <p>start significantly start fairly get him up to CT slightly Dr. Alex Karev chief of plastic surgery slightly Dr. Robert Stark Meredith’s mother Norman actually completely Izzie Dr. Mark Sloan particularly Alex basically Adele clearly like usually Seattle Dr. Alex Karev typically chief of plastic surgery get him up to CT essentially ultimately my person exactly Norman specifically Virginia effectively O’Malley intubate her Virginia Tucker my person a surgery resident largely most a veterinarian basically she’s in V-Fib try simply Seattle</p> <p>heavily Dr. Callie Torres essentially Dr. Jackson Avery whoever a nurse Dr. Mark Sloan definitely my person Olivia Harper Dr. Alex Karev essentially approximately generally my person exactly Dr. Miranda Bailey Dr. Preston Burke right a plastic surgeon Norman Theodora basically a cardiac surgeon chief of plastic surgery chief of plastic surgery essentially Dr. Jackson Avery Tyler Christian much seriously Meredith’s mother slightly easily Mark my person maybe Mercy West Alex Erica Derek certainly badly rather hospital Denny Dr. Norman Shales Dr. Lexie Grey significantly Dr. Jackson Avery</p>”
格式化回复
这段文本还没有格式化，不过我们会在 React 应用中处理这个问题。现在让我们切换回页面app.js。我们已经在打印消息了，如果你运行yarn start并访问页面，localhost:3000你会看到和刚才一样的正文文本。接下来，我们使用一个库将响应格式化为真正的 HTML。
我们将使用“html-react-parser”包。可以通过运行以下命令安装它yarn add html-react-parser，然后import parse from “html-react-parser”;在文件顶部添加以下代码app.js来导入它。我们不再直接返回，而是将其替换为。这意味着解析 HTML并在遇到 `<div>` 标签时返回解析后的 HTML 。msgLambdaCallmsg{msg && parse(msg)}msgmsg
教程的这一部分是互动式的。在设置好 Lorem Ipsum 文本生成逻辑之后，我继续美化网站，使其看起来比标准create-react-app模板更具个性化。我使用的工具之一是这个精美的按钮生成器。我建议你反复尝试 CSS，直到达到你想要的视觉效果。
部署
得益于 Netlify 的持续部署功能，如果您在第一步点击了“部署到 Netlify”按钮，那么一旦您将更改合并到项目仓库的 master 分支，您的网站就会部署到 Netlify。此外，如果您提交拉取请求，Netlify 会生成一个预览。该预览应该与您在本地运行网站时看到的内容一致。
最终代码可以在greys-anatomy-lorem-ipsum-generatorloremIpsumTutorial存储库的分支上查看。
如果您在阅读本教程后使用 Netlify 函数创建了 Lorem Ipsum 生成器或其他应用程序，请在 Twitter 上与我分享，@waterproofheart 。
文章来源：https://dev.to/m0nica/grey-s-anatomy-lorem-ipsum-generator-tutorial-1p3n