太原建站:面向前端开发人员的Node.js简介

2019.05.28 太原建站

151

如果您正在阅读本文,我将假设您是每天使用JavaScript的前端开发人员。您可能非常熟悉jQuery、YUI 3、主干或AngularJS等库。如果是这样的话,那么转换到Node.js就不会有那么大的挑战了。我知道你可能在想“但是Node.js和后端编码听起来很可怕。”

好吧,我有个秘密要告诉你,这都是JavaScript。所以这并不可怕,因为它是你一直在使用的东西。所以,现在你已经克服了紧张,让我们跳进去!

太原建站

第一件事

我们的第一步是安装Node.js。到nodejs.org并为您的平台安装正确的版本。幸运的是,他们有Windows和Mac的安装程序。如果您在linux上(Ubuntu),您应该能够打开一个终端并运行sudo apt-get update然后sudo apt-get install node.

建立我们的项目

让我们快速地设置一个示例项目,我们可以在本教程中使用它。在您的机器上的某个位置,创建一个名为node-test,我在Mac上,所以我把它放在~/Sites/nodejs/node-test.

包管理器

关于Node.js,我最喜欢的部分是节点包管理器或npm简称。什么是真正伟大的npm它允许您在一个文件中定义所有第三方库。在我们node-test文件夹中,让我们创建一个名为package.json并将以下代码粘贴到其中:

{
  "name": "node-test",
  "version": "0.0.1",
  "description": "a simple node.js project",
  "private": true,
  "dependencies": {
    "express": "3.x"
  }
}

现在,这是这个文件的一个非常简化的版本,您可以并且应该为您自己的项目添加更多的选项。

您会注意到的第一件事是,我们已经为我们的项目定义了名称、版本和描述。你可以把这些变成你想要的任何价值。接下来我们开始成为千真万确因为太原建站为了本教程的目的,这只是一个测试项目。此文件最重要的部分是dependencies属性。这就是我们定义所有第三方包的地方。你会注意到目前为止我们定义的唯一件事是Express.js其中,根据他们的站点是一个“Web应用框架的节点”。一个简单的类比可能是节点类似于普通的JavaScript,表达式类似于jQuery。您可以编写任何您想要的普通JS,但是使用jQuery可以使您的生活更加轻松,节点和表达式也是如此。

在我们开始建立我们的项目之前,唯一要做的就是打开一个终端,cd进入你的node-test目录和运行npm install。如果一切顺利,你应该看到这样的事情:

~/Sites/nodejs/node-test  $ npm install
npm http GET https://registry.npmjs.org/express
...
express@3.4.3 node_modules/express
├── methods@0.0.1
├── cookie-signature@1.0.1
...
└── connect@2.10.1 (uid2@0.0.2, pause@0.0.1, qs@0.6.5, bytes@0.2.0, raw-body@0.0.3, negotiator@0.2.8, multiparty@2.2.0)

设置项目

好了,现在我们已经安装了所有的依赖项,让我们来做一些有趣的事情。在我们node-test目录创建一个名为app.js。对于这个项目,我们所有特定于节点的代码都将驻留在这个文件中。

敞开app.js你最喜欢的编辑(我喜欢崇高)并粘贴此代码以使我们开始工作。

var express = require('express'),
    path = require('path');

//create our express app
var app = express();

//add some standard express middleware
app.configure(function() {
    app.use(express.logger('dev')); /* 'default', 'short', 'tiny', 'dev' */
    app.use(express.bodyParser());
    app.use(express.cookieParser());
    app.use(express.static('static'));
});

//routes
app.get('/', function(req, res) {
    res.send('hello world');
});

//have our app listen on port 3000
app.listen(3000);
console.log('Your app is now running at: http://127.0.0.1:3000/');

现在,让我们逐行分解这个问题。

你会在第一行注意到一些有趣的东西。我们在进口快递。节点使用模块,这方面的一个很好的例子是pressions.js。为了进一步说明这一点,让我们看一个简单的例子:

//in a file bar.js
exports.bar = function() {
  return 'Hello World Foo Bar'
};

//in app.js
var foo = require('./bar.js');
foo.bar(); //prints 'Hello World Foo Bar' to the console.

在上面的代码中,我们需要bar.js并将其分配给foo变量。然后我们打电话给bar中定义的方法。bar.js。一旦您了解了它的工作原理,节点就变得简单多了。

所以,回到我们的app.js你会看到我们导入的文件expresspath并将它们分配给以后使用的变量。接下来我们要做的是安装我们的快速应用程序,它直接从速递文件。然后我们加入一些标准快递中间件.

有趣的是,我们确定了我们的第一条路线。你会注意到我们在用app.get这里定义了我们希望这是一个GET请求。Express使创建RESTfulAPI非常容易,因此您也可以使用app.post为了创造,app.put更新和app.del删除。

在这行的下一部分中,我们将定义url。在本例中,我们使用域的根。'/',但我们也可以使用这样的方法天线宝宝第一高手论坛-tt538天线宝宝开奖结果-天线宝宝论坛精选资料专区-天线宝宝论坛开奖结果'/hello-world'.

然后,我们传入一个匿名回调函数。function(req, res) {当url与我们刚刚定义的路由匹配时执行。两个参数被传递给回调,reqres。思考这个问题的一个简单方法是req是来自浏览器的所有信息res是我们要发送回浏览器的所有东西。Express有许多精巧的快捷方式或辅助方法使我们的生活更轻松res.send就是其中之一。在这里,你可以看到,我们说,拿着这条绳子'hello world'然后把它送回浏览器让大家看看。

最后,我们太原建站告诉我们的应用程序在3000端口上运行。您可以选择任何您想要的端口,只要其他东西没有使用它。

你准备好看到这个行动了吗?好的,打开你的终端node-test目录运行node app.js。然后在浏览器中转到http://127.0.0.1:3000/你应该看看'hello world'印在屏幕上。挺干净的对吧?

既然你已经掌握了基本知识,水闸就完全打开了。你可以在几分钟内建立一个动态网站。

扩展我们的示例

发送文本到浏览器是有趣的,但在现实世界中,我们希望发送一个样式的HTML文档,让我们的网站访问者看到。在我们node-test目录创建一个名为views。视图内部创建一个index.hbs文件,它将保存我们的网站的HTML新主页。在……里面index.hbs我们可以添加一些默认的html(我是从一个Twitter引导程序中得到的)实例):

<html>
	    <head>
	      <title>Node Text</title>
	      <link rel="stylesheet" href="//netdna.bootstrapcdn.com/bootstrap/3.0.0/css/bootstrap.min.css">
	    </head>
	    <body>
	      <div class="navbar navbar-inverse navbar-fixed-top">
	          <div class="container">
	            <div class="navbar-header">
	              <button type="button" class="navbar-toggle" data-toggle="collapse" data-target=".navbar-collapse">
	                <span class="icon-bar"></span>
	                <span class="icon-bar"></span>
	                <span class="icon-bar"></span>
	              </button>
	              <a class="navbar-brand" href="https://speckyboy.com/">Node test</a>
	            </div>
	            <div class="collapse navbar-collapse">
	              <ul class="nav navbar-nav">
	                <li class="active"><a href="https://speckyboy.com/">Home</a></li>
	              </ul>
	            </div>
	          </div>
	        </div>

	        <div class="container">

	          <div class="starter-template" style="padding-top: 50px;">
	            <h1>Hello World</h1>
	            <p class="lead">Use this document as a way to quickly start any new project.<br> All you get is this text and a mostly barebones HTML document.</p>
	          </div>

	        </div>
	    </body>
	    </html>

为了让我们的应用程序处理模板,我们需要做一些事情。第一名app.js在我们定义中间件的上面添加了以下两行:

//setup our app to use handlebars.js for templating
app.set('view engine', 'hbs');
app.set('views', path.join(__dirname, 'views'));

这表明我们希望使用handlebars.js模板。

在里面的时候app.js将此行更改为res.send('hello world');res.render('index');。此更改告诉Express在视图目录中查找一个名为index.hbs的文件。

接下来我们需要做的就是打开我们的packages.json文件夹备份并添加以下行:"hbs": "*",在……下面"express": "3.x",。然后返回您的终端并重新运行npm install命令。现在已经安装好了,通过运行重新启动服务器node app.js在终端中打开浏览器http://127.0.0.1:3000/。您应该会看到一个好的新响应主页为您的网站。

从这里往哪里走?

太原建站强烈建议大家读一下导轨API文档。两者都是短期阅读,并将教你很多。

节点有一个伟大的社区和第三方图书馆是惊人的。机会是,如果你想要它,有人已经为你写了它。从搜寻开始npmjs.org,但谷歌和Gizub也是很好的资源。

您可能会决定您的新站点需要一个数据库。好节点非常适合MongoDB,这对于前端开发人员来说非常好,因为它使用json来存储数据。我建议你调查一下mongoose.js这使得使用MongoDB更加容易。


最新案例

联系电话 400-6065-301
赚钱高手两组三中三-三中三复式计算公式-三码中特全免费公开码 本港台现场报码直播j2-本港开奖结果现场开码-本港台现场搅珠直播 正版管家婆一句赢大钱-www管家婆27735com-管家婆小鱼儿论坛心水 九龙心水三肖永不改料-九龙心水525757com-九龙老牌图库彩图大全 澳门123696com开奖结果-626969cc澳门资料大全-2021澳门合彩开彩结果