完成管理端获取学生列表

admin/package.json

@@ -4,7 +4,7 @@
   "description": "宁波诺丁汉大学校园墙",
   "license": "Apache-2.0",
   "private": false,
-  "version": "1.0.5",
+  "version": "1.0.6",
   "repository": {
     "type": "git",
     "url": "https://github.com/Pleasurecruise/NottinghamWall"

admin/src/api/student.js

@@ -0,0 +1,16 @@
+import request from '@/utils/request';
+// import {useAdminStore} from '@/store/admin';
+// import {useTokenStore} from '@/store/token';
+
+// 提供调用获取学生列表接口的函数
+export const getStudentList = (params) => {
+    console.log('Fetching student list'); // 添加日志
+    // 发送 GET 请求，包含分页参数
+    return request.get('/admin/student/page', {params}).then(response => {
+        console.log('Student list response received', response); // 添加日志
+        return response;
+    }).catch(error => {
+        console.error('Fetching student list failed', error); // 添加日志
+        throw error;
+    });
+};

admin/src/views/student/Student.vue

@@ -1,10 +1,120 @@
+<template>
+  <div class="content-wrapper">
+    <div class="dashboard-container">
+      <div class="container">
+        <div class="tableBar">
+          <label style="margin-right:5px">学生姓名：</label>
+          <el-input v-model="username" placeholder="请输入学生昵称" style="width:15%" />
+          <el-button type="primary" style="margin-left:25px" @click="pageQuery">
+            查询
+          </el-button>
+        </div>
+        <!-- 使用 v-if 来条件渲染 table 或 el-empty -->
+        <el-table v-if="records.length > 0" :data="records" stripe style="width: 100%">
+          <!-- 显示头像 -->
+          <el-table-column label="头像" width="180">
+            <template #default="scope">
+              <img :src="scope.row.avatar" alt="头像" style="width: 50px; height: 50px; border-radius: 50%">
+            </template>
+          </el-table-column>
+          <el-table-column prop="username" label="昵称" width="180" />
+          <!-- 显示性别 -->
+          <el-table-column label="性别">
+            <template #default="scope">
+              {{ Number(scope.row.sex) ===1 ? '男':'女' }}
+            </template>
+          </el-table-column>
+          <el-table-column prop="studentid" label="学生号" />
+          <el-table-column prop="email" label="教育邮箱" />
+          <el-table-column prop="phone" label="手机号" />
+          <el-table-column prop="updateTime" label="最后更新时间" />
+        </el-table>
+        <!-- 当 records 为空时显示 el-empty 组件 -->
+        <el-empty v-else description="暂无数据" />
+
+        <el-pagination
+          v-if="records.length > 0"
+          class="pageList"
+          :current-page="page"
+          :page-sizes="[5, 10, 15, 20]"
+          :page-size="pageSize"
+          layout="total, sizes, prev, pager, next, jumper"
+          :total="total"
+          @size-change="handleSizeChange"
+          @current-change="handleCurrentChange"
+        />
+      </div>
+    </div>
+  </div>
+</template>
+
 <script setup>
+import { ref, onMounted } from 'vue';
+import { ElMessage } from 'element-plus';
+import { getStudentList } from '@/api/student';
 
-</script>
+// 定义响应式变量
+const username = ref('');
+const page = ref(1);
+const pageSize = ref(5);
+const total = ref(0);
+const records = ref([]);
+// 分页查询函数
+const pageQuery = async () => {
+  const params = {
+    username: username.value,
+    page: page.value,
+    pageSize: pageSize.value
+  };
+  try {
+    const res = await getStudentList(params);
+    if (res.code === 1) {
+      records.value = res.data.records.sort((a, b) => {
+        return a.id - b.id;
+      });
+      total.value = res.data.total; // 处理 total
+    } else {
+      ElMessage.error('获取学生列表失败');
+    }
+  } catch (err) {
+    ElMessage.error('请求失败: ' + err.message);
+  }
+};
 
-<template>
-</template>
+// 处理 pageSize 改变
+const handleSizeChange = async (newSize) => {
+  pageSize.value = newSize;
+  await pageQuery();
+};
+
+// 处理 page 改变
+const handleCurrentChange = async (newPage) => {
+  page.value = newPage;
+  await pageQuery();
+};
+
+// 在组件挂载时进行数据查询
+onMounted(() => {
+  pageQuery();
+});
+</script>
 
 <style scoped>
+.content-wrapper {
+  background-color: #f0f0f0; /* 打底框颜色 */
+  padding: 20px;
+  border-radius: 8px;
+}
+
+.tableBar {
+  margin-bottom: 20px; /* Add spacing below the tableBar */
+}
+
+.el-table {
+  margin-bottom: 20px; /* Add spacing below the table */
+}
 
+.pageList {
+  margin-top: 20px; /* Add spacing above the pagination */
+}
 </style>

backend/wall-pojo/src/main/java/cn/yiming1234/dto/StudentPageQueryDTO.java

@@ -10,9 +10,6 @@ public class StudentPageQueryDTO implements Serializable {
     //用户姓名
     private String username;
 
-    //用户学号
-    private String studentId;
-
     //页码
     private int page;
 

backend/wall-server/src/main/resources/mapper/StudentMapper.xml

@@ -5,15 +5,9 @@
     <select id="pageQuery" resultType="cn.yiming1234.entity.Student">
         select * from student
         <where>
-            <if test="studentId != null and studentId != ''">
-                and studentId like concat('%',#{studentId},'%')
-            </if>
             <if test="username != null and username != ''">
                 and username like concat('%',#{username},'%')
             </if>
-            <if test="email != null and email != ''">
-                and email like concat('%',#{email},'%')
-            </if>
         </where>
         order by create_time desc
     </select>