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'
import axios from 'axios'
import VueAxios from 'vue-axios' Vue.use(VueAxios, axios)
//是否可以引入在项目入口文件

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的更多相关文章

  1. 使用 Nginx 内置 $http_user_agent 来区分( 电脑 pc、手机 mobile、平板 pad )端的内容访问

    location / { #pc端内容访问 set $flag "pc"; set $num 1; set $hua "${http_user_agent}"; ...

  2. 移动端打印输出内容以及网络请求-vconsole.js

    今天,无意间从别人那里得知一个很好的js插件--vconsole.min.js,可以实现在移动端打印输出内容以及查看网络请求.下面记录使用方式. 1.下载vconsole.min.js插件 以下复制了 ...

  3. SpringCloud微服务实战——搭建企业级开发框架(四十七):【移动开发】整合uni-app搭建移动端快速开发框架-添加Axios并实现登录功能

      uni-app自带uni.request用于网络请求,因为我们需要自定义拦截器等功能,也是为了和我们后台管理保持统一,这里我们使用比较流行且功能更强大的axios来实现网络请求.   Axios ...

  4. 如何创建一个客户端回调:js获得服务端的内容?

    答案:表面上看去就是前端的js调用服务的C#方法,本质就是ajax,通过XMLHttpRequest对象和服务端进行交互.回调:就说回过头来调用,按理说js是一种脚本语言,怎么能用来调用服务端的呢?就 ...

  5. <!--more-->搭建的博客设置主页内容高度

    用 markdown写文章时插入<!--more-->,文章会自动从插入的位置截断,也就是说在博客中只显示<!--more-->之前的内容,点击阅读全文之后会显示所有内容.

  6. 服务端JSON内容中有富文本时

    问题背景 由于数据中存在复杂的富文本,包含各种引号和特殊字符,导致后端和前端通过JSON格式进行数据交互引发前端JSON解析出错. 解决方案 后端将富文本内容 ConvertToBase64Strin ...

  7. 使用Typescript重构axios(三十一)——添加axios.all和axios.spread方法

    0. 系列文章 1.使用Typescript重构axios(一)--写在最前面 2.使用Typescript重构axios(二)--项目起手,跑通流程 3.使用Typescript重构axios(三) ...

  8. 微博爬虫,python微博用户主页小姐姐图片内容采集爬虫

    python爬虫,微博爬虫,需要知晓微博用户id号,能够通过抓取微博用户主页内容来获取用户发表的内容,时间,点赞数,转发数等数据,当然以上都是本渣渣结合网上代码抄抄改改获取的! 要抓取的微博地址:ht ...

  9. Vue3学习(五)之集成HTTP库axios

    一.安装axios npm install axios@0.21.0 --save 二.axios的使用 1.在主页中引用axios 在Vue3新增了setup初始化方法,所以我们在这里开始使用并测试 ...

随机推荐

  1. 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. 第2节 网站点击流项目(下):6、访客visit分析

    0: jdbc:hive2://node03:10000> select * from ods_click_stream_visit limit 2;+--------------------- ...

  3. KMP【模板】 && 洛谷 P3375

    题目传送门 解题思路: 首先说KMP的作用:对于两个字符串A,B(A.size() > B.size()),求B是否是A的一个字串或B在A里的位置或A里有几个B,说白了就是字符串匹配. 下面创设 ...

  4. C++中数字与字符串之间的转换 scanf string总结(复习必读)

    1 string的scanf读入操作 C++里面控制台输入直接使用cin操作就可以了:或者getline(istringstream,string); 字符和数字加减就是字符的ASCII码和数字直接加 ...

  5. java不要登录发送邮件noReply

    最近在工作中遇到一个问题: 客户需要让我们的系统给他们发邮件,但是不给我们提供用户密码. 这样就导致一个问题,即,一般我们使用的都是smtp方式发邮件,发邮件的时候必须登录,虽然可以修改发件人的邮箱名 ...

  6. java csv文件写入

    List<String> list_code = null; 方案1 控制字符集: BufferedWriter bw=new BufferedWriter(new OutputStrea ...

  7. Django(九)模型:dj查询数据库的函数(方法)

    一.查询函数 通过模型类.objects属性可以调用如下函数,实现对模型类对应的数据表的查询. 函数表 函数名 功能 返回值 说明 get 返回表中满足条件的一条且只能有一条数据. 返回值是一个模型类 ...

  8. 6 —— node —— 响应一个完整的页面

      const http = require('http'); const fs = require('fs'); const server = http.createServer(); server ...

  9. Python序列内单双引的问题——未解决

    在学习python基础的时候,遇到这样一个问题: tuple=(2,2.3,"yeah",5.6,False)list=[True,5,"smile"] 这样输 ...

  10. PyTorch自动微分基本原理

    序言:在训练一个神经网络时,梯度的计算是一个关键的步骤,它为神经网络的优化提供了关键数据.但是在面临复杂神经网络的时候导数的计算就成为一个难题,要求人们解出复杂.高维的方程是不现实的.这就是自动微分出 ...