express框架开发开始篇 方便以后写项目时候可拿过来直接使用

使用到的第三方依赖：

nodemon、body-parse、cookie-parse、ejs、express

package.json文件配置

# 开发环境下加入
"scripts": {
    "start": "DEBUG=express:* nodemon index.js"
}

index.js文件

const express = require('express')
const bodyParser = require('body-parser')
const cookParser = require('cookie-parser')
const path = require('path')
const app = express()
const port = 3000

// 解析 使用 req.body 获取到请求参数
app.use(bodyParser.json())
app.use(bodyParser.urlencoded())

// cookie
// 设置 res.cookie('name', 'zhangsan', {maxAge: 10000, httpOnly: true})
// 获取 req.cookies.name
app.use(cookParser())

// 引入路由
// 创建 /routers/index/index.js 文件
const IndexRouter = require('./routers/index/index')

// 定义视图
// 创建 views文件夹
app.set('views', __dirname + '/views');
app.set('view engine', 'ejs');

// 设置静态文件目录
// 创建 public文件夹
app.use('/public', express.static(path.join(__dirname, 'public')))

// 定义路由
app.use('/', IndexRouter)

// 定义404
app.use((req, res, next) => {
    let err = new Error('Not Found')
    err.status = 404
    next(err)
})

app.use((err, req, res, next) => {
    res.status(err.status || 500)
    
  	// 这里为了区分请求类型 前端请求内容加入了{type: 'axios'} 
  	// 如果有好的方法可以在评论区回复感谢
    if(req.body.type == 'axios'){
        res.json({
            error: err,
            message: err.message
        })
    }else{
        res.render('error', {
            title: '系统错误',
            error: err,
            message: err.message
        })
    }

})

app.listen(port, () => {
    `express-daohang app listen port ${port}!`
})

routers/index/index.js文件

const express = require('express')
const router = express.Router()

router.get('/', (req, res, next) => {
    res.cookie('name', 'zhangsan', {maxAge: 10000, httpOnly: true})
    res.render('index', {title: 'index'})
})

router.post('/indexAction', (req, res, next) => {
    console.log(req.body)
    res.json({status: 200, name: req.cookies.name})
})

module.exports = router

view/index/index.ejs文件

// 可以使用cdn <script src="/public/js/axios.min.js"></script>
<script>
    axios.post('/indexAction', {
        type: 'axios',
        firstName: 'Fred',
        lastName: 'Flintstone'
    })
    .then(function(response){
        console.log(response)
    })
    .catch(function(error){
        console.log(error)
    })
</script>
<script src="/public/js/axios.min.js"></script>
<script>
    axios.post('/indexAction', {
        type: 'axios',
        firstName: 'Fred',
        lastName: 'Flintstone'
    })
    .then(function(response){
        console.log(response)
    })
    .catch(function(error){
        console.log(error)
    })
</script>

文件列表

package.json

routers/index/index.js

public/js/axios.min.js

index.js

view

• error.ejs
• index/index.ejs