Vue2.x通过id参数数据请求

来源：互联网发布：宝日龙梅知乎编辑：程序博客网时间：2024/05/20 18:16

一：使用Vue进行数据请求，需要用到Vue的生命周期
需要引入三个库

1.jquery.min.js2.vue.min.js3.vue-resource.js

点击页面

<html><head>    <title>点击页面</title>    <script type="text/javascript" src="common/jquery.min.js"></script>    <script type="text/javascript" src="common/vue.js"></script></head>    <!--这里我们模仿多个A链接的跳转页面-->    <!--首先我们假设有10个A链接需要跳转页面，我们只需要用一个Vue对面的data数据传输即可-->    <div id='box'>        <p v-for='Num in Nums'>            <!--这里我们通过Vue的循环 把数组中的对象循环出来，这样我们就有8个a元素-->            <a :href="'/a.html?id='+Num.id">{{Num.num}}</a>            <!--我们通过:href +上我们对应的跳转页面 实现ID的循环-->        </p>    </div></html><script>    var V = new Vue({        el:'#box',        data:{            Nums:[                {num:1,id:1},                {num:2,id:2},                {num:3,id:3},                {num:4,id:4},                {num:5,id:5},                {num:6,id:6},                {num:7,id:7},                {num:8,id:8}            ]           },    })</script>

我们的a.html 页面

<!DOCTYPE html><html lang="en"><head>    <meta charset="UTF-8">    <script type="text/javascript" src="common/jquery.min.js"></script>    <script type="text/javascript" src="common/vue.js"></script>    <script type="text/javascript" src="common/vue-resource.js"></script>    <title>Vue数据请求</title></head><body>    <div id="box">    <!-- 10. vue自带json过滤器  我们可以直接查看我们从后台获取的数据。 （这里我们是获取的 一个数组对象）    -->        <p>{{msgs}}</p>        <!-- 11.然后通过我们的 v-for 把数据循环出来-->        <div v-for='msg in msgs'>            <p>{{msg.content1}}</p>        </div>        <!--12. 为什么要这个{{id}} 请看最后-->        <p>{{id}}</p>     </div></body></html><script type="text/javascript">    console.log(window.location.search)  //1.获取我们？后面的id参数值 ?id=1     function test(name,src){        var reg = new RegExp("(^|&)" + name + "=([^&]*)(&|$)", "i");        var r = src.substr(1).match(reg);        if (r != null) return unescape(r[2]); return null;    }    var id = test('id',window.location.search);     // 2. 因为我们只需要用到 id的值 1    var v = new Vue({        el:'#box',        data:{            id:id,  //  3.将变量id传到data数据中            msgs:''        },        created:function () {            this.$http.get('/user',{                        id:this.id          // 4.通过get方式进行传递参数 this.id 就是我们的传递的参数     ==> 第六步请看后台                }).then(function (a) {                    this.msgs = a.data;   // 9.获取后台的数据   赋值给我们 data（上面的数据）  this.msgs                },function (res) {            })        }    })              </script>

node后台

// 我们需要引入三个包const express = require('express');const expressStatic  =require('express-static');const mysql = require('mysql');const db = mysql.createPool({host:'localhost',user:'root',password:'yangbaoxi789',database:'table'})var app = express();app.use('/user',function(req,res)=>{    console.log(req.query)   /*5.我们可以通过 req.query 来查看 后台接收的参数*/    var id  = req.query.id   /*  6. 我们var一个变量获取我们前台传递的id值*/    // 7.我们通过sql语句 进行数据库查询   因为们的id是变量 所以这里用到 id='${id}'    db.query(`SELECT * FROM casetable WHERE id='${id}'`,(err,data)=>{        if(err){            console.log(err)            res.send('服务器出问题').end()        }else{            res.send(data).end()  /*8.将数据发送给前端  第九部看前端*/        }    })})app.listen(8080)app.use(express.static('./www'))

（内容改版，已用cradted实现，问题结束）

其他知识点：

1.window.location.href  地址2.window.location.pathname  域名3.window.location.port  端口号4.window.location.protocol 请求头http5.window.location.hash6.window.location.search 参数

阅读全文

0 0