谷粒 | 07 | 前端框架开发流程

一、添加路由

{
    path: '/teacher',
    component: Layout,
    redirect: '/teacher/table',   //重定向跳转
    name: '讲师管理',
    meta: { title: '讲师管理', icon: 'example' }, //title页面标题，icon头像
    children: [
      {
        path: 'table',
        name: '讲师列表',
        component: () => import('@/views/edu/teacher/list'),//@固定用法，不能替换为../
        meta: { title: '讲师列表', icon: 'table' }
      },
      {
        path: 'save',
        name: '添加讲师',
        component: () => import('@/views/edu/teacher/save'),
        meta: { title: '添加讲师', icon: 'tree' }
      }
    ]
  },

若没有用到添加页面或切换路由的地方，此步骤可省略

二、定义后端接口地址

在api文件夹下创建js文件，定义后端接口地址和参数

import request from '@/utils/request'
//es6默认导出
export default {
    //分页查询讲师列表
    getTeacherListPage(current,size,teacherQuery){
        //以下固定写法
        return request({
            //如果需要在路径上拼接参数，需要用`(键盘1左边)包起来和${}取值
            url: `/eduservice/teacher/PageTeacherCondition/${current}/${size}`,
            method: 'post',
            data: teacherQuery 	//data中的数据会转换成json格式传给后端接口
          })
    }
}

三、调用方法

使用：调用前必须先引入js文件

<script>
//引入teacher.js
import teacher from '@/api/edu/teacher'
export default {
    //写核心逻辑部分
    data(){
        return {
            page: 1,  //当前页
            size: 10,  //每页记录数
            total: 0,  //记录总数
            teacherQuery: {}, //查询条件入参
            list: {}    //返回结果集
        }
    },

    created(){
        this.getTeacherList()
    },
    methods:{
        getTeacherList(){
            //调用teacher.js中的方法
            teacher.getTeacherListPage(this.page,this.size,this.teacherQuery)
                .then(res => {
                    this.list = res.data.list
                    this.total = res.data.total
                    console.log(this.list)
                    console.log(this.total)
                })
                .catch()
        }
    },


}
</script>