クリプト

Webアプリ制作 (10)モックアップ制作

融合系女子 えみりー 🍔's icon'
  • 融合系女子 えみりー 🍔
  • 2019/11/26 06:46

今回のアプリのモックアップにはlocalstrageを使います。localstorageはwebブラウザのローカル領域にデータを保存する仕組みです。

 

現段階でできているのは

①商品名などの入力

②表への登録

③localstorageによるデータの保存

④商品名での検索

です。

 

まだできていないのは

①画像の表示、登録

②画像の保存

③全体のデザイン

です。

 

【コード】

〈HTML〉

<!DOCTYPE html>
<html>

<head>
   <style>
       table,
       td,
       th {
           border: solid 1px black;
           border-collapse: collapse;
       }

       th {
           background-color: beige;
       }

   </style>
</head>

登録する表のデザイン（仮）

 

<body>
   <div id="app">
       <!--  登録する  -->
       <div id="resist">
           <button @click="clearData()">localStorageクリア</button>
           <button @click="viewData()">dataプロパティのコンソール表示　　</button>

保存したデータの消去をするlocalStorageクリアボタン

保存したデータのコンソールへの表示をするdataプロパティのコンソール表示ボタン

を作る

 

           <h1>登録しよう</h1>
           <h2>登録情報</h2>
           <div id="inner">

               <label>商品画像:               </label><br>

               <label>商品名: <input type="text" v-model="tagName"></label><br>
               <label for="category">商品カテゴリー:</label>
               <select id="category" v-model="category">
                   <option selected>その他</option>
                   <option>お惣菜🍙</option>
                   <option>パン🍞</option>
                   <option>生鮮食品🍅</option>
                   <option>お菓子🍭</option>
                   <option>日配食品🐄</option>
               </select><br>


               <label>価格:
                   <input type="text" v-model="price">
               </label><br>

               <label for="discount">割引率:</label>
               <select id="discount" v-model="discount">
                   <option selected>定価</option>
                   <option>10%OFF</option>
                   <option>20%OFF</option>
                   <option>30%OFF</option>
                   <option>50%OFF</option>
                   <option>セール価格</option>
               </select><br>


               <label>廃棄期限:
                   <input type="date" v-model="deadline">
               </label>
               <br>
               <label>詳細: <textarea name="overView" cols="30" lows="20" v-model="overView"></textarea></label>
           </div>
       </div>

商品画像、商品名、商品カテゴリ、価格、割引率、廃棄期限、詳細のテキストボックス、プルダウンメニューを作る

 

　 <!--  登録ボタン  -->
       <div class="btn" @click="registBtn()">
           <button>登録！</button>
       </div>
       <br>

登録ボタンを作る

registBtn()でクリックイベントを設定している

 


       <!--  表示する  -->
       <h2>登録リスト</h2>
       <table class="hyouji">
           <tr>
               <th>商品画像</th>
               <th>商品名</th>
               <th>商品カテゴリー</th>
               <th>価格</th>
               <th>割引率</th>
               <th>廃棄期限</th>
               <th>詳細</th>
           </tr>
 

           <tr v-for="d in data">

               <td>

               </td>
               <td>
                   {{d.tagName}}
               </td>
               <td>
                   {{d.category}}
               </td>
               <td>
                   {{d.price}}
               </td>
               <td>
                   {{d.discount}}
               </td>
               <td>
                   {{d.deadline}}
               </td>
               <td>
                   {{d.overView}}
               </td>
           </tr>
       </table>

表を作る

<tr v-for="d in data">でdataからデータを取り出して、{{　}}の場所にそれぞれ表示させる

 


       <!--　検索する  -->
       <h1>検索しよう</h1>
       <div class="search">
           <label>検索タグ：<input type="text" v-model="searchedTag"></label>
       </div>
       <table style="margin-top: 1em" class="result">
           <tr>
               <th>商品画像</th>
               <th>商品名</th>
               <th>商品カテゴリー</th>
               <th>価格</th>
               <th>割引率</th>
               <th>廃棄期限</th>
               <th>詳細</th>
           </tr>

検索するときの表

検索タグ：のテキストボックスに入力された文字列をsearchedTagとする

 


           <tr v-for="d in data" v-if="d.tagName == searchedTag" :key="d.id">
               <td>

               </td>
               <td>
                   {{d.tagName}}
               </td>
               <td>
                   {{d.category}}
               </td>
               <td>
                   {{d.price}}
               </td>
               <td>
                   {{d.discount}}
               </td>
               <td>
                   {{d.deadline}}
               </td>
               <td>
                   {{d.overView}}
               </td>
           </tr>
       </table>
   </div>

<tr v-for="d in data" v-if="d.tagName == searchedTag" :key="d.id">で

商品名（d.tagName）と検索タグ（searchedTag）に入力された名前が同じであれば、表に表示する

 

〈javascript〉


   <script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script>
   <script>
       let app = new Vue({
           el: '#app',
           data: {
               tagName: '',
               category: '',
               price: '',
               discount: '',
               deadline: '',
               overView: '',
               searchedTag: '',
               data: [],
               photo: '',

           },

dataの初期設定をする

 


           mounted: function() {
               let savedata = JSON.parse(localStorage.getItem('save'));
               if (savedata != null) {
                   this.data = JSON.parse(localStorage.getItem('save'));
               }
           },

サイトを開いたときにローカルストレージに記録していたデータをthis.dataに読み出す

 


           methods: {
               registBtn: function() {
                   this.data.push({

                       tagName: this.tagName,
                       category: this.category,
                       price: this.price,
                       discount: this.discount,
                       deadline: this.deadline,
                       overView: this.overView
                   });
                   localStorage.setItem('save', JSON.stringify(this.data));
                   this.tagName = '';
                   this.category = '';
                   this.price = '';
                   this.discount = '';
                   this.deadline = '';
                   this.overView = '';


               },

registBtndnで登録ボタンを押したときの動作を設定する

this.data.push({　})で入力フォームに記入された情報をthis.dataに追加

localStorage.setItem('save', JSON.stringify(this.data));でsaveというキー名のローカルストレージにthis.dataを保存

this.tagName = '';で入力フォームを空白にする

 

　　　　 clearData: function() {
                   localStorage.removeItem('save');
               },
               viewData: function() {
                   console.log('this.data:');
                   console.log(this.data);
               }
           }

       });

   </script>
</body>
 

クリアボタン、コンソール表示ボタンの動作を設定

 

Content image
Content image

 

UGOK
Article tip 0人がサポートしています
獲得ALIS: Article like 15.07 ALIS Article tip 0.00 ALIS
融合系女子 えみりー 🍔's icon'
  • 融合系女子 えみりー 🍔
  • @emily3
大学4年生、文理融合系IT女子のメンバー🍟卒業研究として「小売店の食品廃棄を減らすWebアプリケーションの開発」をすることにしました。このブログにはアプリの開発過程や内容をメモしていきます。
投稿者の人気記事
コメントする
コメントする
こちらもおすすめ！
Eye catch
クリプト

17万円のPCでTwitterやってるのはもったいないのでETHマイニングを始めた話

Like token Tip token
46.60 ALIS
Eye catch
クリプト

【初心者向け】$MCHCの基本情報と獲得方法

Like token Tip token
32.32 ALIS
Eye catch
クリプト

ジョークコインとして出発したDogecoin（ドージコイン）の誕生から現在まで。注目される非証券性🐶

Like token Tip token
38.31 ALIS
Eye catch
クリプト

Polygon（Matic）で、よく使うサイト（DeFi,Dapps）をまとめてみた

Like token Tip token
236.30 ALIS
Eye catch
クリプト

UNISWAPでALISをETHに交換してみた

Like token Tip token
40.40 ALIS
Eye catch
クリプト

Uniswap(ユニスワップ)で$ALISのイールドファーミング(流動性提供)してみた

Like token Tip token
59.99 ALIS
Eye catch
クリプト

CoinList（コインリスト）の登録方法

Like token Tip token
15.55 ALIS
Eye catch
クリプト

【初心者向け】JPYCを購入して使ってみました！

Like token Tip token
30.03 ALIS
Eye catch
クリプト

2021年1月以降バイナンスに上場した銘柄を140文字以内でざっくりレビュー（Twitter向け情報まとめ）

Like token Tip token
38.10 ALIS
Eye catch
クリプト

Uniswap v3を完全に理解した

Like token Tip token
18.92 ALIS
Eye catch
クリプト

【DeFi】複利でトークンを運用してくれるサイト

Like token Tip token
54.01 ALIS
Eye catch
クリプト

Eth2.0のステークによるDeFiへの影響を考える。

Like token Tip token
44.10 ALIS