本文探讨了Vue.js中使用JSONP原理来实现跨域获取数据库接口数据的方法。首先简述了JSONP的基本原理，包括动态创建script标签和在Node.js环境下模拟JSONP服务器。接着展示了Vue.js的HTML模板，包括输入框、按钮和表格，并利用Vue实例的data、methods及生命周期钩子函数，实现获取、添加和删除数据的功能。尽管没有实际接口进行测试，但提供了大致的实现思路。
一.jsonp原理：
略：动态创建script标签，实现跨域。。。
略：结合node手写jsonp服务器。。。
①nser快速创建一个node服务器，判断请求路径后返回脚本字符串
②调用。通过<script src=“http://127.0.0.1/getscript”></script>
二.数据库请求的接口和返回值的格式这种感jio：
| 接口地址： | http://xxx/xx/getAllList |
| 作用： | 获取数据库列表 |
| 请求方式： | get |
| 传入参数： | 木有 |
| 返回数据格式： |
{ status：0 //成功返回0 -message：[ { xx1:xxxx xx2:xxxx }, ... ] } |
实现：（没接口没测，大体就是这样的suo~~~JSONP的没做）
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
<script src="https://unpkg.com/vue/dist/vue.min.js"></script>
</head>
<body>
<div id="app">
<input type="text" name="name">
<input type="text" name="age">
<input type="button" @click="add">
<div v-for="(item, index) in list" :key="item.id"></div>
<table>
<thead>
<tr>
<th>ID</th>
<th>NAME</th>
<th>AGE</th>
</tr>
</thead>
<tbody>
<tr v-for="(item, index) in list" :key="item.id">
<td>{{item.id}}</td>
<td>{{item.name}}</td>
<td>{{item.age}}</td>
</tr>
</tbody>
</table>
</div>
<script>
var vm=new Vue({
el:'#app',
data:{
list:[
{name:xx1,age:12},
{name:xx2,age:23}
]
},
created:function (){
this.getAllList//刷新页面
},
methods:{
getAllList(){
this.$http.get('http://xxx/xx/getAllList').then((result)=>{
var result = result.body
if(result.status===0){
this.list=result.message
}else{
alert("shibai")
}
})
},
add(){
this.$http.post('http://xxx/xx/addProduct',{name:this.name},{emulateJSON:true}).then((result)=>{//emulateJSON可以定义为全局启用
var result = result.body
if(result.status===0){
this.getAllList
}else{
alert("shibai")
}
})
},
del(id){
this.$http.get('http://xxx/xx/delProduct'+id).then((result)=>{
var result = result.body
if(result.status===0){
this.getAllList
}else{
alert("shibai")
}
})
}
})
</script>
</body>
</html>
扫一扫
1864
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
