Skip to content

Commit eb19ace

Browse files
author
xrr2016
committed
🔥 edit movie CUD
1 parent 4b89b6d commit eb19ace

File tree

3 files changed

+123
-27
lines changed

3 files changed

+123
-27
lines changed

‎models/movie.js

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -2,8 +2,8 @@ const mongoose = require('mongoose')
22

33
const movieSchema = mongoose.Schema({
44
title : { type:String, required : true },
5-
year : String,
65
poster : String,
6+
rating : Number,
77
introduction : String,
88
created_at : { type : Date, default : Date.now },
99
update_at : { type : Date, default : Date.now }

‎router/movie.js

Lines changed: 3 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -58,9 +58,10 @@ router.post('/movie', (req, res) => {
5858
router.put('/movie/:id',(req,res) => {
5959
Movie.findOneAndUpdate({ _id : req.params.id}
6060
,{ $set : { title: req.body.title,
61-
year : req.body.year,
61+
rating : req.body.rating,
6262
poster : req.body.poster,
63-
introduction : req.body.introduction }},{
63+
introduction : req.body.introduction }
64+
},{
6465
new : true
6566
})
6667
.then(movie => res.json(movie))

‎src/components/List.vue

Lines changed: 119 additions & 24 deletions
Original file line numberDiff line numberDiff line change
@@ -1,76 +1,171 @@
11
<template lang="html">
22
<div class="list">
3+
<!-- 电影列表 -->
34
<mu-table :fixedHeader="true" :showCheckbox="false" >
45
<mu-thead>
56
<mu-tr>
6-
<mu-th>ID</mu-th>
77
<mu-th>电影海报</mu-th>
88
<mu-th>电影名称</mu-th>
9-
<mu-th>上映年份</mu-th>
10-
<mu-th>主要演员</mu-th>
9+
<mu-th>简介</mu-th>
1110
<mu-th>评分</mu-th>
1211
<mu-th>操作</mu-th>
1312
</mu-tr>
1413
</mu-thead>
1514
<mu-tbody>
1615
<mu-tr v-for="movie of movies">
17-
<mu-td>{{ movie.id }}</mu-td>
18-
<mu-td><img :src="movie.image" :title="movie.original_title"></mu-td>
19-
<mu-td>{{ movie.title }}</mu-td>
20-
<mu-td>{{ movie.year }}</mu-td>
16+
<mu-td><img class="movie-poster" :src="movie.poster"></mu-td>
17+
<mu-td><h3>{{ movie.title }}</h3></mu-td>
18+
<mu-td style="white-space: normal;padding:12px;">{{ movie.introduction }}</mu-td>
19+
<mu-td class="movie-rating">{{ movie.rating }}</mu-td>
2120
<mu-td>
22-
<p v-for="cast of movie.casts">{{ cast.name }}</p>
23-
</mu-td>
24-
<mu-td>{{ movie.rating }}</mu-td>
25-
<mu-td>
26-
<mu-raised-button label="修改" primary/>
27-
<mu-raised-button label="删除" secondary/>
21+
<mu-raised-button @click="openEditMovieModal(movie)" label="修改" primary/>
22+
<mu-raised-button @click="removeMovie(movie)" label="删除" secondary/>
2823
</mu-td>
2924
</mu-tr>
3025
</mu-tbody>
3126
</mu-table>
32-
<mu-float-button icon="add" class="add-movie-btn" @click="addMovie"/>
33-
<vodal :show="showModal" animation="slideDown" @hide="show = false" :closeButton="false">
34-
27+
<!-- 添加电影按钮 -->
28+
<mu-float-button icon="add" class="add-movie-button" backgroundColor @click="openAddMovieModal"/>
29+
<!-- 添加电影表单 -->
30+
<vodal :show="addMovieModal" animation="slideDown" :width="500" :height="400" :closeButton="false">
31+
<mu-text-field v-model="title" fullWidth icon="movie" label="电影名称" labelFloat/><br/>
32+
<mu-text-field v-model="poster" fullWidth icon="picture_in_picture" label="海报地址" labelFloat/><br/>
33+
<mu-text-field v-model="introduction" fullWidth icon="description" label="简介" labelFloat/><br/>
34+
<mu-text-field v-model="rating" fullWidth icon="star" label="评分" labelFloat/><br/>
35+
<mu-raised-button @click="closeModal" label="取消" icon="undo" />
36+
<mu-raised-button @click="addMovie" label="确定" icon="check" primary/>
37+
</vodal>
38+
<!-- 编辑电影表单 -->
39+
<vodal :show="editMovieModal" animation="slideDown" :width="500" :height="400" :closeButton="false">
40+
<mu-text-field v-model="title" fullWidth icon="movie" label="电影名称" labelFloat/><br/>
41+
<mu-text-field v-model="poster" fullWidth icon="picture_in_picture" label="海报地址" labelFloat/><br/>
42+
<mu-text-field v-model="introduction" fullWidth icon="description" label="简介" labelFloat/><br/>
43+
<mu-text-field type="number" v-model="rating" fullWidth icon="star" label="评分" labelFloat/><br/>
44+
<mu-raised-button @click="closeModal" label="取消" icon="undo" />
45+
<mu-raised-button @click="editMovie" label="确定" icon="check" primary/>
3546
</vodal>
47+
<!-- 删除电影对话框 -->
48+
<mu-dialog :open="showDialog" title="确定删除电影?" @close="closeDialog">
49+
<mu-raised-button slot="actions" @click="closeDialog" label="取消"/>
50+
<mu-raised-button slot="actions" primary @click="closeDialog" label="确定"/>
51+
</mu-dialog>
3652
</div>
3753
</template>
3854

3955
<script>
4056
export default {
4157
created() {
4258
this.getMovies()
59+
document.title = this.$route.name
4360
},
4461
components:{},
4562
data() {
4663
return {
64+
title : '',
65+
poster : '',
66+
rating : null,
67+
introduction : '',
68+
movie_id : '',
4769
movies: [],
48-
showModal : false
70+
addMovieModal : false,
71+
editMovieModal : false,
72+
showDialog : false
4973
}
5074
},
5175
methods: {
5276
getMovies() {
5377
this.$http.get('/api/movie')
5478
.then(res => {
79+
console.dir(res.data)
5580
this.movies = res.data
5681
})
5782
.catch(err => {
5883
this.toastr.error(`${err.message}`, 'ERROR!')
5984
console.log(err)
6085
})
6186
},
87+
closeDialog(){
88+
this.showDialog = false
89+
},
90+
openAddMovieModal(){
91+
this.addMovieModal = true
92+
},
93+
openEditMovieModal(movie){
94+
this.editMovieModal = true
95+
this.title = movie.title
96+
this.rating = movie.rating
97+
this.introduction = movie.introduction
98+
this.poster = movie.poster
99+
this.movie_id = movie._id
100+
},
101+
closeModal(){
102+
this.addMovieModal = false
103+
this.editMovieModal = false
104+
},
62105
addMovie(){
63-
this.showModal = true
64-
}
106+
this.$http.post('/api/movie',{
107+
title : this.title,
108+
poster : this.poster,
109+
introduction : this.introduction,
110+
rating : this.rating
111+
})
112+
.then(res => {
113+
this.toastr.success('保存成功.')
114+
console.log(res.data)
115+
this.addMovieModal = false
116+
this.title = ''
117+
this.rating = 0
118+
this.poster = ''
119+
this.introduction = ''
120+
this.getMovies()
121+
})
122+
.catch(e => {
123+
this.toastr.warn('保存失败!')
124+
console.log(e)
125+
})
126+
},
127+
cancelAddMovie(){
128+
this.addMovieModal = false
129+
this.title = ''
130+
this.rating = 0
131+
this.poster = ''
132+
this.introduction = ''
133+
},
134+
editMovie(){
135+
let id = this.movie_id
136+
this.$http.put(`/api/movie/${id}`,{
137+
title : this.title,
138+
poster : this.poster,
139+
introduction : this.introduction,
140+
rating : this.rating,
141+
})
142+
.then(res => {
143+
this.toastr.success("更新电影成功!")
144+
console.log(res.data)
145+
this.closeModal()
146+
this.getMovies()
147+
})
148+
.catch(err => console.log(err))
149+
},
150+
removeMovie(movie){
151+
let id = movie._id
152+
this.showDialog = true
153+
this.$http.delete(`/api/movie/${id}`)
154+
.then(res => {
155+
this.toastr.success("删除成功.")
156+
console.log(res.data)
157+
this.closeDialog()
158+
this.getMovies()
159+
})
160+
.catch(e => console.log(e))
161+
},
162+
searchMovie(){}
65163
}
66164
}
67165
</script>
68166

69167
<style lang="css">
70-
.list{
71-
}
72-
.add-movie-btn{
73-
position: fixed;
74-
bottom: 50px;
168+
.movie-poster{
169+
width: 100px;
75170
}
76171
</style>

0 commit comments

Comments
 (0)