我的第一个NodeJS程序

最新推荐文章于 2024-07-19 10:49:54 发布

原创最新推荐文章于 2024-07-19 10:49:54 发布 · 378 阅读

0 ·

CC 4.0 BY-SA版权

JavaScript或前端同时被 3 个专栏收录

44 篇文章

订阅专栏

网络

41 篇文章

订阅专栏

NodeJS

4 篇文章

订阅专栏

本文详细介绍使用NodeJS、Express及Jade等技术快速搭建一个简单的Web应用的过程，并通过Bower管理前端库。

Title:我的第一个NodeJS程序
Date: 2017-11-15
Author: kagula
Environment:
[1]Windows10/Windows7
[2]Git-2.15.0-64-bit.exe
[3]node-v8.9.1-x64.msi
[4]bower 1.8.2

Precondition:
[1]了解JS编程基础。

Keyword
NodeJS npm bower angular express jade

Introduction
使用NodeJS建一个尽可能简单的BS程序Demo，给自己一个快速入门。
jade是一个html模板引擎。
npm用来管理后端的库，bower用来管理前端的库。

这个示例需要你新建index.js，index.jade，style.css，angular_demo.html四个文件。

Content
第一步：准备
新建firstApp目录，我们整个项目的内容都会放在firstApp目录下。
这里假设你已经安装了nodejs和git.

第二步：NPM
控制台下cd到firstApp目录
npm install express
npm install jade
当前目录下会生成
[2-1]node_modules文件夹，里面安装了express和jade模块。
可以把node_modules文件夹看成是一个本地（局部）npm仓库。
[2-2]package-lock.json文件，里面包含本地npm仓库的信息。
现在目录结构如下：
FirstApp
|---node_modules
|---express
|---jade
|---package-lock.json
新版本的npm已经没有了package.json文件。

第三步：bower
bower类似maven，用于管辖前端开发所需的JS第三方库。

下面的-g参数是安装bower到全局仓库，这样我们命令行可以直接使用bower命令
npm install bower -g

执行bower初始化操作,一路回车，生成bower.json文件
bower init

用bower安装Augular
bower install angular --save
现在当前folder下会自动生成bower_components子目录，用来存放bower负责管理的jS前端库。
//当然你也可以指定安装某个版本，如
//bower install angular#1.6.0 --save
现在完整的目录结构如下
FirstApp
|---node_modules
|---express
|---jade
|---package-lock.json
|---bower.json
|---bower_components
|---angular

然后使用下面的命令创建硬链接
mklink /H D:\firstApp\public\js\external\angular.js D:\firstApp\bower_components\angular\angular.js
因为web服务的根节点会被映射到D:\firstApp\public，如果没有硬链接，就无法访问angular.js文件。
其中前一个路径是dest,后一个路径是src.
现在完整的目录结构如下
FirstApp
|---node_modules
|---express
|---jade
|---package-lock.json
|---bower.json
|---bower_components
|---angular
|---public
|---js
|---external
|---angular.js

第四步：静态页面调用Angular的演示
在FirstApp下新建public/view子路径，然后再新建
angular_demo.html
源文件内容如下：

<html ng-app="">
    <head>
        <title>Hello Angular</title>
        <!-- root路径被设成了public，所以这里的路径只要/js开头就可以了 -->
        <script src="/js/external/angular.js"></script>
    </head>
    <bod>
        <h2>测试用bower安装的angular是否可用，以及express的route功能</h2>
        <input type="text" ng-model="name"/>{{name}}
    </bod>
</html>

新建这个文件的目的在于测试，angular是否能正常使用以及express的route功能。

第五步：Express的route演示和jade演示
这里会新建index.js,index.jade,style.css三个文件

FirstApp目录下新建index.js文件，源文件内容如下：

var express = require('express');//引入express模块
var app = express();//创建应用

//定义public路径
var pub = __dirname + '/public';
app.use(express.static(pub));//设置静态目录为pubic

app.set('views', __dirname + '/public/view');//设置views路径映射到views文件夹
app.set('view engine', 'jade');//设置默认的模板引擎

//定义数据源
function User(name, email) {
  this.name = name;
  this.email = email;
}

var users = [
    new User('blue', 'blue@thisLineIsBlueColor.ca'), 
    new User('ciaran', 'ciaranj@gmail.com'),
    new User('aaron', 'aaron.heckmann+github@gmail.com')
];

//定义address映射
app.get('/', function(req, res){
  ///public/view/test目录下的index.jade文件
  //其中app set views中指定了/public/view路径前缀
  res.render('test/index', { users: users });
});

app.get('/angularDemo', function(req, res){
  res.sendFile('public/view/angular_demo.html', { root: __dirname });
});

app.use(function(err, req, res, next) {
  res.send(err.stack);
});

app.listen(80);
console.log('Express started on port 80');

在FirstAp目录下新建public/view/test路径，在这个路径下新建index.jade文件
这是一个模板文件，文件内容如下：

doctype html
html
  head
  title Jade Example
  link(rel="stylesheet", href="/stylesheets/style.css")

  body
    h1 Users
    #users
    for user in users
      h2= user.name
      .email= user.email

在FirstAp目录下新建stylesheets路径，在这个目录下新建style.css
style.css源文件内容如下：

body {
    padding: 50px 80px;
    font: 14px "Helvetica Nueue", "Lucida Grande", Arial, sans-serif;
  }
  .email{
      color: blue;
  }

在浏览器中就可以访问了，注意index指的就是index.js，这里的“.js”可以省略.

现在可以使用下面的路径测试，angular调用是否正确。

http://localhost/angularDemo

Remark
有了angular后就没必要用jade，不如html直观，后期维护比较复杂，要求网络传输较多数据。

Reference
[1]《从零构建部署Node.js+Express+Bootstrap Web应用》
http://blog.youkuaiyun.com/congyihao/article/details/60747076
[2]《【NodeJs环境下bower】如何更改bower_components文件夹的位置》
https://www.cnblogs.com/ficohu/p/5608773.html