# 路由传参
query更加类似于我们ajax中get传参,params则类似于post,说的再简单一点,前者在浏览器地址栏中显示参数,后者则不显示.
# vue中传参
query要用 path 来引入,params要用 name 来引入,接收参数都是类似的,分别是 this.$route.query.name 和 this.$route.params.name
# params模式
this.$router.push({
name:"detail",
params:{
name:'nameValue',
code:10011
}
});
//this.$route.params.code
# query模式
import router from "../router";
router.push(`/meetingdetail?id=${v}`)
------
let that=this;
Indicator.open()
this.$axios.get('/conference/selectDetailCon',{
params:{
id:that.$route.query.id
}
})
//传参:
this.$router.push({
path:'/xxx',
query:{
id:id
}
})
//接收参数:
this.$route.query.id
注意
获取参数时,注意是$route!!!!
- $router为VueRouter实例,想要导航到不同URL,则使用$router.push方法
- $route为当前router跳转对象,里面可以获取name、path、query、params等
# node中接受参数
假设前端现在用axios向后端发送一个请求,发送id值请求后端的数据
# req.query
axios.get(`/api/?id=1234`)
//或者
axios.get(`/api`,{ params:{id:'1234' })
在前端里面,router怎么发送的就怎么收,query发送的就用this.$route.query接收,params发送的就用this.$route.params接收
但是在这里,虽然第二种方式里面有params,但这两种我们都要用req.query.id来获取里面的id值
router.get('/api',function(req,res){
console.log(req.query.id)
.......
})
# req.params
那如果直接把id值写进发送的url里面呢
axios.get(`/api/1234`)
它跟上面params的url非常像, 我们就反向操作一下
router.get('/api/:id',function(req,res){
console.log(req.params.id)
.......
})
axios.get(`/api/1234-12`)
中间用-或者&隔开 那我们也可以在获取时的路径上这么写
router.get('/api/:id-:age',function(req,res){
console.log(req.params.id)
console.log(req.params.age)
.......
})
# req.body
上面两个都是处理get请求的,而这位是用来处理post请求的(需要安装body-parser中间件) 解析body不是nodejs默认提供的,你需要载入body-parser中间件才可以使用req.body
axios.post(`/api`,{ id:'1234' })
我们就用req.body来接收
router.get('/api',function(req,res){
console.log(req.body.id)
.......
})
# req.on
http.get(callbackurl, function(req, response) {
var html = '';
req.on('data', function(data) {
html += data;
debug('callback response data:', data, " html:", html);
});
req.on('end', () => {
console.log("adv side callback result:", html);
saveeventarray(html, querydata, clickid, clickresult, (result) => {
debug("linktestbyid final rs:", result);
callback(result);
});
});
});
# koa版本获取post请求
- 原生 Nodejs 获取 post 提交数据 common.js
exports.getPostData = function (ctx) {
return new Promise((resolve, reject) => {
try {
let str = ''
ctx.req.on('data', (chunk) => {
str += chunk
})
ctx.req.on('end', (chunk) => {
resolve(str)
})
}catch(err){
reject(err)
}
})
}
app.js
//接收post数据
router.post('/doAdd',async (ctx) =>{
//获取表单数据
let data = await common.getPostData(ctx)
console.log(data)
})
//index.ejs
<form action="/doAdd" method="POST">
<input type="text" name="username" placeholder="用户名"><br><br>
<input type="text" name="password" placeholder="密码">
<input type="submit" value="提交">
</form>
- Koa 中 koa-bodyparser 中间件的使用
- 安装 koa-bodyparser npm install --save koa-bodyparser
- 安装 引入配置中间件
const bodyParser = require('koa-bodyparser')
//配置中间件
app.use(bodyParser())
//读取post数据 对象格式
ctx.request.body
router.post('/doAdd',async (ctx) =>{
//获取表单数据
// let data = await common.getPostData(ctx)
// console.log(data)
console.log(ctx.request.body)
})