Vue_day12_实现电影添加功能-CSDN博客

本文链接：https://blog.csdn.net/Funny_Chou/article/details/127872763

`Vue` `DAY12`

实现修改电影业务

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

实现步骤：

准备一个新的页面：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);
})