47 Express框架开发

内容导读

互联网集市收集整理的这篇技术教程文章主要介绍了47 Express框架开发，小编现在分享给大家，供广大互联网技能从业者学习和参考。文章包含5971字，纯文字阅读大概需要9分钟。

内容图文

 

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' ) )
} )
?

逻辑错误

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

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

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

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

   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页面的时候，静态资源的路径都以 / 开头。

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

后端在改前端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			更新数据

内容总结

以上是互联网集市为您收集整理的47 Express框架开发全部内容，希望文章能够帮你解决47 Express框架开发所遇到的程序开发问题。 如果觉得互联网集市技术教程内容还不错，欢迎将互联网集市网站推荐给程序员好友。

内容备注

版权声明：本文内容由互联网用户自发贡献，该文观点与技术仅代表作者本人。本站仅提供信息存储空间服务，不拥有所有权，不承担相关法律责任。如发现本站有涉嫌侵权/违法违规的内容， 请发送邮件至 gblab@vip.qq.com 举报，一经查实，本站将立刻删除。

内容手机端

---