Vue 的网络请求

RiemannHypothesis

发布于 2022-11-05 16:57:53

1.1K0

发布于 2022-11-05 16:57:53

文章被收录于专栏：ElixirElixir

Vue中的网络请求

在Vue.js中发送网络请求本质还是ajax，我们可以使用插件方便操作。

vue-resource: Vue.js的插件，已经不维护，不推荐使用
axios :不是vue的插件，可以在任何地方使用，推荐

说明: 既可以在浏览器端又可以在node.js中使用的发送http请求的库，支持Promise，不支持jsonp 如果遇到jsonp请求, 可以使用插件 jsonp 实现

发送get请求

axios.get('http://localhost:3000/brands')
    .then(res => {
    console.log(res.data);
})
    .catch(err => {
    console.dir(err)
});

发送delete请求

axios.delete('http://localhost:3000/brands/109')
    .then(res => {
    console.log(res.data);
})
    .catch(err => {
    console.dir(err)
});

发送post请求

axios.post('http://localhost:3000/brands', {name: '小米', date: new Date()})
    .then(res => {
    console.log(res);
})
    .catch(err => {
    console.dir(err)
});

jsonp (如果是jsonp请求, 可以使用jsonp 包)

安装jsonp 包 npm i jsonp

jsonp('http://localhost:3000/brands', (err, data) => {
    if (err) {
        console.dir(err.msg);
    } else {
        console.dir(data);
    }
});

案例-表格展示

功能分析
- 日期格式处理
- 搜索商品功能
- 输入框自动聚焦

日期格式处理

说明:表格中的日期格式需要处理, 这里使用moment包分析:把日期数据进行格式处理,将处理后的日期渲染到页面中->过滤器

安装/引入moment包
全局注册过滤器
在过滤器的方法中,使用moment包对data中的日期进行处理
在视图中渲染日期的位置使用过滤器

<div id="app">
    <!-- 省略 -->
    <!--在视图中渲染日期的位置使用过滤器-->
    <td>{{ item.date | fmtDate('YYYY-MM-DD HH:mm:ss') }}</td>

    <!-- 省略 -->
</div>

<!-- 1 导入moment包-->
<script src="./moment.js"></script>
<script>
    // 2 定义全局过滤器
    Vue.filter('fmtDate', (v, fmtString) => {
        // 3 在过滤器的方法中,使用moment包对data中的日期进行处理
        return moment(v).format(fmtString);
    });

    var vm = new Vue({
        // ...
    });
</script>

搜索商品功能

说明: 在搜索输入框中输入商品名称时, 在商品列表中显示对应的商品分析: 要渲染的视图会根据搜索内容的变化而变化-> 计算属性

在data中定义属性 searchValue
在搜索输入框中 v-model绑定searchValue
添加计算属性:根据搜索的内容返回搜索的结果数组
将页面中遍历items数组替换为计算属性返回的数组

<div id="app">
    <!-- 省略-->
    <div class="add">
        <!--2. 在搜索输入框中 v-model绑定searchValue-->
        品牌名称:
        <input type="text" v-model="searchValue" placeholder="请输入搜索条件">
    </div>
    <!-- 省略-->
    <!-- 4 替换为计算属性-->
    <tr v-for="(item,index) in newItems">
        <!-- 省略-->
    <tr v-if="newItems.length===0">
        <td colspan="4">没有品牌数据</td>
    </tr>
</div>
<script>
    // 省略
    new Vue({
        el: '#app',
        data: {
            // 省略
            // 1. 在data中定义属性 searchValue
            searchValue: ''
        },
        // 计算属性
        computed: {
            newItems() {
                // 3. 根据搜索的内容 返回搜索的结果数组
                // filter返回满足条件的数组
                return this.items.filter((item) => {
                    // item表是数组中的每个元素
                    // 筛选item (判断item中的name的值是否以searchValue开头)
                    return item.name.startsWith(this.searchValue);
                });
            }
        },
        // 省略
    });
</script>

输入框自动聚焦

说明:进入页面时,添加商品的输入框自动获取焦点,等待用户输入

全局自定义指令
获取要操作的input,进行DOM操作
在页面中使用自定义指令

<div class="add">
    品牌名称:
    <!-- 3 在页面中使用自定义指令-->
    <input v-focus type="text" v-model="name">
    <input :disabled="name.length===0" @click="addItem(name)" type="button" value="添加">
</div>

<!--省略-->
<script>

    // 1 定义全局自定义指令-自动聚焦
    Vue.directive('focus', {
        // 2 当被绑定的元素插入到 DOM 中时,inserted会被调用
        inserted: (el) => {
            // el 就是指令所在的DOM对象
            el.focus();
        }
    });
</script>

本文参与腾讯云自媒体分享计划，分享自作者个人站点/博客。

原始发表：2022-10-28，如有侵权请联系 cloudcommunity@tencent.com 删除

json