菜单 学习猿地 - LMONKEY

VIP

开通学习猿地VIP

尊享10项VIP特权 持续新增

知识通关挑战

打卡带练!告别无效练习

接私单赚外块

VIP优先接,累计金额超百万

学习猿地私房课免费学

大厂实战课仅对VIP开放

你的一对一导师

每月可免费咨询大牛30次

领取更多软件工程师实用特权

入驻
38
0

.vue文件怎么请求api

原创
05/13 14:22
阅读数 993


.vue文件怎么请求api

1、首先我们安装axios网络请求库

cd test // 进入项目根目录
npm i axios -S // 执行安装

2、在需要使用请求的vue组件内,引入axios

<template>
    <div>请求示例</div>
</template>

<script>
    // 引入axios
    import axios from 'axios'
    export default{
        created() {
            // 发送请求
            axios.get('http://localhost/api.php')
                .then(res => {
                    // 打印请求结果
                    window.console.log(res.data)
                })
        }
    }
</script>

3、编写后台api,这里采用PHP

<?php 
// 跨域设置
header('Access-Control-Allow-Origin: *');  
header('Access-Control-Allow-Credentials: true');
header('Access-Control-Allow-Methods: GET, POST, PUT, DELETE, OPTIONS');
header("Access-Control-Allow-Headers: Origin, X-Requested-With, Content-Type, Accept");

echo json_encode(array('code' => 200, 'msg' => '请求成功'))
?>

4、打开浏览器测试

Snipaste_2019-12-25_16-03-57.jpg

发表评论

0/200
38 点赞
0 评论
收藏
为你推荐 换一批