axios配置
axios配置
关于Axios Axios,是一个基于promise的网络请求库,作用于node.js和浏览器中,它是 isomorphic 的(即同一套代码可以运行在浏览器和node.js中)。在服务端它使用原生node.js http模块, 而在客户端 (浏览端) 则使用XMLHttpRequest。 全局配置 <body> <button onclick="search()">查询</button> <button onclick="add()">添加</button> </body> <script> // axios的配置 1.全局配置 2.自定义配置 axios.defaults.baseURL='http://localhost:8080/user' // 设置超时时间 axios.defaults.timeout = 3000 function search() { var url= 'search'; axios.get(url).then().catch(err=>{ console.log(err.message) }) } function add() { var url= 'add'; axios.get(url).then().catch(err=>{ console.log(err.message) }) } </script> 自定义配置 <body> <button onclick="search()">查询</button> <button onclick="add()">添加</button> </body> <script> // axios的配置 1.全局配置 2.自定义配置 const ax = axios.create({ baseURL:'http://localhost:8080/user', timeout:'3000' }); function search() { var url= 'search'; ax.get(url).then().catch(err=>{ console.log(err.message) }) } function add() { var url= 'add'; ax.get(url).then().catch(err=>{ console.log(err.message) }) } </script>
 2022-5-24
蓝桥杯(web组)题解-购物车
蓝桥杯(web组)题解-购物车
背景介绍 购物车是商城类应用里必不可少的功能,接下来,我们将使用 vue 实现一个购物车列表。 考试要求 在代码中需要修改的部分有相关提示,请仔细阅读,然后完善 index.html 中的 js 部分代码,请求数据,并让数据正确显示到页面上,完成后效果如下:(在自己电脑上图片可能不显示) 题目分析 就是使用axios请求下数据,再用Vue渲染下页面,几行代码就能搞定! 完整代码 <!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> <el-card class="box-card" v-for="al in carlist"> <!-- 商品图片 --> <img :url="al.img"> <div> <span> <!-- 商品名称 --> {{al.name}} </span> <div class="bottom clearfix"> <el-button type="text" class="button">+</el-button> <el-button type="text" class="button"> <!-- 商品数量 --> {{al.num}} </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((ret) => { this.carlist = ret.data }) }, }) </script> </body> </html>
 2022-3-12
     跳转到第 页,共 1 页

Theme By Brief 鄂ICP备19010459号

站长统计 sitemap

首页

分类

友链

登录