我的第一个NodeJS程序

来源：互联网发布：个人怎么注册域名编辑：程序博客网时间：2024/06/05 15:21

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));//设置静态目录为pubicapp.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 htmlhtml  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.csdn.net/congyihao/article/details/60747076
[2]《【NodeJs环境下bower】如何更改bower_components文件夹的位置》
https://www.cnblogs.com/ficohu/p/5608773.html

阅读全文

0 0