express快速入门【含源码压缩包下载】

快速搭建express基本服务

const express = require('express')
const path = require('path')
const app = express()
const cors = require('cors')

// 解决跨域问题
app.use(cors())
// 用来解析请求体中application/json数据
app.use(express.json())
// 用来解析请求体中application/x-www-form-urlencode
app.use(express.urlencoded({
    
     extended: false }))
// 静态资源服务器，浏览器地址栏输入http://localhost:4000试一试吧，源文件在项目目录下的server文件夹里
app.use(express.static(path.join(__dirname, '/server')))

// 演示GET请求
app.get('/shop/list', (req, res) => {
    
    
    const shopList = [{
    
    
        id: '001',
        shopName: 'JavaScript权威指南'
    }, {
    
    
        id: '002',
        shopName: 'JavaScript权威指南'
    }]
    // res.json()里面接受一个json格式的数据，此数据返回给前端
    res.json({
    
    
        code: 200,
        msg: '获取商品列表成功!',
        data: shopList,
        // 获取前端传递的url参数
        query: req.query
    })
})

// 演示POST请求，:id是pramas路由传参风格
app.post('/submit/:id', (req, res) => {
    
    
    // 获取前端传递的url参数、请求体body参数、path传参的params参数
    const {
    
     query, body, params } = req
    res.json({
    
    
        code: 200,
        msg: '接受到的参数body、query、params',
        body,
        query,
        params
    })
})

// 演示服务器内部错误
app.get('/error', (req, res) => {
    
    
    const shopList = [{
    
    
        id: '001',
        shopName: 'JavaScript权威指南'
    }]
    res.json({
    
    
        code: 200,
        msg: '我是错误的JS代码',
        // 这样必会报错，该错误会被下面app.use(function(err,req,res,next))这个中间件捕获到
        data: shopList[1].id,
    })
})

// 获取服务器内部错误的中间件
app.use(function (err, req, res, next) {
    
    
    const response = {
    
    
        code: 500,
        errmsg: '报错信息',
        detail: '服务器内部错误'
    }
    if (err) {
    
    
        response.errmsg = err.message
    }
    // res.status是返回状态码的意思
    res.status(500).json(response)
})

// 服务器监听
app.listen(4000, () => {
    
    
    console.log('express服务启动！端口4000')
})

客户端验收：

<script>
    // 验证GET请求
    fetch('http://localhost:4000/shop/list?a=1', {
      
      
        method: 'GET',
    }).then(res=>res.json()).then(data=>{
      
      
        console.log(data);
    })
    // 验证服务端500错误
    fetch('http://localhost:4000/error', {
      
      
        method: 'GET',
    }).then(res=>res.json()).then(data=>{
      
      
        console.log(data);
    })
    // 验证POST请求
    fetch('http://localhost:4000/submit/express?name=1', {
      
      
        method: 'POST',
        headers: {
      
      
            'Content-Type': 'application/x-www-form-urlencoded'
        },
        body: {
      
      
            a:1
        }
    });
</script>

注意：fetch是HTML原生支持的ajax发送工具，不需要安装，是全局对象。很多人喜欢用第三方库axios但是其实fetch也是很牛的。

源码下载地址：下载源码
https://chengqige.com/express/express-start.zip

如何运行：解压即可运行！

运行方式：项目根目录打开终端，敲入npm start后回车