1- Express学习

什么是Node？

1. 概念： Node - 是一个用于创建各种服务器端工具和应用程序的，开源、跨平台的运行时环境。

2. 优点：

• 性能好
• 开发者学习成本低
• 与传统的Web服务器语言相比，JavaScript 理念更新，语言设计比较好
• Node包管理工具包多，可以实现自动化工具链的构建
• 可移植，可运行于 多个操作系统上
• 生态系统好

创建一个简单的Web服务器

• 创建一个web服务器，当客户端请求后，服务端返回 “Hello World”;

// 1.调用 HTTP 模块
const http = require('http');

// 2. 创建一个服务器，并且监听 8080 端口的所有请求
http.createServer((request,response)=>{
    // 3.设置服务器返回的状态码，及Http响应头
    response.writeHead(200,{"content-type":'text/plain'});
    // 4.返回响应体 "hello world"
    response.write("Hello World!");
}).listen(8080);

console.log('服务器运行于 http://127.0.0.1:8080/');

• 执行node 命令，浏览器访问 http://127.0.0.1:8080/ ,浏览器会输出 Hello World!,即简单的web服务器就创建成功了。

什么是Express？

1. 概念： Express 是最流行的Node框架，是许多流行Node框架的底层库。
2. 机制：
   • 为不同URL 路径中使用不同HTTP 动词（GET、POST、DELETE）的请求(路由)编写出来程序。
   • 集成了“视图渲染引擎”，方便了页面的生成，数据的渲染
   • 设置常见的web应用设置，如 连接端口，渲染响应模板的位置
   • 在请求处理管道中增加处理额外的“中间件”请求处理。

创建express 服务器

1. 安装 express 模块

• Mac环境：

  • 先安装 npm install -g express-generator
  • 在安装 npm install -g express
  • 安装完成 express --version 成功输出版本号，即为安装成功。

  注意： 如果在执行js文件仍报Error: Cannot find module express错误，执行如下命令解决：

  npm  install express
  

2. 创建express服务器

// 1. 引入Express 模块
const express = require('express');
const app = express();

// 2. 路由定义
app.get('/',(req,res)=>{
    res.send("hello express!");
    res.end();
})

app.listen(8080,()=>{
    console.log("已监听8080端口");
})

• 执行node 命令，浏览器访问 http://127.0.0.1:8080/ ,浏览器会输出 hello express!,即简单的express服务器就创建成功了。

自定义模块

1. 优点：

• 代码管理有序，单文件应用理解维护比较艰难。
• 有助于管理名字空间，因为在使用模块时只会导入模块中显式导出的变量

2. 自定义 square 模块

• 定义模块方式一（单一赋值）：

// 自定义 square 模块

// 面积
exports.area = width =>{
    return width * width;
}

// 周长
exports.perimeter = width => {
    return 4 * width;
}

• 自定义模块方式二：(对象赋值)

// 暴露属性的方式二：(对象)
module.exports = {
    area: width => {return width * width},
    perimeter: width => { return 4 * width }
}

- 通过向 `exports` 添加附属属性，向外暴露

• 外部调用

// 1. 导入square模块
const squart = require('./3-square');

console.log("边长为 8 的面积为：" + squart.area(8) + ",周长为："+ squart.perimeter(8)); 
// 边长为 8 的面积为：64,周长为：32

创建路由处理器

1. 路由基本信息介绍

• 定义路由处理函数

app.get('/', (req, res) => {
    
  res.send('Hello World!');
});

说明： (回调)路由处理函数来处理对站点根目录(/)的 HTTP GET 处理

• Express对象中，定义路由处理器的 HTTP 动词

  • checkout(), copy(), delete(), get(), head(), lock(), merge(), mkactivity(), mkcol(), move(), m-search(), notify(), options(), patch(), post(), purge(), put(), report(), search(), subscribe(), trace(), unlock(), unsubscribe().

特殊路由方法：

app.all() - 可以在响应任意 HTTP 方法是调用，用于在特定路径上为所有请求方法加载中间件函数。
eg：

app.all('/secret', (req, res, next) => {
  console.log('访问私有文件 ...');
  next(); // 控制权传递给下一个处理器
});

说明： 处理程序将在监听到针对 /secret的任意 HTTP 动词的请求后执行。

• 路由器：
  • 可以匹配URL中特定的字符串模式，并从URL 中提取一些值作为参数传递给路由处理程序(作为请求对象的参数)

2. 创建路由处理函数实例

• 定义路由模块

// 定义一个维基路由模块

// 1. 导入expres 模块
const express = require('express');
// 2. 取出路由模块
const router = express.Router();

// 3. 定义路由处理函数
router.get('/',(req,res)=>{
    // 这是处理站点目录为 "/" 的路由处理函数
    res.send("维基首页");
})

router.get('/about',(req,res)=>{
    res.send("关于维基");
})

// 将路由模块输出
module.exports = router;

• 使用路由创建 express 服务器

// 1. 导入expres 模块
const express = require('express');
const app = express();
// 2.导入 维基路由模块
const wiki = require('./4-wiki');
app.listen(8080,()=>{
    console.log("已被监听");
});

// 3.将路由处理路径添加到中间处理路径中
app.use("/wiki",wiki);
// 客户端请求路径
// http://127.0.0.1:8080/wiki
// http://127.0.0.1:8080/wiki/about

中间件

1. 中间件函数通常是对请求或者响应执行某些操作，然后调用“栈”里的下一个函数，可能是其他中间件或路由处理器。

注意：

• 中间件可以执行任何操作，运行任何代码，更改请求和响应对象，也可以结束“请求-响应”周期，如果它没有结束循环，则
  必须调用 next() 将控制传递给下一个中间件函数(否则请求将成为悬挂请求)。
• 中间件和路由函数是按声明顺序调用的。绝大情况下要先调用中间件后设置路由，否则路由处理器将无法访问中间件的功能

2. 中间件的用途：

• 托管静态文件
• 简化 web 开发任务，如记录日志，会话，用户身份验证等。

3. 使用定义中间件

const express = require('express');
const app = express();

// 自定义定义中间件函数
const cus_middleware_fun = (req,res,next) => {
    // 记录日志信息
    setTimeout(()=>{
       console.log("我是在第一个中间件中3s后打印的日志...");
    },3000)

    console.log("第一个中间件...");
    next(); // 调用 next() ，Express 将调用处理链中下一个中间件函数。

   
}

const cus_middlemare_fun2 = (req,res,next)=>{
    console.log("我是第二个中间件中的处理。。。");
    var sum = 0;
    for(let i = 1;i <=100;i++){
        sum += i;
    }
    console.log("第二个中间件中计算的1-100个数总和是：" + sum);
    // 这个中间件可以不调用 next()函数， 因为这是最后一个需要处理的中间件函数了。
    next();
}

const cus_middlemare_fun3 = (req,res,next) =>{
    console.log("我只特定的中间件函数");
}
//  将中间件添加到函数处理链中
app.use(cus_middleware_fun);
app.use(cus_middlemare_fun2);
// app.use(cus_middlemare_fun3);

// 使用use为一个特定的路由添加该函数
app.use('/index',cus_middlemare_fun3);

// 定义路由处理函数
app.get('/',(req,res)=>{
    console.log("这是首页");
    res.send("首页");
    res.end();
})

app.listen(8080,()=>{
    console.log("已被监听");
}); 

• 调用结果：

已被监听
第一个中间件...
我是第二个中间件中的处理。。。
第二个中间件中计算的1-100个数总和是：5050

我只特定的中间件函数
我是在第一个中间件中3s后打印的日志...

4. 托管静态文件

• 托管单个静态文件

// 托管静态文件
app.use(express.static('staticFile'));

• 使用静态文件(路径中要不含有托管的文件夹名称)
• 图片

http://localhost:8080/imgs/1.jpg  

• 样式文件

http://localhost:8080/styles/style.css

• 托管多个静态文件

// 托管静态文件
app.use(express.static('staticFile'));
// 托管多个静态文件
app.use(express.static('staticFile2'))

• 给托管的静态文件URL，添加虚拟前缀

// 给静态URL添加一个虚拟前缀
app.use('/static',express.static("staticFile2"));

• 调用文件

http://localhost:8080/static/styles/login.css

4. 错误处理

app.use((err, req, res, next) => {
  console.error(err.stack);
  res.status(500).send('出错了！');
});

注意：

• 用来处理错误的特殊中间件有四个参数(err,req,res,next)
• 错误处理中间件，必须在所有其它 app.use() 和路由调用后才能调用，因此它是需求处理过程中最后的中间件。
• Express 内建的错误处理机制，可以协助处理app中没有被处理的错误。默认的错误处理中间件函数在中间件函数栈的末尾。如果一个
  错误传递给 next() 而没有用错误处理器来处理它，内建处理机制将启动，栈跟踪的错误将会写给客户端。

5. 数据库的使用

   !(数据库配置)[http://www.expressjs.com.cn/guide/database-integration.html#mysql];

6. 渲染数据(view)

• 模板引擎如果渲染HTML

A template engine enables you to use static template files in your application. At runtime, the template engine replaces variables in a template file with actual values, and transforms the template into an HTML file sent to the client.

模板引擎允许在应用程序中使用静态的模板文件，运行时，模板引擎会用实际的值去替换页面中的占位符变量(如：#{title}),
然后将模板文件转化成HTML 文件发送给客户端。

• express 使用模板文件渲染 html实例

  • 安装pug 模板引擎

npm install pug --save

• 创建express 服务器

const express = require('express');
const app = express();

const path = require('path');

// 设置包含模板的文件夹
app.set('views',path.join(__dirname,'views'));
// 设置视图引擎 ，我们用的pug模板引擎
app.set('view engine','pug');

// 设置路由
app.get('/',(req,res)=>{
 res.render('index',{title:'模板pug',content:`A template engine enables you to use static template files in your application. At runtime, the template engine replaces variables in a template file with actual values, and transforms the template into an HTML file sent to the client. This approach makes it easier to design an HTML page.`});
})

app.listen(8080,()=>{
 console.log('已监听');
})

• 创建模板视图文件

 
 
 
 


 

     
如下是从服务器生成html
     
#{content}
 

- 注意每种模板引擎对应的文件名，后缀名(pug模板 == .pug)
- 实际模板样式需要具体对应处理