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。那您就和我們聊天了。