[Vue.js] GoogleBookApi를 local Storage에 저장합니다.
18540 단어 Vue.jsJavaScript
【 Vue.js】Vue.js를 통해 GoogleBookAPI를 가져옵니다.에 쓴 데이터를locallstorage에 저장합니다.
나중에 Vue CLI로 애플리케이션을 만들려고 합니다.
공식 참조의 정보에 따라 제작되었습니다.
case
【 Vue.js】Vue.js를 통해 GoogleBookAPI를 가져옵니다. 최종적으로 검색 Results의 배열로 json 데이터를 얻었다.
먼저 공식 참조복잡한 가격으로를 확인하세요.
<div id="app">
<h2>Cats</h2>
<div v-for="(cat, n) in cats">
<p>
<span class="cat">{{ cat }}</span>
<!-- 削除：Removeボタンを押すとremoveCat(n)関数が実行される。nは配列番号 -->
<button @click="removeCat(n)">Remove</button>
</p>
</div>
<p>
<input v-model="newCat">
<!-- 取得：Add CatボタンでaddCat関数を実行 -->
<button @click="addCat">Add Cat</button>
</p>
</div>
const app = new Vue({
el: '#app',
data: {
cats: [],//取得したデータの格納先
newCat: null //入力データの格納先
},
mounted() { //vueインスタンスがマウントした後に実行
if (localStorage.getItem('cats')) { //ストレジのkeyを検索
try { //json -> stringに変換
this.cats = JSON.parse(localStorage.getItem('cats'));
} catch(e) { //データに問題があった場合に削除
localStorage.removeItem('cats');
}
}
},
methods: {
addCat() {
// 実際に何かしたことを入力する
if (!this.newCat) {
return;
}
this.cats.push(this.newCat);//入力データを配列に追加
this.newCat = ''; //入力欄を空に
this.saveCats(); //ストレジに保存
},
removeCat(x) { //削除
this.cats.splice(x, 1); //引数xから受け取った配列番号から1つ削除
this.saveCats(); //ストレジに保存
},
saveCats() { //保存
const parsed = JSON.stringify(this.cats); //string -> json変換
localStorage.setItem('cats', parsed); //cats配列へ保存
}
}
})
이거 좀 수정해서 할게요.
완성물
* removeCat(x)
* mounted()
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8" />
<meta http-equiv="X-UA-Compatible" content="IE=edge" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<title>Document</title>
</head>
<body>
<div id="app">
<input type="text" v-model="keyword" />
<button @click="Saerch(keyword)">検索</button>
<div>
<ul>
<li v-for="(book, index) in saerchResults" :key="index">
{{ book.title }}
<!-- bookオブジェクトを渡している。 -->
<button @click="addBook(book)">追加</button>
</li>
</ul>
</div>
</div>
<script src="https://cdn.jsdelivr.net/npm/[email protected]/dist/vue.js"></script>
<script>
let app = new Vue({
el: "#app",
data() {
return {
keyword: "",
saerchResults: [], //検索結果の一覧
books:[] //追加したデータの格納先
};
},
methods: {
//クエリストリングの作成
async Saerch(keyword) {
//初期化
this.saerchResults = [];
const baseUrl = "https://www.googleapis.com/books/v1/volumes?";
const params = {
q: `intitle:${keyword}`,
maxResults: 40,
};
const queryParams = new URLSearchParams(params);
console.log(baseUrl + queryParams);
//fetchでjson取得
const response = await fetch(baseUrl + queryParams)
//responseをjsonに変換
.then((response) => response.json())
.then(console.log());
for (let book of response.items) {
//jsonオブジェクトのtitle,imageLinks, descriptionまでアクセス
let title = book.volumeInfo.title;
let img = book.volumeInfo.imageLinks
? book.volumeInfo.imageLinks
: "";
let description = book.volumeInfo.description;
//必要な情報をpush, title情報なければ空を追加
this.saerchResults.push({
title: title ? title : "",
image: img.thumbnail ? img.thumbnail : "",
//40文字以内
description: description ? description.slice(0, 40) : "",
});
}
},
addBook(book) {
this.books.push(book); //bookオブジェクトを受け取る。
this.saveBooks();
},
saveBooks() {
const parsed = JSON.stringify(this.books); //文字列 ->json
localStorage.setItem('books', parsed); //第一引数：keyの名前,第二引数：value
},
},
});
</script>
</body>
</html>
다음에는 vue CLI를 사용하여 CRUD를 만듭니다.
Reference
이 문제에 관하여([Vue.js] GoogleBookApi를 local Storage에 저장합니다.), 우리는 이곳에서 더 많은 자료를 발견하고 링크를 클릭하여 보았다 https://qiita.com/Quest_love33/items/b0787a7154780ed4de02텍스트를 자유롭게 공유하거나 복사할 수 있습니다.하지만 이 문서의 URL은 참조 URL로 남겨 두십시오.
우수한 개발자 콘텐츠 발견에 전념
(Collection and Share based on the CC Protocol.)
좋은 웹페이지 즐겨찾기
