03.Vue.js 【axios 】数据交互
1.引入axios和vue的cdn
<script src="https://cdn.bootcss.com/axios/0.19.0-beta.1/axios.js"></script>
<script src="https://cdn.bootcss.com/vue/2.6.10/vue.common.dev.js"></script>
2.模拟数据【mock数据】
方法1：【线上拷贝数据】两种选一种即可
步骤：1.找到需要模拟的网页
2.在控制台Network的XHR中找到数据文件
3.在数据文件Preview【预览】中找到数据
4.右键点击文件，选择拷贝copy response
5.创建一个json文件，将数据粘贴进去，格式化一下文档
注.拷贝的数据字段要跟后端字段定义一致，要跟后端商量一致
方法2：【mock数据】两种选一种即可
使用步骤：
1.先安装mock插件
cnpm init -y
cnpm install mockjs -S
2.创建一个mock.js文件，然后粘贴下面代码，修改信息
// 使用 Mock
var Mock = require('mockjs')
var fs = require( 'fs' )
var data = Mock.mock({
// 属性 list 的值是一个数组，其中含有 1 到 10 个元素
'list|3': [{
// 属性 id 是一个自增数，起始值为 1，每次增 1
'name|+1': ['a','b','c'],
'id|+1': 1
}]
})
// 输出结果
fs.writeFile('./mock.json',JSON.stringify( data ), function ( error ) {
if ( error ) throw error
})
console.log(JSON.stringify(data, null, 4))
3.运行mock.js文件
node mock.js
3.获取数据
<body>
<div id="app"> //1.创建根组件
<button @click = "static"> 静态数据 </button> //4.绑定事件处理程序
<button @click = "get"> 动态数据 - get </button>
<button @click = "post"> 动态数据 - post </button>
<ul>
<li v-for = "item in list">
<div>
<img :style = "{ width: '100px',height: '100px'}" :src="item.pic" alt="">
</div>
<div>
<h3> {{ item.d_title }} </h3>
<span></span>
</div>
</li>
</ul>
</div>
</body>
<script>
*/
// 统一设置axios post 请求的请求头
axios.defaults.headers.post['Content-Type'] = 'application/x-www-form-urlencoded';
Vue.prototype.$http = axios
new Vue({ //2.创建根实例
el: '#app',
data: {
list: []
},
methods: { //3.创建事件处理方法
static () {
this.$http
.get('./data/list.json') //5.发送数据请求
.then( res => {
console.log( res )
this.list = res.data.data.content
})
.catch( error => console.log( error ))
},
get () {
axios({
url: 'http://localhost/get.php',
params: {
a: 5,
b: 4
}
}).then( res => console.log( res ))
.catch( error => console.log( error ))
},
post () {
let params = new URLSearchParams()
params.append('a',1)
params.append('b',2)
axios({
url: 'http://localhost/post.php',
method: 'post',
data: params
}).then( res => console.log( res ))
.catch( error => console.log( error ))
}
}
})
</script>
</html>
最后编辑于 ：
©著作权归作者所有,转载或内容合作请联系作者
平台声明：文章内容（如有图片或视频亦包括在内）由作者上传并发布，文章内容仅代表作者本人观点，简书系信息发布平台，仅提供信息存储服务。
