谷粒-前端

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>

路由跳转，这里的路径为路由也就是菜单的路径