Vue.js - CRUD

Vue.js CURD

雖然做了新增單字卡的功能,並儲存在localStorage,

但新增錯了,就會想修改,資料重複,就會想刪除,

所以我也跟著寫出了CRUD的功能出來,

 

另外為了快速的找尋沒學過的單字,以及搜尋他對應的圖片,

我採用影音學習 放入 iframe與新增編輯畫面並排,並透過按下Search,到google圖片的網頁,找尋自己想要的圖片,並複製連結。(待優化項目)

我影音學習大部分是去VoiceTube找,因為有中音對照,比較方便。

以下是我改版後的程式碼

<html>
	<head>	
		<title>1000單每日計畫 - CRUD</title>
		<!-- Latest compiled and minified CSS -->
		<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.2.1/css/bootstrap.min.css">
		<!-- jQuery library -->
		<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
		<!-- Popper JS -->
		<script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.14.6/umd/popper.min.js"></script>
		<!-- Latest compiled JavaScript -->
		<script src="https://maxcdn.bootstrapcdn.com/bootstrap/4.2.1/js/bootstrap.min.js"></script>		
		<script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script>
	</head>
	<body>
		<div>
			<div class="row">
				<div class="col-md-4">
					<div class="mt-3 ml-3">
						<iframe src="https://tw.voicetube.com/channel/translated" width="100%" height="95%">
						</iframe>
					</div>
				</div>
				<div  class="col-md-8 " id="Card" >
					<form  class="mt-3 mr-3">
						<div class="form-group col-md-12 clearfix">
							<label for="Title">Title</label>					
							<div class="input-group">
								<input type="text" class="form-control" id="Title" v-model="Card.Title"><button type="button" @click="OpenSearch" class="btn btn-primary ml-3">Search</button>
							</div>
						</div>
						<div class="form-group col-md-6 clearfix">
							<label for="Text">Text</label>
							<input type="text" class="form-control" id="Text" v-model="Card.Text">
						</div>
						<div class="form-group col-md-12 clearfix">
							<label for="Image">Image</label>
							<input type="text" class="form-control" id="Image" v-model="Card.Image">
						</div>
						<button type="button" @click="Submit" class="btn btn-primary ml-3" v-if="Action=='insert'">新增</button>
						<button type="button" @click="Update" class="btn btn-primary ml-3" v-if="Action=='edit'">儲存</button>
						<button type="button" @click="Cancel" class="btn btn-primary ml-3" v-if="Action=='edit'">返回</button>
					</form>			
					<h2 class="mt-3 mr-3">Cards Rows</h2>			            
					<table class="table table-hover mt-3 mr-3">
						<thead>
							<tr>
								<th>Title</th>
								<th>Text</th>
								<th>Image</th>
								<th>操作</th>
							</tr>
						</thead>
						<tbody>
							<tr v-for="(Item,index) in Cards">
								<td>{{Item.Title}}</td>
								<td>{{Item.Text}}</td>
								<td >									
									<div style="height:80px;overflow:hidden"><img :src="Item.Image" height="80px"/></div>
								</td>
								<td>
									<button type="button" @click="DeleteItem(index)" class="btn btn-primary ml-3">刪除</button>
									<button type="button" @click="EditItem(index)" class="btn btn-primary ml-3">修改</button>
								</td>								
							</tr>					
						</tbody>
					</table>
				</div>
			</div>
		</div>
	</body>
</html>
<script>
	localCards = [];
	if(localStorage.Cards!=''){
		localCards =  JSON.parse(localStorage.Cards);
	}
	
	var app = new Vue({
		el: '#Card',
		data: {
			Card:{
				Image:'',
				Title:'',
				Text:'',
			},
			Result:'',
			Cards:localCards,
			Action:'insert',
			EditIndex:-1,
		},
		methods:{
			Submit:function(){	
				var NewCard = {Title:app.Card.Title,Text:app.Card.Text,Image:app.Card.Image};
				localCards.push(NewCard);
				localStorage.Cards = JSON.stringify(localCards);
				app.Card.Title='';
				app.Card.Text='';
				app.Card.Image='';
			},
			DeleteItem:function(index){
				localCards.splice(index, 1);
				localStorage.Cards = JSON.stringify(localCards);
			},
			OpenSearch:function(){
				window.open('https://www.google.com.tw/search?q='+app.Card.Title+'&source=lnms&tbm=isch');
			},
			EditItem:function(index){
				var Item = localCards[index];
				app.Action = 'edit';
				app.Card.Title=Item.Title;
				app.Card.Text=Item.Text;
				app.Card.Image=Item.Image;
				app.EditIndex=index;
			},
			Update:function(){				
				localCards[app.EditIndex].Title = app.Card.Title;
				localCards[app.EditIndex].Text = app.Card.Text;
				localCards[app.EditIndex].Image = app.Card.Image;
				localStorage.Cards = JSON.stringify(localCards);
			},
			Cancel:function(){
				app.Action = 'insert';	
				app.Clear();
			},
			Clear:function(){
				app.Card.Title='';
				app.Card.Text='';
				app.Card.Image='';
				app.EditIndex=-1;
			}
			
		}
	});
</script>

 

Vue重點關鍵字大概如下,真的很簡單易學,大概花半天看語法,開始用在專案上後,大概一天就學會基本常用的幾個語法了,大概就可以應付專案所需的80%左右,

如果有遇到重複利用的元件,就可以要選擇包裝Vue component,專案開發時,真的有遇到,重複相同的選單,但可能是類別一的選單,類別二的選單,類別三的選單,是類似ListBox1放入ListBox2 那種模式的話的元件有N個資料欄位有的時候,真的要考慮包一下component

v-model
v-if
v-for
@click
:src
v-html
v-bind:value
v-for="(Item,index) in Items)"