Vue 학생 관리 기능 구현

본 논문 의 사례 는 Vue 가 학생 관 리 를 실현 하 는 구체 적 인 코드 를 공유 하여 여러분 께 참고 하 시기 바 랍 니 다.구체 적 인 내용 은 다음 과 같 습 니 다.


난점

학생 들 이 새로 만 들 고 학생 편집 기능 에 사용 하 는 구성 요 소 를 어떻게 판단 하고 검증 합 니까?

사용자 의 입력 을 검사 하고 비 어 있 는 판단 을 한다.

서버 에 JSON 데 이 터 를 보 내 고 백 엔 드 에서 JSON 데 이 터 를 변환 합 니 다.

3 층 구조 에서 각 층 의 기능 구분

주 해 를 사용 하여 학생 데이터 조작

전체적인 난이 도 는 보통 이지 만 작은 것 이 많 고 종합 성 이 강하 다.
예 를 들 어 나 는 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 {
     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();

이상 이 바로 본 고의 모든 내용 입 니 다.여러분 의 학습 에 도움 이 되 고 저 희 를 많이 응원 해 주 셨 으 면 좋 겠 습 니 다.