Vue_day09

Vue DAY09

功能实现

为后台管理项目设计嵌套路由

1. 明确页面需求，了解都有哪些页面，根据页面的结构，设计嵌套路由：

   http://localhost:8080/home/index   看到主体结构中嵌套index页面
   http://localhost:8080/home/actor-list  看到主体结构中嵌套 演员列表页
   http://localhost:8080/home/actor-add  看到主体结构中嵌套 演员添加页
   

2. 准备所需要的组件：

   1. src/views/Index.vue
   2. src/views/actor/ActorList.vue
   3. src/views/actor/ActorAdd.vue

3. 配置嵌套路由：

   配置  /home  指向HomeView.vue
   配置  /home/index
   配置  /home/actor-list
   配置  /home/actor-add
   

4. 在el-main中添加占位符：<router-view />

完成演员列表页面中的功能

需求整理分析：

1. 准备好演员列表静态页面。
2. 当页面挂载完毕后，发送http请求，加载基础演员列表并显示。
3. 当用户输入姓名，点击查询后，发送http请求，模糊查询演员列表并显示。
4. 输入姓名后，实现敲回车即可发送模糊查询演员列表请求。由于页面中使用了<el-form>组件，相当于在input标签外有一个form标签，默认情况下，在输入框中敲回车将会直接提交当前form表单。

阻止在input中回车时，自动提交表单

<el-form @submit.native.prevent></el-form>

vue的事件修饰符

在vue中，为html5原生标签绑定事件的方式：

<form v-on:submit="submit"></form>
<form @submit=""></form>
submit(e){
	e.preventDefault()
	e.stopPropagation()
}

在为标签绑定事件，处理事件时，经常需要：阻止浏览器的默认事件处理、阻止事件冒泡等功能。而vue认为，事件处理函数应该更多的聚焦在业务上，而不是这些DOM操作上，所以vue提供了很多的事件修饰符，来帮助简化这些代码：

<button @click.stop=""></button>   // 绑定点击事件，并且阻止事件冒泡
<a @click.stop.prevent="doThat"></a> // 事件修饰符串联执行
<button @click.once=""></button>   // 绑定点击事件，仅执行一次

<input @keyup.enter="submit">  // 敲回车时执行
<input @keyup.page-down="onPageDown">  // 敲 pagedown 按键时执行

.native事件修饰符

<form @submit.prevent></form>
<el-form @submit.native.prevent></el-form>

<button @click=""></button>
<el-button @click.native=""></el-button>

form标签属于html5原生标签，vue中若为原生标签绑定事件，则默认会认为是html的原生事件。而el-form则是vue的自定义组件，若为自定义组件绑定的事件，vue会认为是该组件的自定义事件，该自定义事件并不会当做是html原生事件来进行处理，应该交由组件内部处理。

若为该事件添加.native事件修饰符，那么vue就会将该事件当做html原生事件绑定在form标签上，表单提交时自动触发。

实现新增演员

需求分析：点击侧边栏新增演员菜单项，看到新增演员的表单，填写表单，选择图片，上传图片，点击新增后，发送请求，添加成功，提示消息，回到列表页。

实现思路：在表单中填写姓名，点击大加号，选择头像图片，上传头像。上传成功后，服务端将会返回上传成功的头像访问链接。拿到链接地址后，与姓名组合在一起，发送新增演员的post请求，提交给服务器，实现新增演员功能。

注意：

向本地的上传文件服务器上传图片成功后，应该返回本地地址的图片访问链接：
http://localhost:9000/img/aaaa.jpg

如果不是，应修改uploadserver.js文件中的path，并重新启动uploadServer:

pm2 restart uploadserver

完成导演列表页面中的功能

需求整理分析：

1. 准备好导演列表静态页面。
2. 当页面挂载完毕后，发送http请求，加载基础导演列表并显示。
3. 当用户输入姓名，点击查询后，发送http请求，模糊查询导演列表并显示。
4. 输入姓名后，实现敲回车即可发送模糊查询导演列表请求。
5. 点击侧边栏新增导演菜单项，看到新增导演的表单，填写表单，选择图片，上传图片，点击新增后，发送请求，添加成功，提示消息，回到列表页。
6. 写完的同学，可以优化UI界面，实现统一头像大小，圆角边框等需求。

完成导演与演员列表项的删除功能

自定义组件中的自定义事件

自定义事件的设计可以让子组件在监听到某一个条件被满足后，主动的通知父组件，一个自定义事件被触发。而该自定义事件可以被父组件通过v-on: 或 @ 捕获并处理后续业务。自定义事件是子组件向父组件传参的一种方式。

例如：

在子组件中，若发现达到了某些条件，主动触发，抛出一个自定义事件，通知父组件：

doClick(){
    let params = {a:100, b:200}
    this.$emit('delete', params)
}

删除代码$emit()用于通知父组件，自定义事件delete已经被触发。params是通知父组件的同时，给父组件传递的参数，在父组件中使用$event来获取这些参数。

在父组件中使用子组件Person:

<!-- ActorList.vue -->
<person @delete="deleteItem($event)"></person>
deleteItem(params){
	
}

上述代码将会监听子组件抛出的delete事件，一旦捕获到该事件，将立即执行deleteItem方法。params就是子组件传过来的参数。