🪁
taisablog
Vue.js で外部 API を使った ToDo リストを作ってみた
⛸️

Vue.js で外部 API を使った ToDo リストを作ってみた

APIを使ったTODOリストをVue.jsで作ってみました。TODOリスト用のAPIは以前書いたこちらのAPI「Go言語 GORM+GinでTODOリストのAPIを作ってみた」を利用します。CORSを全て許可しているのでどこからでも叩けるようになっています。

APIのエンドポイント

APIのエンドポイントは以下としました。

URL    http://gin.taisablog.com/api/v1/
GET    /todo       // 一覧表示
POST   /todo       // 新規作成
GET    /todo/:id   // 編集画面表示
PUT    /todo/:id   // 編集（今回未使用）
DELETE /todo/:id   // 削除

TODOリストの処理

プロジェクトはvue-cliで作成し、APIはaxiosを利用しました。componentsにTodo.vueファイルを作成しそこにすべての処理を書いています。

インポート

import axios from 'axios'

const NOT_STARTED = 1 // 未対応
const STARTED = 2 // 対応中
const FINISHED = 3 // 完了

data function

name: "Todo",
data() {
	return {
		todoList: [],
		inputField: '',
		isActive: false,
		baseUrl: 'http://gin.taisablog.com/api/v1/'
	}
},

created function

created() {
	this.getTodo()
},

methods ： 一覧を取得する

async getTodo() {
	try {
		let response = await axios.get(this.baseUrl + 'todo')
		this.todoList = response.data
	} catch (e) {
		console.log(e)
	}
},

methods ： タスクを追加する

async addTodo() {
	// inputFieldの空チェック
	if (!this.inputField) {
		return
	}
	
	try {
		let params = {
			'text': this.inputField,
			'status': 1
		}

		await axios.post(this.baseUrl + 'todo',JSON.stringify(params))
		// 一覧取得
		this.getTodo()
		// inputFieldを空にする
		this.inputField = ''

	} catch (error) {
		console.log(error)
	}
},

methods ： タスクを削除する

async deleteTodo(todo) {
	try {
		await axios.delete(this.baseUrl + 'todo/' + todo.ID)
		// 一覧を取得する
		this.getTodo()
	} catch (e) {
		console.log(e)
	}
},

methods ： タスクを完了にする

async toggle(todo) {
	try {
		let status = 0
		if (todo.Status === NOT_STARTED) {
			status = FINISHED
		} else {
			status = NOT_STARTED
		}

		let params = {
			'status': status
		}

		await axios.put(this.baseUrl + 'todo/' + todo.ID,JSON.stringify(params))
		todo.Status = status
	} catch (e) {
		console.log(e)
	}
}
FacebookTwitterGitHub