Node顶级框架-----Express....

如何安装express:

npm install express --save

如何使用express:

        下面嵌入本质上是你可以创建的最简单的 Express 应用。 它是一个单文件应用 —如果你使用 Express 生成器,你会得到什么,它为具有大量 JavaScript 文件、Jade 模板和用于各种目的的子目录的完整应用创建脚手架。

const express = require('express')
const app = express()
const port = 3000

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

app.listen(port, () => {
  console.log(`Example app listening on port ${port}`)
})

 下面介绍一下基本路由:

        在首页响应 Hello World!

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

        响应根路由(/)上的 POST 请求,应用的主页: 

app.post('/', (req, res) => {
  res.send('Got a POST request')
})

        响应对 /user 路由的 PUT 请求:

app.put('/user', (req, res) => {
  res.send('Got a PUT request at /user')
})

路径正则

  •     ?   出现0或1次       
  •     +   一次或者多次
  •     *   任意一个字符
  •     ()  作为一个整体
  •     $   $ 以什么结束
  •     .   任意字符(除了换行和终止符)

express中的请求对象:request

// http://localhost:5000/index?username=jack&pwd=123
    console.log(req.protocol); // 协议
    console.log(req.baseUrl); // 基础路径
    console.log(req.headers); // 头信息
    console.log(req.hostname); // 主机名
    console.log(req.httpVersion); // 协议版本
    console.log(req.ip); // ip
    console.log(req.method); // 请求方式
    console.log(req.params); // 参数
    console.log(req.path); // 路径信息     /index
    console.log(req.query); // 参数       { username: 'jack', pwd: '123' }
    console.log(req.url); // url          /index?username=jack&pwd=123

 express中的响应对象:response 

是对原生响应对象的一个二次包装
        常用的方法:
           send()       等价于write和end的复合体   默认为添加头信息(根据发送内容的不同,自动添加对应的头信息)
            header()     添加头信息
            download()   下载
            json({})     发送json格式文件
            jsonp()      jsonp格式接口
            sendFile()   发送文件
            sendStatus   状态码

Express-跨域 难点★

        如何判断是否跨域:
            Access to XMLHttpRequest at 'http://localhost:5000/' from origin 'null' has been blocked by CORS policy: No 'Access-Control-Allow-Origin' header is present on the requested resource

当出现以上代码时,就是跨域。

浏览器安全策略: 同源策略            客户端和服务器端同源才可以互相访问
服务器URL:   http://22.144.89.90:5000/userinfo/login?username=jack&pwd=3423#main


客户端:      file:///E:/%E9%83%91%E5%B7%9E20230816/day11/code/client/index.html


同源即:协议、域名、端口完全一致

            解决跨域:
                1.服务器允许
                2.jsonp         利用script标签src属性
                3.服务器代理  (Node服务器代理、Ngnix反向代理....)

 例:

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

//  1.服务器允许

app.get("/", (req, res) => {
    res.header("Access-Control-Allow-Origin", "*");//允许所有源访问
    res.send({
        code: 200,
        msg: "成功",
        data: [10, 200, 300, 1000]
    });
});

// 2.jsonp  利用script标签src属性

app.get("/index", (req, res) => {
    res.jsonp({
        code: 200,
        msg: "jsonp成功"
    });
});

// 3.服务器代理  (Node服务器代理、Ngnix反向代理....)

app.get("/news", (req, res) => {
    // 目标服务器的地址
    // 获取请求响应的参数
    let { url, key } = req.query;
    // 请求头  application/x-www-form-urlencoded
    let cType = req.headers['content-type'];
    // 服务器允许
    res.header("Access-Control-Allow-Origin", "*"); // 允许所有源访问

    // 向聚合服务器发送请求
    const options = {
        url,
        method: "GET", // GET|POST
        headers: {
            "Content-Type": cType
        },
        // GET 传递此参数
        qs: {
            key: key, // 在个人中心->我的数据,接口名称上方查看
        }
    };

    request(options, function (error, response, body) {
        if (!error && response.statusCode == 200) {
            res.send(body); // 请求成功,输出响应内容
            // 具体返回示例值,参考返回参数说明、json返回示例
        } else {
            console.log("请求异常");
        }
    });
});

app.listen(5000, () => {
    console.log('启动服务器....');
});

Express-自定义和内置中间件

中间件:middleware
中间件是Express的两大核心之一     (路由、中间件)

中间件就是一个中间流程。目的是为了处理公共的逻辑、业务
注意 :     1.一定要在路由前注册中间件
                 2.next()函数不要忘
                 3.next()函数之后不要再去书写代码
                 4.连续调用多个中间件时,共享req.res

1.按照功能分类:
    1)自定义中间件

    2).内置中间件
        express.static()        静态资源中间件
        express.json()          解析post方式提交的json格式的数据:application / json
        express.urlencoded()    解析post方式提交的urlencoded格式的数据:  x - www - form - urlencoded格式数据
    3)第三方中间件

2.按照级别分类:
    1)  app级别的中间件
    2)router级别的中间件

中间件就是函数(中间件函数)
function(request, response, next) {
    next( );是一个函数
}

1)自定义中间件
// 调用postData函数,会得到一个函数
let postData = function () {
    return function (req, res, next) {
        let arr = [];
        req.on('data', chunk => {
            arr.push(chunk);
        });
        req.on("end", () => {
            req.body = Buffer.concat(arr).toString();
            next();
        });
    };
};

// 自定义中间件 ---->取出post参数
app.use(postData());

内置中间件
let express = require("express");
let app = express();

app.use(express.static(path.join(__dirname, "public"))); // 指定public目录为静态资源目录

// urlencoded中间件 是用来 接收 post请求的请求头 设置为 content-type:application/x-www-form-urlencoded   提交过来的数据 是 查询字符串
//  中间件中 传入的实参对象 就是用来 选择 使用什么工具 来格式化查询字符串的 如果值为true 表示使用express 自带的 qs工具 进行格式化(不推荐)  如果值为false 表示使用node的querystring来格式化(推荐)
app.use(express.urlencoded({extended:false}));

// json中间件 是用来 接收 post请求头 设置为 content-type:application/json 
// 提交过来的数据 是 json格式的对象  可以直接使用 不需要格式化 所以不传参

app.use(express.json())

// 再之后 我们就可以直接获取到 post提交的数据了   通过 req形参的body属性来获取
app.post("/index",(req,res)=>{
    console.log(req.body);
})

app.listen(3000)

Express-第三方中间件

使用第三方中间件向 Express 应用添加功能。

安装所需功能的 Node.js 模块,然后在应用级别或路由级别将其加载到你的应用中。

svg-captcha  验证码
let svgCaptcha = require('svg-captcha');

let captcha = svgCaptcha.create({
           API   
	size: 4 // 验证码字符个数
	ignoreChars: '0o1i' // 忽略字符
	noise: 1 //  干扰线
	color: true // 字符是否有颜色
	background: '#cc9966' // 背景颜色
});
console.log(captcha.text); // 文本验证码(数字)
res.send(captcha.data); // 将svg格式的图片响应给前端

serve-favicon   小图标
app.use(serveFav(path.join(__dirname, "assets", "favicon.ico")));

cors   解决跨域所有问题
const cors = require('cors');
app.use(cors());

formidable  文件上传
const formidable = require('formidable');
//文件上传
app.post("/upload", (req, res) => {
    const fd = formidable({
        // 配置项
        uploadDir: path.join(__dirname, "temp"), //  存到哪个文件夹内
        filename: "img",    // 文件夹名称
        // encoding:""// 编码
        // uploadDir:"",//上传文件保存目录
        //filename:""
    })

    //解析文件----接收文件
    fd.parse(req, function (err, fields, files) {
        // 上传失败就不往下走了
        if (err) {
            res.send("上传失败");
            return;
        };
        // fields 字段 { usernmae: '李四' }
        // files  文件信息

        // 上传成功处理
        // 1.取原文件的后缀名 xx.jpg---> .jpg
        let extName = path.extname(files.myfile.originalFilename);

        // 2.生成一个新的文件
        let oldPath = files.myfile.filepath; // 旧路径
        let newPath = oldPath + extName;

        // 把组合成的新文件写入要存的文件夹
        fs.renameSync(oldPath, newPath);        
        res.send("上传成功");
    })
});

Express-Router路由模块

express中的Router作用就是为了方便我们更好的根据路由去分模块。避免将所有路由都写在入口文件中。可以根据网站需要去划分很多的路由模块,然后使用express.router()导出,导入到入口函数页面。更方便简洁的管理每一个模块,不会与其他路由模块所冲突。

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

// 导入每个页面
const cateRouter = require("./category"); // 导入cate路由模块

// 输入指定模块名称才能进入指定模块
app.use('/cate', cateRouter) // 分类

app.get('/', (req, res) => {
    res.send("index")
})

app.listen(8080, () => {
    console.log('running.........');
});

//  /cate/
const cate = require("express").Router();

cate.get('/', (req, res) => {
    res.send('欢迎来到cate模块');
});

cate.get("/firstcate", (req, res) => {
    res.send("一级分类");
});

cate.get("/catesec", (req, res) => {
    res.send("二级分类");
});

cate.get("/catethird", (req, res) => {
    res.send("三级分类");
});

// 导出
module.exports = cate;

Express-cookie

Cookie 使用res 是客户端(浏览器)存储数据的一种机制,键值对结构,可以存储身份信息,
也是可以存储关键的信息,都是程序员自定义, 

 

const cookieParser=require("cookie-parser");

// 使用普通cookie-parser
app.use(cookieParser());

// 使用秘钥cookie-parser
app.use(cookieParser("shanghai"));

// 验证码
router.get('/code', (req, res) => {
    let captcha = svgCaptcha.create();
    console.log(captcha.text);

    // 使用普通cookie保存信息
    res.cookie("xx", '9.9');
    res.cookie("jdb", '3.9');

    // 使用加密cookie保存信息
    res.cookie("xx",'9.9',{
         signed:true
     });
    res.cookie("jdb",'3.9',{
         signed:true
     });

    res.type("svg");
    res.send(captcha.data);
});

router.get('/login', (req, res) => {
    // 取出普通cookie
    console.log(req.cookies);

    // 取出加密的cookie
    console.log(req.signedCookies);

    res.send('ok');
});

Express-session(推荐)

Session  使用req  Session是服务器存储数据的一种机制,键值对结构的,
主要用来存储身份相关的信息。

const session = require("express-session");

// 配置session
app.use(session({
    resave: false,	         // 若session没有被修改,是否强制重新存储
    saveUninitialized: true,   // 未初始化,是否存储
    secret: "xiaoxuesheng",  // 加密秘钥
}));

// 将验证码保存在session中
    req.session.xx = captcha.text; //会将对应session-id以cookie的形式发送给客户端

Express-ejs

ejs是Express的一种模板引擎,还有很多模板引擎,例如:Jade、Pug等,原理都大差不差,只需要掌握一种即可。

// 指定页面路径   pages目录是页面目录
app.set('views', path.join(__dirname, 'pages'));
// 指定模板引擎
app.set("view engine", "ejs");//设置ejs为默认的模板引擎

// index 页面
app.get('/index', (req, res) => {
    // 渲染页面
    // 第一个参数:渲染的页面的名称(不需要后缀)
    res.render("index");
});


ejs模板引擎的语法:
1)声明    <% %>
2)输出语法    <%=   %>
3)分支语法
    <% if(){ %>

    <% }  %>
4)循环语句
    <% for(){%>
    
    <% } %>

Express-一键安装项目

1.首先进行全局安装

npm install express-generator -g

2.然后安装express

express --view=模板引擎 项目名

3.项目目录分析

bin			
--bin/www		入口文件
public			静态资源文件
---javascript    js文件
---stylesheet    css文件
---images        img文件
routes			路由文件目录
---index.js			index路由模块
---users.js			users路由模块
views				模板页面目录
	---index.ejs	index模板页面
	...
app.js				逻辑文件(入口文件)
package.lock.json	记录了包依赖信息
package.json		包描述文件

以上就是对Express的一些认识和了解,Express是Nodejs的顶级框架,在市面上是很流行的主流技术,熟悉掌握node也能很轻松的找到一份工作,希望同学们能够认真学习,多实践,多敲代码,才能更快的熟记于心。

你可能感兴趣的:(express,node.js,后端,express,node.js)