本文例項為大家分享了vue實現學生管理的具體程式碼，供大家參考，具體內容如下

難點

• 學生新建與學生編輯功能都用的一個元件，如何對其進行判斷校驗。
• 對使用者輸入進行校驗，非空判斷。
• 向伺服器傳送jsON資料，後端對JSON資料的轉換。
• 三層架構中，各層功能劃分
www.cppcns.com
• 使用註解對學生資料進行操作
  

整體難度一般，但是小點兒比較多，綜合性強。
例如我用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 {
     axi
 
程式設計客棧os.post("/StudentManager/updateStudentServlet",this.student).then((resp)=>{
      if (resp.data.flag){
       this.getData();
      }else http://www.cppcns.com{
       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.www.cppcns.comgetParameter("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();

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