axios的使用以及Vue动画

这篇具有很好参考价值的文章主要介绍了axios的使用以及Vue动画。希望对大家有所帮助。如果存在错误或未考虑完全的地方,请大家不吝赐教,您也可以点击"举报违法"按钮提交疑问。

axios 的使用

Vue.js 2.0 版本推荐使用 axios 来完成 ajax 请求。

Axios 是一个基于 Promise 的 HTTP 库,可以用在浏览器和 node.js 中。

安装方法
使用 npm:
npm install axios
引入
import axios from “axios”;

<script>
import {defineComponent} from 'vue'
import axios from "axios";

export default defineComponent({
    name: "axiosView",
    data() {
        return {
            imgSrc: '',
            imgList: [],
            courseList: [],
            boutiqueList: []
        }
    },
    methods: {
        getList(type) {
            return axios.post('https://wkt.myhope365.com/weChat/applet/course/list/type', {
                type,
                pageNum: 1,
                pageSize: 5
            }, {
                headers: {
                    'Content-Type': 'application/x-www-form-urlencoded'
                }
            })
        }
    },
    created() {
        // console.dir(axios)
        console.log(this.$axios)
        // get
        axios.get('https://wkt.myhope365.com/weChat/applet/course/banner/list?number=5').then(res => {
            // console.log(res)
            this.imgSrc = res.data.data[0].imgUrlPc
            this.imgList = res.data.data
            // console.log(this.imgList)
        })
        //     post
        let url = new URLSearchParams()   // application/x-www-form-urlencoded
        // let url =new FormData()    formData
        url.append('type', 'free')
        url.append('pageNum', 1)
        url.append('pageSize', 5)

        axios.post('https://wkt.myhope365.com/weChat/applet/course/list/type', url).then(() => {
            // console.log(res)
        })
        // url地址  请求的参数  设置请求头
        // axios.post('https://wkt.myhope365.com/weChat/applet/course/list/type', {
        //     type: 'free',
        //     pageNum: 1,
        //     pageSize: 5
        // }, {
        //     headers: {
        //         'Content-Type': 'application/x-www-form-urlencoded'
        //     }
        // }).then(res => {
        //     this.courseList = res.data.rows
        // })

        // axios.post('https://wkt.myhope365.com/weChat/applet/course/list/type', {
        //     type: 'boutique',
        //     pageNum: 1,
        //     pageSize: 5
        // }, {
        //     headers: {
        //         'Content-Type': 'application/x-www-form-urlencoded'
        //     }
        // }).then(res => {
        //     this.courseList = res.data.rows
        // })

        this.getList('free').then(res => {
            // console.log(res)
            this.courseList = res.data.rows
        })
        this.getList('boutique').then(res => {
            // console.log(res)
            this.boutiqueList = res.data.rows
        })
    }
})
</script>

<template>
    <div>
        <img :src="imgSrc" alt="">
        <!--        <img v-for="item in imgList" :key="item.id" :src="item.imgUrlPc" alt="">-->

        <!--        <div class="box" v-for="item in imgList" :key="item.id"-->
        <!--             :style="`background-image: url(${item.imgUrlPc})`"></div>-->

        <div class="container">
            <div class="box" v-for="(item) in courseList" :key="item.courseId">
                <img :src="item.coverFileUrl"
                     alt="">
                <div>{{ item.courseTitle }}</div>
                <div>共有{{ item.learningNum }}人学习</div>
                <div>免费</div>
            </div>
        </div>


        <div class="container">
            <div class="box" v-for="(item) in boutiqueList" :key="item.courseId">
                <img :src="item.coverFileUrl"
                     alt="">
                <div>{{ item.courseTitle }}</div>
                <div>共有{{ item.learningNum }}人学习</div>
                <div v-if="item.isFree === '1'">免费</div>
                <div v-else-if="item.isDiscount === '1'"> {{item.discountPrice}} <del>{{item.coursePrice}}</del></div>
                <div v-else>{{item.coursePrice}}</div>
            </div>
        </div>
    </div>
</template>

<style scoped lang="less">
.box {
  width: 1000px;
  height: 300px;
  margin: auto;
  background-repeat: no-repeat;
  background-size: cover;
  background-position: 50%;
}

.container {
  width: 1200px;
  margin: auto;
  display: flex;
  justify-content: space-between;

  .box {
    width: 19%;

    img {
      width: 100%;
    }
  }
}
</style>

axios封裝

// 对http请求进行封装
import axios from 'axios'

// 使用自定义的配置文件发送请求
const instance = axios.create({
  baseURL: '',
  timeout: 5000,
  headers: {
  }
});
// 添加请求拦截器
instance.interceptors.request.use(function (config) {
  // 在发送请求之前做些什么
  return config;
}, function (error) {
  // 对请求错误做些什么
  return Promise.reject(error);
});

// 添加响应拦截器
instance.interceptors.response.use(function (response) {
  instance// 对响应数据做点什么
  if(response.status === 200){
    return response.data;
  }else{
    console.error("请求错误")
    console.error(response)
  }
  return response;
}, function (error) {
  // 对响应错误做点什么
  return Promise.reject(error);
});

export default instance

Vue动画

使用 transition 将需要过渡的元素包裹起来

​v-enter
​v-enter-active
​v-enter-to
​v-leave
​v-leave-active
​v-leave-to文章来源地址https://www.toymoban.com/news/detail-805801.html

到了这里,关于axios的使用以及Vue动画的文章就介绍完了。如果您还想了解更多内容,请在右上角搜索TOY模板网以前的文章或继续浏览下面的相关文章,希望大家以后多多支持TOY模板网!

本文来自互联网用户投稿,该文观点仅代表作者本人,不代表本站立场。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如若转载,请注明出处: 如若内容造成侵权/违法违规/事实不符,请点击违法举报进行投诉反馈,一经查实,立即删除!

领支付宝红包 赞助服务器费用

相关文章

  • Vue项目搭建及使用vue-cli创建项目、创建登录页面、与后台进行交互,以及安装和使用axios、qs和vue-axios

    目录 1. 搭建项目 1.1 使用vue-cli创建项目 1.2 通过npm安装element-ui 1.3 导入组件 2 创建登录页面 2.1 创建登录组件 2.2 引入css(css.txt) 2.3 配置路由 2.5 运行效果 3. 后台交互 3.1 引入axios 3.2 axios/qs/vue-axios安装与使用 3.2.1 安装axios 3.2.2 发送get请求: 3.2.3 发送post请求: 3.2.4 简化axio

    2024年02月07日
    浏览(56)
  • 前端vue3分享——项目封装axios、vite使用env环境变量

    大家好,我是yma16,本文分享关于前端vue3分享——项目封装axios、使用env环境变量。 该系列往期文章: csdn新星计划vue3+ts+antd赛道——利用inscode搭建vue3(ts)+antd前端模板 认识vite_vue3 初始化项目到打包 什么是axios axios是一个流行的JavaScript库,用于在浏览器和Node.js环境中进行H

    2024年02月07日
    浏览(96)
  • 10 使用Vue+axios+Vuex实现登录后前端数据本地化存储实战

    这已经是《 Vue + SpringBoot前后端分离项目实战 》专栏的前端部分第8篇博客了, 服务端部分 由天哥(天哥主页)负责,目前专栏目录如下: Vue + SpringBoot前后端分离项目实战 - 前端部分 1. 手把手带你做一套毕业设计-征程开启 2. 我应该把毕业设计做到什么程度才能过关? 3

    2024年02月16日
    浏览(41)
  • Axios基本使用,为学习后续的Vue服务【发送请求+并发请求+前端拦截器】

    目录 1、项目中引入Axios 2、使用Axios发送请求 2.1、例:发送GET请求 2.2、例:发送POST请求 3、axios并发请求 4、拦截器 注:个人学习笔记,因自己学过后端,所以有关后端的代码,我在这里就不展示了~ 不了解后端的宝子,也不会耽误学习,因为公司里会有写好的接口文档,直

    2024年02月02日
    浏览(53)
  • vue2前端使用axios发起post请求,后端(springboot)拿不到值解决办法

    axios封装-我常用的请求头参数  application/json; charset=utf-8 页面登录请求-post 网络请求正常传入参数 后端代码,查看控制台发现都为null,没取到值。 1.尝试将前端post请求改成get,其他都不用变 发现正常取到值,打印输出正常。前端页面正常跳转。 2.后端设置为post请求,前端a

    2024年02月02日
    浏览(50)
  • 持续不断更新中... 自己整理的一些前端知识点以及前端面试题,包括vue2,vue3,js,ts,css,微信小程序等

    答: 在普通的前端项目工程中,在script标签中增加setup即可使用api 使用setup()钩子函数 答: 不要在计算属性中进行异步请求或者更改DOM 不要直接修改computed的值 区别: 计算属性值基于其响应式依赖被缓存,意思就是只要他之前的依赖不发生变化,那么调用他只会返回之前缓

    2024年02月11日
    浏览(63)
  • vue element-ui Loading加载事件的使用以及自定义Loading加载动画

     elemen-ui官方使用 loading加载事件属性解释 element-loading-text 在绑定了 v-loading 指令的元素上添加 element-loading-text 属性,其值会被渲染为加载文案,并显示在加载图标的下方 element-loading-spinner 和 element-loading-background 属性分别用来设定图标类名和背景色值。 作为小白,这次主要

    2024年02月11日
    浏览(44)
  • Vue & Axios——前端技术栈

    Vue (读音 /vjuː/,类似于 view) 是一个前端框架, 易于构建用户界面 Vue 的核心库只关注视图层,不仅易于上手,还便于与第三方库或项目整合 支持和其它类库结合使用 开发复杂的单页应用非常方便 Vue 是 Vue.js 的简称 官网: https://cn.vuejs.org/ git 地址: https://github.com/vuejs 思想:

    2024年01月18日
    浏览(42)
  • 前端框架Vue学习 ——(四)Axios

    介绍: Axios 对原生的 Ajax 进行了封装,简化书写,快速开发。(异步请求) 官网: https://www.axios-http.cn/ 官网介绍:Axios 是一个基于 promise 网络请求库,作用于node.js 和浏览器中。 它是 isomorphic 的(即同一套代码可以运行在浏览器和node.js中)。在服务端它使用原生 node.js http 模块

    2024年02月05日
    浏览(51)
  • JavaScript、Vue实现大数据大屏展示3D旋转动画效果

    最近在写一些数据大屏的时候客户需要做个3D旋转动效的效果,简单整理之后写了一个小demo做下记录,先看一下效果: 当点击next的时候,整个模块旋转切换到下个菜单,点击prev的时候也可以切换到上一个菜单效果。 首先我们先构建一个大体的dom结构,如下: 编写基本的css样

    2024年02月11日
    浏览(41)

觉得文章有用就打赏一下文章作者

支付宝扫一扫打赏

博客赞助

微信扫一扫打赏

请作者喝杯咖啡吧~博客赞助

支付宝扫一扫领取红包,优惠每天领

二维码1

领取红包

二维码2

领红包