Vue實現(xiàn)學生管理功能

更新時間：2021年06月24日 14:53:07 作者：影修

這篇文章主要為大家詳細介紹了Vue實現(xiàn)學生管理功能，文中示例代碼介紹的非常詳細，具有一定的參考價值，感興趣的小伙伴們可以參考一下

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

難點

學生新建與學生編輯功能都用的一個組件，如何對其進行判斷校驗。
對用戶輸入進行校驗，非空判斷。
向服務器發(fā)送JSON數(shù)據(jù)，后端對JSON數(shù)據(jù)的轉換。
三層架構中，各層功能劃分
使用注解對學生數(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ù)
   //綁定學生信息
   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();

以上就是本文的全部內容，希望對大家的學習有所幫助，也希望大家多多支持腳本之家。

您可能感興趣的文章: