Node.js开发Web后高服务

一、简介

Node.js 是一个基于Google Chrome V8 引擎的 JavaScript 运行环境。Node.js
使用了一个事件驱动、非阻塞式 I/O 的范,使其轻量又高效。Node.js
的承保管理器 npm,是天底下最为要命之开源库生态系统。

AngularJS 1

能便宜地搭建响应速度快、易于扩展的网络以,Node.js 使用事件驱动,
非阻塞I/O
模型如果得轻量和便捷,非常适合在分布式设备及运行的数码密集型的实时应用。

官网:https://nodejs.org/en/
中文:https://cnodejs.org/、http://nodejs.cn/

API:http://nodeapi.ucdok.com/#/api/

简易说Node.js就是运行在劳动器端的JavaScript,是现行兴的语言中能够而且运转在前者和后台的程序语言,你可以管JavaScript想像成Java与C#。相关技能:

数据库:MongoDB,非关系项目数据库,NoSQL(Not only SQL)

MVC框架:AngularJS

Web服务器:Express

模板引擎:jade、ejs、htmljs、swig、hogan.js

亚、搭建Node.js开发条件

2.1、安装Node.js

失去官网下下载最新版本的Node.js一步一步按提示安装即可,如果设置失败就是手动安装,将Node.js的安位置布置到环境变量的path中。

AngularJS 2

安好后启动命令执行,测试:

AngularJS 3

2.2、安装IDE开发Node.js插件

如若非动IDE开发项目效率比逊色,在诸多主流的合开发条件(IDE)中还好设置插件支持Node.js开发,如Eclipse,这里我们为HBuilder为条例:

起先HBuilder->工具->插件安装

AngularJS 4

安装成功后即使可以新建Node.js项目了:

AngularJS 5

此处选择Hello World,新建好之项目如下:

AngularJS 6

hello-world-server.js文件就是一个简约的web服务器,右键选择“运行方式”->”Node
Application”

控制台提示“Server running at
http://127.0.0.1:1337/”在浏览器查看的效果如下:

AngularJS 7

三、第一个Node.js程序

以点的以身作则中,我们是由此IDE完成编译和运行的,其实手动运行为得以,比如编写一截代码如下:

server.js

//依赖一个http模块,相当于java中的import,与C#中的using
var http = require('http');

//创建一个服务器对象
server = http.createServer(function (req, res) {
//设置请求成功时响应头部的MIME为纯文本
res.writeHeader(200, {"Content-Type": "text/plain"});
//向客户端输出字符
res.end("Hello World\n");
});
//让服务器监听本地8000端口开始运行
server.listen(8000,'127.0.0.1');
console.log("server is runing at 127.0.0.1:8000");

当node环境下讲运作:

AngularJS 8

运行结果:

AngularJS 9

引入 required 模块:我们可以使用 require 指令来载入 Node.js 模块。
创建服务器:服务器可以监听客户端的伸手,类似于TomCat、IIS、Apache
、Nginx 等 HTTP 服务器。
接纳请求与应请求 服务器很轻创建,客户端好以浏览器还是终点发送 HTTP
请求,服务器收到请求后赶回响应数据。

首先履行要(require)Node.js 自带的 http 模块,并且将她赋值给 http
变量。
连下去我们调用 http 模块提供的函数: createServer 。这个函数会回
一个对象,这个目标来一个称 listen 的主意,这个方式来一个数值参数,
指定这个 HTTP 服务器监听的端口号。

季、NPM(Node.js包管理器)

NPM是连同NodeJS一起安装之保管理工具,能化解NodeJS代码部署达成之成百上千题材,常见的施用状况有以下几栽:
a)、允许用户从NPM服务器下充斥他人修的老三在担保到地方使用。
b)、允许用户从NPM服务器下载并设置别人修的通令行程序到当地使用。
c)、允许用户将团结修的承保要指令行程序上流传NPM服务器供别人使用。

官网:https://www.npmjs.com/

4.1、查看npm版本
由新版的nodejs已经集成了npm,所以前面npm也一致连安装好了。同样可以通过输入
“npm -v” 来测试是否成安装。命令如下,出现版本提示表示安装成功:

AngularJS 10

4.2、升级npm

倘您安装之是原来本子的 npm,可以充分爱得经过 npm 命令来提升

npm install npm -g

 AngularJS 11

4.3、安装模块

npm install <Module Name> -参数

若果带来参数-g代表全局安装,否则就是安到某某目录下。

以下实例,我们采取 npm 命令安装常用的 Node.js web框架模块 express

AngularJS 12

4.4、卸载模块

俺们可采取以下命令来卸载 Node.js 模块。
npm uninstall <Module Name>

如先使用安装指令安装bootstrap:

npm install bootstrap

更采取卸载指令删除模块:

npm uninstall bootstrap

可以到 /node_modules/ 目录下查看包是否还在

4.5、模块列表

应用模块列表命令可以方便的看到眼前路蒙因之担保:
npm ls

AngularJS 13

4.6、更新模块

咱得以使用以下命令更新模块:
npm update 模块名称
npm up -g 模块名称

4.7、搜索模块

npm search 模块名称

4.8、NPM 常用命令

除此之外本章介绍的有些外,NPM还提供了累累意义,package.json里吧生多其他有效的字段。
除开可以当npmjs.org/doc/查看官方文档外,这里再次介绍一些NPM常用命令。
NPM提供了森发令,例如install和publish,使用npm help可查有命令。
NPM提供了多命令,例如install和publish,使用npm help可查阅有命令。
动npm help <command>可查有修命令的详细帮助,例如npm help
install。
每当package.json所当目下利用npm install .
-g可先在当地安装时命令行程序,可用来发布前的当地测试。
行使npm update
<package>可以拿当前目录下node_modules子目录内的附和模块更新至最新版本。
以npm update <package>
-g可以拿全局安装的照应命令行程序更新至顶新版。
下npm cache
clear可以清空NPM本地缓存,用于对付使用相同版本号发布新本子代码的丁。
利用npm unpublish
<package>@<version>可以撤销发布温馨公布过的某部版本代码。

4.9、更换NPM 镜像

因为npm的服务器在海外,在网络状态糟糕的气象下引入一个模块会以网络延迟而惜败,可以变成国内速度还快之镜像服务器,这里因为使用淘宝
NPM 镜像(http://npm.taobao.org/)为例:

npm install -g cnpm –registry=https://registry.npm.taobao.org

AngularJS 14

这般即便足以应用 cnpm 命令来安模块了:
$ cnpm install [name]

AngularJS 15

当即是一个完 npmjs.org
镜像,你可据此者替官方版(只读),同步频率目前呢 10分钟
一不行因为管尽量与合法服务协同。

一经是安失败,可以试:

alias cnpm="npm --registry=https://registry.npm.taobao.org \
--cache=$HOME/.npm/.cache/cnpm \
--disturl=https://npm.taobao.org/dist \
--userconfig=$HOME/.cnpmrc"

# Or alias it in .bashrc or .zshrc
$ echo '\n#alias for cnpm\nalias cnpm="npm --registry=https://registry.npm.taobao.org \
  --cache=$HOME/.npm/.cache/cnpm \
  --disturl=https://npm.taobao.org/dist \
  --userconfig=$HOME/.cnpmrc"' >> ~/.zshrc && source ~/.zshrc

 

五、Express

Express 是一个简短而活的 node.js Web应用框架,
提供了同样文山会海有力特性帮助而创造各种 Web 应用,和添加的 HTTP 工具。
应用 Express
可以高速地充实建筑一个圆意义的网站。使用Node.js作为AngularJS开发Web服务器的特级方法是使用Express模块。

Express官网: http://expressjs.com/

Express4.x API:http://expressjs.com/zh-cn/4x/api.html

AngularJS 16

5.2、Express框架核心特性

好设置中件来响应 HTTP 请求。

概念了路由表用于执行不同的 HTTP 请求动作。

得经过为模板传递参数来动态渲染 HTML 页面。

添加的 HTTP 快捷方法与任性排列组合的 Connect
中间件,让您创造健康、友好之 API 变得既是快并且简便。

Express 不针对 Node.js 已有的特性开展次差抽象,我们只是在它之上扩展了 Web
应用所要的基本功能。

5.3、安装 Express

安 Express 并以该保存到依靠列表中:

npm install express –save

AngularJS 17

如上命令全局安装express。也可是装时指定安装中间件。

body-parser – node.js 中间件,用于拍卖 JSON, Raw, Text 和 URL
编码的数额。

cookie-parser –
这便是一个解析Cookie的家伙。通过req.cookies可以博得到污染过来的cookie,并把它转成对象。

multer – node.js 中间件,用于拍卖
enctype=”multipart/form-data”(设置表单的MIME编码)的表单数据。

$ npm install body-parser –save
$ npm install cookie-parser –save
$ npm install multer –save

默认这些模块都曾添加。

5.4、第一个Express框架实例

接下我们应用 Express 框架来输出 “Hello World”。
以下实例中我们引入了 express 模块,并以客户端发起呼吁后,响应 “Hello
World” 字符串。

缔造一个目,如Project,进入命令行:

使用npm install express 导入express模块。

当目录下开创hello.js文件,如下所示:

//引入express模块
var express = require('express');
//创建一个app对象,类似一个web 应用(网站)
var app = express();
//接受指定路径的请求,指定回调函数
app.get('/', function (req, res){
res.send('Hello World');
});
//创建一个web服务器,可以认为就是web服务器对象
//监听8081端口,当监听成功时回调
var server = app.listen(8081, function () {
   var host = server.address().address;  //地址
   var port = server.address().port;  //端口
    console.log("应用实例,访问地址为 http://%s:%s", host, port);
});
})

使用node执行js:

AngularJS 18

运转结果:

AngularJS 19

5.5、使用Nodeclipse开发Express项目

如若直白采用记事本效率会不愈,nodeclipse插件可以好之创一个Express项目,步骤如下:

AngularJS 20

创造好之路如下:

AngularJS 21

app.js是网站:

var express = require('express');
var path = require('path');
var favicon = require('serve-favicon');
var logger = require('morgan');
var cookieParser = require('cookie-parser');
var bodyParser = require('body-parser');

var index = require('./routes/index');
var users = require('./routes/users');

var app = express();

//指定视图引擎为ejs
app.set('views', path.join(__dirname, 'views'));
app.set('view engine', 'ejs');

// uncomment after placing your favicon in /public
//app.use(favicon(path.join(__dirname, 'public', 'favicon.ico')));
app.use(logger('dev'));
app.use(bodyParser.json());
app.use(bodyParser.urlencoded({ extended: false }));
app.use(cookieParser());
app.use(express.static(path.join(__dirname, 'public')));

app.use('/', index);
app.use('/users', users);

// catch 404 and forward to error handler
app.use(function(req, res, next) {
  var err = new Error('Not Found');
  err.status = 404;
  next(err);
});

// error handler
app.use(function(err, req, res, next) {
  // set locals, only providing error in development
  res.locals.message = err.message;
  res.locals.error = req.app.get('env') === 'development' ? err : {};

  // render the error page
  res.status(err.status || 500);
  res.render('error');
});

module.exports = app;

bin\www是web服务器:

#!/usr/bin/env node

/**
 * 依赖模块,导入
 */

var app = require('../app');
var debug = require('debug')('nodejsexpress:server');
var http = require('http');

/**
 * 从上下文环境中获得监听端口,如果空则3000
 */

var port = normalizePort(process.env.PORT || '3000');
app.set('port', port);

/**
 * 创建Web服务器
 */

var server = http.createServer(app);

/**
 * 开始监听
 */

server.listen(port);
server.on('error', onError);  //指定发生错误时的事件
server.on('listening', onListening);  //当监听成功时的回调

/**
 * 规范化端口
 */

function normalizePort(val) {
  var port = parseInt(val, 10);

  if (isNaN(port)) {
    // named pipe
    return val;
  }

  if (port >= 0) {
    // port number
    return port;
  }

  return false;
}

/**
 *错误事件监听
 */

function onError(error) {
  if (error.syscall !== 'listen') {
    throw error;
  }

  var bind = typeof port === 'string'
    ? 'Pipe ' + port
    : 'Port ' + port;

  //错误处理
  switch (error.code) {
    case 'EACCES':
      console.error(bind + ' requires elevated privileges');
      process.exit(1);  //结束程序
      break;
    case 'EADDRINUSE':
      console.error(bind + ' is already in use');
      process.exit(1);
      break;
    default:
      throw error;
  }
}

/**
 * 当用户访问服务器成功时的回调
 */

function onListening() {
  var addr = server.address();
  var bind = typeof addr === 'string'
    ? 'pipe ' + addr
    : 'port ' + addr.port;
  debug('Listening on ' + bind);
}

routers/index.js路由,有硌类似控制器或Servlet:

var express = require('express');
var router = express.Router();

/* 获得首页 */
router.get('/', function(req, res, next) {
  res.render('index', { title: 'Express' });
});

module.exports = router;

views/index.ejs首页视图:

<!DOCTYPE html>
<html>
  <head>
    <title><%= title %></title>
    <link rel='stylesheet' href='/stylesheets/style.css' />
  </head>
  <body>
    <h1><%= title %></h1>
    <p>Welcome to <%= title %></p>
  </body>
</html>

当www上右键选择“运行方式”->“Node Application”运行结果:

AngularJS 22

AngularJS 23

5.6、ejs基础

ejs是一个Express
Web应用之模版引擎,在NodeJS开发被好选的模板引擎可能是具备Web应用开发中范围最广泛的,如jade、ejs、htmljs、swig、hogan.js,但ejs是极度易上手的,与jsp,asp,php的本来面目模板引擎风格好像。

官网:http://www.embeddedjs.com/

增长一个product.js路由:

var express = require('express');
var router = express.Router();

/* 产品 */
router.get('/', function(req, res, next) {

  var products=[];
  products.push({name:"ZTE U880",price:899.8});
  products.push({name:"HuWei 荣耀8",price:1899.8});
  products.push({name:"iPhone 7 Plus 128G",price:5899.8});

  //将product视图与指定的对象渲染后输出到客户端
  res.render('product', { title: '天狗商城', pdts:products});
});

module.exports = router;

在views目录下上加product.ejs视图,这里是一个简短的MVC:

<!DOCTYPE html>
<html>

    <head>
        <title>
            <%= title %>
        </title>
        <link rel='stylesheet' href='/stylesheets/style.css' />
    </head>

    <body>
        <h1><%= title %> - 产品列表</h1>
        <table border="1" width="80%">
            <tr>
                <th>序号</th>
                <th>名称</th>
                <th>价格</th>
            </tr>
            <%pdts.forEach(function(pdt,index){%>
            <tr>
                <td>
                    <%=index+1%>
                </td>
                <td>
                    <%=pdt.name%>
                </td>
                <td>
                    <%=pdt.price%>
                </td>
            </tr>
            <%});%>
        </table>

        <ul>
            <% for(var i=0; i<pdts.length; i++) {%>
            <li>
                <%=pdts[i].name%>
            </li>
            <% } %>
    </body>

</html>

修改app,注册定义好的模块product:

var index = require('./routes/index');
var users = require('./routes/users');
var pdts = require('./routes/product');

var app = express();

//指定视图引擎为ejs
app.set('views', path.join(__dirname, 'views'));
app.set('view engine', 'ejs');

// uncomment after placing your favicon in /public
//app.use(favicon(path.join(__dirname, 'public', 'favicon.ico')));
app.use(logger('dev'));
app.use(bodyParser.json());
app.use(bodyParser.urlencoded({ extended: false }));
app.use(cookieParser());
app.use(express.static(path.join(__dirname, 'public')));

app.use('/', index);
app.use('/users', users);
app.use('/pdt', pdts);

运行结果:

AngularJS 24

5.7、lodash

当下是一个备同样接口、模块化、高性能等特性的 JavaScript
工具库。可以充分便宜之操作json。

官网:http://lodashjs.com/

安装:

npm i -g npm

npm i –save lodash

设置时事先用cd切换到即型下。

假如浏览器采用可以直接引入:

<script src=”lodash.js”></script>

添加lodash依赖:

AngularJS 25

仗成功后会见当package.json中加上引用:

AngularJS 26

后台Node.js使用,可以引入模块:

//导入lodash模块
var _= require('lodash');

var products=[];
products.push({name:"ZTE U880",price:899.8});
products.push({name:"HuWei 荣耀8",price:1899.8});
products.push({name:"iPhone 7 Plus 128G",price:5899.8});

//1、取出第一个元素
var obj1=_.first(products);
console.log(obj1.name);  //ZTE U880

//2、取出最后一个元素
var obj2=_.last(products);
console.log(obj2.name);  //iPhone 7 Plus 128G

//3、指定查找条件返回符合条件的索引
var obj3=_.findIndex(products,function(obj){
    return obj.price>=1000&&obj.name.indexOf("7")>0;
});
console.log(obj3);  //2

//4、指定查找条件返回查找到的对象
var obj4=_.find(products,function(obj){
    return obj.price>=1000&&obj.name.indexOf("7")>0;
});
console.log(obj4);  //{ name: 'iPhone 7 Plus 128G', price: 5899.8 }

//5、排序
var obj5=_.orderBy(products,["price","name"],["desc","asc"]);
console.log(obj5); 

//[ { name: 'iPhone 7 Plus 128G', price: 5899.8 },
//{ name: 'HuWei 荣耀8', price: 1899.8 },
//{ name: 'ZTE U880', price: 899.8 } ]

//6、查找价格为1899.8的产品的key
var obj6=_.findKey(products,{price:1899.8});
console.log(obj6);   //1

API的应用非常简单,但待留意版本,可以现查现用,API地址:https://lodash.com/docs/4.17.2 

5.8、参数

5.8.1、URL中之参数占位

Checks route params (req.params), ex: /user/:id

127.0.0.1:3000/index,这种状况下,我们为拿走index,我们得经以req.params得到,通过这种艺术我们不怕好十分好之处理Node中之路由处理问题,同时用就点可很有利于之落实MVC模式;

//获得产品根据Id
router.get('/:id/:category',function(request,res,next){
    res.send(request.params.id+","+request.params.category);
});

运行结果:

AngularJS 27

5.8.2、URL中的QueryString

Checks query string params (req.query), ex: ?id=12

127.0.0.1:3000/index?id=12,这种状况下,这种方法是收获客户端get方式传递过来的值,通过动用req.query.id就得博得,类似于PHP的get方法;

router.get('/:id',function(request,res,next){
    res.send("name:"+request.query.name);
});

运行结果:

AngularJS 28

5.8.3、HTTP正文中之参数

 在post请求中拿走表单中之数。

Checks urlencoded body params (req.body), ex: id=

127.0.0.1:300/index,然后post了一个id=2的价,这种方式是收获客户端post过来的多少,可以经过req.body.id获取,类似于PHP的post方法;

AngularJS 29

页面:

AngularJS 30AngularJS 31

<!DOCTYPE html>
<html>

    <head>
        <title>
            <%= title %>
        </title>
        <link rel='stylesheet' href='/stylesheets/style.css' />
    </head>

    <body>
        <h1><%= title %> - 产品列表</h1>
        <table border="1" width="80%">
            <tr>
                <th>序号</th>
                <th>名称</th>
                <th>价格</th>
            </tr>
            <%pdts.forEach(function(pdt,index){%>
            <tr>
                <td>
                    <%=index+1%>
                </td>
                <td>
                    <%=pdt.name%>
                </td>
                <td>
                    <%=pdt.price%>
                </td>
            </tr>
            <%});%>
        </table>

        <ul>
            <% for(var i=0; i<pdts.length; i++) {%>
            <li>
                <%=pdts[i].name%>
            </li>
            <% } %>
        </ul>
<p>
            <%if(typeof msg!="undefined"){%>
                <%=msg%>
            <%}%>
</p>
        <form action="pdt/add" method="post">
            <p>
                名称:<input name="name" />
            </p>
            <p>
                价格:<input name="price" />
            </p>
            <button>添加</button>
        </form>




    </body>

</html>

View Code

代码:

router.post('/add',function(request,res,next){
    var entity={name:request.body.name,price:request.body.price};
    products.push(entity);
      //将product视图与指定的对象渲染后输出到客户端
      res.render('product', { title: '天狗商城', pdts:products,msg:"添加成功"});
});

结果:

AngularJS 32

5.9、JSON

万一急需Node.js向外提供返回JSON的接口,Express也是老方便之,可以采取本在浏览器被利用到的JSON对象,这是一个浏览器内置对象在劳务好直接下:

将目标序列化成字符:

            //对象
            var rose={"name":"Rose","weight":"65"};
            //序列化成字符串
            var str=JSON.stringify(rose);
            alert(str);

结果:

AngularJS 33

反序列化,将字符转换成为靶子:

            //将字符串转换成JavaScript对象
            var markStr='{"name":"mark","weight":"188"}';
            var mark=JSON.parse(markStr);
            alert(mark.name+","+mark.weight);

结果:

AngularJS 34

Express已经封装了一个json方法,直接调用该方式就可序列化对象:

/* 产品 */
router.get('/rest', function(req, res, next) {
  res.json(products);
});

运作结果:

 AngularJS 35

六、RESTful(表述性状态转移)

REST是英文Representational State
Transfer的缩写,中文称之为“表述性状态转移”
基于HTTP协议
举凡其他一样种植服务架构
传送是JSON、POX(Plain Old XML)而非是SOAP格式的数码
充分利用HTTP谓词(Verb)
厚数据的传导,业务逻辑交给客户端自行处理

REST是平种分布式服务架构的风格约束,像Java、.Net(WCF、WebAPI)都发生对拖欠约束的贯彻,使URL变得越来越有含义,更加从简,如:

http://www.zhangguo.com/products/1 get请求 表示收获有成品之第1只

http://www.zhangguo.com/products/product post请求 表示添加一个成品

http://www.zhangguo.com/products/1/price get请求 表示收获第1个产品的价格

http://www.zhangguo.com/products/1 delete请求 删除编号也1底成品

REST设计要遵循的尺码
纱达到的备东西都为架空为资源(resource);
每个资源对应一个唯一的资源标识符(resource identifier);
透过通用的连接器接口(generic connector interface)对资源开展操作;
本着资源的各种操作不会见变动资源标识符;
有着的操作都是无状态的(stateless)

谓词
GET
表示查询操作,相当于Retrieve、Select操作
POST
意味着插入操作,相当给Create,Insert操作
PUT
表示修改操作,相当给Update操作
DELETE
意味着去操作,相当给Delete操作

其他还有:

AngularJS 36

NodeJS+Express可以十分易之兑现REST

application/x-www-form-urlencoded

multipart/form-data

application/json

res.setHeader(‘Content-Type’, ‘application/json;charset=utf-8’);  

演示代码cars.js:

var express = require('express');
var router = express.Router();
var _= require('lodash');

var cars=[];
cars.push({id:201701,name:"BMW",price:190,speed:"210km/h",color:"白色"});
cars.push({id:201702,name:"BYD",price:25,speed:"160km/h",color:"红色"});
cars.push({id:201703,name:"Benz",price:300,speed:"215km/h",color:"蓝色"});
cars.push({id:201704,name:"Honda",price:190,speed:"170km/h",color:"黑色"});
cars.push({id:201705,name:"QQ",price:130,speed:"210km/h",color:"白色"});

/* Get */
/*获得所有汽车*/
/*url /cars/*/
router.get('/', function(req, res, next) {
    res.json(cars);
});

/*Get*/
/*获得汽车通过id*/
/*url:/cars/:id  */
router.get('/:id', function(req, res, next) {
     //从路径中映射参数,转换成数字
      var id=parseInt(req.params.id);
      var car=_.find(cars,{id:id});
      res.json(car);
});

/*Post*/
/*添加汽车*/
/*url:/cars/car  */
router.post('/car', function(req, res, next) {
      var car=req.body;  //从请求正文中获得json对象
      car.id=_.last(cars).id+1;  //将编号修改为最后一辆车的编号+1
      cars.push(car);  //将汽车对象添加到集合中
      res.json(car);  //将添加成功的车以json的形式返回
});

/*Put*/
/*修改汽车*/
/*url:/cars/car  */
router.put('/car', function(req, res, next) {
      var car=req.body;  //从请求正文中获得json对象
      console.log(req.body);
      var index=_.findIndex(cars,{id:parseInt(car.id)});  //根据id获得车在集合中的下标

      cars[index]=car;  //替换原对象
      //res.json(car);  //将修改后的车以json的形式返回
      res.send({status:"success", message:"更新成功!"});  
});

/*Delete*/
/*删除汽车*/
/*url:/cars/:id  */
router.delete('/id/:id', function(req, res, next) {
      //获得url中的编号参数
      var id=parseInt(req.params.id);
      var index=_.findIndex(cars,{id:id});  //根据id获得车在集合中的下标
      cars.splice(index,1);   //在cars数组中删除下标从index开始的1条数据
      res.send({status:"success", message:"删除成功!"});  
});

module.exports = router;

演示代码app.js:

var express = require('express');
var path = require('path');
var favicon = require('serve-favicon');
var logger = require('morgan');
var cookieParser = require('cookie-parser');
var bodyParser = require('body-parser');

var index = require('./routes/index');
var users = require('./routes/users');
var pdts = require('./routes/product');
var task = require('./routes/task');
var cars = require('./routes/cars');

var app = express();

//指定视图引擎为ejs
app.set('views', path.join(__dirname, 'views'));
app.set('view engine', 'ejs');

// uncomment after placing your favicon in /public
//app.use(favicon(path.join(__dirname, 'public', 'favicon.ico')));
app.use(logger('dev'));
app.use(bodyParser.json());
app.use(bodyParser.urlencoded({ extended: false }));
app.use(cookieParser());
app.use(express.static(path.join(__dirname, 'public')));

app.use('/', index);
app.use('/users', users);
app.use('/pdt', pdts);
app.use("/task",task);
app.use("/cars",cars);

// catch 404 and forward to error handler
app.use(function(req, res, next) {
  var err = new Error('Not Found');
  err.status = 404;
  next(err);
});

// error handler
app.use(function(err, req, res, next) {
  // set locals, only providing error in development
  res.locals.message = err.message;
  res.locals.error = req.app.get('env') === 'development' ? err : {};

  // render the error page
  res.status(err.status || 500);
  res.render('error');
});

module.exports = app;

/* Get */
/*赢得有汽车*/
/*url /cars/*/

AngularJS 37

/*Get*/
/*赢得汽车经过id*/
/*url:/cars/:id */

AngularJS 38

/*Post*/
/*累加汽车*/
/*url:/cars/car */

 AngularJS 39

AngularJS 40

参数中的json格式一定要是用正式格式,注意引号,注意Content-Type,默认的Content-Type类型是:application/x-www-form-urlencoded

/*Put*/
/*修改汽车*/
/*url:/cars/car */

AngularJS 41

AngularJS 42

/*Delete*/
/*抹汽车*/
/*url:/cars/:id */

AngularJS 43

AngularJS 44

node.js跨域

修改app.js文件拦截所有的要,修改头部

app.use(logger('dev'));
app.use(bodyParser.json());
app.use(bodyParser.urlencoded({ extended: false }));
app.use(cookieParser());
app.use(express.static(path.join(__dirname, 'public')));
app.all('*', function(req, res, next) {
    res.header("Access-Control-Allow-Origin", "*");
    res.header("Access-Control-Allow-Headers", "content-type");
    res.header("Access-Control-Allow-Methods", "PUT,POST,GET,DELETE,OPTIONS");
    res.header("X-Powered-By", ' 3.2.1');
    res.header("Content-Type", "application/json;charset=utf-8");
    if(req.method == "OPTIONS") {
        res.send("200");
    } else {
        next();
    }
});

结果:

AngularJS 45

七、示例下载

git:https://coding.net/u/zhangguo5/p/NodeJS001/git

git:https://coding.net/u/zhangguo5/p/NodeJSExpress/git

八、作业

8.1、请安装好node.js环境,测试版本,在控制高写一个主意用于计算1-100里的有着能吃3整治除的累累,并调用。

8.2、请以8.1面临的点子单独存放到一个math.js文件中,同时以math.html页面和node的控制台中调用

8.3、在开发工具IDE中融为一体node.js开发条件,创建一个node.js项目,向控制高出口“Hello
World!”

8.4、使用记事本在c:\清目录下写一个server.js文件落实一个最好简单易行的web服务器,请求时应当前系时。

8.5、将8.4之效力于IDE中就,请小心端口号不可知被占据,如果提示占用错误可以修改端口号为1025-65535之间

8.6、完成一个书籍管理的效益,图书包含(编号,名称,作者,图片,价格),实现:

a)、非AJAX的CRUD,使用Node.js+Express+ejs的动态技术。

b)、AJAX的CRUD,使用Node.js+Express+jQuery+HTML技术实现。当然为可以动用Vue2+axios。

c)、使用RestFul风格的服务做到第个作业,get,post,delete,put请。

AngularJS 46

九、视频

https://www.bilibili.com/video/av17977069/

相关文章