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

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

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

部分代碼

Vue.js

<script> let app = new Vue({ el:'#app', data:{ currentPage:1, //當(dāng)前頁 pageSize:10, //每頁顯示條數(shù) total:0, //總記錄數(shù); list:[],//當(dāng)前頁數(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();

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