Vue implements student management function

Vue implements student management function

This article example shares the specific code of Vue to implement student management for your reference. The specific content is as follows

difficulty

  • A component used by both student creation and student editing functions. How to judge and verify it.
  • Verify user input and check if it is not empty.
  • Send JSON data to the server, and the backend converts the JSON data.
  • In the three-tier architecture, the functions of each layer are divided
  • Using annotations to manipulate student data

The overall difficulty is average, but there are many small points and it is highly comprehensive.
For example, when I use axios to send a post to the backend, it is easy to ignore the format.
When the front-end and back-end data are interacting, the larger the data, the better. The more complete the data, the stronger the data performance. When getting the back-end data, the unpacking levels must be clearly distinguished.

Part of the code

Vue.js

<script>
 let app = new Vue({
  el:"#app",
  data:{
   currentPage:1, //Current page pageSize:10, //Number of records displayed per page total:0, //Total number of records;
   list:[], //Current page data //Binding student information 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("Add failed!");
      }
     });
    }else {
     axios.post("/StudentManager/updateStudentServlet", this.student).then((resp)=>{
      if (resp.data.flag){
       this.getData();
      }else {
       alert("Modification failed!");
      }
     });
    }
   },
   deleteStudent:function (id) {
    axios.post("/StudentManager/deleteStudentServlet?id="+id).then((resp)=>{
     if (resp.data.flag){
      this.getData();
     }else {
      alert("Delete failed!");
     }
    });
   },
   findById:function (id) {
    axios.post("/StudentManager/findByIdStudentServlet?id=" + id).then((resp)=>{
     this.student = resp.data;
    });
   }
  },
  mounted:function () {
   this.getData();
  }
 });
</script>

Display paginated student information

// 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
 /**
     * Home page shows all students* @return student list*/
    @Select("SELECT * FROM student")
    List<Student> showStudent();

The above is the full content of this article. I hope it will be helpful for everyone’s study. I also hope that everyone will support 123WORDPRESS.COM.

You may also be interested in:
  • Vue+Bootstrap realizes a simple student management system
  • Java console to realize student management system
  • Java implementation of student management system (IO version)
  • Detailed explanation of student management system implemented in Java
  • Detailed explanation of the student management system example of the Vue project

<<:  Use Shell scripts to batch start and stop Docker services

>>:  Tutorial on upgrading, installing and configuring supervisor on centos6.5

Recommend

The ultimate solution for writing bash scripts with nodejs

Table of contents Preface zx library $`command` c...

CSS3 realizes particle animation effect when matching kings

When coding, you will find that many things have ...

Sample code for CSS image animation effects (photo frame)

This article introduces the sample code of CSS pi...

Get / delete method to pass array parameters in Vue

When the front-end and back-end interact, sometim...

How to set an alias for a custom path in Vue

How to configure custom path aliases in Vue In ou...

Docker uses the nsenter tool to enter the container

When using Docker containers, it is more convenie...

Vue realizes price calendar effect

This article example shares the specific code of ...

The front-end page pop-up mask prohibits page scrolling

A problem that front-end developers often encount...

How to use default values ​​for variables in SASS

Variables defined in SASS, the value set later wi...

Eight hook functions in the Vue life cycle camera

Table of contents 1. beforeCreate and created fun...

Vant Uploader implements the component of uploading one or more pictures

This article shares the Vant Uploader component f...

HTML+css to create a simple progress bar

1. HTML code Copy code The code is as follows: Ex...