Vue2.x通过id参数数据请求
一：使用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>
·
一：使用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 参数
前往低代码交流专区
更多推荐
0
0- 0
已为社区贡献6条内容
所有评论(0)