[JavaScript知识库]16.blog前端-统一请求处理

接下来，我们需要将文章数据变成动态的，也就是通过发ajax请求，从后端请求数据，并进行展示。

后端-是码神之路博客系统，已经实现好的

发起http请求我们使用axios: 易用、简洁且高效的http库

加入依赖：

?npm install --save axios vue-axios

//将下面代码 加入 main.js
import Vue from 'vue'
import axios from 'axios'
import VueAxios from 'vue-axios'

Vue.use(VueAxios, axios)

建立统一请求处理

在src下创建request文件夹，在其下创建index.js：

import axios from "axios"

const service = axios.create({
    baseURL:"http://localhost:8888",
    timeout:10000
})
export default service

在src下创建api文件夹，在其下创建article.js：

import request from "@/request"

/**
 * 文章列表
 * @param PageParams
 */
export function getArticles(PageParams)
{
    return request({
        url:"/articles",
        method:'post',
        data:PageParams
    })
}

ArticleScrollPage.vue就可以直接引入，然后使用该接口

注意：

引入文件时，../以该目录为基准，往上跳一个目录，ArticleScrollPage.vue目录为common，往上跳一个目录为components，需要再往上跳到src才能引入api

ArticleScrollPage.vue：

<template>
    <scroll-page :loading="loading"
                 :offset="offset"
                 :no-data="noData"
                 @load="load">
        <article-item v-for="article in articles"
                      :key="article.id"
                      v-bind="article">
        </article-item>
    </scroll-page>
</template>

<script>
    import ArticleItem from '@/components/article/ArticleItem'
    import ScrollPage from '@/components/scrollpage'
    /*
    引入文件时，../以该目录为基准，往上跳一个目录，ArticleScrollPage.vue目录为common，往上跳一个目录为components，需要再往上跳到src才能引入api
    */
    import {getArticles} from '@/api/article'
    export default
    {
        name: "ArticleScrollPage",
        props: {
            offset: {
                type: Number,
                default: 0
            }
        },
        created()
        {
            this.getArticles();
        },
        data() {
            return {
                loading: false,
                noData: true,
                //分页参数
                PageParams: {
                    page: 1,
                    pageSize: 5,
                },
                //文章列表
                articles: []
            }
        },
        methods: {
            load() {
                //下拉触发分页的时候,调用接口加载
                alert("触发分页")
                this.getArticles();
            },
            getArticles() {
                let that = this;
                that.loading = true;
                getArticles(this.PageParams).then((res)=>
                {
                    if(res.data.success)
                    {
                        if(res.data.data.length <= 0)
                        {
                            this.noData = true;
                        }
                        this.articles = this.articles.concat(res.data.data)
                        this.PageParams.page += 1;
                    }else
                    {
                        this.$message.error(res.data.msg)
                    }
                }).catch((err)=>
                {
                    console.log()
                }).finally(()=>
                {
                    that.loading = false
                });
                this.noData = false;
            }
        },
        components: {
            'article-item': ArticleItem,
            'scroll-page': ScrollPage
        }
    }
</script>

<style scoped>
    .el-card
    {
        border-radius: 0;
    }
    .el-card:not(:first-child)
    {
        margin-top: 10px;
    }
</style>

?