前端案例-Vue

使用表格展示所有文章的数据，并完成条件搜索功能。

案例

• 钩子函数mounted中，获取所有的文章数据
• 使用v-for指令，把数据渲染到表格上展示
• 使用v-model指令，完成表单数据的双向绑定
• 使用v-on指令为搜索按钮绑定单击事件

js代码封装

接口调用的js代码一般会封装到.js文件中，并且以函数的形式暴露给外部。

<script setup>
import { articleGetAllService, articleSearchService } from '@/api/article.js' // @/代表src文件夹下
//导入axios npm install axios
//import axios from 'axios'; //本地导入
import { ref } from 'vue';
//定义响应式数据，用来保存文章数据
const articleList = ref([]);
//同步获取articleGetAllService的返回结果 
const getAllArticle = async function () {
    let data = await articleGetAllService();
    articleList.value = data;
}
getAllArticle();

//定义响应式数据 searchConditions
const searchConditions = ref({
    category: '',
    state: ''
})

//声明search函数
const search = async function () {
    //对象解构语法，将 searchConditions.value 对象的所有属性展开成一个新的对象。将这个新对象作为参数传递
    let data = await articleSearchService({ ...searchConditions.value });
    articleList.value = data;
}
</script>

<template>
    <!--html元素-->
    <div>

        文章分类: <input type="text" v-model="searchConditions.category">

        发布状态: <input type="text" v-model="searchConditions.state">

        <button v-on:click="search">搜索</button>

        <br />
        <br />
        <table border="1 solid" colspa="0" cellspacing="0">
            <tr>
                <th>文章标题</th>
                <th>分类</th>
                <th>发表时间</th>
                <th>状态</th>
                <th>操作</th>
            </tr>
            <tr v-for="(article, index) in articleList">
                <td>{{ article.title }}</td>
                <td>{{ article.category }}</td>
                <td>{{ article.time }}</td>
                <td>{{ article.state }}</td>
                <td>
                    <button>编辑</button>
                    <button>删除</button>
                </td>
            </tr>

        </table>
    </div>
</template>

使用 async…await 同步接收网络请求的结果。

//导入axios npm install axios
import axios from 'axios'; //本地导入

//获取所有文章数据的函数
//js接口文件的函数一般以service结尾
export async function articleGetAllService() {
    //发送异步请求 获取所有文章数据
    //同步等待服务器响应的结果，并返回，用async await实现
    return await axios.get('http://localhost:8080/article/getAll')
        .then(result => {
            return result.data;
        }).catch(err => {
            console.log(err);
        });
}

//根据文章分类和发布状态的搜索函数
export async function articleSearchService(conditions) {
    return await axios.get('http://localhost:8080/article/search', { params: conditions })
        .then(result => {
            return result.data;
        })
        .catch(err => {
            console.log(err);
        })
}

公共前缀优化

const baseURL = ‘http://localhost:8080‘;

const instance = axios.create({baseURL})

之后用 instance 替换 axios

//导入axios npm install axios
import axios from 'axios'; //本地导入
//定义一个变量记录公共前缀 baseURL
const baseURL = 'http://localhost:8080';
const instance = axios.create({baseURL})
//获取所有文章数据的函数
//js接口文件的函数一般以service结尾
export async function articleGetAllService() {
    //发送异步请求 获取所有文章数据
    //同步等待服务器响应的结果，并返回，用async await实现
    return await instance.get('/article/getAll')
        .then(result => {
            return result.data;
        }).catch(err => {
            console.log(err);
        });
}

//根据文章分类和发布状态的搜索函数
export async function articleSearchService(conditions) {
    return await instance.get('/article/search', { params: conditions })
        .then(result => {
            return result.data;
        })
        .catch(err => {
            console.log(err);
        })
}

request.js

拦截器：在请求或响应被then或catch处理前拦截它们。

拦截器原理

//导入axios npm install axios
import axios from 'axios'; //本地导入
//定义一个变量记录公共前缀 baseURL
const baseURL = 'http://localhost:8080';
const instance = axios.create({ baseURL })

//添加响应拦截器，本身异步，所以article.js中的函数不需要async await，而最终在vue文件中同步等待结果
instance.interceptors.response.use(
    result => {
        return result.data;
    },
    err => {
        alert('服务异常');
        return Promise.reject(err); //异步的状态转换成失败的状态
    }
)
export default instance;