47 Express框架开发

2024-02-01 13:01:10

47 Express框架开发

项目开发流程

1、初始化 npm init -y

2、下载你已知包 npm i express

3、创建入口文件app.js （ main.js ）

4、搭建express服务器基本框架（引包、开端口）

5、定义路由

6、在路由书写自己的业务了（难点）

中间件种类

应用级别的中间件

app.get/app.post

app.method的语法都可以简单称为中间件

错误中间件

特点：写后面。中间件和路由是有前后顺序的。所以错误中间件写后面。

404错误：

express默认支持404，但是不美观，所以我们要优化


//错误中间件其实就是自定义中间件放在了所有路由的最后面而已。
//404页面
app.use( (req,res)=>{
    res.status(404)  //设置404状态码
    // res.send('我是404页面')
    res.sendFile( path.join( __dirname,'views/404.html' ) )
} )

逻辑错误

比如：登录、注册、路径地址等一些参数必须传递....有很多这种逻辑。就需要统一处理。

在对应的路由的回调中写上第3个形参 next callback( req,res,next )

1）如果后面没有定义错误中间件，而next在某个路由中调用了，并且传递了一个字符串，则直接输出并且是500错误

在所有路由的最后面定义一个逻辑错误中间件（其实也是自定义中间件）

1）如果后面定义错误中间件（并且是4个参数），而next在某个路由中调用了，并且传递了一个参数，则不输出，而是匹配到错误中间件路由

但是这个中间件需要4个参数 callback( err,req,res,next )

err：接收next传递过来的错误消息。

app.get('/dologin',(req,res,next)=>{

    //必须是用户名和密码都必须传递  
        //req.query.username
        //req.query.password
    if( !req.query.username || !req.query.password ){
        let s = {
                    msg:'用户名或密码不能为空',
                    status:2
                }
        // res.send( s )
        //next( '用户名或密码不能为空' )  //当next传递参数以后，返回的直接是500错误。
        next( s )
        return
    }
   
})



app.use((err,req,res,next)=>{
    //res.send('我是错误中间件::' + err.msg)
    let result = {
        message:err.msg,
        code:err.status,
        // list:err.result
    }
    res.send( result )
})

内置中间件

express框架自带的中间件

1、express.static()

语法：express.static( [/前缀,] 一个静态资源目录 )

作用：开放静态资源。

在前端除了html页面，其它都是静态资源。我们要和项目联系起来：要通过你express开放的端口去访问静态资源。

之前是 res.sendFile() 返回静态资源文件。但这不是正确的做法。

用法1：不带前缀的
//开放静态资源 : 最正确的做法换成绝对路径
app.use( express.static( path.join( __dirname,'public' ) ) )
//如何访问静态资源 ：
    // http://localhost:端口号/不包含目录名称
    // 例如： http://localhost:端口号/js/index.js

用法2：带前缀
app.use( '/a',express.static( path.join( __dirname,'public' ) ) )
//如何访问静态资源 ：
    // http://localhost:端口号/包含目录名称
    // 例如： http://localhost:端口号/a/js/index.js

补充：

只有html页面需要配置路由，静态资源不配置路由是用express.static去开放的

后端在改前端html页面的时候，静态资源的路径都以 / 开头。

2、express.urlencoded()

作用：接收post传递过来的参数

语法：app.use( express.urlencoded( {extend:false|true} ) )

注意：配置在所有路由的前面

在路由中使用 req.body上存储了post的参数，当配置此中间，如果没有传递post参数则默认为空对象，如果没配置则为undefined

前端如何发送post请求：ajax、form表单的

如果是ajax则需要配置 Content-Type: application/x-www-form-urlencoded

form表单默认就是它 Content-Type: application/x-www-form-urlencoded

表单提交时，使用请求体

https://www.w3school.com.cn/tags/att_form_enctype.asp

username=aaa&pass=bbb

querystring.parse()

qs.parse()/qs.stringify()

3、express.json()

作用：接收post传递过来的参数

语法： app.use( express.json() )

注意：配置在所有路由的前面

在路由中使用 req.body上存储了post的参数，当配置此中间，如果没有传递post参数则默认为空对象，如果没配置则为undefined

前端如何发送post请求：请使用ajax发这类的json数据、使用Rest Client，表单提交不能设置application/json的请求头

第三方中间件

本质上是npm上的一个三方包。

使用步骤

1、先下载

npm i 包名

2、引入（看手册）

找到usage或example

3、把example复制即可

serve-favicon

网站小图标的设置

var express = require('express')
var favicon = require('serve-favicon')
var path = require('path')

var app = express()
app.use(favicon(path.join(__dirname, 'public', 'favicon.ico')))

// Add your routes here, etc.

app.listen(3000)

注意：刚配置好以后，可能不出来？

清除缓存或者改一个端口

svg-captcha

app.get('/createcode', function (req, res) {

    //var captcha = svgCaptcha.create();  //创建一个验证码
    /*
        如果没有任何参数，则生成的 svg 图片有4个字符。
        size: 4 // 验证码长度
        ignoreChars: '0o1i' // 验证码字符中排除 0o1i
        noise: 1 // 干扰线条的数量
        color: true // 验证码的字符是否有颜色，默认没有，如果设定了背景，则默认有
        background: '#cc9966' // 验证码图片背景颜色
        默认图片的大小为150*50


        该函数返回的对象拥有以下属性
        data: string // svg 路径
        text: string // 验证码文字
    */

    var captcha = svgCaptcha.create({
        size:6,
        ignoreChars:'0OoIiLl1',
        noise:3,
        color:true,
        background:'#cccccc',
        width:300,
        height:80
    });  


    res.type('svg');  //设置返回的类型
    res.send(captcha.data);
});

前端如何用

<img src="http://localhost:3300/createcode" id="img1" alt="">

    <script>
        let img1 = document.getElementById('img1'

        img1.onclick = function(){
            let t = Math.random()
            this.src = 'http://localhost:3300/createcode?' + t
        }

    </script>

六、文件上传

七、cookie

介绍

特点

应用场景

实现原理

八、session

简介

特点

应用场景

实现原理

九、模板引擎

十、express脚手架

十一、koa框架

前后端数据交互总结

1层：会前后端交互（使用ajax调用接口）

2层：会用express+mysql写一些接口

3层：前后端一起干（全栈工程师）

请求方法	编码格式	前端要传输的数据格式	后端如何获取	应用场景
GET	url地址后面（querystring）	url?key1=value1&key2=value2	不需要中间件:req.query	获取数据
POST	applicaion/x-www-form-urlencoded	form-data: key1=value1&key2=value2	express.urlencoded( { extend:true } )	提交数据
POST	applicaion/json（只能通过ajax）	request-payload: '{ "key1":"value1","key2":"value2" }'	express.json()
POST	mutilpart/form-data（可以使用表单）	文件流		文件上传
DELETE	同post			删除数据
PUT	同post			更新数据

码农公寓