Vue实现学生管理功能

本文实例为大家分享了Vue实现学生管理的具体代码,供大家参考,具体内容如下

难点

  • 学生新建与学生编辑功能都用的一个组件,如何对其进行判断校验。
  • 对用户输入进行校验,非空判断。
  • 向服务器发送JSON数据,后端对JSON数据的转换。
  • 三层架构中,各层功能划分
  • 使用注解对学生数据进行操作

整体难度一般,但是小点儿比较多,综合性强。

例如我用axios像后端发送post时候,很容易忽略格式。

前后端数据交互时候,能传大就传大,数据越完整,数据表现越强

拿到后端数据时候,拆包层级要分清。

部分代码

Vue.js

<script>

let app = new Vue({

el:"#app",

data:{

currentPage:1, //当前页

pageSize:10, //每页显示条数

total:0, //总记录数;

list:[],//当前页数据

//绑定学生信息

student:{

name:"",

age:""

}

},

methods:{

pager:function(num){

this.currentPage = num;

this.getData();

},

getData:function () {

axios.post("/StudentManager/showAllServlet?currentPage=" + this.currentPage + "&pageSize=" + this.pageSize).then((resp) => {

this.list = resp.data.datas;

this.total = resp.data.total;

});

},

add:function () {

if (this.student.id === undefined) {

axios.post("/StudentManager/addStudentServlet", this.student).then((resp) =>{

if (resp.data.flag){

this.getData();

}else {

alert("添加失败!");

}

});

}else {

axios.post("/StudentManager/updateStudentServlet", this.student).then((resp)=>{

if (resp.data.flag){

this.getData();

}else {

alert("修改失败!");

}

});

}

},

deleteStudent:function (id) {

axios.post("/StudentManager/deleteStudentServlet?id="+id).then((resp)=>{

if (resp.data.flag){

this.getData();

}else {

alert("删除失败!");

}

});

},

findById:function (id) {

axios.post("/StudentManager/findByIdStudentServlet?id=" + id).then((resp)=>{

this.student = resp.data;

});

}

},

mounted:function () {

this.getData();

}

});

</script>

显示分页学生信息

// Servlet

String currentPage = request.getParameter("currentPage");

String pageSize = request.getParameter("pageSize");

PageBean<Student> pageBean = showAllStudentService.showAllStudent(Integer.parseInt(currentPage), Integer.parseInt(pageSize));

ObjectMapper objectMapper = new ObjectMapper();

String json = objectMapper.writeValueAsString(pageBean);

response.getWriter().write(json);

// Service

@Test

@Override

public PageBean<Student> showAllStudent(int currentPage, int pageSize) {

PageHelper.startPage(currentPage, pageSize);

SqlSession sqlSession = SqlSessionUtils.getSqlSession(false);

StudentMapper mapper = sqlSession.getMapper(StudentMapper.class);

List<Student> students = mapper.showStudent();

PageInfo<Student> pageInfo = new PageInfo<>(students);

long total = pageInfo.getTotal();

int pages = pageInfo.getPages();

PageBean<Student> pageBean = new PageBean<>(total, students, pages);

sqlSession.close();

return pageBean;

}

// Dao

/**

* 首页显示所有学生

* @return 学生列表

*/

@Select("SELECT * FROM student")

List<Student> showStudent();

以上就是本文的全部内容,希望对大家的学习有所帮助,也希望大家多多支持。

以上是 Vue实现学生管理功能 的全部内容, 来源链接: utcz.com/p/239341.html

回到顶部