Vue实现学生管理功能

 更新时间:2021年06月24日 14:53:07   作者:影修  
这篇文章主要为大家详细介绍了Vue实现学生管理功能,文中示例代码介绍的非常详细,具有一定的参考价值,感兴趣的小伙伴们可以参考一下

本文实例为大家分享了Vue实现学生管理的具体代码,供大家参考,具体内容如下

难点

  • 学生新建与学生编辑功能都用的一个组件,如何对其进行判断校验。
  • 对用户输入进行校验,非空判断。
  • 向服务器发送JSON数据,后端对JSON数据的转换。
  • 三层架构中,各层功能划分
  • 使用注解对学生数据进行操作

整体难度一般,但是小点儿比较多,综合性强。
例如我用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();

以上就是本文的全部内容,希望对大家的学习有所帮助,也希望大家多多支持脚本之家。

相关文章

  • elementUI如何动态给el-tree添加子节点数据children详解

    elementUI如何动态给el-tree添加子节点数据children详解

    element-ui 目前基本成为前端pc网页端标准ui框架,下面这篇文章主要给大家介绍了关于elementUI如何动态给el-tree添加子节点数据children的相关资料,文中通过实例代码介绍的非常详细,需要的朋友可以参考下
    2022-11-11
  • Vuex 快速入门(简单易懂)

    Vuex 快速入门(简单易懂)

    这篇文章主要介绍了Vuex 快速入门(简单易懂),小编觉得挺不错的,现在分享给大家,也给大家做个参考。一起跟随小编过来看看吧
    2018-09-09
  • vue单页缓存存在的问题及解决方案(小结)

    vue单页缓存存在的问题及解决方案(小结)

    这篇文章主要介绍了vue单页缓存存在的问题及解决方案(小结),小编觉得挺不错的,现在分享给大家,也给大家做个参考。一起跟随小编过来看看吧
    2018-09-09
  • Vue非单文件组件使用详解

    Vue非单文件组件使用详解

    Vue单文件组件通常使用.vue文件扩展名,下面这篇文章主要给大家介绍了关于Vue非单文件组件使用的相关资料,文中通过图文以及实例代码介绍的非常详细,需要的朋友可以参考下
    2023-06-06
  • Vue实现根据hash高亮选项卡

    Vue实现根据hash高亮选项卡

    这篇文章主要为大家详细介绍了Vue实现根据hash高亮选项卡,具有一定的参考价值,感兴趣的小伙伴们可以参考一下
    2019-05-05
  • vue3+ts+pinia+vant项目搭建详细步骤

    vue3+ts+pinia+vant项目搭建详细步骤

    最近公司想重构一个项目,这里给大家总结下,这篇文章主要给大家介绍了关于vue3+ts+pinia+vant项目搭建的详细步骤,文中通过图文及代码介绍的非常详细,需要的朋友可以参考下
    2024-09-09
  • 使用Vue3和p5.js实现交互式图像动画

    使用Vue3和p5.js实现交互式图像动画

    这篇文章主要介绍了如何用Vue3和p5.js打造一个交互式图像动画,文中给出了详细的代码示例,本代码适用于需要在网页中实现图像滑动效果的场景,例如图片浏览、相册展示等,感兴趣的小伙伴跟着小编一起来看看吧
    2024-06-06
  • vue整合项目中百度API示例详解

    vue整合项目中百度API示例详解

    这篇文章主要为大家介绍了vue整合项目中百度API示例详解,有需要的朋友可以借鉴参考下,希望能够有所帮助,祝大家多多进步,早日升职加薪
    2022-09-09
  • vue2 mint-ui loadmore实现下拉刷新,上拉更多功能

    vue2 mint-ui loadmore实现下拉刷新,上拉更多功能

    这篇文章主要介绍了vue2 mint-ui loadmore实现下拉刷新,上拉更多功能,需要的朋友可以参考下
    2018-03-03
  • VUE写一个简单的表格实例

    VUE写一个简单的表格实例

    在本篇文章里小编给大家整理的是关于VUE中表格的写法实例以及相关知识点内容,需要的朋友们可以参考下。
    2019-08-08

最新评论