一 前端项目开发流程图
二 实战
1 定义路由模块
src/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: '/dashboard',
name: 'Dashboard',
hidden: true,
children: [{
path: 'dashboard',
component: () => import('@/views/dashboard/index')
}]
},
// 讲师管理
{
path: '/teacher',
component: Layout,
redirect: '/teacher/list',
name: 'Teacher',
meta: { title: '讲师管理' },
children: [
{
path: 'list',
name: 'TeacherList',
component: () => import('@/views/teacher/list'),
meta: { title: '讲师列表' }
},
{
path: 'create',
name: 'TeacherCreate',
component: () => import('@/views/teacher/form'),
meta: { title: '添加讲师' }
},
{
path: 'edit/:id',
name: 'TeacherEdit',
component: () => import('@/views/teacher/form'),
meta: { title: '编辑讲师' },
hidden: true
}
]
},
{ path: '*', redirect: '/404', hidden: true }
]
2 定义api模块
创建文件 src/api/teacher.js
// @ 符号在build/webpack.base.conf.js 中配置 表示 'src' 路径
import request from '@/utils/request'
export default{
// 老师列表
list() {
return request({
url: '/admin/edu/teacher/list',
method: 'get'
})
},
// 分页老师列表
pageList(page, limit, searchObj) {
return request({
url: `/admin/edu/teacher/list/${page}/${limit}`,
method: 'get',
params: searchObj
})
},
// 根据id删除老师
removeById(id) {
return request({
url: `/admin/edu/teacher/remove/${id}`,
method: 'delete'
})
},
// 保存老师信息
save(teacher) {
return request({
url: '/admin/edu/teacher/save',
method: 'post',
data: teacher
})
},
// 根据id查询老师信息
getById(id) {
return request({
url: `/admin/edu/teacher/get/${id}`,
method: 'get'
})
},
// 更新老师信息
updateById(teacher) {
return request({
url: `/admin/edu/teacher/update`,
method: 'put',
data: teacher
})
}
}
3 定义页面组件脚本
src/views/teacher/list.vue
<script>
// 引入 teacherApi
import teacherApi from '@/api/teacher'
export default {
// 定义数据模型
data() {
return {
list: [], // 讲师列表
total: 0, // 总记录数
page: 1, // 页码
limit: 5, // 每页记录数
searchObj: {} // 查询表单条件
}
},
// 页面渲染成功后获取数据
created() {
this.fetchData()
},
// 定义方法
methods: {
// 调用api模块,加载讲师列表
fetchData() {
// 调用api
teacherApi.pageList(this.page, this.limit, this.searchObj).then(response => {
this.list = response.data.rows
this.total = response.data.total
})
},
// 改变页码
changeCurrentPage(page) {
console.log('changeCurrentPage:' + page)
this.page = page
this.fetchData()
},
// 改变每页记录数
changePageSize(size) {
console.log('changePageSize:' + size)
this.limit = size
this.fetchData()
},
// 重置表单
resetData() {
// 清空查询条件
this.searchObj = {}
this.fetchData()
},
// 删除记录
removeById(id) {
// 询问是否删除
this.$confirm('此操作将永久删除该文件, 是否继续?', '提示', {
confirmButtonText: '确定',
cancelButtonText: '取消',
type: 'warning'
}).then(() => { // 点击确定进入这个分支
// 调用删除api,这里返回的结果会传给下一个then的response
return teacherApi.removeById(id)
}).then(response => {
// 刷新页面
this.fetchData()
// 弹出成功提示
this.$message({
message: response.message,
type: 'success'
})
}).catch((err) => { // 点击取消进入这个分支
console.log(err)
if (err === 'cancel') {
this.$message({
type: 'info',
message: '已取消删除'
})
}
})
}
}
}
</script>
4 定义页面组件模块
src/views/teacher/list.vue
<template>
<div class="app-container">
<!-- 查询条件区 -->
<!-- inline:查询条件横向排列 -->
<el-form :inline="true">
<el-form-item>
<!-- v-model:查询条件绑定数据
placeholder:提示信息
-->
<el-input v-model="searchObj.name" placeholder="讲师"/>
</el-form-item>
<el-form-item>
<!-- clearable:清空组件内容 -->
<el-select v-model="searchObj.level" clearable placeholder="头衔">
<!-- value:选项值
label:显示内容
-->
<el-option value="1" label="高级讲师"/>
<el-option value="2" label="首席讲师"/>
</el-select>
</el-form-item>
<el-form-item label="入驻时间">
<!-- value-format:时间格式 -->
<el-date-picker
v-model="searchObj.joinDateBegin"
placeholder="开始时间"
value-format="yyyy-MM-dd" />
</el-form-item>
<el-form-item label="-">
<el-date-picker
v-model="searchObj.joinDateEnd"
placeholder="结束时间"
value-format="yyyy-MM-dd" />
</el-form-item>
<el-form-item>
<!-- 查询按钮
type:按钮类型
icon:按钮图标
@click:按钮触发事件
-->
<el-button type="primary" icon="el-icon-search" @click="fetchData()">查询</el-button>
<!-- 清空按钮 -->
<el-button type="default" @click="resetData()">清空</el-button>
</el-form-item>
</el-form>
<!-- 表格 -->
<!-- border:边框
stripe:条纹
-->
<el-table :data="list" border stripe>
<!-- 序号列 -->
<el-table-column
label="#"
width="50">
<template slot-scope="scope">
{{ (page - 1) * limit + scope.$index + 1 }}
</template>
</el-table-column>
<el-table-column prop="name" label="名称" width="80" />
<el-table-column prop="level" label="头衔" >
<!-- 模板中的插槽可以灵活处理值 -->
<template slot-scope="scope">
<el-tag v-if="scope.row.level === 1" type="success">高级讲师</el-tag>
<el-tag v-if="scope.row.level === 2" >首席讲师</el-tag>
</template>
</el-table-column>
<el-table-column prop="intro" label="资历" />
<el-table-column prop="sort" label="排序" width="60" />
<el-table-column prop="joinDate" label="入驻时间" width="160" />
<el-table-column label="操作" width="200">
<template slot-scope="scope">
<router-link :to="'/teacher/edit/'+scope.row.id">
<!-- 修改按钮 -->
<el-button type="primary" size="mini" icon="el-icon-edit">修改</el-button>
</router-link>
<!-- 删除按钮 -->
<el-button
size="mini"
type="danger"
@click="removeById(scope.row.id)">删除</el-button>
</template>
</el-table-column>
</el-table>
<!-- 分页组件 -->
<!-- current-page:当前页
total:总条数
page-size:每页条数
page-sizes:选择页面范围
style:分页组件样式
layout:分页组件布局
@current-change:当前页发生变化时调用事件
@size-change:当前页尺寸发生变化时调用
-->
<el-pagination
:current-page="page"
:total="total"
:page-size="limit"
:page-sizes="[5, 10, 20]"
style="padding: 30px 0; text-align: center"
layout="sizes, prev, pager, next, jumper, ->, total"
@current-change="changeCurrentPage"
@size-change="changePageSize"/>
</div>
</template>
三 测试
1 页面加载流程
2 页面渲染流程