實作-後台-課程上架
後端 server-從課程上取得程式，複製到 local 端去跑 server。
課程上架列表用 form 表單，內容有
- Title
- URL
- Teacher
- Completed
- Image
- 圖片預覽
- submit 按鈕
顯示內容則透過 get 資料指定回 data 中的陣列，再用 v-for 動態綁定顯示各個資料。
methods 中的 fileSelected 跟 imgloaded 是圖片預覽所需。
submit 則是點擊 submit 後要執行的方法，會將雙向綁定的各個值與選擇的檔案指定到 vue 實例的 data 裡面，再送到後端。
檔案上傳限定圖片可以使用accept="image/*"。
在生命週期的 mounted 則會先從後端 get 現有資料，再把回傳的資料指定回 vue 實例中 data 的 lessons 陣列中。
內容輸入完成，選好圖片，顯示預覽
按下submit送出ajax post後，ajax get回來後渲染出來。
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
| <div id="app">
<form @submit.prevent="submit">
<label>Title</label>
<input type="text" v-model="title" />
<br />
<label>URL</label>
<input type="text" v-model="url" />
<br />
<label>Teacher</label>
<select v-model="teacher">
<option v-for="teacher in teachers">{{teacher}}</option>
</select>
<br />
<label>Completed</label>
<input type="checkbox" v-model="completed" />
<br />
<label>Image</label>
<input type="file" accept="image/*" @change="fileSelected" />
<br />
<img v-if="img" :src="img" width="200" />
<button type="submit">Submit</button>
</form>
<hr />
<div>
<div v-for="lesson in lessons">
<img :src="lesson.image" width="100" />
<a :href="lesson.url">
<span>{{lesson.title}}</span>
</a>
<span>{{lesson.teacher}}</span>
<span>{{lesson.completed == 'true'? '完成' : '未完成'}}</span>
</div>
</div>
</div>
<script>
const URI = "local端的server位址";
new Vue({
el: "#app",
data: {
title: "",
url: "",
teachers: ["Orow", "Jason", "Paul", "Roy"],
teacher: "",
completed: false,
img: "",
lessons: []
},
methods: {
fileSelected(evt) {
const file = evt.target.files.item(0);
const reader = new FileReader();
reader.addEventListener("load", this.imgloaded);
reader.readAsDataURL(file);
},
imgloaded(evt) {
this.img = evt.target.result;
},
submit() {
$.post(URI, {
title: this.title,
url: this.url,
teacher: this.teacher,
completed: this.completed,
image: this.img
});
}
},
mounted() {
$.get(URI).then(lessons => (this.lessons = lessons));
}
});
</script>
|