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

Example of using Vue built-in component keep-alive

Table of contents 1. Usage of keep-alive Example ...

JavaScript to achieve simple image switching

This article shares the specific code for JavaScr...

XHTML introductory tutorial: Application of table tags

<br />Table is an awkward tag in XHTML, so y...

Summary of the use of Datetime and Timestamp in MySQL

Table of contents 1. How to represent the current...

Using cursor loop to read temporary table in Mysql stored procedure

cursor A cursor is a method used to view or proce...

Detailed explanation of the failure of MySQL to use UNION to connect two queries

Overview UNION The connection data set keyword ca...

Summary of knowledge points about events module in Node.js

Through the study and application of Node, we kno...

How to use wangEditor in vue and how to get focus by echoing data

Rich text editors are often used when doing backg...

Summary of MySQL 8.0 Online DDL Quick Column Addition

Table of contents Problem Description Historical ...

Vue implements dynamic query rule generation component

1. Dynamic query rules The dynamic query rules ar...

Vue el-date-picker dynamic limit time range case detailed explanation

There are two situations 1. Start time and end ti...

How to use TypeScript in Vue

introduction In recent years, the call for TypeSc...

Detailed steps for debugging VUE projects in IDEA

To debug js code, you need to write debugger in t...