Express框架 初学

Express框架是后台的Node框架。（像前台jQuery库是基于JavaScript封装的函数库）。
点击进入Express中文官网：
Express基于Node.js平台，快速、开放、极简的web开发框架。

原生Node开发，会发现很多问题。比如：
1、呈递静态页面很不方便，需要处理每个HTTP请求，还要考虑304问题。
2、路由处理代码不直观清晰，需要写很多正则表达式和字符串函数。
3、不能集中精力写业务，要考虑很多其他的东西。

Express框架致力解决以上问题，它非常像前端框架jQuery，改变了我们书写程序的习惯。

一、安装Express，使用npm命令（国内有镜像）

此处会用到DOS命令，详见文章：常用的DOS命令
前提：已经安装了Node.js，Node.js安装步骤
1、为项目创建目录，通过cmd进入此目录
2、通过 npm init 命令为你的应用创建一个 package.json 文件。
3、接下来在项目目录下安装 Express 并将其保存到依赖列表中。

npm install express --save
（ --save参数：表示自动修改package.json文件，自动添加依赖项 ）

4、在项目根目录下创建 js 文件：搭建Express下的服务器

// 加载express模块
let express=require('express');
// 生成 express 应用程序的实例
let app=express();
// 隐式创建服务器的方式
app.listen(1337,'127.0.0.1');

// 显示创建服务的方式
let express=require('express');
let http=require('http');
let app=express();
let server=http.createServer(app);
server.listen(80,'127.0.0.1');
console.log('Express 服务器启动成功');

二、路由：

• 1、路由的本质 : 服务器处理浏览器的request请求，利用server的request事件处理浏览器请求。

（1）处理路由的本质代码：

server.on('req',(req,res)=>{
    if(req.url=='/'){
        res.writeHead(200,{
            'Content-type':'text/html;charset=utf-8'
        });
        res.write('响应内容');
        res.end();
    }
});

(2) 在Express框架下，可以使用app.get()来实现路由并代替上述代码。

app.get('/',(req,res)=>{
    res.send('我是首页');
});

格式:

app.get(path,(req,res)=>{
res.send(‘响应内容’);
});

• 2、Express框架为路由提供了一个名为“路由句柄”的功能。

如何生成路由句柄：路由句柄可以根据项目的登录角色，将路由指引向正确的方向。

var router=express.Router();
app.use('/',router);
router.get(path,function(request,response){
   response.send('响应内容');
}) 

第一步：在项目根目录下创建 routes 的文件夹，用来存放分角色的路由文件
index.js 游客访问的路由文件。
users.js 登录用户访问的路由文件。
manage.js 系统管理员访问的路由文件。

第二步：书写路由文件的路由信息。index.js：

var express=require('express');
var router=express.Router();
router.get('/',function(req,res){});
router.get('/intro',function(req,res){});
// ……
module.exports=router;

第三步：在app.js文件中设置路由的去向。

var index=require('./routes/index');
var users=require('./routes/users');
var manage=require('./routes/manage');
app.use('/',index);
app.use('/users',users);
app.use('/manage',manage);

三、模板引擎：jade/pug、ejs。

• 1、在项目根目录下创建两个文件夹：

[views]：视图，用于存放pug文件（相当于HTML文档）。
[public]：公共静态文件，用于存放pug文件中需要引用的静态文件（图片、字体、css、js）。

• 2、在app.js文件中指定views文件夹和public文件夹的功能：

（1）引入path模块：path.join()，将参数中的字符串拼接成一个路径。

var path=require('path');

（2）指定views文件夹的功能：

app.set('views',path.join(_ _dirname,'views'));
app.set('view engine','pug');

（3）指定public文件夹的功能：

 app.use(express.static(path.join(_ _dirname,'public')));

• 3、安装pug

npm install pug

• 4、在views文件夹下书写pug文件：pug文件的扩展名是.pug。

（1）pug文件的基本格式：

（2）层次关系的简化写法： <父元素>: <空格> <子元素>

（3）pug文件可以接收数据：

 A .实现对数据的展示方式：
   #{变量名}：将变量名中的数据原样显示在页面中。
   !{变量名}：若变量名中的数据带有标记对，可以将标记对解释称相应的样式。
   标记名=变量名    【安全转义】
   标记名!=变量名   【非安全转义】
 B .数据的来源：
   第一种来源：-var x=110;
   第二种来源：从路由中传递的数据。
          路由文件：res.render(‘/’,{键名:键值});
          pug文件：标记名=键名

（4）div标记名可以省略。

（5）模板的继承：

   layout.pug：html的基本格式。
   A .在layout.pug文件中可以直接书写需要其他文件继承的pug代码。
   B .在layout.pug文件中，可以利用block命令设置可扩展部分。
   C .在继承了layout.pug文件的代码中，可以使用block对可扩展部分进行编辑。
   D .继承模板使用 extends 命令。

（6）模板的包含：

包含的继承的区别：包含的模板没有可编辑部分；继承的模板可以使用block编辑
包含使用include进行引入。

（7）内部脚本的书写方式：

 script(type=’text/javascript’).
   JavaScript代码