1.下载好安装模块
2.config下dev启动路径
BASE_API: '"http://localhost:8001"'
src下的user.js调用,src下的login
修改login的路径
1.login和info里面返回不同的值,在和后端进行设置
修改地址
后端的请求方式与前端对应
//login
@PostMapping("login")
public R login(){
return R.ok().data("token","admin");
}
//info
@GetMapping("info")
public R info(){
return R.ok().data("roles","[admin]").data("name","admin").data("avatar","https://wpimg.wallstcn.com/f778738c-e4f8-4870-b634-56703b4acafe.gif");
}
修改路由下的index
{
path: '/example',//这里路径一级路径随便设置,为了不重复
component: Layout,
redirect: '/example/table',//当指定了url路径,跳转到下面的table路径显示界面,这里的table又可以映射到compent主键里面的vue界面
name: '讲师管理',
meta: { title: '讲师管理', icon: 'example' },
children: [
{
path: 'table',
name: '讲师列表',//路由名字,icon默认图标
component: () => import('@/views/table/index'),//
meta: { title: '讲师列表', icon: 'table' }
},
创建api路由,这里的方法相当于一个解耦抽取的作用,接下里在list.vue的中写前端页面,
import request from '@/utils/request'
//这个api下的teacher将方法抽离出来,页面中可以直接调用
export default {
//条件查询分页
getTeacherListPage(current,limit,teacherQuery){
//所有东西和后端对应,请求给后端的数据,然后得到返沪i数据
return request({
url: `/eduservices/edu-teacher/PageTeacherCondition/${current}/${limit}`,
method: 'post',
//把teacherQuery的数据转换成json传到后端
data:teacherQuery
})
}
}
得到数据后,list.vue页面数据的整理渲染
<template>
<div class="app-container">
讲师表单
</div>
</template>
<script>
//引入写的teacher.js文件,才能把数据拿过来
//这里的new vue已经被封装了,不需要写了
import teacher from '@/api/edu/teacher'
export default {
data(){//定义变量和初始值,初始传入的值和要接受到的值
return{
list:[],
page:1,
limit:10,
total:0,
teacherQuery:{}
}
},
created(){//页面渲染之前调用的方法,调用methods的方法
this.getList()
},
methods:{//创建具体的方法,来调用teacher.js定义的方法
//讲师列表的方法
getList() {
//这里传入的参数就是data里面定义的初始参数
teacher.getTeacherListPage(this.page,this.limit,this.teacherQuery)
.then(response=>{
//请求成功
console.log(response)
})
.catch(error=>{
console.log(error)
})
}
}
}
</script>
整体流程
分页和列表功能
<template>
<div class="app-container">
<el-table
:data="list"
border
fit
highlight-current-row>
<el-table-column
label="序号"
width="70"
align="center">
<template slot-scope="scope">
{{ (page - 1) * limit + scope.$index + 1 }}
</template>
</el-table-column>
<el-table-column
label="名称" prop="name" width="160">
</el-table-column>
<el-table-column
label="头衔" width="90">
<template slot-scope="scope">
{{ scope.row.level===1?'高级讲师':'首席讲师' }}
</template>
</el-table-column>
<el-table-column
label="资历" prop="intro" >
</el-table-column>
<el-table-column
prop="gmtCreate" label="添加时间" width="160" >
</el-table-column>
<el-table-column
prop="sort" label="排序" width="60">
</el-table-column>
<el-table-column
label="操作" width="200" align="center">
<template slot-scope="scope">
<el-button
type="primary"
@click="handleEdit(scope.$index, scope.row)">Edit</el-button>
<el-button
type="danger"
@click="handleDelete(scope.$index, scope.row)">Delete</el-button>
</template>
</el-table-column>
</el-table>
<el-pagination
layout="total,prev,pager, next,jumper"//导航栏,总页数,前一页,页数,下一页,跳转
:current-page="page"//双向绑定值页数
:page-size="limit"
:total="total"
style="padding:30px 0;text-align:center;"//样式
@current-change="getList">//调用方法,当前页的
</el-pagination>
</div>
</template>
注意
#在方法上加page=1,this.page=page
getList(page=1) {
this.page=page
表单栏的条件
<el-form :inline="true" :model="formInline" class="demo-form-inline">
<el-form-item >
<el-input v-model="teacherQuery.name" placeholder="讲师名"></el-input>
</el-form-item>
<el-form-item >
<el-select v-model="teacherQuery.level" placeholder="讲师头衔">//双向绑定值
<el-option :value="1" label="高级讲师"/>
<el-option :value="2" label="首席讲师"/>
</el-select>
</el-form-item>
<el-form-item >//时间的设置
<el-date-picker
v-model="teacherQuery.begin"
type="datetime"
placeholder="选择开始时间"
value-format="yyyy-MM-dd HH:mm:ss"
default-time="00:00:00"
/>
</el-form-item>
<el-form-item>
<el-date-picker
v-model="teacherQuery.end"
type="datetime"
placeholder="选择截止时间"
value-format="yyyy-MM-dd HH:mm:ss"
default-time="00:00:00"
/>
</el-form-item>
<el-button type="primary" icon="el-icon-search" @click="getList()">查询</el-button>
<el-button type="default" @click="resetData()">清空</el-button>
</el-form>
路由跳转,这里的路径为路由也就是菜单的路径