express是node的一个框架，我们可以基于express快速搭建一个web服务，并且提供一些供客户端调用的api接口（支持中间件、支持路由处理等）；还有一个框架和它类似，叫做koa；

学习Express：
http://www.expressjs.com.cn/4x/api.html

安装Express

如果当前电脑已经安装了yarn，我们可以基于yarn安装express及相关配套插件

yarn init -y  生成package.json文件

/*
 * express：express核心框架
 * body-parser：用来快速解析请求主体中内容的
 * express-session / cookie-parser：方便我们在express中操作session的
 */
yarn add express body-parser express-session cookie-parser

创建服务，监听端口

基于NODE内置模块，使用原生JS代码实现WEB服务

let http = require('http'),
    fs = require('fs'),
    url = require('url');
http.createServer((req, res)=> {    let {url:reqURL, method, headers}=req,
        {pathname, query}=url.parse(reqURL, true);    if (pathname === '/getMatchList' && method=='GET') {

    }    if(pathname==='/reg' && method=='POST'){

    }
}).listen(8888, ()=> {    console.log(`server is success~`);
});

基于express框架完成

express就是把我们自己用原生写的封装好了，我们以后直接调取使用即可（方便开发，有点类似于JQ）

let express = require('express'),
    app = express();
app.listen(8888, ()=> {    console.log(`server is success~`);
});

app.get(`/getMatchList`, (req, res)=> {    //=>等价于原生
    //req.url  请求的地址+问号传参
    //req.method 请求的方式(大写)
    //req.headers 请求头(小写)

    //=>EXPRESS新提供的
    //req.path 相当于我们原生中通过URL内置模块的PARSE方法解析出来的PATH-NAME
    //req.query 相当于解析出来的QUERY

    //=>等价于原生
    //res.writeHead 重写响应头
    //res.write 响应主体
    //res.end 结束响应(响应主体)
    /*
     res.writeHead(200, {
        'content-type': 'application/json'
     });
     res.end(JSON.stringify({"id": 1, "name": "珠峰培训 "}));//=>只能返回字符串或者Buffer格式数据

     //---------
     fs.readFile('./index.html',(err,data)=>{
         if(err) return;
         res.writeHead(200,{
            'content-type':'text/html'
         });
         res.end(data);
     });

     //=>好麻烦
     */

    //=>EXPRESS独有的
    //res.sendFile('./index.html',{root:__dirname}); 读取指定的文件，并且把内容响应给客户端
    //res.json({"id":1,"name":"珠峰"}); 我们可以直接放JSON,EXPRESS帮我们把它转换为字符串返回给客户端（并且设置好了响应头信息）
    //res.send() 综合体
    //res.statusCode = 200; 设置状态码
    //res.redirect() 重定向(对应状态码中的302/301)
    //res.sendStatus(404); 返回状态码并且附带一些状态码的描述信息
    //...});
app.post(`/reg`, (req, res)=> {

});

Express中间件

使用中间件的两大作用：
1、想要提取部分公共代码
2、想要在主体API逻辑处理前，做一些特殊处理（把传递的参数做特殊的处理）
…

let express = require('express'),
    app = express();
app.listen(8888, ()=> {    console.log(`server is success~`);
});//=>所有的客户端请求都会先执行这个中间件(然后执行NEXT后在进入下一个处理程序)app.use((req, res, next)=> {    //next:执行下一个处理(当前这个中间件根据情况，如果需要走到下一个操作，必须执行NEXT，如果不需要，直接响应内容即可)
    if (req.query.name) {
        req.userName = req.query.name;//=>把获取的内容写在了userName自定义属性上
        next();
    } else {
        res.send(`name必须传递`);
    }
});//=>只有请求的地址中包含`/user`的才会进入这个中间件app.use(`/user`, (req, res, next)=> {
    req.userName += '@';
    next();
});
app.get(`/user`, (req, res)=> {
    res.send(`My name is ${req.userName}`);
});
app.get(`/article`, (req, res)=> {
    res.send(`Article author is ${req.userName}`);
});

Express中的路由router

在真实项目中，我们为了有效的管理接口，我们会把相同功能体系的接口进行归类；在实现的时候，也会分类实现（分组管理）；

例如：
/user/signin
/user/signup

/product/query
/product/search

/log/info
GET获取
POST请求设置
同一个地址，因为请求方式不一样，实现不一样的功能
…

此类操作，我们可以基于Express中的路由来完成

1、我们创建一个routers文件夹，在这个文件夹中存储所有功能模块的接口信息（分类存储）

2、在每一个路由模块中完成API接口的编写（举例：user模块）

let express = require('express'),
    router = express.Router();//=>router和app其实差不多router.use((req, res, next)=> {    console.log(`ok`);
    next();
});
router.post(`/signin`, (req, res)=> {
    res.send('login success');
});
router.post(`/signup`, (req, res)=> {
    res.send('register success');
});module.exports = router;//=>把创建的路由导出,方便后续调取使用

3、在server中需要调取使用

let express = require('express'),
    app = express();
...
app.use(`/user`, require('./routers/user'));

Express中获取客户端传递的信息

客户端把信息传递给服务器：
1、问号传参（GET请求）
2、设置请求主体（POST请求）
3、设置请求头（cookie等信息传送）
…

问号传参 & 请求头

app.get(`/query`, (req, res)=> {    
    console.log(req.headers);//=>通过REQ的HEADERS可以直接的获取请求头信息(想获取其中的某一个:REQ.HEADERS.HOST...)

    res.send(req.query);//=>通过REQ中的QUERY就可以获取问号传递的参数值(并且存储的方式是KEY:VALUE)
});

请求主体

//=>基于传统的内置模块自己实现
app.use(`/reg`, (req, res, next)=> {    
    //=>POST请求获取请求主体内容,需要基于事件完成
    let str = ``;
    req.on('data', chunk=> {        
        //=>正在接收请求主体中的内容(一般内容偏多)
        str += chunk;
    });
    req.on('end', ()=> {        
        //=>接收结束,此时STR存储的就是传递进来的信息
        //=>客户端传递给服务器的信息一般都是字符串格式的(JSON字符串或者普通的FORMAT-DATA字符串[xxx=xxx&xxx=xxx])
        
        //=>真实项目中我们还要把字符串转化为对象方式(方便操作)
        let data = require('querystring').parse(str);//=>这个内置模块就是把FORMAT-DATA变为对象键值对的方式存储
        req.body = data;//=>把解析后的数据放到REQ的自定义属性上,在其它的方法中可以获取使用
        next();
    });
});
app.post(`/reg`, (req, res)=> {
    res.send(req.body);
});

这种方式太麻烦了，我们可以使用第三方插件搞定刚才处理的事情：body-parser

let bodyParser = require('body-parser');
app.use(bodyParser.urlencoded({extended: false}));
app.use(bodyParser.json());
app.use(bodyParser.raw());
app.use(bodyParser.text());
app.post(`/reg`, (req, res)=> {
    res.send(req.body);
});

Express中静态文件的处理

基于express.static方法即可完成

let express = require('express'),
    app = express();
app.listen(8888, ()=> {    console.log(`server is success~`);
});
//=>真实项目中,我们一般都静态资源文件(HTML/CSS/JS/IMG...)存放在DIST或者LIB或者PUBLIC或者BUILD等指定的文件夹中
app.use(express.static('dist'));
//=>大体实现原理
let fs = require('fs'),
    path = require('path');
let expressStatic = p=> (req, res, next)=> {    
    let pathname = path.join(`${__dirname}/${p}`, req.path);
    fs.readFile(pathname, (err, data)=> {        
        if (err) {            
            //=>找不到指定的文件
            next();
        } else {            
            //=>找到文件
            res.sendFile(pathname);
        }
    });
};
app.use(expressStatic('dist'));

转载请注明： Vue教程中文网 - 打造国内领先的vue学习网站-vue视频,vue教程,vue学习,vue培训 » Express的基础语法和实战应用