1、环境搭建
执行命令:
# 安装express-generator脚手架
cnpm i -g express-generator
# 创建项目
express node-demo
# 安装依赖
cd node-demo
cnpm i
# 启动服务
npm start
安装nodemon,修改项目源码后,无需重启服务就可以实现热部署
# 安装nodemon
cnpm i -g nodemon
在package.json文件中配置
"scripts": {
"start": "nodemon ./bin/www"
}
安装cors模块解决跨域问题
# 安装cors
cnpm i cors --save
在 app.js 文件中配置 cors 跨域问题
const express = require('express');
const cors = require('cors');
const app = express();
app.use(cors());
2、express接收请求参数
2.1、get请求
在routes目录下创建 stu.js 文件,编写如下代码:
let express = require('express')
let router = express.Router()
router.get("/query",(req,res,next)=>{
let params = req.query;
res.json({
code: 0,
msg: "成功",
params
})
})
module.exports = router
在 app.js 文件中引入
let stuRouter = require('./routes/stu')
app.use('/stu',stuRouter);
打开浏览器,发送请求
//请求地址
http://localhost:3000/stu/query?id=1&name=tom
页面中返回的结果:
{"code":0,"msg":"成功","params":{"id":"1","name":"tom"}}
2.2、post请求
安装 body-parser 模块
cnpm i body-parser --save
在express项目的路由文件中接收post请求参数
let express = require('express')
let bodyParser = require('body-parser')
let router = express.Router()
// 解析提交的json参数
let jsonParser = bodyParser.json()
// 解析提交的form表单参数
let urlencodedParser = bodyParser.urlencoded({ extended: true })
router.post("/add",jsonParser,(req,res,next)=>{
console.log(req.body)
res.json({
code: 0,
msg: '提交成功'
})
})
module.exports = router
为了模拟post请求,可以使用postman,也可以自己写个ajax请求,这里我使用vue写了一个简单的demo,模拟post请求,示例代码:
<template>
<div>
<button @click="add">提交</button>
</div>
</template>
<script>
export default {
methods:{
add(){
this.$axios.post('http://127.0.0.1:3000/stu/add',{
id: 300,
name: 'Lily',
age: 20
}).then(res=>{
console.log(res.data)
})
}
}
}
</script>
点击提交按钮,发送请求后,在服务器端控制台打印的结果:
{ id: 300, name: 'Lily', age: 20 }
后端接收到post请求的参数,在客户端控制台打印响应结果:
{code: 0, msg: "提交成功"}