<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>购物车</title>
<script src="./js/vue.js"></script>
<script src="./js/axios.js"></script>
<link rel="stylesheet" href="./css/element-ui.css">
<link rel="stylesheet" href="./css/index.css">
</head>
<body>
<div class="container" id="app">
<h4>购物车</h4>
<!-- 购物车列表 -->
<div v-for="item in carlist">
<el-card class="box-card">
<!-- 商品图片 -->
<img :src="item.img">
<div>
<span>
<!-- 商品名称 -->
{{item.name}}
</span>
<div class="bottom clearfix">
<el-button type="text" class="button">+</el-button>
<el-button type="text" class="button">
<!-- 商品数量 -->
1
</el-button>
<el-button type="text" class="button">-</el-button>
</div>
</div>
</el-card>
</div>
</div>
</div>
<!-- 引入组件库 -->
<script src="./js/element-ui.js"></script>
<script>
new Vue({
el: "#app",
data: {
carlist: [] //购物车列表
},
created() {
// 在这里使用axios 发送请求 第一种请求方式
axios.get('carList.json').then(res=>{
console.log(res)
this.carlist = res.data
})
/** 在这里使用axios发送请求 第二种方式
* axios({methods: '请求类型',
* url: '请求的url地址'}).then((result)=>{
* .then 用来指定请求成功之后的回调函数,形参中的result 是请求成功之后的结果
* })
**/
axios({method: 'GET',url:'carList.json'}).then(res=>{
console.log(res) // 返回的是一个promise对象
})
axios({method: 'GET', url: 'carList.json'}).then((res)=>{
console.log(res) //返回的是一个promise对象
})
//调用axios方法得到的返回值是Promise对象所以该对象可以点then(function(res){}) res是真实数据套完壳返回的Promise对象,所以要想使用真实数据需要用点点出来
/**
* axios({
//请求方式
method: 'GET||POST',
//请求地址
url: 'url地址',
//URL 中的查询参数
params: {}, GET请求传参
//请求体参数
data: {} POST请求传参
}).then(function(Promise对象){ 处理函数})
**/
/**
* axios({
//请求方式
method: 'GET||POST',
//请求地址
url: 'url地址',
//URL中的查询参数
params: {}, GET请求传参
//请求体参数
data: {} POST请求传参
}).then(Promise对象=> {处理函数})
**/
},
})
</script>
</body>
</html>
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
</head>
<body>
<button id="btnPost">发起POST请求</button>
<button id="btnGet">发起GET请求</button>
<script src="./lib/axios.js"></script>
<script>
document.querySelector('#btnPost').addEventListener('click', async function () {
//第一步:如果调用某个方法的返回值是 Promise 实例,则前面可以添加 await!
//第二步 await 只能用在被 async “修饰”的方法中
//做这两步的好处是--->铺垫因为能够使用解构赋值的方法得到我们要操作的实际数据data对象
const { data } = await axios({ //解构出服务器返回的真实数据对象,
method: 'POST',
url: 'http://www.liulongbin.top:3006/api/post',
data: {
name: 'zs',
age: 20
}
})
console.log(data)
})
document.querySelector('#btnGet').addEventListener('click', async function () {
// 解构赋值的时候,使用 : 进行重命名
// 1. 调用 axios 之后,使用 async/await 进行简化
// 2. 使用解构赋值,从 axios 封装的大对象中,把 data属性解构出来
// 3. 把解构出来的 data 属性,使用 冒号 进行重命名,一般都重命名为 { data: res }
const { data: res } = await axios({
method: 'GET',
url: 'http://www.liulongbin.top:3006/api/getbooks'
})
console.log(res.data) // 这就是我们实际要操作的数据
})
// $.ajax() $.get() $.post()
// axios() axios.get() axios.post() axios.delete() axios.put()
</script>
</body>
</html>
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta http-equiv="X-UA-Compatible" content="ie=edge">
<title>Document</title>
<script src="./lib/axios.js"></script>
</head>
<body>
<button id="btn1">发起GET请求</button>
<button id="btn2">发起POST请求</button>
<button id="btn3">直接使用axios发起GET请求</button>
<button id="btn4">直接使用axios发起POST请求</button>
<script>
document.querySelector('#btn1').addEventListener('click', function () {
var url = 'http://www.liulongbin.top:3006/api/get'
var paramsObj = { name: 'zs', age: 20 }
axios.get(url, { params: paramsObj }).then(function (res) {
console.log(res.data)
})
})
document.querySelector('#btn2').addEventListener('click', function () {
var url = 'http://www.liulongbin.top:3006/api/post'
var dataObj = { address: '北京', location: '顺义区' }
axios.post(url, dataObj).then(function (res) {
console.log(res.data)
})
})
document.querySelector('#btn3').addEventListener('click', function () {
var url = 'http://www.liulongbin.top:3006/api/get'
var paramsData = { name: '钢铁侠', age: 35 }
axios({
method: 'GET',
url: url,
params: paramsData
}).then(function (res) {
console.log(res.data)
})
})
document.querySelector('#btn4').addEventListener('click', function () {
axios({
method: 'POST',
url: 'http://www.liulongbin.top:3006/api/post',
data: {
name: '娃哈哈',
age: 18,
gender: '女'
}
}).then(function (res) {
console.log(res.data)
})
})
</script>
</body>
</html>