本文實例為大家分享了Vue實現(xiàn)學(xué)生管理的具體代碼，供大家參考，具體內(nèi)容如下

難點 學(xué)生新建與學(xué)生編輯功能都用的一個組件，如何對其進行判斷校驗。 對用戶輸入進行校驗，非空判斷。 向服務(wù)器發(fā)送JSON數(shù)據(jù)，后端對JSON數(shù)據(jù)的轉(zhuǎn)換。 三層架構(gòu)中，各層功能劃分 使用注解對學(xué)生數(shù)據(jù)進行操作

整體難度一般，但是小點兒比較多，綜合性強。例如我用axios像后端發(fā)送post時候，很容易忽略格式。前后端數(shù)據(jù)交互時候，能傳大就傳大，數(shù)據(jù)越完整，數(shù)據(jù)表現(xiàn)越強拿到后端數(shù)據(jù)時候，拆包層級要分清。

部分代碼

Vue.js

<script> let app = new Vue({ el:'#app', data:{ currentPage:1, //當前頁 pageSize:10, //每頁顯示條數(shù) total:0, //總記錄數(shù); list:[],//當前頁數(shù)據(jù) //綁定學(xué)生信息 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>

顯示分頁學(xué)生信息

// 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 /** * 首頁顯示所有學(xué)生 * @return 學(xué)生列表 */ @Select('SELECT * FROM student') List<Student> showStudent();

以上就是本文的全部內(nèi)容，希望對大家的學(xué)習(xí)有所幫助，也希望大家多多支持好吧啦網(wǎng)。