本文实例为大家分享了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();

免责声明：本站发布的内容（图片、视频和文字）以原创、转载和分享为主，文章观点不代表本网站立场，如果涉及侵权请联系站长邮箱：mmqy2019@163.com进行举报，并提供相关证据，查实之后，将立刻删除涉嫌侵权内容。

猜你喜欢

• axios的安装、配置和基本使用是什么样的

  目录一、安装axios二、配置axios，添加拦截器三、使用axios发送请求附：Vue3 中全局引入 axios总结axios中文网站：axios-http.com/zh/一、安装axiosnpm install axios --save二、配置axios，添加拦截器在src目录下新建一个request文件夹，在里面

• interface接口如何定义，类实现接口怎样做

  在面向对象语言中，接口是一个很重要的概念，它是对行为的抽象。接口也叫 interface 。在 js 中没有接口这个概念，它是新增的。该如何定义呢？下面来一起学习吧

• 怎样避免JavaScript常见错误？这些坑你踩过吗？

  对于JavaScript新手来说，常常容易犯一些比较低级错误，因此这篇文章小编就主要给大家分享怎样避免那些JavaScript常见错误，大家可以看看，有没有你曾经踩过的坑？

• javascript的new关键字用法是什么?怎样实现一个new？

  javascript的new关键字用法是什么？关于new关键字，大家应该都比较熟悉，这篇文章主要给大家分享构造函数、new操作符和如何实现一个new，小编觉得挺实用的，感兴趣的朋友就继续往下看吧。

• vue项目中封装axios方法是什么？

  本文给大家分享的是关于vue项目中封装axios的内容，对于实现封装axios下面有详细的介绍及示例代码，需要的朋友可以参考，接下来就跟随小编来学习一下吧。