快捷導(dǎo)航

Vue實(shí)現(xiàn)學(xué)生管理功能

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

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

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

難點(diǎn)

學(xué)生新建與學(xué)生編輯功能都用的一個(gè)組件，如何對其進(jìn)行判斷校驗(yàn)。
對用戶輸入進(jìn)行校驗(yàn)，非空判斷。
向服務(wù)器發(fā)送JSON數(shù)據(jù)，后端對JSON數(shù)據(jù)的轉(zhuǎn)換。
三層架構(gòu)中，各層功能劃分
使用注解對學(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í)候，拆包層級要分清。

部分代碼

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();

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

您可能感興趣的文章: