课程列表组件制作

1. 需求

当我们点击导航菜单中的课程管理时,要显示课程信息

2. 编写 Course.vue

<template>
  <div>
    <el-row :gutter="20">
      <el-col :span="6">
        <el-input prefix-icon="el-icon-search" placeholder="课程名称" v-model="filter.course_name" clearable></el-input>
      </el-col>
      <el-col :span="1">
        <el-button type="primary" @click="search">点击查询</el-button>
      </el-col>
    </el-row>

    <el-table
      v-loading="loading"
      element-loading-text="拼命加载中"
      :data="courseList"
      stripe
      style="width: 100%"
    >
      <el-table-column prop="id" label="ID"></el-table-column>
      <el-table-column prop="course_name" label="课程名称"></el-table-column>
      <el-table-column prop="price" label="价格"></el-table-column>
      <el-table-column prop="sort_num" label="排序"></el-table-column>
      <el-table-column prop="status" label="状态"></el-table-column>
    </el-table>
  </div>
</template>

<script>
export default {
  data() {
    return {
      courseList: [],
      loading: true,
      filter:{course_name:""}
    };
  },
  //钩子函数created, 在DOM页面生成之前执行
  created() {
    //在页面生成之前,调用 loadCourse()
    this.loadCourse();
  },

  methods: {
    //方法1: 获取课程信息
    loadCourse() {
      alert("loadCourse方法执行了");

      //发送请求获取课程数据
      const url = "http://localhost:8080/lagou_edu_home/course";
      return this.axios
        .get(url, {
          params: {
            methodName: "findCourseList"
          }
        })
        .then(res => {
          console.log(res.data);
          //将获取到的数据 赋值给
          this.courseList = res.data;

          //取消加载动画
          this.loading = false;
        })
        .catch(error => {
          this.$message.error("获取数据失败!");
        });
    },

    //根据课程名查询
    search(){
      //开启加载提示
      this.loading = true;

      //发送请求
      const url = "http://localhost:8080/lagou_edu_home/course";
      
      return this.axios.get(url,{
        //携带参数
        params:{
          methodName:"findByCourseNameAndStatus",
          course_name:this.filter.course_name
        }
      }).then((res) => {
        console.log(res.data);
        this.courseList = res.data;
        //关闭加载
        this.loading = false;
      }).catch((error) => {
        this.$message.error("获取数据失败");
      })

    }

  }
};
</script>

<style scoped>
</style>

3. 配置路由

import Vue from 'vue'
import VueRouter from 'vue-router'

//导入Login.vue组件
import Login from "@/components/Login" //登录操作
import Index from "@/components/Index"
import Course from "@/components/Course"

Vue.use(VueRouter)

const routes = [
  //访问/.也跳转到login
  {
    path:"/",
    //redirect:"login", //重定向到login
    redirect:"index",
  },
  //登录操作路由
  {
    path:"/login",
    name:"login",
    component:Login
  },
   //登录主页
   {
    path:"/index",
    name:"index",
    component:Index,
    //添加子路由,使用children属性来表示子路由
    children:[
      //课程信息子路由
      {
        path:"/course",
        name:"course",
        component:Course

      }
    ]
  }
]

const router = new VueRouter({
  routes
})

export default router

4. 修改 Index.vue组件中的 导航菜单属性

router 表示是否使用 vue-router 的模式，启用该模式会在激活导航时以 index 作为 path 进行路由跳转

el-menu中 添加一个 router属性

<el-menu default-active="2" class="el-menu-vertical-demo" background- color="#d3dce6" router >

为index属性指定 路由

<el-menu-item-group>

<!-- 修改 index的路由地址 -->

<el-menu-item index="/course">

<i class="el-icon-menu"></i>课程管理

</el-menu-item>

</el-menu-item-group>

设置路由的出口,将课程信息展示再 main

<!-- 主要区域 -->

<el-main>

<router-view></router-view>

</el-main>

节选自拉钩教育JAVA系列教程