移动端主页内容 part4 axios
ajax 可以动态获取数据内容
vue中发送ajax有很多工具可用
浏览器自带的fetch
现在推荐:
axios第三方模块(vue中发送ajax)
特点:
跨平台的数据请求
- 浏览器中xhr请求
- node服务器中发送http请求
技巧:
一个首页中有五个组件。每个组件需要发送数据请求。那就是五个请求。那性能就很低
我们可以在根组件中发送一个请求 然后父子件传值 。
知识点static 整个项目中外部仅仅能直接访问这个文件夹内部的内容
作用:本地数据模拟 不提交到git仓库(gitignore 中写一下模拟数据文件地址即可)
使用步骤
1.安装
npm install --save axios vue-axios |
2.使用
home根组件中引入
import Vue from 'vue' |
//是否可以引入在项目入口文件
3.axios中url地址解决方案
原因:本地模拟数据用的是本地模拟url
上线之前改动代码(修改url) 是非常不建议的
开发环境中如果有一个转发机制 把url中 api/index.json 文件的请求转发到我本地的mock文件夹下(就是static中模拟数据文件夹)
解决:vue中提供一个proxy代理功能
config文件中--- index.js ----
文件中有一个配置项目
module.export = {
dev: {
proxyTable:{
'/api' : {
target: 'http://localhost:8080',
pathRewrite: {
'^/api': '/static/mock'
}
}
}
}
}
当开发环境访问api时候 vue脚手架工具会帮我们替换地址(开发环境的转化)
//使用ajax动态获取数据 当数据还没有收到的时候,swiper组件收到的是跟组件data传过来的空数组,会造成渲染问题
这个时候可以给swiper组件 设置一个 v-if='list.length'
模板中避免逻辑性的代码
v-if='showSwiper' computed: {
showSwiper () {
return this.list.length
}
}
移动端主页内容 part4 axios的更多相关文章
- 使用 Nginx 内置 $http_user_agent 来区分( 电脑 pc、手机 mobile、平板 pad )端的内容访问
location / { #pc端内容访问 set $flag "pc"; set $num 1; set $hua "${http_user_agent}"; ...
- 移动端打印输出内容以及网络请求-vconsole.js
今天,无意间从别人那里得知一个很好的js插件--vconsole.min.js,可以实现在移动端打印输出内容以及查看网络请求.下面记录使用方式. 1.下载vconsole.min.js插件 以下复制了 ...
- SpringCloud微服务实战——搭建企业级开发框架(四十七):【移动开发】整合uni-app搭建移动端快速开发框架-添加Axios并实现登录功能
uni-app自带uni.request用于网络请求,因为我们需要自定义拦截器等功能,也是为了和我们后台管理保持统一,这里我们使用比较流行且功能更强大的axios来实现网络请求. Axios ...
- 如何创建一个客户端回调:js获得服务端的内容?
答案:表面上看去就是前端的js调用服务的C#方法,本质就是ajax,通过XMLHttpRequest对象和服务端进行交互.回调:就说回过头来调用,按理说js是一种脚本语言,怎么能用来调用服务端的呢?就 ...
- <!--more-->搭建的博客设置主页内容高度
用 markdown写文章时插入<!--more-->,文章会自动从插入的位置截断,也就是说在博客中只显示<!--more-->之前的内容,点击阅读全文之后会显示所有内容.
- 服务端JSON内容中有富文本时
问题背景 由于数据中存在复杂的富文本,包含各种引号和特殊字符,导致后端和前端通过JSON格式进行数据交互引发前端JSON解析出错. 解决方案 后端将富文本内容 ConvertToBase64Strin ...
- 使用Typescript重构axios(三十一)——添加axios.all和axios.spread方法
0. 系列文章 1.使用Typescript重构axios(一)--写在最前面 2.使用Typescript重构axios(二)--项目起手,跑通流程 3.使用Typescript重构axios(三) ...
- 微博爬虫,python微博用户主页小姐姐图片内容采集爬虫
python爬虫,微博爬虫,需要知晓微博用户id号,能够通过抓取微博用户主页内容来获取用户发表的内容,时间,点赞数,转发数等数据,当然以上都是本渣渣结合网上代码抄抄改改获取的! 要抓取的微博地址:ht ...
- Vue3学习(五)之集成HTTP库axios
一.安装axios npm install axios@0.21.0 --save 二.axios的使用 1.在主页中引用axios 在Vue3新增了setup初始化方法,所以我们在这里开始使用并测试 ...
随机推荐
- pip install .whl文件时is not a supported wheel on this platform.解决方法
首先,在python中输入import pip和print(pip.pep425tags.get_supported()),从而获取pip支持的文件名和版本. somnus@somnus-HP-Pa ...
- 第2节 网站点击流项目(下):6、访客visit分析
0: jdbc:hive2://node03:10000> select * from ods_click_stream_visit limit 2;+--------------------- ...
- KMP【模板】 && 洛谷 P3375
题目传送门 解题思路: 首先说KMP的作用:对于两个字符串A,B(A.size() > B.size()),求B是否是A的一个字串或B在A里的位置或A里有几个B,说白了就是字符串匹配. 下面创设 ...
- C++中数字与字符串之间的转换 scanf string总结(复习必读)
1 string的scanf读入操作 C++里面控制台输入直接使用cin操作就可以了:或者getline(istringstream,string); 字符和数字加减就是字符的ASCII码和数字直接加 ...
- java不要登录发送邮件noReply
最近在工作中遇到一个问题: 客户需要让我们的系统给他们发邮件,但是不给我们提供用户密码. 这样就导致一个问题,即,一般我们使用的都是smtp方式发邮件,发邮件的时候必须登录,虽然可以修改发件人的邮箱名 ...
- java csv文件写入
List<String> list_code = null; 方案1 控制字符集: BufferedWriter bw=new BufferedWriter(new OutputStrea ...
- Django(九)模型:dj查询数据库的函数(方法)
一.查询函数 通过模型类.objects属性可以调用如下函数,实现对模型类对应的数据表的查询. 函数表 函数名 功能 返回值 说明 get 返回表中满足条件的一条且只能有一条数据. 返回值是一个模型类 ...
- 6 —— node —— 响应一个完整的页面
const http = require('http'); const fs = require('fs'); const server = http.createServer(); server ...
- Python序列内单双引的问题——未解决
在学习python基础的时候,遇到这样一个问题: tuple=(2,2.3,"yeah",5.6,False)list=[True,5,"smile"] 这样输 ...
- PyTorch自动微分基本原理
序言:在训练一个神经网络时,梯度的计算是一个关键的步骤,它为神经网络的优化提供了关键数据.但是在面临复杂神经网络的时候导数的计算就成为一个难题,要求人们解出复杂.高维的方程是不现实的.这就是自动微分出 ...