Vue_day12

最新推荐文章于 2026-01-05 12:22:51 发布

原创最新推荐文章于 2026-01-05 12:22:51 发布 · 323 阅读

0 ·

CC 4.0 BY-SA版权

文章标签：

#vue.js #javascript #前端 #前端框架 #html

Vue 专栏收录该内容

12 篇文章

订阅专栏

本文介绍了如何使用Vue.js实现电影修改业务，包括从列表跳转到修改页面，接收ID参数回填数据，以及提交修改请求。同时，详细讲解了如何构建电影院添加功能，包括配置路由、创建表单页面、嵌入高德地图API，以及使用AMapLoader加载地图库，实现地图选点功能。

`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);
})