用户可以通过课程名和课程号搜索数据库中course表中的课程信息，搜索结果出现内容模块里，默认情况下展示课程表里所有的课程信息，每个课程信息以卡片形式出现，其余代码可以删减，给出修改后的完整代码

为了实现用户通过课程名和课程号搜索数据库中 `course` 表中的课程信息，并在默认情况下展示所有课程信息，每个课程信息以卡片形式出现，我们可以简化并优化现有的代码。以下是修改后的完整代码：

### router.js

let express = require('express');
let router = express.Router();
let courseSearch = require('./api/courseSearch');

// 路由定义
router.post('/api/search-courses', courseSearch.searchCourses);

module.exports = router;

### courseclass.vue

<template>
  <div class="common-layout">
    <el-container>
      <el-aside width="130px" class="menu">
        <smenu></smenu>
      </el-aside>
      <el-container>
        <el-header>
          <div class="header">
            <el-input v-model="searchParams.courseName" placeholder="请输入课程名" class="input-with-select" clearable></el-input>
            <el-button type="primary" @click="handleSearch">搜索</el-button>
            <el-input v-model="searchParams.courseId" placeholder="请输入课程号" class="input-with-select" clearable></el-input>
            <el-button type="primary" @click="handleSearch">搜索</el-button>
          </div>
        </el-header>
        <el-main>
          <!-- 显示课程列表 -->
          <div v-if="courses.length > 0" class="course-list">
            <el-card v-for="course in courses" :key="course.course_id" style="max-width: 480px; margin-bottom: 20px;">
              <template #header>
                <div class="card-header">
                  <span>{{ course.course_name }}</span>
                </div>
              </template>
              <div class="text item">
                <p>课程号: {{ course.course_id }}</p>
                <p>学时: {{ course.class_hours }}</p>
                <p>实验学时: {{ course.laboratory_times }}</p>
                <p>学分: {{ course.credits }}</p>
                <p>任教老师ID: {{ course.userid }}</p>
                <div class="course-info">课程详情：{{ course.course_info }}</div>
              </div>
              <template #footer>
                <el-button type="primary">进入班级</el-button>
                <el-button type="primary">学情管理</el-button>
              </template>
            </el-card>
          </div>
          <div v-else>
            <p>暂无课程信息</p>
          </div>
        </el-main>
      </el-container>
    </el-container>
  </div>
</template>

<script lang="ts" setup>
import { ref, onMounted } from 'vue';
import { searchCoursesApi } from '../axios';
import smenu from './smenu.vue';
import Swal from 'sweetalert2';

const searchParams = ref({ courseName: '', courseId: '' });
const courses = ref([]);

const fetchCourses = async () => {
  try {
    const response = await searchCoursesApi({});
    courses.value = response || [];
  } catch (error) {
    console.error('获取课程失败:', error);
    Swal.fire({
      icon: 'error',
      title: '获取课程失败',
      text: '无法连接到服务器'
    });
  }
};

onMounted(fetchCourses);

const handleSearch = async () => {
  try {
    const response = await searchCoursesApi(searchParams.value);
    if (response && response.length > 0) {
      courses.value = response;
    } else {
      courses.value = [];
      Swal.fire({
        icon: 'info',
        title: '课程不存在',
        text: '没有找到与搜索条件匹配的课程'
      });
    }
  } catch (error) {
    console.error('搜索错误:', error);
    Swal.fire({
      icon: 'error',
      title: '搜索失败',
      text: '填写正确的课程号'
    });
  }
};
</script>

<style scoped>
.menu {
  border-right: 1px solid #545c64;
  height: calc(100vh);
  margin-right: 0;
}
.header {
  height: 100%;
  border-bottom: 1px solid #545c64;
  padding: 0;
  margin: 0;
}
.el-header {
  padding: 0;
  margin: 0;
}
.el-main {
  padding: 0;
}
.el-container {
  padding: 0;
}
</style>

### courseclass.js

let db = require('./db');

const searchCourses = (params) => {
  return new Promise((resolve, reject) => {
    let sql = 'SELECT * FROM courses WHERE 1 = 1';
    const values = [];

    if (params.courseName) {
      sql += ' AND course_name LIKE ?';
      values.push(`%${params.courseName}%`);
    }

    if (params.courseId) {
      sql += ' AND course_id LIKE ?';
      values.push(`%${params.courseId}%`);
    }

    db.query(sql, values, (err, results) => {
      if (err) {
        return reject(err);
      }
      resolve(results);
    });
  });
};

module.exports = { searchCourses };

### 解释
1. **router.js**: 只保留了 `/api/search-courses` 路由，用于处理课程搜索请求。
2. **courseclass.vue**:
- 删除了不必要的 `originalCourses` 和 `fetchCourses` 中的 `userid` 参数。
- 默认情况下调用 `searchCoursesApi` 获取所有课程信息。
- 搜索功能通过 `handleSearch` 方法实现，根据输入的课程名或课程号进行搜索。
3. **courseclass.js**:
- 简化了 `searchCourses` 函数，只保留了课程名和课程号的搜索条件。

这样，用户可以通过课程名和课程号搜索课程，并在默认情况下看到所有课程的信息。