vuejs는 백엔드 인터페이스를 어떻게 요청하나요?-View.js-php.cn

vuejs는 백엔드 인터페이스를 어떻게 요청하나요?

藏色散人

풀어 주다： 2021-11-02 14:51:37

원래의

10297명이 탐색했습니다.

vuejs의 백그라운드 인터페이스를 요청하는 방법: 1. axios를 설치하고 도입합니다. 2. get 또는 post 요청을 사용합니다. 3. vue-resource를 설치하고 도입합니다. 4. vue-resource를 사용하여 도메인 간 요청을 보냅니다.

vuejs는 백엔드 인터페이스를 어떻게 요청하나요?

이 기사의 운영 환경: Windows 7 시스템, vue 버전 2.9.6, DELL G3 컴퓨터.

vuejs는 어떻게 백엔드 인터페이스를 요청하나요?

vue 요청 백엔드 인터페이스 방법:

ue는 AJAX 요청 전송을 직접 지원하지 않으며 vue-resource 및 axios와 같은 플러그인을 사용하여 구현해야 합니다.

1. axios를 사용하여 AJAX 요청 보내기:

1. axios 설치 및 소개:

1) npm install axios -S(axios 구성 요소를 직접 다운로드하면 다운로드 후 axios.js가 node_modulesaxiosdist에 저장됩니다) in main .js에 axios 소개: axios 명령을 다른 구성 요소에서 사용할 수 없는 경우 'axios'에서 가져오기 axios를 이 파일에 추가합니다. Vue의 프로토타입 속성인 Vue.prototype.$http=axios로 axios를 다시 작성할 수 있습니다. 이 두 줄의 코드를 main.js에 추가한 후 구성 요소의 메서드에서 직접 this.$http 명령을 사용할 수 있습니다.

2) 인터넷에서 직접 axios.min.js 파일을 다운로드하고 스크립트 src를 통해 파일을 가져옵니다.

2. 요청 보내기:

1) 요청 형식 가져오기:

a: axios([options]) ( 이 형식은 실제로 사전인 옵션의 모든 데이터를 직접 씁니다.)

b: axios.get(url[,options]);

<script>     
    new Vue({
             el:&#39;#itany&#39;,
             data:{
                user:{
                     name:&#39;alice&#39;,
                     age:19
                    },
                },
                methods:{
                    send(){
                        axios({//格式a
                            method:&#39;get&#39;,
                            url:&#39;http://www.baidu.com?name=tom&age=23&#39;
                        }).then(function(resp){
                            console.log(resp.data);
                        }).catch(resp => {
                            console.log(&#39;请求失败：&#39;+resp.status+&#39;,&#39;+resp.statusText);
                        });
                    },
                    sendGet(){//格式b
                        axios.get(&#39;server.php&#39;,{
                            params:{
                                name:&#39;alice&#39;,
                                age:19
                            }
                        })
                        .then(resp => {
                            console.log(resp.data);
                        }).catch(err => {             //
                            console.log(&#39;请求失败：&#39;+err.status+&#39;,&#39;+err.statusText);
                        });
                    },
                }
            });
    </script>

로그인 후 복사

2) 게시 요청 형식:

a: axios.post(url ,data ,[옵션]);

new Vue({
                el:&#39;#itany&#39;,
                data:{
                    user:{
                        name:&#39;alice&#39;,
                        age:19
                    },
                },
                methods:{
                    sendPost(){
                        // axios.post(&#39;server.php&#39;,{
                        //         name:&#39;alice&#39;,
                        //         age:19
                        // }) //该方式发送数据是一个Request Payload的数据格式，一般的数据格式是Form Data格式，所有发送不出去数据
                        // axios.post(&#39;server.php&#39;,&#39;name=alice&age=20&&#39;) //方式1通过字符串的方式发送数据
                        axios.post(&#39;server.php&#39;,this.user,{  //方式2通过transformRequest方法发送数据，本质还是将数据拼接成字符串
                            transformRequest:[
                                function(data){
                                    let params=&#39;&#39;;
                                    for(let index in data){
                                        params+=index+&#39;=&#39;+data[index]+&#39;&&#39;;
                                    }
                                    return params;
                                }
                            ]
                        })
                        .then(resp => {
                            console.log(resp.data);
                        }).catch(err => {
                            console.log(&#39;请求失败：&#39;+err.status+&#39;,&#39;+err.statusText);
                        });
                    },
                }
            });

로그인 후 복사

3) 도메인 간 요청 보내기:

a: 참고: axios 자체는 도메인 간 요청 보내기를 지원하지 않으며 해당 API를 제공하지 않습니다. 작성자는 지원을 추가할 계획이 없습니다. axios는 아직 교차 도메인 요청을 보내므로 타사 라이브러리만 사용할 수 있습니다.

b: vue-resource를 사용하여 교차 도메인 요청 보내기

c: vue-resource 설치 및 도입

　　　npm info vue-resource           #查看vue-resource 版本信息
   　　 cnpm install vue-resource -S #等同于cnpm install vue-resource -save

로그인 후 복사

d: 기본 사용법( this.$http를 사용하여 요청 보내기 )

　　 this.$http.get(url, [options])
　　　 this.$http.head(url, [options])
　　　 this.$http.delete(url, [options])
　　　 this.$http.jsonp(url, [options])
　　　 this.$http.post(url, [body], [options])
　　 　this.$http.put(url, [body], [options])
　　　 this.$http.patch(url, [body], [options])

로그인 후 복사

II. vue-resource가 요청 보내기:

1. vue-resource 방법 설치 및 소개:

1) npm install axios -S(axios 구성 요소를 직접 다운로드하고 axios.js는 다운로드 후 node_modulesaxiosdist에 저장됩니다), 라우팅 index.js를 변경하여 도입되었습니다. import VueResource from 'vue-resource' 및 Vue.use(VueResource)를 index.js에 추가

2) axios.min 다운로드 .js 파일을 인터넷에서 직접 가져오고 스크립트 src 방법을 사용하여 파일을 소개합니다

2. 게시 요청 방법:

1)  this.$http({ method:&#39;POST&#39;,  
                        url:&#39;/a/b&#39;, //接口路径 data:{&#39;a&#39;:&#39;123124&#39;}, //参数 
                        headers: {"X-Requested-With": "XMLHttpRequest"}, 
                        }).then((res) => { if(res.body.code == "0") {
                        this.data= res.body.result;
                    } else {
                        this.warnMessage = "获取班级失败";
                        this.colorMessage = "red"
                    }
                }).catch(err => {
                    this.warnMessage = "访问接口失败";
                    this.colorMessage = "red"
                })
2）this.$http.post(&#39;../a/b/c&#39;, {}, {
                    header: {},
                    emulateJSON: true
                }).then((res) => {
                    if(res.body.code == "0") {
                        this.data= res.body.result;
                    } else {
                        this.warnMessage = "获取班级失败";
                        this.colorMessage = "red"
                    }
                }).catch(err => {
                    this.warnMessage = "访问接口失败";
                    this.colorMessage = "red"
                })

로그인 후 복사

2. 요청 받기 방법은 게시물과 동일합니다. 위 게시물을 get

으로 변경하면 됩니다. 최신 5개 vue.js 비디오 튜토리얼 선택 》

위 내용은 vuejs는 백엔드 인터페이스를 어떻게 요청하나요?의 상세 내용입니다. 자세한 내용은 PHP 중국어 웹사이트의 기타 관련 기사를 참조하세요!