百度360必应搜狗淘宝本站头条
当前位置:网站首页 > 编程字典 > 正文

前端开发,你要懂得Node.js的安装和使用方法

toyiye 2024-05-19 19:36 19 浏览 0 评论

文章来源:《Node.js区块链开发》——朱志文

今天我们来介绍Node.js的安装、使用方法,以帮你快速了解Node.js。

通过本篇的学习,你将对前端开发有一个完整的、全新的认知,还将学习到如何将那些第三方平台的资源收为已用。

本文所提到的加密货币开发语言统计分析项目SatisielAnalysis of Crptocureney Development Languages, SACDL),

在线体验地址为http//imfgithub.io/sacdl-project/

先看下 项目需求:

SACDL项目需要具备以下几个功能。

1)能够方便地读取第三方网站(这里是Github)的API,实现项目搜索功能。

2)能够对读取的数据进行集中处理,将其方便地转化为我们所需要的信息。

3)能够通过柱状图、矩阵图、表格等图表格式,将数据可视化。

4)方便扩展,为后续添加更多图表样式或其他网站API (比如交易市场的)做好准备。

技术选型:

无处不选择。不仅大方向需要选择,具体到每个开发包也要去仔细甄别,判断它们安全吗?好用吗?性能高吗?是否有更好的解决方案? ...

仅从上述需求来说,一个HTML文件再加一个Jascrie文件基本上就可以满足需求了,一般来说是不需要第三方包的,Node.js更是大材小用。

但事实上,很多项目就算只是前端的项目,化如Bootstrap等,也都是基于Node.js的, 为什么? 答案很简单,因为Node.js提供了很多方便又实用的工具。

Node.js的优点具体如下:

组织方便:

JavaScript没有模块化组织代码的能力。

在一个项目中,JavaScript通常会被分割到不同的文件中,如果采用以往的方式,处理起来将会非常头终,现在利用Node.js的模块进行管理,可以让你轻松组织代码。

资源广泛:

Node.js的出现让JavaScript第三方包像雨后春笋一样遍地开花。如果需要什么,只要一条命令,Node.js 就能帮您办理了,这一点带来了极大的便利。

全栈处理:

开发完后还有很多事情要做,比如,要对前端代码JavaScript或CsS文件进行合并、压缩、混淆,以及项目部署等。

体验过Ruby on Rails一键部署功能的小伙伴,都会对其印象深刻。Node.js也很容易优能做到这点,而且更加自然、流畅。

总之,有了Node.js,我们就可以像开发后台程序一样组织前端代码和项目了; 有了Node.js,就可以利用它背后强大的技术社区支持。

Node.js简介:

有读者说,第一次看到 Node.js,还以为就是一个JavaScript文件呢。

其实这很正常,很多前端的应用,比如大家讨论最多的前端开发框架三剑客——Angular.js ,Backone.js 和Ember.js就是一个JavaScript文件。

那么,Node.js 是什么呢?

官方解释是这样的:

Node.js?is a JavaScrip runtime built on Chrome's V8 JavaScipt engine. Node.js uses anevent-driven, non-blocking I/O model that makes it lightweight and efficient.

翻译如下:

Node.js?是一个搭建在Chrome V8上的JavaScript即时运行平台,采用的是事件驱动和非阻塞I/O模型,既轻量又高效。

通俗的解释就是,Node.js 是一一个可以让您利用JavaSript语言开发应用的平台,是构建运行在分布式设备上的数据密集型实时程序的完美选择。

请注意,这里所说的并不只是Web应用,很多人认为Nodejis仅能开发以服务器为中心的Web应用,其实不然,它还可以开发PC端或移动端的应用。

当然,我们看到的大部分析是Web应用,它是PHP+Apache、JSP+Tomcat、 Ruby on Rails + Passenger (或Thin)+ Nginx等传统Web开发的绝佳替代品。

如果你对此还没有直观的感受, 那么我告诉你一一个信息,Node.js 的作者原本就是想开发一种取代 Apache ,Nginx、Tomeat等产品的传统服务器软件的,

结果发展成了今天的Node.js。

你用Node.js写的每一个应用,既可以看作一个服务器软件,也可以看作一个Web应用,而且它还如此简单、高效。

什么是数据密集型、实时的应用?

聊天室、即时通信等都是数据密集型、实时的应用。

当然,还包括交易市场(比特币、股票、基金等),电子商务网站的即时交易等,甚至物联网,比如电器设备的监控和远程控制等也是此类应用。

笔者刚完成的一一个项目, 一家大型连锁超市的电器设备综合监控系统,就是使用Node.js开发的。

开发步骤:

下面所要介绍的开发过程可能会有点烦琐,读者需要耐心点,其实实践步骤很简单。

1 、搭建环境

对于初学者,建议先去Node.js官方网站浏览一遍。

笔者个人的开发环境具体如下,在此列出仅供参考。

操作系统是Ubuntu系统:您可以在现有的系统上,使用虚拟机软件安装Ubuntu系统。我们的全部示例和截图都是在Ubuntu系统上完成的。

IDE工具:Sublime Text或Atom。

强烈建议参考Node.js的官网信息(Node.js 官方网站的地址请参见6.6节)。

可在Ubuntu上通过nvm安装和管理Node,js。

下面是笔者个人的安装习惯,摘录其中的关键命令(各条命令都要在Ubuntu的命令行程序下运行)分别如下。

安装Nvm

$ curl –o- https://raw .githubusercontent .com/creationix/nvm/v0.29.0/install.sh 1bash

用Nvm安装Node,js

$ nvm install 5.1.0

$ nvm alias default 5.1.0

说明: 5.1.0是Nodejis的版本信息,写作本章时,Nodejis 的最新稳定版是5.4.0,长期支持版是4.2.4。

安装使用CNpm

使用淘宝npm镜像(http://pme. taobao.org ),可以提高国内组件的下载数度:

$ npm install -9 cnpm—registry=https://registry.npm.taobao.org

查看版本信息

$ nvm -v

$node –v

$npm –v

笔者的版本信息如下:

nvm 0.29.0

node v5.1.0

npm v3.3.12

2、新建工程

在电脑上,新建一一个文件夹sacdl-project, 以此作为工程目录,路径如下:

/home/yourname/projects/sacd1 -project

我们通常会把前端代码放在public目录下,然后分别建立js、css, images等目录,最后建立文件index .html和js/app.js,分别用于显示页面和编写JavaScript代码。

SACDL工程目录结构中,特定的单词拥有特定的意思,而且有固定的用途和功能。

如bower components 文件夹用于存放前端第三方组件,比如D3.js等,由bower自动生成; node_modules 文件夹用于存放后台第三方模块,由npm自动生成。

Dist 文件夹用于存放需要合并处理的目标文件,使用gulp维护。

test 位于测试文件夹下,存放测试代码。public 文件夹用于存放我们自己编写的代码,其中各项文件具体如下。

js/searcher.js: 表示搜索框处理代码。

js/utils.js: 表示数据处理代码。

Js/bar.js: 表示文件是D3.js的柱状图代码。

Js/treemap.js: 表示文件是矩阵图的代码。

Js/app.js: 表示用户综合调用,类似于把制器或路由。

3、前端组件

在命令行中,进人上述工程目录,安装自端管理工具bower:

$ cnpm install -g bower #也可以使用npm install★命令,二者一样,只不过cnpm使用淘宝镜像,在国内安装cnpm下载会更快些

说明:

bower是一个npm包,专门用于管理Web前端(包含js、CSS、 images、fonts 等)依赖包的。

我们可以进行简单类比,bower用于管理前端包,npm用于管理后台库(包),二者的用法十分相似。

初始化bower,代码如下:

$ bower init

结果如下所示:

kuby@kuby-virtual-machine:~/projects/doing/sacdl-projects bower init

>name sacral-project

>description 加密货币开发语言统计分析,statistical Analysis of Cryptocurrency Development Languages

>main file index.js

>what types of modules does this package expose?

>keywords Cryptocurrency, bitcoin,d3js,nodejs

>authors imply

>license MIT

>homepage http://github.com/imfly/sacdl-project

>set currently installed components as dependencies? Yes

>set commonly ignored files to ignore list? Yes

>would you like to make this package as private which prevents from being accidentally published to the registry? Yes

{

name: `sacral-project`,

description:` 加密货币开发语言统计分析,statistical Analysis of Cryptocurrency Development Languages`,

main : `index.js`,

authors: [

显示桌面

license: `MIT`,

keywords: [

`Cryptocurrency`

`bitcoin`

`d3js`

`nodejs`

],

homepage: `https://github.com/imfly/sacdl-project`,

moduleType: [],

private: true,

ignore: [

`**/.*`

`bower_components`

`test`

`tests`

]

}

Looks good ? ( Y/ n )

这样就会生成一个bower.json文件,然后,代码就可以被当作一个完整的前端组件来管理了。

通过bower安装D3.js,代码如下:

$ bower install d3 -- save

命令加上选项--save,将在bower.json文件里写入如下信息:

"dependencies":{

"d3": “~3.5.12",

}

这样,在另一台电脑上进行开发时,复制完代码( git clone),就可以直接运行下面的命令,自动安装所有要依赖的第三方组件了:

$ bower intall

说明:

D3.js可提供前端显示的柱状图、饼状图等,是非常著名的数据可视化前端开发包。

国内的数据可视化软件有百度的echats,还有一个higharts,这三者经常被拿来做比较。对这三者的简单区分就是,D3.js像开发包,可以任意编程开发,但据说入门较难;其他两个更像是模板,拿来就可以直接使用。

笔者选择的是D3js,这样选择纯属个人喜好:一方面,笔者个人喜欢完全控制代码;另一方面,在开发电子书版权保护和交易系统时会用到它。

前端交流群,私信发送【前端】获取

相关推荐

为何越来越多的编程语言使用JSON(为什么编程)

JSON是JavascriptObjectNotation的缩写,意思是Javascript对象表示法,是一种易于人类阅读和对编程友好的文本数据传递方法,是JavaScript语言规范定义的一个子...

何时在数据库中使用 JSON(数据库用json格式存储)

在本文中,您将了解何时应考虑将JSON数据类型添加到表中以及何时应避免使用它们。每天?分享?最新?软件?开发?,Devops,敏捷?,测试?以及?项目?管理?最新?,最热门?的?文章?,每天?花?...

MySQL 从零开始:05 数据类型(mysql数据类型有哪些,并举例)

前面的讲解中已经接触到了表的创建,表的创建是对字段的声明,比如:上述语句声明了字段的名称、类型、所占空间、默认值和是否可以为空等信息。其中的int、varchar、char和decimal都...

JSON对象花样进阶(json格式对象)

一、引言在现代Web开发中,JSON(JavaScriptObjectNotation)已经成为数据交换的标准格式。无论是从前端向后端发送数据,还是从后端接收数据,JSON都是不可或缺的一部分。...

深入理解 JSON 和 Form-data(json和formdata提交区别)

在讨论现代网络开发与API设计的语境下,理解客户端和服务器间如何有效且可靠地交换数据变得尤为关键。这里,特别值得关注的是两种主流数据格式:...

JSON 语法(json 语法 priority)

JSON语法是JavaScript语法的子集。JSON语法规则JSON语法是JavaScript对象表示法语法的子集。数据在名称/值对中数据由逗号分隔花括号保存对象方括号保存数组JS...

JSON语法详解(json的语法规则)

JSON语法规则JSON语法是JavaScript对象表示法语法的子集。数据在名称/值对中数据由逗号分隔大括号保存对象中括号保存数组注意:json的key是字符串,且必须是双引号,不能是单引号...

MySQL JSON数据类型操作(mysql的json)

概述mysql自5.7.8版本开始,就支持了json结构的数据存储和查询,这表明了mysql也在不断的学习和增加nosql数据库的有点。但mysql毕竟是关系型数据库,在处理json这种非结构化的数据...

JSON的数据模式(json数据格式示例)

像XML模式一样,JSON数据格式也有Schema,这是一个基于JSON格式的规范。JSON模式也以JSON格式编写。它用于验证JSON数据。JSON模式示例以下代码显示了基本的JSON模式。{"...

前端学习——JSON格式详解(后端json格式)

JSON(JavaScriptObjectNotation)是一种轻量级的数据交换格式。易于人阅读和编写。同时也易于机器解析和生成。它基于JavaScriptProgrammingLa...

什么是 JSON:详解 JSON 及其优势(什么叫json)

现在程序员还有谁不知道JSON吗?无论对于前端还是后端,JSON都是一种常见的数据格式。那么JSON到底是什么呢?JSON的定义...

PostgreSQL JSON 类型:处理结构化数据

PostgreSQL提供JSON类型,以存储结构化数据。JSON是一种开放的数据格式,可用于存储各种类型的值。什么是JSON类型?JSON类型表示JSON(JavaScriptO...

JavaScript:JSON、三种包装类(javascript 包)

JOSN:我们希望可以将一个对象在不同的语言中进行传递,以达到通信的目的,最佳方式就是将一个对象转换为字符串的形式JSON(JavaScriptObjectNotation)-JS的对象表示法...

Python数据分析 只要1分钟 教你玩转JSON 全程干货

Json简介:Json,全名JavaScriptObjectNotation,JSON(JavaScriptObjectNotation(记号、标记))是一种轻量级的数据交换格式。它基于J...

比较一下JSON与XML两种数据格式?(json和xml哪个好)

JSON(JavaScriptObjectNotation)和XML(eXtensibleMarkupLanguage)是在日常开发中比较常用的两种数据格式,它们主要的作用就是用来进行数据的传...

取消回复欢迎 发表评论:

请填写验证码