AI 助理
备案控制台
开发者社区 开发与运维 文章 正文

【vue实战项目】通用管理系统：学生列表

2024-06-12 111
版权
版权声明：
本文内容由阿里云实名注册用户自发贡献，版权归原作者所有，阿里云开发者社区不拥有其著作权，亦不承担相应法律责任。具体规则请查看《 阿里云开发者社区用户服务协议》和 《阿里云开发者社区知识产权保护指引》。如果您发现本社区中有涉嫌抄袭的内容，填写 侵权投诉表单进行举报，一经查实，本社区将立刻删除涉嫌侵权内容。
简介： 【vue实战项目】通用管理系统：学生列表

1.概述

本文实现的是学生管理界面里面的学生列表组件，该组件内包含对学生信息的查询、删除、以及对数据的分页。没有录入功能，录入功能在接下来后续的信息管理组件中。

首先来看一下学生列表组件的最终页面效果：

2.列表

学生列表studentList组件是个表格，表格在elementUI上面去找一个即可，然后调整一下.

代码：

<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>

效果：

封装api：

根据之前的编码规范，这里我们依然将获取数据的方法封装到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
    })
}

在sutudentList中调用api获取数据：

<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>

可以看到获取到了所有数据：

既然能获取到数据，接下来绑定数据即可：

<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>

最终效果：

这里有个小地方需要注意，就是关于数据转换。后端传回来的数据中状态和类型字段都是用数字表示的。需要在前端做对应转换：

可以这样做：

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();
    }
  }

但是上面这样做会有一个问题：

因为这里把值取成了中文，再传给后端的时候就会是中文，后端还要做一次转换，搞得很麻烦。

巧妙一点，再加一个字段来存中文就是。其它状态字段类似处理。

<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.分页

elementUI提供了完整的分页组件。还是老规矩去官网上看一款，拿来就用。

把分页组件放到studentList组件中去：

<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>

接下来就是分页中关键的步骤了，有关分页逻辑的编写。

首先是分页的总页数：

操作组件自带的方法即可控制切换pageSize的时候，分页插件自动变换总页数。这两个方法见名知意。

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

控制数据条数的显示：

el-table的:data是用来给列表组件绑定数据的，我们就是通过所绑定的这个数组来控制数据的显示的。js里面调用数组的slice(index,size)可以对数组进行切片，这里我们就用这个方法来实现。

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


最后可以用计算属性来封装一下分页的方法，最后的页面代码：

<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>

效果：

4.删除

删除的话无非就是点击删除按钮，将要删除的行数据的id传给后端。这里的关键是怎么获取到所点击的行的数据，用slot-scope。先写一个删除逻辑，里面不做删除，而是打印这一行的数据。

<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);
    }

点击删除，可以看到打印出来了该行的数据：

既然都拿到数据了，就真刀真枪的删除即可。

在真刀真枪的删除之前，我们还是依然保持代码风格的整洁，按照前面一样，在api.js里封装一下删除学生的api：

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

封装好后去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()
        }
      });
    }

至此删除功能写完了，可以试试是不是能正常使用。

5.查询

老规矩先去elementUI上面找一个搜索框，没有直接的搜索框，用这个行内表单来改造一下：

其实具体的查询方法和重置方法都不需要重新封装api，可以直接调用getData方法，通过传参的不同来实现，这里直接给出整个组件页面最后的代码：

<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>

至此，整个学生列表组件写完了。

文章标签：
JavaScript
API
前端开发
关键词：
vue项目VUE.js
项目VUE.js
vue实战VUE.js
vue项目系统VUE.js
项目系统VUE.js
_BugMan
目录
相关文章
心疼你的一切
|
16天前
|
移动开发 JavaScript API
Vue Router 核心原理
Vue Router 是 Vue.js 的官方路由管理器，用于实现单页面应用（SPA）的路由功能。其核心原理包括路由配置、监听浏览器事件和组件渲染等。通过定义路径与组件的映射关系，Vue Router 将用户访问的路径与对应的组件关联，支持哈希和历史模式监听 URL 变化，确保页面导航时正确渲染组件。
心疼你的一切
37 9
心疼你的一切
|
16天前
|
JavaScript 前端开发 开发者
Vue中的class和style绑定
在 Vue 中，class 和 style 绑定是基于数据驱动视图的强大功能。通过 class 绑定，可以动态更新元素的 class 属性，支持对象和数组语法，适用于普通元素和组件。style 绑定则允许以对象或数组形式动态设置内联样式，Vue 会根据数据变化自动更新 DOM。
心疼你的一切
32 3
心疼你的一切
|
16天前
|
JavaScript 前端开发 数据安全/隐私保护
Vue Router 简介
Vue Router 是 Vue.js 官方的路由管理库，用于构建单页面应用（SPA）。它将不同页面映射到对应组件，支持嵌套路由、路由参数和导航守卫等功能，简化复杂前端应用的开发。主要特性包括路由映射、嵌套路由、路由参数、导航守卫和路由懒加载，提升性能和开发效率。安装命令：`npm install vue-router`。
心疼你的一切
30 1
小宋1021
|
2月前
|
JavaScript
vue使用iconfont图标
vue使用iconfont图标
小宋1021
161 1
小华同学ai
|
20天前
|
监控 JavaScript 前端开发
ry-vue-flowable-xg：震撼来袭！这款基于 Vue 和 Flowable 的企业级工程项目管理项目，你绝不能错过
基于 Vue 和 Flowable 的企业级工程项目管理平台，免费开源且高度定制化。它覆盖投标管理、进度控制、财务核算等全流程需求，提供流程设计、部署、监控和任务管理等功能，适用于企业办公、生产制造、金融服务等多个场景，助力企业提升效率与竞争力。
小华同学ai
77 12
蓝易云
|
1月前
|
JavaScript 安全 API
iframe嵌入页面实现免登录思路（以vue为例）
通过上述步骤，可以在Vue.js项目中通过 `iframe`实现不同应用间的免登录功能。利用Token传递和消息传递机制，可以确保安全、高效地在主应用和子应用间共享登录状态。这种方法在实际项目中具有广泛的应用前景，能够显著提升用户体验。
蓝易云
102 8
潜意识Java
|
1月前
|
存储 设计模式 JavaScript
Vue 组件化开发：构建高质量应用的核心
本文深入探讨了 Vue.js 组件化开发的核心概念与最佳实践。
潜意识Java
85 1
大树营养快线
|
3月前
|
JavaScript 前端开发 开发者
vue 数据驱动视图
总之，Vue 数据驱动视图是一种先进的理念和技术，它为前端开发带来了巨大的便利和优势。通过理解和应用这一特性，开发者能够构建出更加动态、高效、用户体验良好的前端应用。在不断发展的前端领域中，数据驱动视图将继续发挥重要作用，推动着应用界面的不断创新和进化。
大树营养快线
116 58
阿里巴巴叫我来巡山
|
2月前
|
JavaScript 关系型数据库 MySQL
基于VUE的校园二手交易平台系统设计与实现毕业设计论文模板
基于Vue的校园二手交易平台是一款专为校园用户设计的在线交易系统，提供简洁高效、安全可靠的二手商品买卖环境。平台利用Vue框架的响应式数据绑定和组件化特性，实现用户友好的界面，方便商品浏览、发布与管理。该系统采用Node.js、MySQL及B/S架构，确保稳定性和多功能模块设计，涵盖管理员和用户功能模块，促进物品循环使用，降低开销，提升环保意识，助力绿色校园文化建设。
阿里巴巴叫我来巡山
299 17
雨溪-yuxi
|
3月前
|
JavaScript 前端开发 开发者
vue学习第一章
欢迎来到我的博客！我是瑞雨溪，一名热爱前端的大一学生，专注于JavaScript与Vue，正向全栈进发。博客分享Vue学习心得、命令式与声明式编程对比、列表展示及计数器案例等。关注我，持续更新中！🎉🎉🎉
雨溪-yuxi
70 1
vue学习第一章

热门文章

最新文章

  • 1
    【03】Java+若依+vue.js技术栈实现钱包积分管理系统项目-若依框架搭建-服务端-后台管理-整体搭建-优雅草卓伊凡商业项目实战
  • 2
    【02】Java+若依+vue.js技术栈实现钱包积分管理系统项目-商业级电玩城积分系统商业项目实战-ui设计图figmaUI设计准备-figma汉化插件-mysql数据库设计-优雅草卓伊凡商业项目实战
  • 3
    ry-vue-flowable-xg：震撼来袭！这款基于 Vue 和 Flowable 的企业级工程项目管理项目，你绝不能错过
  • 4
    【01】Java+若依+vue.js技术栈实现钱包积分管理系统项目-商业级电玩城积分系统商业项目实战-需求改为思维导图-设计数据库-确定基础架构和设计-优雅草卓伊凡商业项目实战
  • 5
    【04】Java+若依+vue.js技术栈实现钱包积分管理系统项目-若依框架二次开发准备工作-以及建立初步后端目录菜单列-优雅草卓伊凡商业项目实战
  • 6
    Vue Router 核心原理
  • 7
    Vue中的class和style绑定
  • 8
    Vue Router 简介
  • 9
    VS Code书写vue项目配置 eslint+prettier 统一代码风格
  • 10
    Vue中 引入使用 vue-esign 实现手写电子签名
  • 1
    Vue中的class和style绑定
    32
  • 2
    Vue Router 核心原理
    37
  • 3
    Vue Router 简介
    30
  • 4
    【04】Java+若依+vue.js技术栈实现钱包积分管理系统项目-若依框架二次开发准备工作-以及建立初步后端目录菜单列-优雅草卓伊凡商业项目实战
    61
  • 5
    【03】Java+若依+vue.js技术栈实现钱包积分管理系统项目-若依框架搭建-服务端-后台管理-整体搭建-优雅草卓伊凡商业项目实战
    80
  • 6
    【02】Java+若依+vue.js技术栈实现钱包积分管理系统项目-商业级电玩城积分系统商业项目实战-ui设计图figmaUI设计准备-figma汉化插件-mysql数据库设计-优雅草卓伊凡商业项目实战
    77
  • 7
    ry-vue-flowable-xg：震撼来袭！这款基于 Vue 和 Flowable 的企业级工程项目管理项目，你绝不能错过
    77
  • 8
    【01】Java+若依+vue.js技术栈实现钱包积分管理系统项目-商业级电玩城积分系统商业项目实战-需求改为思维导图-设计数据库-确定基础架构和设计-优雅草卓伊凡商业项目实战
    67
  • 9
    iframe嵌入页面实现免登录思路（以vue为例）
    102
  • 10
    Vue 组件化开发：构建高质量应用的核心
    85

    • 相关课程

    更多
  • Spring Boot+Vue.js+FastDFS实现分布式图片服务器
  • Vue.js 入门与实战
  • Vue.js完全自学手册图文教程
  • 前端开发框架Bootstrap使用教程

    • 相关电子书

    更多
  • Vue.js 在前端服务化上的探索与实践
  • 利用编译将 Vue 组件转成 React 组件
  • Vue.js在前端服务化上的实践与探索

    • 相关实验场景

    更多
  • 前端开发基础3：CSS3常见显示属性
  • 前端开发基础6：Node.js和LESS预编译工具
  • 前端开发基础2：VS Code和Edge的联动开发
  • 前端开发基础1：前端开发环境的安装和配置
    • 下一篇
    阿里云oss简介和如何对接使用