Node.js开发Web后台服务

八、作业

8.① 、请安装好node.js环境,测试版本,在决定台写三个主意用于计算1-100间的有所能被3整除的数,并调用。

8.贰 、请将8.1中的方法单独存放到二个math.js文件中,同时在math.html页面与node的控制哈博罗内调用

8.③ 、在开发工具IDE中融为一炉node.js开发环境,创立二个node.js项目,向控制台出口“Hello
World!”

8.四 、使用记事本在c:\根目录下写一个server.js文件落到实处贰个最简便的web服务器,请求时响应当前系统时间。

8.⑤ 、将8.4的效能在IDE中完结,请小心端口号不可以被占用,假使提醒占用错误可以修改端口号为1025-65535里面

8.六 、达成三个书籍管理的效果,图书包涵(编号,名称,小编,图片,价格),完毕:

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

b)、AJAX的CRUD,使用Node.js+Express+jQuery+HTML技术完成。当然也足以采取Vue2+axios。

c)、使用RestFul风格的劳动做到第个学业,get,post,delete,put请。

图片 1

5.② 、Express框架宗旨本性

可以设置中间件来响应 HTTP 请求。

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

可以通过向模板传递参数来动态渲染 HTML 页面。

累加的 HTTP 神速方法和私下排列组合的 Connect
中间件,让你创设健康、友好的 API 变得既高效又简单。

Express 不对 Node.js 已有个别个性开展一回抽象,大家只是在它之上增加了 Web
应用所需的基本功用。

五、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

图片 2

5.9、JSON

假设急需Node.js向外提供重返JSON的接口,Express也是不行便宜的,可以拔取原来在浏览器中使用到的JSON对象,那是1个浏览器内置对象在劳务可以直接使用:

将目标体系化成字符:

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

结果:

图片 3

反体系化,将字符转换来对象:

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

结果:

图片 4

Express已经封装了3个json方法,间接调用该方式就足以种类化对象:

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

运作结果:

 图片 5

柒 、示例下载

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

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

5.8.2、URL中的QueryString

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

127.0.0.1:2000/index?id=12,那种状态下,这种方法是取得客户端get形式传送过来的值,通过行使req.query.id就可以收获,类似于PHP的get方法;

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

运作结果:

图片 6

5.肆 、第四个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:

图片 7

运作结果:

图片 8

5.8.① 、U索罗德L中的参数占位

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);
});

运行结果:

图片 9

三、第一个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环境下解释运作:

图片 10

运营结果:

图片 11

引入 required 模块:大家可以使用 require 指令来载入 Node.js 模块。
成立服务器:服务器能够监听客户端的乞求,类似于汤姆Cat、IIS、Apache
、Nginx 等 HTTP 服务器。
收纳请求与响应请求 服务器很不难创制,客户端可以接纳浏览器或极端发送 HTTP
请求,服务器收到请求后回到响应数据。

首先行请求(require)Node.js 自带的 http 模块,并且把它赋值给 http
变量。
接下去我们调用 http 模块提供的函数: createServer 。这一个函数会再次回到二个对象,那些目标有七个名为 listen 的法门,那几个办法有2个数值参数,
内定这么些 HTTP 服务器监听的端口号。

4.⑥ 、更新模块

大家可以使用以下命令更新模块:
npm update 模块名称
npm up -g 模块名称

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

NPM是会同NodeJS一起安装的包管理工具,能缓解NodeJS代码安插上的许多题材,常见的施用情状有以下二种:
a)、允许用户从NPM服务器下载别人编写的第①方包到地点使用。
b)、允许用户从NPM服务器下载并安装外人编写的吩咐行程序到地点利用。
c)、允许用户将协调编辑的包或指令行程序上传来NPM服务器供旁人利用。

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

4.1、查看npm版本
由于新版的nodejs已经合并了npm,所从前边npm也一并安装好了。同样可以由此输入
“npm -v” 来测试是或不是成功安装。命令如下,出现版本提醒表示安装成功:

图片 12

4.2、升级npm

只要您安装的是旧版本的 npm,可以很不难得经过 npm 命令来进步

npm install npm -g

 图片 13

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

假设不拔取IDE开发品种成效较低,在许多主流的合并开发条件(IDE)中都可以设置插件帮助Node.js开发,如Eclipse,那里大家以HBuilder为例:

运行HBuilder->工具->插件安装

图片 14

设置成功后就足以新建Node.js项目了:

图片 15

此处选取Hello World,新建好的门类如下:

图片 16

hello-world-server.js文件就是1个简练的web服务器,右键拔取“运转方式”->”Node
Application”

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

图片 17

4.9、更换NPM 镜像

因为npm的服务器在国外,在互连网状态不好的情况下引入三个模块会因为网络延迟而小败,可以转移成国内速度更快的镜像服务器,那里以应用淘宝NPM 镜像(http://npm.taobao.org/)为例:

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

图片 18

这么就足以选用 cnpm 命令来安装模块了:
$ cnpm install [name]

图片 19

那是二个总体 npmjs.org
镜像,你可以用此代替官方版本(只读),同步频率近年来为 11分钟三遍以管教尽量与合法服务同步。

如是安装失利,可以尝试:

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

 

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

REST是英文Representational State
Transfer的缩写,汉语称之为“表述性状态转移”
基于HTTP协议
是另一种服务架构
传送是JSON、POX(Plain Old XML)而不是SOAP格式的数目
充足利用HTTP谓词(Verb)
保护数据的传输,业务逻辑交给客户端自行处理

REST是一种分布式服务架构的作风约束,像Java、.Net(WCF、WebAPI)都有对该约束的兑现,使U帕JeroL变得越发有意义,更加简明,如:

http://www.zhangguo.com/products/1 get请求 表示收获全体成品的第一个

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

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

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操作

任何还有:

图片 20

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/*/

图片 21

/*Get*/
/*得到小车经过id*/
/*url:/cars/:id */

图片 22

/*Post*/
/*增进小车*/
/*url:/cars/car */

 图片 23

图片 24

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

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

图片 25

图片 26

/*Delete*/
/*除去小车*/
/*url:/cars/:id */

图片 27

图片 28

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();
    }
});

结果:

图片 29

5.7、lodash

那是一个怀有同等接口、模块化、高质量等特征的 JavaScript
工具库。可以十三分便利的操作json。

官网:http://lodashjs.com/

安装:

npm i -g npm

npm i –save lodash

安装时先用cd切换来当下项目下。

若果浏览器拔取可以直接引入:

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

添加lodash依赖:

图片 30

凭借成功后会在package.json中充足引用:

图片 31

后台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、参数

4.⑤ 、模块列表

使用模块列表命令可以便宜的看看日前项目中凭借的包:
npm ls

图片 32

4.肆 、卸载模块

作者们可以动用以下命令来卸载 Node.js 模块。
npm uninstall <Module Name>

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

npm install bootstrap

再使用卸载指令删除模块:

npm uninstall bootstrap

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

2.1、安装Node.js

去官网下下载最新版本的Node.js一步一步按提醒安装即可,假使设置失利就手动安装,将Node.js的设置地点布置到环境变量的path中。

图片 33

设置落成后开行命令行,测试:

图片 34

4.七 、搜索模块

npm search 模块名称

5.6、ejs基础

ejs是1个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视图,那里是3个简单的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);

运作结果:

图片 35

一、简介

Node.js 是八个按照谷歌(Google) Chrome V8 引擎的 JavaScript 运维条件。Node.js
使用了三个事件驱动、非阻塞式 I/O 的模型,使其轻量又便捷。Node.js
的包管理器 npm,是大地最大的开源库生态系统。

图片 36

能便宜地搭建响应速度快、易于扩大的互连网使用,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

九、视频

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

5.3、安装 Express

设置 Express 并将其保存到依靠列表中:

npm install express –save

图片 37

以上命令全局安装express。也可安装时内定安装中间件。

body-parser – node.js 中间件,用于拍卖 JSON, Raw, Text 和 UHavalL
编码的多寡。

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

默许这么些模块都曾经添加。

4.叁 、安装模块

npm install <Module Name> -参数

设若带参数-g表示全局安装,否则只是设置到某些目录下。

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

图片 38

4.⑧ 、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>可以废除发表本身发表过的某部版本代码。

贰 、搭建Node.js开发条件

5.8.叁 、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方法;

图片 39

页面:

图片 40图片 41

<!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:"添加成功"});
});

结果:

图片 42

5.5、使用Nodeclipse开发Express项目

如果向来接纳记事本功用会不高,nodeclipse插件可以方便的创立一个Express项目,步骤如下:

图片 43

开创好的花色如下:

图片 44

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”运行结果:

图片 45

图片 46

相关文章