Vue_day11

Vue DAY11

实现电影列表数据的分页

首先需要添加ElementUI提供的分页器。当用户点击了分页器中的页码时，获取选中的页码数字，重新发送请求，传递相应参数{page:xxx, pagesize:3}，加载新的列表，呈现在表格中。

实现思路：

1. 研究<el-pagination>组件的使用技巧。

   <el-pagination
                  background
                  layout="->, prev, pager, next, total, jumper"
                  :current-page="1"
                  :page-size="3"
                  :total="1000"
                  @current-change="pageChange">
   </el-pagination>
   

2. 发送请求，获取响应后，需要为pagination组件的属性动态赋值，这样就可以更新分页器效果。

3. 绑定current-change事件，当前页更新后触发，发送新的请求即可。

实现通过名称模糊查询电影列表数据并实现分页

业务需求：在输入框中输入关键字，点击查询（或敲回车），通过填写的关键字模糊查询电影列表并显示。（第二步）并实现带有关键字查询的分页业务。

实现删除电影业务逻辑

业务需求：点击列表中的删除按钮后，发送请求，将电影信息从数据库中删除。有如下要求：

1. 删除完毕后，还要看到当前页。
2. 若搜索框中有关键字，则携带关键字查询当前页。

实现新增电影业务

业务需求：点击新增电影，跳转到新增电影页面，提供一个表单：10个表单项。整理好表单后，填写表单，点击提交按钮，发送请求，完成电影的新增。

实现步骤：

1. 准备好一个新增电影的表单。
2. 实现封面图片的点击上传。
3. 发送请求，获取服务端提供的所有的电影类型，可以让用户选择多个电影类型。
4. 电影主演也应该是可以通过关键字自动搜索演员的名称。
5. 点击新增按钮，提交新增电影post请求，成功后（重置表单|返回列表页）

实现修改电影业务

业务需求：点击列表后的修改按钮，跳转到电影修改页面，在修改页面中显示当前选中项电影的基本信息（数据回显），在这些数据基础之上，修改信息，点击提交，发送修改请求，完成修改电影业务。

实现步骤：

1. 准备一个新的页面：views/movie/MovieUpdate.vue（复制MovieAdd.vue）

2. 配置路由：注意，需要传递id参数，才可以跳转到电影修改页面。【路由跳转过程中传参】

   第一种传参方案：/home/movie-update?id=1
   第二种传参方案：/home/movie-update/1
   

3. 接收ID参数，完成数据的回填。

4. 点击提交按钮，完成修改请求的发送，实现修改业务，修改完毕后，跳转到列表。