开发者学堂课程【微服务+全栈在线教育实战项目演练（SpringCloud Alibaba+SpringBoot）：前端框架开发过程介绍】学习笔记，与课程紧密联系，让用户快速学习知识。
课程地址：https://developer.aliyun.com/learning/course/667/detail/11334
前端框架开发过程介绍
框架使用过程
1、框架使用过程：
首先了解一下学习的方式。二次开发是在原有功能基础上进行添加的过程。所以同理，现在是在框架模板基础之上往里面加功能。
在框架模板基础上加功能的最简单的一种做法是先学会模仿再独立开发，先学习别人怎么做再独立开发。
例如，要添加讲师管理模块就可以运用这种方法，首先先看里面的功能，因为它在里面自带了功能。
首先看过程，第一部分，一会要添加讲师管理模块。按这个过程中，下图左面这一部分表面上看叫做菜单。
但在 vue 这部分菜单叫做路由。例如一会要做讲师管理，在里面也要加一个路由也就叫讲师管理，做的讲师管理里面有讲师列表、最佳讲师，这是做的第一步操作。
模板的入口有两个地方其中一个是 main.js。在 main.js 中找到 import router from’,/router’,router 最终会加载，所以 router 里面是写路由的。找到 router 的位置，在 src 下面一处叫 router，router 里面有一个文件叫 index.js。所以添加路由就是在 router 的 index.js 中把路由加上，这就是要找的位置。再看一下其中代码，这里的代码不需更改什么。
它的路由其实是在下列代码里面
export const constantRouterMap = [
{ path:’/login’,component:() => import(‘@/views/login/index’),hidden:true },
{ path:’/404’, component:() => import(‘@/views/404’),hidden:true}
{
path:’/’,
component:Layout,
redirect:’/dashbroad’,
name:’Dashboard’
hidden:true
chirdren: [{
path:’dashboard’,
component: () => import(‘@views/dashboard/index’)
}]
这个是个宿主形式，然后会发现里面有许多的括号。每个括号是一个
对象，再看一下具体的。例如在下面这串代码中。
meta:{ title:’Example’, icon:’example’},
这个叫
example,
然后
在
path:’table’
中叫
table,
在
meta:{ title:’Tree’,icon:’tree’}
中叫
tree。
有一个 Example，里面有 Table、Tree,所以这个路由是
按照下面代码的结构添加的路由。
{
path: ‘/example’,
component:Layout,
redirect:’/example/table’,
name: ‘Example’,
meta: { tittle: ‘Example’, icon: ‘example’ }
children: [
{
path: ‘table’,
name: ’Table’
component: ( ) =>import(‘@views/table/index’),
meta: { title: ‘Table’, icon: ‘table’ }
},
{
path: ’tree’,
name: ‘Tree’,
component: ( ) => import(‘@/views/tree/index’).
meta: { title: ‘Tree’, icon: ‘tree’ }
下面还有一个是 Nested，里面有 Menu1、menu2,Menu1、menu2加的是以下这个位置。
这就是它添加路由的方式。一会添加路由就可以参考这种方式，比如叫讲师管理，添加讲师、讲师列表。
按照这些就可以添加，按照它就可以加出来，可以将这个代码复制一份改出来即可。
{
path: ‘/example’,
component: Layout,
redirect: ‘/example/table’,
name: ‘Example’,
meta: { title: ‘Example’, icon: ‘example’ }
children: [
{
path:’table’
name:’Table’
componment: ( ) => import(‘@/views/table/index’)
meta: { title: ‘table’, icon:’table’}
},
{
path: ’tree’,
name: ’Tree’,
component: ( ) => import(‘@/views/table/index’),
meta: { title: ‘Tree’, icon:’tree’}
}
路由就可以这样改。例如一会在 example 处改为讲师管理，在 Table
处可以叫添加讲师，Tree 处可以叫讲师列表，将这个改一份即可，
将这个复制一份然后加上这个即可，这就是怎么添加路由，后面都可
以这样更改，这是第一步操作。
路由在 src 的 router 的 index 中里面有许多的示例代码，按照示例
代码更改即可，直接复制进行更改即可，这就是第一步添加路由。加
完以后，以 Tree 为例，看它是如何做到的。
比如现在，将路由点开，点击 Tree，会发现页面中显示 Tree 里面的
内容，点 Table 是 Table 里面的内容，点 Form 是 Form 里面的内
容，接着看这是如何做到的。
这是第二步，当点击某个路由，要显示路由中的内容，这是它的第二
步操作。第二步就是点击路由，显示路由对应页面的内容。
还是来到 index 中，
{
path: ‘/example’,
component: Layout ,
redirect: ‘/example/table’,
name: ‘Example’,
meta: { title: ’Example’, icon:’example’ },
children: [
{
path: ‘table’,
name: ‘Table’,
meta: { title: ‘Table’, icon: ‘table’ }
},
{
path: ‘tree’,
name: ‘Tree’,
component: ( ) => import(‘@/views/tree/index’),
这是一个它的一个默认结构，然后它里面是有一个复杂结构，有对象有速度，然后速度里面有一个 children：【,里面有 Table、Tree,然后刚才做的是当点击 Tree,它会跳到页面。
那么它是如何做的，需要看 component 这一行，在 import 里面引入页面的位置，所以它里面的做法就是这样来做的。
component 这一行的意思是路由对应页面的引入，页面现在的默认就是 views、table、index，然后这里面加了一个@/，@/相当于./，只不过在页面中不认识./，所以现在这就是页面的位置，位置就由这个做到。
接着找一下页面，看地址叫 views，然后就找 views,在 views 里面有一个 tree，tree 里面有一个 index.vue，它的页面就是在以下这个位置。
比如一会要写的路由，写一个讲师管理，里面有添加讲师、讲师列表，
按照这个结构，写页面也按照这个来写，用 import 引入，在 views
里面就可以创建它的页面。建页面叫 teacher，里面写页面，但是它
的页面用的都是 vue 这个页面，这就是第二步操作。
点击路由
显示对应页面，然后在 views 里面创建 vue 页面，这就是第二步。
接着向下看第三步操作，页面中要写具体功能就是实现具体的功能。
功能的实现要先找一下页面，将页面打开，就是 tree 的 index，然
后看怎么做。
首先在页面的下面这部分
<template>
<div class=”app-container”>
<el-input v-model=”filterText” placeholder=”Filter keyword” style=”margin-bottom:30
<el-tree
ref=”tree2”
:data=”data2”
:props=”defaultprops”
:filter-node-method=”filterNode”
class=”filter-tree”
default-expand-all
/>
这部分用的是 iment.ui 部分，接着找一个更详细的部分，看 table 的 index.vue，
如下
import { getList } from ‘@/api/table’
export default {
filters: {
statusFilter(status) {
const statusMap = {
published: ‘success’,
draft: ‘gray’,
deleted: ‘danger’
}
return statusMap[status]
}
},
data( ) {
return {
list: null,
它上的是 element.ui 这部分，向下看 import 这一行，import fron 是引入加的 js 文件，所以在易变中要引入文件。
而在文件中要干什么要先看文件的地址，在 src 的 api 的 table 这个位置，这里面就是定义接口的地址，所以说第三步要先做这个事情。在 api 中，比如一会做讲师，那建一个 table.js,然后里面创建一个接口的定义，比如列表加提交方式，这就是第三步。
第三步就是在 api 文件创建 js 文件，定义接口地址和参数。当然定义完全可以参考以下这个写法。
import request from ‘@/utils/request’
export function getList(params) {
return request({
ur1: ‘/table/list’,
method: ‘get’,
params
})
}
而写法中主要改的就是 ur1至 params 这一行，其他地方是固定的。第一个地方是直接引入一个组件，它们直接分装好的 axios 部分。再看一遍，里面将 axios 做了一个分装，所以在里面要将这个引入进来，引入之后下面定义自己的方法，也就是接口地址、接口提交方式和对应的参数。
接着进入第四步，在创建 vue 页面引入js文件，调用方法实现功能。接着看一个具体的，
<script>
import { getList } from ‘@/api/table’
export default {
filters: {
statusFilter(status) {
const statusMap = {
published: ‘success’,
draft: ‘grey’,
在这里面先引入了这个文件，引入之后按照之前描述的结构 data、created、methods 包括写的方法做调用，这个初始值，所以在页面中就做这个事情，先引入再写这个结构。
引入
import user from’...’
data: {
created( ) {
},
methods: {
}
按这样就可以将数据得到，然后都得到之后，就可以运用之前学到 element.ui，包括在页面中最终就做了显示，这部分用到的就是 element.ui 中的组件做了一个显示。最后使用 element-ui 显示数据内容，主要就是这样。以上就是开发的完整的流程。
2、总结：
首先第一步要做开发，先在里面加一个路由，比如一会做讲师管理，那加一个讲师管理的路由，里边叫添加讲师、讲师列表，这是第一步。然后第二步，当点击某个路由，会显示不同的页面，所以第二步操作就是创建一个页面，页面创建在路由中设置地址，在 biews 中创建页面，页面都是 vue 页面，这是第二步。
然后第三步因为页面中要调用接口，所以在 api 文件中创建一个文件，这个文件专门接口地址的定义，是一个固定的结构。
定义之后，最后一步，在页面中引入这个文件，然后调用方法进行操作就是写的 axios 过程 data、created、methods,用它调用，都调用之后也得到了数据，最后用 element.ui 显示内容。
