nodejs学习——http-server快速搭建前端应用

举报
fengfeng 发表于 2017/03/07 11:20:41 2017/03/07
【摘要】 nodejs现在非常火爆,基于nodejs搭建前端应用几乎成为主流。本文将简单介绍如何基于nodejs快速搭建前端应用。

nodejs现在非常火爆,基于nodejs搭建前端应用几乎成为主流。本文将简单介绍如何基于nodejs快速搭建前端应用。

安装nodejs

首先去官网下载nodejs安装包:https://nodejs.org/en/

windows下直接双击安装程序进行安装

Linux下首先解压安装包:

tar -zxvf node-v4.2.1-linux-x64.tar.gz

然后设置全局命令:

ln -s /home/tools/node-v4.2.1-linux-x64/bin/node /usr/local/bin/node

ln -s /home/tools/node-v4.2.1-linux-x64/bin/npm /usr/local/bin/npm

安装完成后,输入命令 node -v 可查看node版本,输入 npm -v可查看npm版本

设置代理

npm config set proxy http://proxyhk.huawei.com:8080/

npm config set https-proxy http://username:password@proxyhk.huawei.com:8080/            usernamepassword为登录桌面云时输入的用户名和密码

创建前端工程

这里我没有使用nodejs自带的express框架。

D:\workspace目录下创建文件夹nodejs-demo,即为我们的工程。

切换到工程目录下:cd nodejs-demo

在目录下新建文件package.json      该文件为npm的配置文件,内容如下:

javascript代码

{

02

    "name": "community",

 

03

    "version": "0.0.0",

04

    "private": true,

 

05

    "scripts":   {

06

        "start": "node   ./bin/www"

 

07

    },

08

    "dependencies":   {},

 

09

    "devDependencies":   {

10

        "grunt": "^0.4.5",

 

11

        "grunt-contrib-clean": "*",

12

    "grunt-contrib-concat": "*",

 

13

    "grunt-contrib-copy": "*",

14

    "grunt-contrib-jshint": "*",

 

15

    "grunt-contrib-uglify": "*",

16

    "grunt-contrib-watch": "*"      

 

17

    }       

18

}

name表示项目名称

version表示项目版本

devDependencies表示依赖的模块,代码中给出的表示该项目需要grunt及其插件。关于grunt会在后面的博客中讲。

执行npm install   即可安装这些模块。

然后在nodejs-demo文件夹下,可以看到自动生成了一个node_modules文件夹,该文件夹里存放的就是刚刚安装的grunt相关模块。

nodejs-demo文件夹中,新建src文件夹,我们将所有的代码都写在src文件夹中。

src文件夹下新建index.html文件,这里只用一个最简单的html文件举例。

html代码

01

<!DOCTYPE html>

02

<html>

 

03

    <head>

04

        <meta charset="utf-8">

 

05

        <title>Index</title>

06

    </head>

 

07

    <body>

08

        <h2>Hello   World</h2>

 

09

    </body>

10

</html>

接下来,我们需要启动一个服务器来运行该工程。

相比较nodejs推荐的express框架,可以使用更轻量级的http-server

http-server是一个服务搭建工具,也是基于nodejs,和express相比,更轻了,完全可以不用安装到项目的目录中。

安装http-server  

npm install http-server -g        如此即可全局安装http-server

接下来,可以在工程目录下使用命令    

http-server -a ip -p port   启动服务器

-a指定了ip -p指定了端口     如果不写这两个参数,默认会在localhost:8080启动服务。

关于http-server更详细的介绍,可以参见官网:https://www.npmjs.com/package/http-server

启动服务后,在浏览器中输入url    

http://localhost:8080/src/index.html   即可访问刚刚写的index.html文件。

可以看到,该项目比较轻量级,配置和部署都较为简易。

而且更为重要的是,这是一个纯粹的前端工程,和我们在eclipse中创建web工程有很大区别。

这种纯粹的前端工程,与前后台分离的设计理念相符合。

如此,我们基于nodejs搭建了一个最简单的前端工程。但是,仅仅这样还不够,在后面的博客中,我们会讲述如何使用一些工具来管理我们的前端工程。

作者 |张程

转载请注明出处:华为云博客 https://portal.hwclouds.com/blogs

【版权声明】本文为华为云社区用户原创内容,转载时必须标注文章的来源(华为云社区)、文章链接、文章作者等基本信息, 否则作者和本社区有权追究责任。如果您发现本社区中有涉嫌抄袭的内容,欢迎发送邮件进行举报,并提供相关证据,一经查实,本社区将立刻删除涉嫌侵权内容,举报邮箱: cloudbbs@huaweicloud.com
  • 点赞
  • 收藏
  • 关注作者

评论(0

0/1000
抱歉,系统识别当前为高风险访问,暂不支持该操作

全部回复

上滑加载中

设置昵称

在此一键设置昵称,即可参与社区互动!

*长度不超过10个汉字或20个英文字符,设置后3个月内不可修改。

*长度不超过10个汉字或20个英文字符,设置后3个月内不可修改。