# 路由传参

query更加类似于我们ajax中get传参,params则类似于post,说的再简单一点,前者在浏览器地址栏中显示参数,后者则不显示.

# vue中传参

query要用 path 来引入,params要用 name 来引入,接收参数都是类似的,分别是 this.$route.query.namethis.$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!!!!

  1. $router为VueRouter实例,想要导航到不同URL,则使用$router.push方法
  2. $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 中间件的使用
  1. 安装 koa-bodyparser npm install --save koa-bodyparser
  2. 安装 引入配置中间件
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)

})
最后更新: 7/11/2019, 8:52:51 AM