开发者学堂课程【微服务+全栈在线教育实战项目演练（SpringCloud Alibaba+SpringBoot）：课程分类管理-添加分类前端】学习笔记，与课程紧密连接，让用户快速学习知识。
课程地址：https://developer.aliyun.com/learning/course/667/detail/11360
课程分类管理-添加分类前端
内容介绍
一、添加课程分类路由
二、创建课程分类页面修改路由对应的页面路径
三、在添加课程分类页面实现效果
一、添加课程分类路由
点 src
再点 router
最后点 index.js
path:' /subject' ，
component: Layout,
redirect:' /subject/list',
name: ' 课程分类管理'，
meta: { title: ' 课程分类管理'，icon: 'example' }
children: [
path: 'list',
name:'课程分类列表'，
component: () => import( '@/views/ edu/ teacher/list' ),
meta: { title: '课程分类列表'，icon: 'table' }
path:' save'，
name: ' 添加课程分类'，
component: () => import( '@/views/ edu/ teacher/save' ),
meta: { title:'添加课程分类'，icon:'tree[}
二，创建课程分类页面修改路由对应的页面路径
component: () => import( '@/views/ edu/ teacher/list' ),
meta: { title: '课程分类列表'，icon: 'table' }
这一行代码要指定的是那个页面，比如说点课程分类，让他到一个这个分类，比如列表页面，添加页面，所以要对应写两个页面，一个是列表页面，一个是添加页面。
点开 views
再点 edu
改成 listvue save.vue
path:' /subject' ，
component: Layout,
redirect:' /subject/list',
name: ' 课程分类管理'，
meta: { title: ' 课程分类管理'，icon: 'example' }
children: [
path: 'list',
name:'课程分类列表'，
component: () => import( '@/views/ edu/ subject/list' ),
meta: { title: '课程分类列表'，icon: 'table' }
path:' save'，
name: ' 添加课程分类'，
component: () => import( '@/views/ edu/ subject/save' ),
meta: { title:'添加课程分类'，icon:'tree[}
三，在添加课程分类页面，实现效果
找到 upload 里的手动上传
手动上传就是选择本地的一个文件，然后点上传到服务器，它才能上传，所以就用这个组建，用它来实现效果。
cel-upload
class="upload-demo"
ref="upload"
action-"
https://jsonplaceholder. typicode. com/posts/·
: on-previeu= "handlePrevieu"
: on-remove= " handleRemove "
:file-list-"filelist"
: auto-upload="false">
<el -button slot-"trigger" size="small" type="primary">选取文件</el -button>
<el-button style- margin-left: 10px;" size-"small" type-"success" @click-"submitUpload">上传到服务器</el -button>
<div slot-"tip" class="el-upload_ tip">只能上传jpg/png文件，且不超过500kb</div>
</el -upload>
<script>
export default (
data()
return
filelist: [(name: 'food.jpeg', url: '
https://fuss10.elemecdn. com/3/63/4e7f3a15429bfa99bce42a18cddljpegjp
第一部分叫做 Excel 模板说明，这部分强调跟实际功能无关，主要是给用户一个提示，比如说现在这位置让用户上传一个 Excel 文件，但是用户要传的文件写什么内容，这些用户是不知道的，所以给他怎么样提供一个模板，让他可以下载。
他下载这个模板，就按照模板去写内容，然后再做上传，这是第一个下载模板，这个模板可以传到 OS 中去，这是第一个，就给用户做一个友好提示。
- 当选择本地的一个 Excel 文件，选择所有文件就选它，然后选完之后，这个位置上传到服务器，这个文件就会传到接口中去，在接口中读取内容来加到数据库中。
limit是有限制意思，他就表示目前限制每次只能传一个文件，也就这位置，每次只能传一个文件，这叫限制文件数量。
js 上传方法
methods:｛
submitUpload() (
this. fileUploadBtnText . '正在上传'
this. importBtnDisabled . true
this.loading . true
｝
this .$refs .upload. submit()
｝
fileUploadSuccess (response) (
｝
fileUploadError(response) {
export defaultl
data() ｛
return ｛
BASE API: process.env.BASE_ API, //接口 API 地址
importBtnDisabled: false, //按钮是否禁用,
loading: false
｝
｝
created() ｛
｝
methods:｛
//点击按钮上传文件到接白里面
submitupload() ｛
this. importBtnDisabled = true
this.loading = true
//js: document ·getElementById( "upload" ). submit()
this.$refs .upload. submit( )
｝
//上传成功
fileUploadSuccess() ｛
｝
//上传失败
fileUploadError() ｛
成功和失败成功之后，比如说上传成功之后那能做什么答案是给用户一个提示，然后回到列表中了，如果失败的话，那给一个提示，然后停留在当天页面把它重新上传，就是一个提示一个返回。
导入成功添加：
fileUploadSuccess (response) {
if (response . successF true)
this . fileUploadBtnText ="导入成功"
this loading . false
this . Smessage(｛
type:: success " ,
message: response mess age
｝）
｝
导入失败添加：
fileUploadError(response) {
this . fileUploadBtnText="导入失败 "
this.loading . false
this . smessage({
type:"error " ,
message:'导入失败.
另外就是写这个接口的时候，上面需要加上这么一个跨域的注解，就是cross的注解，要不然有问题。
