<template>
<el-table
:data="items"
border
style="width
: 100%">
<el-table-column
fixed
prop="date"
label="ID"
width="150">
</el-table-column>
<el-table-column
prop="name"
label="姓名"
width="120">
</el-table-column>
<el-table-column
prop="age"
label="学生年龄"
width="120">
</el-table-column>
<el-table-column
prop="sex"
label="性别"
width="120">
</el-table-column>
<el-table-column
prop="tel"
label="电话号码"
width="300">
</el-table-column>
<el-table-column
fixed="right"
label="操作"
width="100">
<template slot-scope="scope">
<el-button @click="handleClick(scope
.row)" type="text" size="small">查看</el-button>
<el-button type="text" size="small">编辑</el-button>
</template>
</el-table-column>
<div class="block">
<span class="demonstration">完整功能</span>
<el-pagination
@size-change="handleSizeChange"
@current-change="handleCurrentChange"
:current-page="currentPage"
:page-sizes="[100, 200, 300, 400]"
:page-size="pageSize"
layout="total, sizes, prev, pager, next, jumper"
:total="total">
</el-pagination>
</div>
</el-table>
</template>
<script>
import axios from "axios";
export default {
methods
: {
handleClick(row) {
console
.log(row);
},
handleSizeChange(val) {
console
.log(`每页 ${val} 条`);
},
handleCurrentChange(val) {
this
.currentPage = val;
console
.log(`当前页
: ${val}`);
},
fetchData(pageNum,pageSize) {
axios
.get('http
://localhost
:8080/api/student/list',{
params
:{
pageNum
:pageNum,
pageSize
:pageSize
}
})
.then(res => {
this
.items = res
.data
.data
.list
})
},
fetchItems(){
axios
.get('http
://localhost
:8080/Student/student')
.then(res => {
this
.items = res
.data
.data
.list
})
.catch(error => {
console
.log('获取学生数据失败',error)
})
},
addItem(){
axios
.post('/api/items',{
name
:this
.newItem
})
.then(res => {
this
.items
.push(res
.data
.data)
this
.newItem = ''
})
.catch(error => {
console
.log(error)
})
},
created(){
this
.fetchItems()
},
computedCurrentPage(){
return this
.currentPage || 1;
},
mounted(){
this
.fetchData(this
.computedCurrentPage,this
.pageSize)
},
},
data() {
return {
currentPage
: 1,
pageSize
: 10,
total
: 50,
items
:[],
newItem
:'',
}
}
}
</script>
前端代码如上
package com
.example
.stumanage
.controller;
import com
.example
.stumanage
.common
.Result;
import com
.example
.stumanage
.entity
.Student;
import com
.example
.stumanage
.service
.StudentService;
import com
.github
.pagehelper
.PageInfo;
import io
.swagger
.v3
.oas
.annotations
.Operation;
import io
.swagger
.v3
.oas
.annotations
.Parameter;
import io
.swagger
.v3
.oas
.annotations
.Parameters;
import io
.swagger
.v3
.oas
.annotations
.enums
.ParameterIn;
import io
.swagger
.v3
.oas
.annotations
.tags
.Tag;
import lombok
.RequiredArgsConstructor;
import lombok
.extern
.slf4j
.Slf4j;
import
org.springframework.beans
.factory
.annotation
.Autowired;
import
org.springframework.validation
.annotation
.Validated;
import
org.springframework.web.bind.annotation
.*;
import java
.util
.List;
@RestController
@CrossOrigin
@
RequiredArgsConstructor
@Slf4j
@RequestMapping("/Student")
@Tag(name = "学生管理")
public class StudentController {
@Autowired
private StudentService studentService;
@Operation(summary = "查询所有学生信息")
@GetMapping("/student")
public Result<List<Student>> AllStudents() {
List<Student> students = studentService
.AllStudents();
log
.info("查询所有学生信息
: {}", students);
return Result
.success("查询成功", students);
}
@Operation(summary = "添加学生消息")
@
Parameters({
@
Parameter(name = "Student", description = "学生信息",
required = true)
})
@PostMapping("/add")
public Result<Student> addStudent(@RequestBody @Validated Student student ){
int result = studentService
.addStudent(student);
if (result == 0){
return Result
.error(500,"添加用户失败");
}
log
.info("添加学生信息
: {}", student);
return Result
.success("添加成功",student);
}
@Operation(summary = "分页查询学生信息")
@
Parameters({
@
Parameter(name = "pageNum", description = "当前页码",
required = true,in =
ParameterIn
.QUERY),
@
Parameter(name = "pageSize", description = "每页显示条数",
required = true,in =
ParameterIn
.QUERY),
@
Parameter(name = "student", description = "学生信息")
})
@PostMapping("/page")
public Result<PageInfo<Student>> queryStudentByPage(@RequestParam(defaultValue = "1") Integer pageNum,
@RequestParam(defaultValue = "10") Integer pageSize,
@RequestBody Student student) {
PageInfo<Student> sysUserInfo = studentService
.queryStudentByPage(pageNum, pageSize, student);
return Result
.success("查询成功", sysUserInfo);
}
@Operation(summary = "根据id查询学生信息")
@
Parameters({
@
Parameter(name = "id", description = "学生id",
required = true,in =
ParameterIn
.PATH)
})
@GetMapping("/student/{id}")
public Result<Student> queryStudentById(@PathVariable("id") Integer id) {
Student student= studentService
.queryStudentById(id);
return Result
.success("查询成功",student );
}
}
后端代码如上，怎么才能让前端页面显示后端的数据，添加新增按钮并且跟后端连接，分页在也在页面显示并且跟后端连接
在使用Spring框架时遇到错误提示Required Long parameter 'suiteId' is not present，通过排查发现参数suiteId未在请求中提供。解决方法包括确保参数存在且为Long类型，检查代码中是否正确使用了该参数，并确认其set和get方法已实现。
扫一扫
4138
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
