[Vue Practical Project] General Management System: Student List

This article is the fifth article in the blogger's series of practical Vue small projects. It is very suitable for back-end or those who are just getting started. It is a nanny-level teaching of a front-end project from 0 to 1. Previous content:

Table of contents

1 Overview

This article implements the student list component in the student management interface, which includes querying, deleting, and paging of student information. There is no input function. The input function is in the subsequent information management component.

First, let’s take a look at the final page effect of the student list component:

2. List

The student list component of studentList is a table. Just find a table on elementUI and then adjust it.

Code:

<template>
  <div>
    <el-table :data="tableData" border style="width: 100%">
      <el-table-column prop="date" label="日期" width="180"> </el-table-column>
      <el-table-column prop="name" label="姓名" width="180"> </el-table-column>
      <el-table-column prop="address" label="地址"> </el-table-column>
    </el-table>
  </div>
</template>
<script>
  export default {
    data() {
      return {
        tableData: [{
          date: '2016-05-02',
          name: '王小虎',
          address: '上海市普陀区金沙江路 1518 弄'
        }, {
          date: '2016-05-04',
          name: '王小虎',
          address: '上海市普陀区金沙江路 1517 弄'
        }, {
          date: '2016-05-01',
          name: '王小虎',
          address: '上海市普陀区金沙江路 1519 弄'
        }, {
          date: '2016-05-03',
          name: '王小虎',
          address: '上海市普陀区金沙江路 1516 弄'
        }]
      }
    }
  }
</script>

Effect:

Encapsulation API:

According to the previous coding standards, here we still encapsulate the method of obtaining data into the api (api.js).

import service from '../utils/service'

export function login(data){
    return service({
        method:'post',
        url:'/login',
        data
    })
}

export function students(params){
    return service({
        method:'get',
        url:'/student/list',
        params
    })
}

Call the api in studentList to get data:

<script>
import {students} from '@/api/api.js'
  export default {
    data() {
      return {
        tableData: []
      }
    },
    methods:{
        getData(params){
            students(params).then((res)=>{
                console.log(res);
            })
        }
    },
    created(){
        this.getData();
    }
  }
</script>

You can see that all the data has been obtained:

Now that the data can be obtained, just bind the data:

<template>
  <div>
    <el-table :data="tableData" border style="width: 100%">
      <el-table-column prop="name" label="姓名" align="center"> </el-table-column>
      <el-table-column prop="age" label="年龄" align="center"> </el-table-column>
      <el-table-column prop="sex" label="性别" align="center"> </el-table-column>
      <el-table-column prop="classNum" label="班级" align="center"> </el-table-column>
      <el-table-column prop="number" label="学号" align="center"> </el-table-column>
      <el-table-column prop="address" label="地址" align="center"> </el-table-column>
      <el-table-column prop="state" label="状态" align="center"> </el-table-column>
      <el-table-column  label="操作">
        <template>
          <el-button type="danger" size="mini" icon="el-icon-delete"></el-button>
        </template>
      </el-table-column>
    </el-table>
  </div>
</template>
<script>
import {students} from '@/api/api.js'
  export default {
    data() {
      return {
        tableData: []
      }
    },
    methods:{
        getData(params){
            students(params).then((res)=>{
                if(res.status===200){
                  this.tableData=res.data
                }
            })
        }
    },
    created(){
        this.getData();
    }
  }
</script>

final effect:

There is a small thing to note here, which is about data conversion. The status and type fields in the data returned from the backend are represented by numbers. Corresponding conversion needs to be done on the front end:

You can do this:

export default {
    data() {
      return {
        tableData: []
      }
    },
    methods:{
        getData(params){
            students(params).then((res)=>{
                if(res.status===200){
                  this.tableData=res.data
                  this.tableData.forEach(item=>{
                    item.sex===1?item.sex='男':item.sex='女'
                  })
                }
            })
        }
    },
    created(){
        this.getData();
    }
  }

But there is a problem with doing the above:

Because the value here is in Chinese, when it is passed to the backend, it will be in Chinese, and the backend has to do a conversion, which is very troublesome.

To be clever, just add another field to store Chinese characters. Other status fields are treated similarly.

<script>
import {students} from '@/api/api.js'
  export default {
    data() {
      return {
        tableData: []
      }
    },
    methods:{
        getData(params){
            students(params).then((res)=>{
                if(res.status===200){
                  this.tableData=res.data
                  this.tableData.forEach(item=>{
                    item.sex===1?item.sex_text='男':item.sex_text='女'
                    item.status===1?item.status_text='已入学':item.status_text='未入学'
                  })
                }
            })
        }
    },
    created(){
        this.getData();
    }
  }
</script>

3. Pagination

elementUI provides a complete paging component. The old rule is to go to the official website to look for a product and use it as soon as you get it.

Put the paging component into the studentList component:

<template>
  <div class="studentList">
    <el-table :data="tableData" border style="width: 100%">
      <el-table-column prop="name" label="姓名" align="center">
      </el-table-column>
      <el-table-column prop="age" label="年龄" align="center">
      </el-table-column>
      <el-table-column prop="sex_text" label="性别" align="center">
      </el-table-column>
      <el-table-column prop="classNum" label="班级" align="center">
      </el-table-column>
      <el-table-column prop="number" label="学号" align="center">
      </el-table-column>
      <el-table-column prop="address" label="地址" align="center">
      </el-table-column>
      <el-table-column prop="status_text" label="状态" align="center">
      </el-table-column>
      <el-table-column label="操作">
        <template>
          <el-button
            type="danger"
            size="mini"
            icon="el-icon-delete"
          ></el-button>
        </template>
      </el-table-column>
    </el-table>
    <!--分页组件-->
    <div class="block">
      <span class="demonstration">完整功能</span>
      <el-pagination
        @size-change="handleSizeChange"
        @current-change="handleCurrentChange"
        :current-page="1"
        :page-sizes="[5,10,15,20]"
        :page-size="pageSize"
        layout="total, sizes, prev, pager, next, jumper"
        :total="total"
      >
      </el-pagination>
    </div>
  </div>
</template>
<script>
import { students } from "@/api/api.js";
export default {
  data() {
    return {
      tableData: [],
      currentPage:1, //当前页数
      pageSize:10, //每页显示条数
      total:0 //总条数
    };
  },
  methods: {
    getData(params) {
      students(params).then((res) => {
        if (res.data.code === 200) {
          this.tableData = res.data.data;
          this.total=res.data.total;
          this.tableData.forEach((item) => {
            item.sex === 1 ? (item.sex_text = "男") : (item.sex_text = "女");
            item.status === 1
              ? (item.status_text = "已入学")
              : (item.status_text = "未入学");
          });
        }
      });
    },
    //分页方法
    handleSizeChange(val) {
      console.log(`每页 ${val} 条`);
    },
    handleCurrentChange(val) {
      console.log(`当前页: ${val}`);
    },
  },
  created() {
    this.getData();
  },
};
</script>

<style lang="less">
.studentList{
  .el-pagination{
    text-align: left;
    margin-top: 20px;
  }
}
</style>

Next is the key step in paging, which is about writing paging logic.

The first is the total number of paginated pages:

You can control the paging plug-in to automatically change the total number of pages when switching pageSize by operating the method that comes with the component. These two methods are well known.

    handleSizeChange(val) {
      this.pageSize=val;
      this.currentPage=1;
    },
    handleCurrentChange(val) {
      this,this.currentPage=val;
    },

Control the display of the number of data items:

el-table's:data is used to bind data to the list component. We control the display of data through the bound array. Calling slice(index,size) of the array in js can slice the array. Here we use this method to achieve it.

<!--slice((当前页数-1)*每页条数,当前页数*当前条数)-->
    <el-table :data="tableData.slice((currentPage-1)*pageSize,currentPage*pageSize)" border style="width: 100%">

Finally, you can use calculated properties to encapsulate the paging method. The final page code:

<template>
  <div class="studentList">
    <!--slice((当前页数-1)*每页条数,当前页数*当前条数)-->
    <el-table :data="compData" border style="width: 100%">
      <el-table-column prop="name" label="姓名" align="center">
      </el-table-column>
      <el-table-column prop="age" label="年龄" align="center">
      </el-table-column>
      <el-table-column prop="sex_text" label="性别" align="center">
      </el-table-column>
      <el-table-column prop="classNum" label="班级" align="center">
      </el-table-column>
      <el-table-column prop="number" label="学号" align="center">
      </el-table-column>
      <el-table-column prop="address" label="地址" align="center">
      </el-table-column>
      <el-table-column prop="status_text" label="状态" align="center">
      </el-table-column>
      <el-table-column label="操作">
        <template>
          <el-button
            type="danger"
            size="mini"
            icon="el-icon-delete"
          ></el-button>
        </template>
      </el-table-column>
    </el-table>
    <!--分页组件-->
    <div class="block">
      <span class="demonstration">完整功能</span>
      <el-pagination
        @size-change="handleSizeChange"
        @current-change="handleCurrentChange"
        :current-page="currentPage"
        :page-sizes="[5,10,15,20]"
        :page-size="pageSize"
        layout="total, sizes, prev, pager, next, jumper"
        :total="total"
      >
      </el-pagination>
    </div>
  </div>
</template>
<script>
import { students } from "@/api/api.js";
export default {
  data() {
    return {
      tableData: [],
      currentPage:1, //当前页数
      pageSize:10, //每页显示条数
      total:0 //总条数
    };
  },
  methods: {
    getData(params) {
      students(params).then((res) => {
        if (res.data.code === 200) {
          this.tableData = res.data.data;
          this.total=res.data.total;
          this.tableData.forEach((item) => {
            item.sex === 1 ? (item.sex_text = "男") : (item.sex_text = "女");
            item.status === 1
              ? (item.status_text = "已入学")
              : (item.status_text = "未入学");
          });
        }
      });
    },
    //分页方法
    handleSizeChange(val) {
      this.pageSize=val;
      this.currentPage=1;
    },
    handleCurrentChange(val) {
      this,this.currentPage=val;
    },
  },
  created() {
    this.getData();
  },
  computed:{
    compData(){
      return this.tableData.slice((this.currentPage-1)*this.pageSize,this.currentPage*this.pageSize)
    }
  }
};
</script>

<style lang="less">
.studentList{
  .el-pagination{
    text-align: left;
    margin-top: 20px;
  }
}
</style>

Effect:

4.Delete

To delete, just click the delete button and pass the ID of the row data to be deleted to the backend. The key here is how to get the data of the clicked row, using slot-scope. First write a deletion logic, which does not delete, but prints the data of this row.

<el-table-column label="操作">
        <template slot-scope="scope">
          <el-button
            @click="del(scope.row)"
            type="danger"
            size="mini"
            icon="el-icon-delete"
          ></el-button>
        </template>
      </el-table-column>

//删除
    del(row){
      console.log(row);
    }

Click Delete and you can see the data of this row printed out:

Now that you have obtained the data, you can delete it with real force.

Before the actual deletion, we still keep the code style clean and encapsulate the API for deleting students in api.js as before:

export function studentDel(id){
    return service({
        method: 'delete',
        url:`/student/${id}`
    })
}

After encapsulation, call it in studentList:

import{studentDel} from "@/api/api.js"
del(row){
      studentDel(row.id).then(res=>{
        if(res.data.code===200){
          this.$message({message:'删除数据成功',type:'success'})
          //删除后要刷新数据
          this.getDate()
        }
      });
    }

Now that the delete function has been written, you can try to see if it can be used normally.

5.Query

The old rule is to first go to elementUI and find a search box. There is no direct search box. Use this inline form to modify it:

In fact, the specific query method and reset method do not need to re-encapsulate the API. You can directly call the getData method and implement it by passing different parameters. Here is the final code of the entire component page:

<template>
  <div class="studentList">
    <!--查询表单-->
    <el-form :inline="true" :model="formInline" class="demo-form-inline" size="mini">
      <el-form-item label="姓名">
        <el-input v-model="formInline.name" placeholder="请输入姓名"></el-input>
      </el-form-item>
      <el-form-item label="活动区域">
        <el-button type="primary" @click="reset">查询</el-button>
      </el-form-item>
      <el-form-item>
        <el-button type="primary" @click="find">查询</el-button>
      </el-form-item>
    </el-form>
    <el-table :data="compData" border style="width: 100%">
      <el-table-column prop="name" label="姓名" align="center">
      </el-table-column>
      <el-table-column prop="age" label="年龄" align="center">
      </el-table-column>
      <el-table-column prop="sex_text" label="性别" align="center">
      </el-table-column>
      <el-table-column prop="classNum" label="班级" align="center">
      </el-table-column>
      <el-table-column prop="number" label="学号" align="center">
      </el-table-column>
      <el-table-column prop="address" label="地址" align="center">
      </el-table-column>
      <el-table-column prop="status_text" label="状态" align="center">
      </el-table-column>
      <el-table-column label="操作">
        <template slot-scope="scope">
          <el-button
            @click="del(scope.row)"
            type="danger"
            size="mini"
            icon="el-icon-delete"
          ></el-button>
        </template>
      </el-table-column>
    </el-table>
    <!--分页组件-->
    <div class="block">
      <span class="demonstration">完整功能</span>
      <el-pagination
        @size-change="handleSizeChange"
        @current-change="handleCurrentChange"
        :current-page="currentPage"
        :page-sizes="[5, 10, 15, 20]"
        :page-size="pageSize"
        layout="total, sizes, prev, pager, next, jumper"
        :total="total"
      >
      </el-pagination>
    </div>
  </div>
</template>
<script>
import { students } from "@/api/api.js";
import { studentDel } from "@/api/api.js";
export default {
  data() {
    return {
      tableData: [],
      currentPage: 1, //当前页数
      pageSize: 10, //每页显示条数
      total: 0, //总条数
      formInline:{
        name:''
      }
    };
  },
  methods: {
    getData(params) {
      students(params).then((res) => {
        if (res.data.code === 200) {
          this.tableData = res.data.data;
          this.total = res.data.total;
          this.tableData.forEach((item) => {
            item.sex === 1 ? (item.sex_text = "男") : (item.sex_text = "女");
            item.status === 1
              ? (item.status_text = "已入学")
              : (item.status_text = "未入学");
          });
        }
      });
    },
    //分页方法
    handleSizeChange(val) {
      this.pageSize = val;
      this.currentPage = 1;
    },
    handleCurrentChange(val) {
      this, (this.currentPage = val);
    },
    //删除
    del(row) {
      studentDel(row.id).then((res) => {
        if (res.data.code === 200) {
          this.$message({ message: "删除数据成功", type: "success" });
          this.getData();
        }
      });
    },
    //查询
    find(){
        this.getData(this.formInline.name);
    },
    //重置
    reset(){
        this.getData();
    }
  },
  created() {
    this.getData();
  },
  computed: {
    compData() {
      return this.tableData.slice(
        (this.currentPage - 1) * this.pageSize,
        this.currentPage * this.pageSize
      );
    },
  },
};
</script>

<style lang="less">
.studentList {
  .el-form-inline .el-form-item{
    text-align: left;
  }
  .el-pagination {
    text-align: left;
    margin-top: 20px;
  }
}
</style>

At this point, the entire student list component has been written.