? ??? ???? ???? ?????? ??? ?? ??? ? ?????? ??? ???? ?????. ? ???? ??? ??? ??????? ?? ??? ???? ? ??? ??? ?? ? ???? ??? ?????. ??? ?????? ??? ?? ?? ??? ?? ?????. ? ???? ThinkPHP? Vue?? ????? ???? ??? ?????.

1. ?? ??

ThinkPHP ? Vue?? ?? ??? ???? ??? ???? ?? ?? ?? ??? ?????? ???? ???.

1 PHP ?? ?? ? ??????? ???????.

2. ThinkPHP ?????? ???????

3. Vue.js? ???????

??? ??? ???? ?? ?? ? ?? ?? ?? ?? ?? ?????.

2. ThinkPHP?? ???? API

ThinkPHP??? Vue? ????? ? ?? API? ????? ?? ??? ? ????. API? GET ?? ?? POST ??? ? ????. ????? GET ??? ???? ?? ? ???? POST ??? ???? ???? ? ?????. ?? ???????.

1. ???? ???

?? API? ??? ????? ???? ???. ThinkPHP?? "Index"?? ????? ????? ???? ??? "getArticles"?? ???? ???? ?? ??? ???? API? ??? ? ????.

public?function?getArticles()
{
????$articles?=?Db::name('article')->select();
????return?json($articles);
}

? ??? Db ???? ???? ??????? ?? ??? ???? json ??? ?? JSON ???? ??? ? ????? ???? ????? ?????.

2. Vue?? API? ???

???? Vue?? ? API? ???? ??? ?? ??? ???? ???. ?? ?? ?? ??? Vue? axios ?????? ???? HTTP ??? ?? ? ????. ?? ???????.

axios.get('/index/getArticles')
.then(function(response)?{
????console.log(response.data);
})
.catch(function(error)?{
????console.log(error);
});

? ??? axios.get ???? ???? ??? ??? API? ?????, ??? ???? ?? ??? ??? ?????. ?? ??? ???? ???? API ??? ???? ???. ??? ?? ???? ??? ?? ??? ?? ??? ???? ???.

3. Vue?? ???? ?? ??

Vue? API ?? ??? ???? ?? ???? ?? ??? ? ??? ?? ?? ??? ?????. ?? ?? Vue? Axios ?????? ? ?? ??? ? ??? Axios?? ?? ??? ?????.

1. Axios ??

Axios? ????? ?? Vue ????? ???? ???. ???? ?? ??? ?????:

npm?install?axios?--save

2. Axios ????

??? ???? Vue ?? ???? ??? ? ????. ?? ??? ???? ?? Vue?? "ArticleList"?? ?? ??? ??? ?????.

<template>
??<div>
????<ul>
??????<li v-for="article in articles">{{?article.title?}}</li>
????</ul>
??</div>
</template>

<script>
??import?axios?from?'axios';

??export?default?{
????data()?{
??????return?{
????????articles:?[]
??????}
????},
????created()?{
??????axios.get('/index/getArticles')
??????.then((response)?=>?{
????????this.articles?=?response.data;
??????})
??????.catch((error)?=>?{
????????console.log(error);
??????});
????}
??}
</script>

? ??? axios.get ???? ???? API?? ?? ??? ???? ?? ??? ??? ?????. ????? ?? ? ???? ?? ??? ???? ??? ?????? ??? ?????.

4. ??

?? ThinkPHP? Vue?? ????? ???? ??? ?????. API? ???? ?? ??? ???? ?????? ??? ?? ??? ?? ???? ? ????. ? ?? ????? ??? ??? ???, ? ?????? ??? ? ?? ??? ?????!

? ??? thinkphp? vue ?? ?? ??? ???? ??? ?? ?????. ??? ??? PHP ??? ????? ?? ?? ??? ?????!