实现修改电影业务
业务需求:点击列表后的修改按钮,跳转到电影修改页面,在修改页面中显示当前选中项电影的基本信息(数据回显),在这些数据基础之上,修改信息,点击提交,发送修改请求,完成修改电影业务。
实现步骤:
-
准备一个新的页面:
views/movie/MovieUpdate.vue
(复制MovieAdd.vue
) -
配置路由:注意,需要传递id参数,才可以跳转到电影修改页面。【路由跳转过程中传参】
第一种传参方案:/home/movie-update?id=1 第二种传参方案:/home/movie-update/1
-
接收ID参数,完成数据的回填。
-
点击提交按钮,完成修改请求的发送,实现修改业务,修改完毕后,跳转到列表。
将一些路由相关的参数,配置在路由元数据中,方便使用
如下代码,可以将一些信息存储在路由对象的元数据中:
{
path: 'actor-list',
name: '/home/actor-list', // 不重复即可
component: () => import('../views/actor/ActorList.vue'),
meta: { // 元数据 这些数据是程序员自定义的数据,在vue组件中直接使用
breadcrumbs: ['首页', '演员管理', '演员列表']
}
}
在组件中,通过访问$route
当前路由对象,来获取meta
中存储的数据,动态更新导航。
this.$route.meta.breadcrumbs --> ['首页', '演员管理', '演员列表']
实现添加电影院功能模块
需求分析:在菜单栏中,点击添加电影院菜单,看到添加电影院所需的表单页面,在表单页面中填写基本信息(可以使用高德地图选择地图上的某一个点获取位置信息),回填表单,点击提交按钮后,新增电影完成。
实现步骤:
- 准备两个子路由页面:
views/cinema/CinemaList.vue
views/cinema/CinemaAdd.vue
。 - 配置嵌套路由:
/home/cinema-list.vue
/home/cinema-add.vue
。 - 在
HomeView.vue
更新左侧边栏导航。 - 在电影院新增页面中,准备一个表单。需要嵌入高德地图。
在脚手架项目中使用高德地图
-
注册账号,创建应用,申请
key
,得到秘钥:key: 7bfbe3ab215345f405c23b5eed760ca8 jscode: 0b7fff62bb4d6f79bae15c1a1483e327
-
阅读高德地图开放平台,地图
jsAPI
文档。开发支持 -> web端 -> 地图jsAPI
https://lbs.amap.com/api/jsapi-v2/summary/
-
安装
AMapLoader
模块,用于加载AMap
。npm i @amap/amap-jsapi-loader --save
-
在页面中引入
AMapLoader
,直接使用即可。import AMapLoader from '@amap/amap-jsapi-loader'; AMapLoader.load({ "key": "", // 申请好的Web端开发者Key,首次调用 load 时必填 "version": "2.0", // 指定要加载的 JSAPI 的版本,缺省时默认为 1.4.15 "plugins": [], // 需要使用的的插件列表,如比例尺'AMap.Scale'等 }).then((AMap)=>{ map = new AMap.Map('container'); }).catch(e => { console.log(e); })
-
获取
AMap
对象并显示地图后,为地图绑定事件,点击地图图层,触发事件,得到点击位置的经纬度,并设置marker
对象。 -
添加
marker
的同时需要访问高德地图web服务,逆地址检索,查询地理位置字符串,完成表单的回显。 -
在
mounted
中发送http
请求,获取影院标签列表,显示在下拉列表框中。 -
点击提交按钮,完成表单验证与添加电影院的功能。