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

1.jquery.min.js
2.vue.min.js
3.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 请求头http
5.window.location.hash
6.window.location.search 参数
Logo
Vue

前往低代码交流专区

更多推荐

vue 表单验证

1、6位小写字母和数字必须包含两个字母rules: [{ required: true, message: "XXX不能为空", trigger: "blur" },{ max: 6, message: "最大长度为6位字符", trigger: "blur" },{pattern: /^(?=(?:[^a-z]*[a-z]){2})[a-z0-9]{6,6}$/, //不连续的两位字母// /^

avatar Vue
cover

echarts堆叠柱状图

avatar Vue

Error in v-on handler: "TypeError: Cannot read properties of undefined (reading 'current')"

这是一个 Vue.js 错误，报错信息提示在 v-on 处理程序中出现了错误：“TypeError: Cannot read properties of undefined(读取 'current')”。这意味示在您的代码中，试图读取一个未定义的变量 'current'。您需要检查您的代码，确保 'current' 已正确定义并初始化。...

avatar Vue