ChingFeng
Sep 9, 2018 · 2 min read

VueJs Ajax篇-Axios(六)

REST Client

◉使用Feathers-Cli套件(REST Server端)

建立資料夾【mkdir my-server】→進入my-server資料夾【cd my-server】。

1.安裝Feathers-Cli套件

▼安裝指令【sudo npm install -g feathers-cli】(參數[-g]表示該套件安裝在本機端)

2.初始化Feathers設定

▼安裝指令【feathers generate app】

(1)Project name:專案名稱<<my-server

(2)Description:專案說明<< my REST server

(3)What folder should the source files live in:存放程式碼檔案資料夾<<src(預設值)

(4)Which package manager are you using(has to be installed globally):管理package方式<<選擇npm

(5) What type of API are you making:選擇API套件<<選擇[REST]、[Realtime via Socket.io](預設值)

3.建立Feathers Service

▼安裝指令【feathers generate service】

(1)What kind of service is it:選擇哪一種儲存資料方式<<NeDB(預設值)

(2)What is the name of the service: API服務名稱<<messages

(3)Which path should the service be registered on:資料存放資料夾<<nedb://../data(預設值)

4.啟動Feathers服務

▼啟動指令【npm start】,開啟瀏覽器輸入localhost:303。

◉應用-記事本

=【Html】=
— — — — — — — — — — — —
<div id="app">
<ol>
<li v-for="message in messages">
<button @click="deleteItem(message._id)">Delete</button>
<button @click="edit(message._id, message.text)">edit</button>
<input v-model="message.text">
</li>
</ol>
<input v-model="toAdd">
<button @click="add">add</button>
</div>
— — — — — — — — — — — —
=【VueJs】=
— — — — — — — — — — — —
new Vue({
el: '#app',
data:{
messages: [],
toAdd: ''
},
created(){
axios.get('http://localhost:3030/messages')
.then(response => {
this.messages = response.data.data;
})
},
methods:{
add(){
axios.post('http://localhost:3030/messages/',{
text: this.toAdd
}).then(response => {
if(response.status === 201){
this.messages.push(response.data);
this.toAdd = '';
}
})
},
deleteItem(id){
console.log('delete');
axios.delete('http://localhost:3030/messages/'+ id)
.then(response => {
if(response.status < 400){
this.messages.splice(
this.messages.findIndex(e => e._id === id), 1);
}
})
},
edit(id, text){
axios.put('http://localhost:3030/messages/' + id, {
text
}).then(response => {
if(response.status < 400){
console.info(response.status);
}
})
}
}
});

Object實戰

學習歷程紀錄

ChingFeng

Written by

叢林般的世界,一步步邁向未知的未來,迴盪迷途的工程師…

Object實戰

學習歷程紀錄

Welcome to a place where words matter. On Medium, smart voices and original ideas take center stage - with no ads in sight. Watch
Follow all the topics you care about, and we’ll deliver the best stories for you to your homepage and inbox. Explore
Get unlimited access to the best stories on Medium — and support writers while you’re at it. Just $5/month. Upgrade