freeCodeCamp纳什维尔十月聚会回顾

by Seth Alexander

塞斯·亚历山大(Seth Alexander)

纳什维尔的美好时光：十月免费CodeCamp聚会的回顾 (Good times in Nashville: a recap of our October freeCodeCamp Meetup)

On Saturday, October 7, we had our monthly freeCodeCamp Nashville meetup at Nashville Software School. As always it was good times.

10月7日，星期六，我们在纳什维尔软件学校举行了每月的免费CodeCamp纳什维尔聚会。 一如既往，这是个好时光。

We were supposed to have a guest speaker. But at the last minute they couldn’t make it. So our very own superstar and freeCodeCamp Nashville Co-Organizer Dave Harned stepped in and crushed it.

我们应该请一位嘉宾发言。 但是在最后一刻他们无法做到。 因此，我们自己的超级巨星和freeCodeCamp Nashville联合组织者Dave Harned介入并粉碎了它。

He presented a Crash Course on Node.js. You can find the repo here. Excuse the work in progress readme. Like most things, it’s not perfect. Feel free to open a Pull Request and shore up those docs!

他介绍了有关Node.js的速成课程。 您可以在此处找到该回购。 请原谅进行中的工作。 像大多数事情一样，它也不是完美的。 随时打开请求请求并支持这些文档！

I’m going to walk through what Dave presented so you can see what you missed out on and come to the next one ;-). Honestly, so you can benefit from a well put together intro that’ll have you up, running, and playing around in no time. Dave chose Cloud9 as his IDE so everyone could follow along without having to worry about what people might, or might not, have on their computers. This also provides a consistent user experience so debugging is easier.

我将遍历Dave演示的内容，以便您可以看到错过的内容并进入下一个;-)。 老实说，因此，您可以从精心组合的介绍中受益，该介绍可以让您立即启动，运行和玩转。 Dave选择Cloud9作为他的IDE，这样每个人都可以遵循，而不必担心人们在计算机上可能拥有或没有的东西。 这也提供了一致的用户体验，因此调试更加容易。

So head over to Cloud9 and get signed up and logged in. Also, check out the repo from the link above and look at the readme.

因此，转到Cloud9并注册并登录。此外，从上面的链接中查看存储库，并查看自述文件。

Next, you’ll want to click Create a new workspace.

接下来，您将要点击Create a new workspace 。

Your Workspace name can be whatever you want. Leave Hosted workspace selected and choose Private or Public, it doesn’t matter which. In Clone from Git or Mercurial URL input https://github.com/davi3blu3/fcc-node-crash.git. Then, under Choose a template select Node.js. Lastly, click Create Workspace.

您的工作区名称可以是您想要的任何名称 。 保持“ 托管”工作区为选中状态，然后选择“ 私有”或“ 公共” ，这无关紧要。 在从Git或Mercurial URL复制中，输入https://github.com/davi3blu3/fcc-node-crash.git 。 然后，在“选择模板”下，选择“ Node.js 。 最后，点击Create Workspace 。

This might take a minute but eventually, you’ll have something that looks like this:

这可能需要一分钟，但是最终，您将获得如下所示的内容：

So first thing, let’s go to the terminal at the bottom of the screen and type in npm install and hit enter. That’s going to bring in all the packages at are in our package.json file. You’ll see a new folder in your file tree now called node_modules. That’s where all the packages live.

首先，让我们转到屏幕底部的终端，输入npm install并按Enter。 这将把所有包都放在我们的package.json文件中。 您将在文件树中看到一个新文件夹，现在称为node_modules 。 这就是所有程序包所在的位置。

Now let’s open up 1_helloworld.js. It should look like this:

现在让我们打开1_helloworld.js 。 它看起来应该像这样：

var hello = function() {    console.log('Hello world');}hello();// console.log(process.argv);// var greet = process.argv[2] || "World";// var hello = function(name) {//     console.log('Hello ' + name + '!');// }// hello(greet);

Back in our terminal, we can run this file with node 1_helloworld.js. With the initial code, you should see “Hello World” printed in your terminal. This terminal is also our console inside Cloud9. So anything we console.log will end up here. We can see something interesting when we uncomment line 6 by taking out the //.

回到终端，我们可以使用node 1_helloworld.js运行此文件。 使用初始代码，您应该在终端上看到“ Hello World”字样。 该终端也是Cloud9中我们的控制台。 因此，我们console.log所有内容都将在这里结束。 当我们通过删除//取消注释第6行时，可以看到一些有趣的东西。

So line 6 should look like this now: console.log(process.argv);. When we run node 1_helloworld.js we get our “Hello World” again but then we also get an array that has two elements.

所以第6行现在应该看起来像这样： console.log(process.argv); 。 当我们运行node 1_helloworld.js我们再次获得“ Hello World”，但随后我们还获得了一个包含两个元素的数组。

Yours should be the same as mine:

您的应与我的相同：

[ '/home/ubuntu/.nvm/versions/node/v6.11.2/bin/node', '/home/ubuntu/workspace/1_helloworld.js' ]

These two elements are the whole command-line invocation. We can do some interesting things with this.

这两个元素是整个命令行调用 。 我们可以以此做一些有趣的事情。

Let’s change our code up some:

让我们将代码更改为：

// var hello = function() {//     console.log('Hello world');// }// hello();console.log(process.argv);var greet = process.argv[2] || "World";var hello = function(name) {    console.log('Hello ' + name + '!');}hello(greet);

Okay, well not changed much. We only commented and uncommented stuff. So now we have our console.log from before, we set a variable, we set a function, and we call that function. So if we run node 1_helloworld.js now we’ll see our process.argv array and “Hello World”.

好的，变化不大。 我们只评论和未评论的东西。 因此，现在有了之前的console.log，我们设置了变量，设置了函数，然后调用了该函数。 因此，如果现在运行节点1_helloworld.js我们将看到process.argv数组和“ Hello World”。

If we run node 1_helloworld.js “freeCodeCamp Nashville”, we’ll see an array with 3 elements and “Hello freeCodeCamp Nashville” printed. We can pass things in this way!

如果运行节点1_helloworld.js “freeCodeCamp Nashville” ，我们将看到一个包含3个元素的数组，并显示“ Hello freeCodeCamp Nashville”。 我们可以通过这种方式传递东西！

Let’s look at 2_hellofile.js now:

现在让我们看一下2_hellofile.js ：

const fs = require('fs');const fileToRead = process.argv[2] || 'README.md';const lineIndex = process.argv[3] - 1 || 3;fs.readFile(fileToRead, function (err, data) {    if (err) throw err;    var lines = data.toString('utf-8').split("\n");    console.log(lines[lineIndex]);});

Let’s run this with node 2_hellofile.js and see what we get. Whoa, where did that come from? Let’s walk through how this happened. I’m not going to walk through how fs works. It’s a module that comes with Node.js and if you want to learn more you can look here.

让我们在node 2_hellofile.js运行它，看看会得到什么。 哇，那是哪里来的？ 让我们来看看这是怎么发生的。 我不会介绍fs工作原理。 它是Node.js随附的模块，如果您想了解更多信息，可以在这里查看 。

• Line 1 we require the module in our JavaScript file

  第1行，我们需要JavaScript文件中的模块

  Now we can use everything that comes with it

  现在我们可以使用它随附的所有内容

• Line 2 we’re setting a variable equal to something we pass into our process.argv or README.md

  第2行，我们设置的变量等于传递给process.argv或README.md

• Line 3 we’re setting another variable equal to something we pass into our process.argv or 3

  第3行，我们设置了另一个变量，该变量等于传递给process.argv或3变量

• Line 5 we’re using the readFile function that comes with fs and passing in an argument and a callback function to handle an error or data

  第5行，我们使用fs附带的readFile函数，并传入一个参数和一个回调函数来处理错误或数据

• Line 6 we say we’ll throw an error if an error occurs
  第6行，如果发生错误，我们会抛出错误

• Line 8 we set a variable that takes the data fs gets for us and turns it into a string then splits it on “\n” so we end up with an array of strings

  第8行，我们设置了一个变量，该变量将为我们获取的数据fs获取并将其转换为字符串，然后将其拆分为“ \ n”，因此最终得到了一个字符串数组

• Line 10 we console.log the element from the lines array that is at lineIndex index position

  第10行，我们console.log来自lineIndex索引位置的lines数组中的元素

• Line 11 we close the function
  第11行，我们关闭功能

If you want to play with this try node 2_hellofile.js 'README.md' 14. We’re taking the readme and turning it into an array split at the end of each line then logging the line that we call by number.

如果您想玩这个游戏，请尝试node 2_hellofile.js 'README.md' 14 。 我们将使用自述文件 ，并将其转换为每行末尾的数组拆分，然后按数字记录调用的行。

On to 3_helloweb.js which should look like this:

转到3_helloweb.js ，它应如下所示：

const http = require('http');// on c9.io hostname must be '8080'// locally, this can be almost anythingconst port = 3000;// on c9.io hostname must be '0.0.0.0'// locally, you would use 'localhost' (a variable for '127.0.0.1')const hostname = 'localhost';const server = http.createServer(function(request, response){    response.writeHead(200, {"Content-Type": "text/plain"});    response.write("Hello Web! XOXO, Node");    response.end();});server.listen(port, hostname, function(){    console.log(`Server running at ${hostname}:${port}/`);});

Once again not to go too deep into what http is but it gets our server going. This 3_helloweb.js is going to be our Node.js web server. A very simple one but one nonetheless. Dave has left some notes for us. We need to change the port variable on line 5 to 8080 and the hostname variable on line 9 to '0.0.0.0'. If you were running this code locally the settings that are here should work. However, Cloud9 has some specific restrictions to how they will allow us to run a server. So make the changes and run node 3_helloweb.jsin your terminal.

再次不要太深究http是什么，但是它可以使我们的服务器正常运行。 此3_helloweb.js将成为我们的Node.js Web服务器 。 尽管如此，这是一个非常简单的过程。 戴夫为我们留下了一些笔记。 我们需要将第5行的port变量更改为8080 ，将第9行的hostname变量更改为'0.0.0.0' 。 如果您在本地运行此代码，则此处的设置应该起作用。 但是，Cloud9对于它们如何允许我们运行服务器有一些特定的限制。 因此进行更改， node 3_helloweb.js在终端中运行node 3_helloweb.js 。

You should be greeted with a Server running at 0.0.0.0:8080/ and a green box from Cloud9 with a link to the server:

您应该看到Server running at 0.0.0.0:8080/的Server running at 0.0.0.0:8080/以及Cloud9中带有服务器链接的绿色框：

When you click that link the first time you’ll get a nasty orange screen with a red button. That’s Cloud9 telling you to not use this type of server for anything important. So click through and you should see a web page that says “Hello Web! XOXO, Node”. That text coming straight from line 18 of our 3_helloweb.js file. To kill the server click on the terminal and ctrl + c or cmd + c.

第一次单击该链接时，您会得到一个带有红色按钮的讨厌的橙色屏幕。 Cloud9告诉您不要将此类服务器用于重要的事情。 因此，点击进入，您应该会看到一个网页，上面写着“ Hello Web！ XOXO，节点”。 该文本直接来自3_helloweb.js file第18行。 要终止服务器，请在终端上单击ctrl + c或cmd + c 。

Lastly, we have 4_helloexpress.js:

最后，我们有4_helloexpress.js ：

// bring in dependencies / librariesvar http = require('http');var express = require('express');var app = express();var bodyParser = require('body-parser');

// environment variablesvar port = 8080;var hostname = '0.0.0.0';

// parses text content of a http requestapp.use(bodyParser.text({ type: 'text/html' }));

// servers static files like our html $ css from public folderapp.use(express.static('public'));

// this handles our post request from the front endapp.post('/', function(req, res, next) {    console.log('Message from browser: ',  req.body);    res.end('Message received. Hello from the back end!');})

// start the server and listen for requestsvar server = http.createServer(app);

server.listen(port, hostname, function(){    console.log(`Server running at ${hostname}:${port}/`);});

In this app, we’re going to be using Express as our web application framework. Express is super popular. Read their docs if you’re interested, I’m not going to dive into it too deep here.

在此应用程序中，我们将使用Express作为我们的Web应用程序框架。 快递超级受欢迎。 如果您有兴趣，请阅读他们的文档，在这里我不会做得太深。

I’m actually not going to get too deep into this code except to point out a few things. Let’s run our server with node 4_helloexpress.js. When we go to the website we should have a simple form.

实际上，除了指出一些事情之外，我不会对这些代码进行深入研究。 让我们使用node 4_helloexpress.js运行服务器。 当我们进入网站时，我们应该有一个简单的表格。

This is coming from line 15 where we tell Express to serve the files in the public folder. The public folder has three files which make up our front end. Take a look at frontend.js back in Cloud9:

这是从第15行开始的，我们告诉Express在公共文件夹中提供文件。 公用文件夹包含组成我们前端的三个文件。 回顾一下Cloud9中的frontend.js ：

var submit = document.getElementById('submit');

var captureData = function(e) {    var data = document.getElementById('data');    sendData(data.value);}

var sendData = function(message) {

var xhr = new XMLHttpRequest();    xhr.open("POST", '/', true);    xhr.setRequestHeader("Content-type", "text/html");    xhr.onreadystatechange = function() {        if(xhr.readyState == XMLHttpRequest.DONE && xhr.status == 200) {            console.log('Sending: ' + message + '. Successful!');            console.log(xhr.response);        }    }    xhr.send(message); }

submit.addEventListener("click", captureData);

Now if you’re using Chrome (which we at freeCodeCamp Nashville recommend), open up the console back on that ugly purple page. ctrl + shift + i or cmd + shift + i should do it. If not, right-click anywhere purple and choose the “Inspect” option. You’ll see an error about favicon.ico and you can ignore that.

现在，如果您使用的是Chrome(我们在freeCodeCamp Nashville推荐使用)，请在紫色的丑陋页面上重新打开控制台。 ctrl + shift + i或cmd + shift + i应该这样做。 如果不是，请右键单击任何地方的紫色，然后选择“检查”选项。 您会看到有关favicon.ico的错误，您可以忽略它。

What we want to show is the front end talking to the back end server. We’re going to do this by logging to the two different consoles. So when we type something into our form and click “Submit” we should see this in our browser console:

我们要显示的是前端与后端服务器的对话。 我们将通过登录到两个不同的控制台来执行此操作。 因此，当我们在表单中键入内容并单击“提交”时，我们应该在浏览器控制台中看到以下内容：

and this in our Cloud9 server terminal:

这在我们的Cloud9服务器终端中：

When we click “Submit” we’re doing a POST request on line 11 of frontend.js. On line 14 we’re creating that first console message we see in our Chrome console if the data is sent successfully.

当我们单击“ Submit”时，我们在frontend.js第11行上执行POST请求。 如果数据发送成功，我们将在第14行上创建我们在Chrome控制台中看到的第一条控制台消息。

Then back in our 4_helloexpress.js on line 26, we set the server up to listen. Our front end sent the POST so the server “hears” that and handles it on line 18 because it’s a POST. On line 19 it logs to the Cloud9 terminal what we saw before and on line 20 it sends some stuff back to the front end.

然后回到第26行的4_helloexpress.js ，我们将服务器设置为侦听。 我们的前端发送了POST，因此服务器“听到”并在第18行处理它，因为它是POST。 在第19行，它将之前看到的内容记录到Cloud9终端，在第20行，它将一些东西发送回前端。

Line 16 in frontend.js receives the stuff the back end just sent in response and logs that to our Chrome console. That’s a lot of back and forth but illustrates how browsers and servers “talk” to each other.

frontend.js第16行接收到后端作为响应发送的内容，并将其记录到我们的Chrome控制台中。 来回反复很多，但说明了浏览器和服务器之间是如何“对话”的。

Hopefully, this piqued your interest and you want to start building your own full stack JavaScript apps. Or maybe now you know just enough to start having fun and playing around.

希望这引起了您的兴趣，并且您想开始构建自己的全栈JavaScript应用程序。 也许现在您知道的足够开始玩耍和玩耍。

If you want to hook up with us at freeCodeCamp Nashville, check us out on Meetup at freeCodeCamp Nashville. We also have a Free Code Camp Nashville Facebook Page.

如果您想在freeCodeCamp Nashville与我们联系，请在freeCodeCamp Nashville的Meetup上与我们联系 。 我们也有一个免费的代码营纳什维尔Facebook页面 。

My favorite is the #freecodecamp channel on the NashDev Slack network. If you want to join us, go to the link, and enter your email. You’ll get an invite to the network. Set up your account and once you log in you’ll jump into the #general channel by default. Type /join #freecodecamp and hit enter. Then you’ll be right there with us chatting.

我最喜欢的是NashDev Slack网络上的#freecodecamp频道。 如果您想加入我们，请转到链接，然后输入您的电子邮件。 您将收到网络邀请。 设置您的帐户，登录后默认情况下会跳入#general频道。 输入/join #freecodecamp并按Enter。 那您就和我们聊天了。

翻译自: https://www.freecodecamp.org/news/freecodecamp-nashville-october-meetup-recap-c9004ca5794e/