d1014_Vue2_book模板
【摘要】 测试
前端Vue2
index.html：
学生管理系统 Subtext for header
<div class="row clearfix">
<div class="col-md-12 column">
<form action="index.html" method="get" class="navbar-form navbar-left" role="search">
<div class="form-group">
<input type="text" v-model="studentQuery.sname" placeholder="请输入学生名称" class="form-control" />
<select v-model="studentQuery.gid" class="form-control"/>
<option value="-1">请选择班级</option>
<option v-for="grade in gradeList" v-bind:value="grade.gid">{{grade.gname}}</option>
</select>
<br/>
<input type="text" v-model="studentQuery.minAge" placeholder="请输入学生最小年龄" class="form-control" />
-<input type="text" v-model="studentQuery.maxAge" placeholder="请输入学生最大年龄" class="form-control"/>
</div>
<br/>
<button type="button" class="btn btn-default btn-info" @click="getStudentByPage(studentQuery.pageNum)">查询</button>
<a href="add.html"><button type="button" class="btn btn-default btn-success">添加</button></a>
<button type="button" class="btn btn-default btn-danger">批量删除</button>
<a href="javascript:void(0)" @click="logout()">退出登录</a>
</form>
<div class="tab-content" id="maindata">
<table class="table">
<thead>
<tr>
<th>
<input type="checkbox" onclick="checkAll(this.checked)">
</th>
<th>编号</th>
<th>姓名</th>
<th>头像</th>
<th>性别</th>
<th>年龄</th>
<th>出生日期</th>
<th>班级</th>
<th>课程</th>
<th>操作</th>
</tr>
</thead>
<tbody>
<tr v-for="(student,index) in info.list" v-if="index%2==0" v-bind:class="{'info':true}">
<td>
<input type="checkbox" name="id">
</td>
<td>
{{student.sid}}
</td>
<td>
{{student.sname}}
</td>
<td><!-- {{student.imgurl}} --></td>
<td>
{{student.sex==1?"男":"女"}}
</td>
<td>
{{student.age}}
</td>
<td>
{{student.birthday}}
</td>
<td>
{{student.grade.gname}}
</td>
<td>
<label v-for="course in student.courseList">{{course.cname}} </label>
</td>
<td>
<button class="btn btn-success" type="button"><span
class="glyphicon glyphicon-link"></span></button>
<a href="update.html"><button class="btn btn-info" type="button"><span
class="glyphicon glyphicon-edit"></span></button></a>
<button class="btn btn-danger" type="button"><span
class="glyphicon glyphicon-trash"></span></button>
</td>
</tr>
<tr v-else v-bind:class="{'success':true}">
<td>
<input type="checkbox" name="id">
</td>
<td>
{{student.sid}}
</td>
<td>
{{student.sname}}
</td>
<td><!-- {{student.imgurl}} --></td>
<td>
{{student.sex==1?"男":"女"}}
</td>
<td>
{{student.age}}
</td>
<td>
{{student.birthday}}
</td>
<td>
{{student.grade.gname}}
</td>
<td>
<label v-for="course in student.courseList">{{course.cname}} </label>
</td>
<td>
<button class="btn btn-success" type="button"><span
class="glyphicon glyphicon-link"></span></button>
<a href="update.html"><button class="btn btn-info" type="button"><span
class="glyphicon glyphicon-edit"></span></button></a>
<button class="btn btn-danger" type="button"><span
class="glyphicon glyphicon-trash"></span></button>
</td>
</tr>
<!-- <tr class="success">
<td>
<input type="checkbox" name="id">
</td>
<td>
1
</td>
<td>
水浒传
</td>
<td>
50
</td>
<td>
施耐庵
</td>
<td>
2024-08-14
</td>
<td>
小说
</td>
<td>
<button class="btn btn-success" type="button"><span
class="glyphicon glyphicon-link"></span></button>
<a href="update.html"><button class="btn btn-info" type="button"><span
class="glyphicon glyphicon-edit"></span></button></a>
<button class="btn btn-danger" type="button"><span
class="glyphicon glyphicon-trash"></span></button>
</td>
</tr>
<tr class="error">
<td>
<input type="checkbox" name="id">
</td>
<td>
1
</td>
<td>
水浒传
</td>
<td>
50
</td>
<td>
施耐庵
</td>
<td>
2024-08-14
</td>
<td>
小说
</td>
<td>
<button class="btn btn-success" type="button"><span
class="glyphicon glyphicon-link"></span></button>
<a href="update.html"><button class="btn btn-info" type="button"><span
class="glyphicon glyphicon-edit"></span></button></a>
<button class="btn btn-danger" type="button"><span
class="glyphicon glyphicon-trash"></span></button>
</td>
</tr>
<tr class="warning">
<td>
<input type="checkbox" name="id">
</td>
<td>
1
</td>
<td>
水浒传
</td>
<td>
50
</td>
<td>
施耐庵
</td>
<td>
2024-08-14
</td>
<td>
小说
</td>
<td>
<button class="btn btn-success" type="button"><span
class="glyphicon glyphicon-link"></span></button>
<a href="update.html"><button class="btn btn-info" type="button"><span
class="glyphicon glyphicon-edit"></span></button></a>
<button class="btn btn-danger" type="button"><span
class="glyphicon glyphicon-trash"></span></button>
</td>
</tr>
<tr class="info">
<td>
<input type="checkbox" name="id">
</td>
<td>
1
</td>
<td>
水浒传
</td>
<td>
50
</td>
<td>
施耐庵
</td>
<td>
2024-08-14
</td>
<td>
小说
</td>
<td>
<button class="btn btn-success" type="button"><span
class="glyphicon glyphicon-link"></span></button>
<a href="update.html"><button class="btn btn-info" type="button"><span
class="glyphicon glyphicon-edit"></span></button></a>
<button class="btn btn-danger" type="button"><span
class="glyphicon glyphicon-trash"></span></button>
</td>
</tr> -->
</tbody>
</table>
<ul class="pagination">
<li><a href="#">总记录数：{{info.total}}</a></li>
<li><a href="#">第{{info.pageNum}}页/共{{info.pages}}页</a></li>
<li>
<a href="javascript:void(0)" @click="getStudentByPage(info.isFirstPage?1:info.prePage)">«</a>
</li>
<li v-for="num in info.navigatepageNums" v-if="num==info.pageNum" v-bind:class="{'active':true}">
<a href="javascript:void(0)" @click="getStudentByPage(num)">{{num}}</a>
<!-- <a href="javascript:void(0)" @click="getStudentByPage(num)" v-else>{{num}}</a> -->
</li>
<li v-else>
<a href="javascript:void(0)" @click="getStudentByPage(num)">{{num}}</a>
<!-- <a href="javascript:void(0)" @click="getStudentByPage(num)" v-else>{{num}}</a> -->
</li>
<!-- <li>
<a href="#">2</a>
</li>
<li>
<a href="javascript:void(0)">3</a>
</li>
<li>
<a href="javascript:void(0)">4</a>
</li>
<li>
<a href="javascript:void(0)">5</a>
</li> -->
<li>
<a href="javascript:void(0)" @click="getStudentByPage(info.pages)">»</a>
</li>
</ul>
</div>
</div>
</div>
</div>
<script>
// 就绪函数
$(function(){
// 判断是否已经登录
var uname = localStorage.getItem("uname");
console.log(uname);
if(uname==null){
alert("未登录");
window.location.href="login.html";
}
})
var vm = new Vue({
el:"#app",
data:{
studentQuery:{
pageNum:'1',
sname:'',
gid:'-1',
minAge:'',
maxAge:''
},
info:{},
gradeList:[]
},
// 生命周期的函数
created() {
// 页面初始化分页查询
this.getStudentByPage(1);
},
methods:{
// 退出函数
logout() {
localStorage.removeItem("uid");
localStorage.removeItem("uname");
alert(localStorage.getItem("uname"));
window.location.href="login.html";
},
// 分页查询函数
getStudentByPage(page) {
console.log("--page = "+page);
this.studentQuery.pageNum = page;
axios
.post("http://localhost:8080/d1014_VueT1_Student/student/getStudentByPage",this.studentQuery)
.then(res => {
// console.log(JSON.stringify(res));
this.info = res.data.data.info;
this.gradeList = res.data.data.gradeList;
console.log(JSON.stringify(this.info));
console.log(JSON.stringify(this.gradeList));
})
.catch(function(error){
console.log(error);
})
}
}
})
</script>
</body>
import com.github.pagehelper.PageInfo;
import com.student.pojo.Course;
import com.student.pojo.Grade;
import com.student.pojo.Student;
import com.student.result.Result;
import com.student.service.CourseService;
import com.student.service.GradeService;
import com.student.service.StudentService;
import com.student.pojo.StudentQuery;
import org.springframework.beans.factory.annotation.Autowired;
import org.springframework.stereotype.Controller;
import org.springframework.ui.Model;
import org.springframework.web.bind.annotation.*;
import java.util.HashMap;
import java.util.List;
import java.util.Map;
/**
- @Author lyf
- @Date 2024/9/29 11:20
-
- @Describe
*/
@CrossOrigin // 设置支持跨域请求
@RestController
@RequestMapping("/student")
public class StudentController {
@Autowired
private StudentService studentService;
@Autowired
private GradeService gradeService;
@Autowired
private CourseService courseService;
/**
* 分页查询信息
* @param studentQuery
* @return
*/
@RequestMapping("/getStudentByPage")
public Result<Map<String,Object>> getStudentByPage(@RequestBody StudentQuery studentQuery){
System.out.println("----------------------RequestBody-------------");
System.out.println("studentQuery = " + studentQuery);
// 调用service查询
PageInfo<Student> info = studentService.getStudentByPage(studentQuery);
System.out.println("info = " + info);
for (Student student : info.getList()) {
System.out.println("student = " + student);
System.out.println("course = "+student.getCourseList());
}
// 调用service查询所有班级
List<Grade> gradeList = gradeService.getGradeList();
// 转发到学生信息页面
// model.addAttribute(“info”,info);
// model.addAttribute(“gradeList”, gradeList);
Map<String,Object> map = new HashMap<>();
map.put(“info”,info);
map.put(“gradeList”,gradeList);
return Result.ok(map);
}
// // 添加：以跳转控制器的方式
// /**
// * 准备添加需要的课程和班级信息，准备跳转
// * @param model
// * @return
// /
// @RequestMapping(“toAddStudent.action”)
// public String toAddStudent(Model model){
// // service查询所有班级、课程
// List<Grade> gradeList = gradeService.getGradeList();
// List<Course> courseList = courseService.getCourseList();
// model.addAttribute(“gradeList”,gradeList);
// model.addAttribute(“courseList”,courseList);
// return “addStudent”;
// }
//
// /*
// * 添加
// * @param student
// * @return
// /
// @RequestMapping(“addStudent.action”)
// public String addStudent(Student student){
// // 调用service添加
// studentService.addStudent(student);
// return “redirect:/student/getStudentByPage.action”;
// }
//
// /*
// * 异步JSON准备修改页面需要的数据
// * @param sid
// * @return
// /
// @ResponseBody
// @RequestMapping(“initUpdateDate.action”)
// public Map<String,Object> initUpdateDate(Integer sid){
// // 根据学生id查询返回学生对象
// Student student = studentService.getStudentById(sid);
// // 返回所有班级和课程
// List<Grade> gradeList = gradeService.getGradeList();
// List<Course> courseList = courseService.getCourseList();
// Map<String,Object> map = new HashMap<>();
// map.put(“student”,student);
// map.put(“gradeList”,gradeList);
// map.put(“courseList”,courseList);
// return map;
// }
//
// /*
// * 修改
// * @param student
// * @return
// */
// @RequestMapping(“updateStudent.action”)
// public String updateStudent(Student student, String cids){
// System.out.println(“update---------------------”);
// System.out.println("cids = " + cids);
// System.out.println(“student = " + student);
// // 调用service修改
//// studentService.updateStudent(student);
// return “redirect:/student/getStudentByPage.”;
// }
//
// @RequestMapping(“delStudentByIds.action”)
// public String delStudentByIds(String sid){
// System.out.println(”--------------sid = " + sid);
// studentService.delStudentById(sid);
// return “redirect:/student/getStudentByPage.action”;
// }
}
【声明】本内容来自华为云开发者社区博主，不代表华为云及华为云开发者社区的观点和立场。转载时必须标注文章的来源（华为云社区）、文章链接、文章作者等基本信息，否则作者和本社区有权追究责任。如果您发现本社区中有涉嫌抄袭的内容，欢迎发送邮件进行举报，并提供相关证据，一经查实，本社区将立刻删除涉嫌侵权内容，举报邮箱：
cloudbbs@huaweicloud.com
- 点赞
- 收藏
- 关注作者
热门文章
评论（0）