Vue高级使用,综合案例学生管理系统实现

课堂讲义

1、Vue 高级使用

1.1、自定义组件

  • 学完了 Element 组件后,我们会发现组件其实就是自定义的标签。例如<el-button>就是对<button>的封装

  • 本质上,组件是带有一个名字且可复用的 Vue 实例,我们完全可以自己定义

  • 定义格式

    Vue.component(组件名称, { props:组件的属性, data: 组件的数据函数, template: 组件解析的标签模板})
  • 代码实现

    <!DOCTYPE html><html lang="en"><head>    <meta charset="UTF-8">    <meta name="viewport" content="width=device-width, initial-scale=1.0">    <title>自定义组件</title>    <script src="vue/vue.js"></script></head><body>    <div id="div">        <my-button></my-button>    </div></body><script>    Vue.component("my-button",{        // 属性        props:["style"],        // 数据函数        data: function(){            return{                msg:"我的按钮"            }        },        //解析标签模板        template:"<button style='color:red'>{{msg}}</button>"    });​    new Vue({        el:"#div"    });</script></html>

1.2、Vue的生命周期

  • 生命周期

  • 生命周期的八个阶段

  • 代码实现

    <!DOCTYPE html><html lang="en"><head>    <meta charset="UTF-8">    <meta name="viewport" content="width=device-width, initial-scale=1.0">    <title>生命周期</title>    <script src="vue/vue.js"></script></head><body>    <div id="app">        {{message}}    </div></body><script>    let vm = new Vue({                el: '#app',                data: {                    message: 'Vue的生命周期'                },                beforeCreate: function() {                    console.group('------beforeCreate创建前状态------');                    console.log("%c%s", "color:red", "el     : " + this.$el); //undefined                    console.log("%c%s", "color:red", "data   : " + this.$data); //undefined                     console.log("%c%s", "color:red", "message: " + this.message);//undefined                },                created: function() {                    console.group('------created创建完毕状态------');                    console.log("%c%s", "color:red", "el     : " + this.$el); //undefined                    console.log("%c%s", "color:red", "data   : " + this.$data); //已被初始化                     console.log("%c%s", "color:red", "message: " + this.message); //已被初始化                },                beforeMount: function() {                    console.group('------beforeMount挂载前状态------');                    console.log("%c%s", "color:red", "el     : " + (this.$el)); //已被初始化                    console.log(this.$el);                    console.log("%c%s", "color:red", "data   : " + this.$data); //已被初始化                      console.log("%c%s", "color:red", "message: " + this.message); //已被初始化                  },                mounted: function() {                    console.group('------mounted 挂载结束状态------');                    console.log("%c%s", "color:red", "el     : " + this.$el); //已被初始化                    console.log(this.$el);                    console.log("%c%s", "color:red", "data   : " + this.$data); //已被初始化                    console.log("%c%s", "color:red", "message: " + this.message); //已被初始化                 },                beforeUpdate: function() {                    console.group('beforeUpdate 更新前状态===============》');                    let dom = document.getElementById("app").innerHTML;                    console.log(dom);                    console.log("%c%s", "color:red", "el     : " + this.$el);                    console.log(this.$el);                    console.log("%c%s", "color:red", "data   : " + this.$data);                    console.log("%c%s", "color:red", "message: " + this.message);                },                updated: function() {                    console.group('updated 更新完成状态===============》');                    let dom = document.getElementById("app").innerHTML;console.log(dom);console.log("%c%s", "color:red", "el     : " + this.$el);console.log(this.$el);console.log("%c%s", "color:red", "data   : " + this.$data);console.log("%c%s", "color:red", "message: " + this.message);    },beforeDestroy: function() {console.group('beforeDestroy 销毁前状态===============》');console.log("%c%s", "color:red", "el     : " + this.$el);console.log(this.$el);console.log("%c%s", "color:red", "data   : " + this.$data);console.log("%c%s", "color:red", "message: " + this.message);    },destroyed: function() {console.group('destroyed 销毁完成状态===============》');console.log("%c%s", "color:red", "el     : " + this.$el);console.log(this.$el);console.log("%c%s", "color:red", "data   : " + this.$data);console.log("%c%s", "color:red", "message: " + this.message);    }    });​
    
    // 销毁Vue对象//vm.$destroy();//vm.message = "hehe";  // 销毁后 Vue 实例会解绑所有内容​// 设置data中message数据值vm.message = "good...";</script></html>

1.3、Vue异步操作***

  • 在Vue中发送异步请求,本质上还是AJAX。我们可以使用axios这个插件来简化操作!

  • 使用步骤 1.引入axios核心js文件。 2.调用axios对象的方法来发起异步请求。 3.调用axios对象的方法来处理响应的数据。

  • axios常用方法

  • 代码实现

    • html代码

    <!DOCTYPE html><html lang="en"><head>    <meta charset="UTF-8">    <title>异步操作</title>    <script src="js/vue.js"></script>    <script src="js/axios-0.18.0.js"></script></head><body>    <div id="div">        {{name}}        <button @click="send()">发起请求</button>    </div></body><script>    new Vue({        el:"#div",        data:{            name:"张三"        },        methods:{            send(){                // GET方式请求                // axios.get("testServlet?name=" + this.name)                //     .then(resp => {                //         alert(resp.data);                //     })                //     .catch(error => {                //         alert(error);                //     })​                // POST方式请求                axios.post("testServlet","name="+this.name)                    .then(resp => {                        alert(resp.data);                    })                    .catch(error => {                        alert(error);                    })            }        }    });</script></html>
    • java代码

    package com.itheima;​import javax.servlet.ServletException;import javax.servlet.annotation.WebServlet;import javax.servlet.http.HttpServlet;import javax.servlet.http.HttpServletRequest;import javax.servlet.http.HttpServletResponse;import java.io.IOException;@WebServlet("/testServlet")public class TestServlet extends HttpServlet {    @Override    protected void doGet(HttpServletRequest req, HttpServletResponse resp) throws ServletException, IOException {        //设置请求和响应的编码        req.setCharacterEncoding("UTF-8");        resp.setContentType("text/html;charset=UTF-8");​        //获取请求参数        String name = req.getParameter("name");        System.out.println(name);​        //响应客户端        resp.getWriter().write("请求成功");    }​    @Override    protected void doPost(HttpServletRequest req, HttpServletResponse resp) throws ServletException, IOException {        this.doGet(req,resp);    }}

1.4、小结

  • 自定义组件:本质上,组件是带有一个名字且可复用的 Vue 实例,我们可以自己来定义。

    Vue.component(组件名称, { props:组件的属性, data: 组件的数据函数, template: 组件解析的标签模板})
  • 生命周期:核心八个阶段 beforeCreate:创建前 created:创建后 beforeMount:载入前 mounted:载入后 beforeUpdate:更新前 updated:更新后 beforeDestroy:销毁前 destroyed:销毁后

  • 异步操作:通过 axios 插件来实现。

2、综合案例 学生管理系统***

2.1、效果环境的介绍

2.2、登录功能的实现

  • 环境搭建

    • 从当天的资料中解压《学生管理系统原始项目》,并导入。

  • 代码实现

    • html代码

      onSubmit(formName) {                // 为表单绑定验证功能                this.$refs[formName].validate((valid) => {                    if (valid) {                        //请求服务器完成登录功能                        axios.post("userServlet","username=" + this.form.username + "&password=" + this.form.password)                            .then(resp => {                                if(resp.data == true) {                                    //登录成功,跳转到首页                                    location.href = "index.html";                                }else {                                    //登录失败,跳转到登录页面                                    alert("登录失败,请检查用户名和密码");                                    location.href = "login.html";                                }                            })                    } else {                        return false;                    }                });            }
    • java代码

      • UserServlet.java

      package com.itheima.controller;​import com.itheima.bean.User;import com.itheima.service.UserService;import com.itheima.service.impl.UserServiceImpl;​import javax.servlet.ServletException;import javax.servlet.annotation.WebServlet;import javax.servlet.http.HttpServlet;import javax.servlet.http.HttpServletRequest;import javax.servlet.http.HttpServletResponse;import java.io.IOException;import java.util.List;​@WebServlet("/userServlet")public class UserServlet extends HttpServlet {    private UserService service = new UserServiceImpl();    @Override    protected void doGet(HttpServletRequest req, HttpServletResponse resp) throws ServletException, IOException {        //设置请求和响应编码        req.setCharacterEncoding("UTF-8");        resp.setContentType("text/html;charset=UTF-8");​        //1.获取请求参数        String username = req.getParameter("username");        String password = req.getParameter("password");​        //2.封装User对象        User user = new User(username,password);​        //3.调用业务层的登录方法        List<User> list = service.login(user);​        //4.判断是否查询出结果        if(list.size() != 0) {            //将用户名存入会话域当中            req.getSession().setAttribute("username",username);            //响应给客户端true            resp.getWriter().write("true");        }else {            //响应给客户端false            resp.getWriter().write("false");        }    }​    @Override    protected void doPost(HttpServletRequest req, HttpServletResponse resp) throws ServletException, IOException {        doGet(req,resp);    }}
      • UserService.java

      package com.itheima.service;​import com.itheima.bean.User;​import java.util.List;/*    业务层约束接口 */public interface UserService {    /*        登录方法     */    public abstract List<User> login(User user);}
      • UserServiceImpl.java

      package com.itheima.service.impl;​import com.itheima.bean.User;import com.itheima.mapper.UserMapper;import com.itheima.service.UserService;import org.apache.ibatis.io.Resources;import org.apache.ibatis.session.SqlSession;import org.apache.ibatis.session.SqlSessionFactory;import org.apache.ibatis.session.SqlSessionFactoryBuilder;​import java.io.IOException;import java.io.InputStream;import java.util.List;​public class UserServiceImpl implements UserService {    @Override    public List<User> login(User user) {        InputStream is = null;        SqlSession sqlSession = null;        List<User> list = null;        try{            //1.加载核心配置文件            is = Resources.getResourceAsStream("MyBatisConfig.xml");​            //2.获取SqlSession工厂对象            SqlSessionFactory sqlSessionFactory = new SqlSessionFactoryBuilder().build(is);​            //3.通过SqlSession工厂对象获取SqlSession对象            sqlSession = sqlSessionFactory.openSession(true);​            //4.获取UserMapper接口的实现类对象            UserMapper mapper = sqlSession.getMapper(UserMapper.class);​            //5.调用实现类对象的登录方法            list = mapper.login(user);​        }catch (Exception e) {            e.printStackTrace();        } finally {            //6.释放资源            if(sqlSession != null) {                sqlSession.close();            }            if(is != null) {                try {                    is.close();                } catch (IOException e) {                    e.printStackTrace();                }            }        }        //7.返回结果到控制层        return list;    }}
      • UserMapper.java

      package com.itheima.mapper;​import com.itheima.bean.User;import org.apache.ibatis.annotations.Select;​import java.util.List;​public interface UserMapper {    /*        登录方法     */    @Select("SELECT * FROM user WHERE username=#{username} AND password=#{password}")    public abstract List<User> login(User user);}

2.3、分页查询功能的实现

  • 代码实现

    • html代码

      <script>    new Vue({        el:"#div",        data:{            dialogTableVisible4add: false,  //添加窗口显示状态            dialogTableVisible4edit: false, //编辑窗口显示状态            formData:{},//添加表单的数据            editFormData: {},//编辑表单的数据            tableData:[],//表格数据            pagination: {                currentPage: 1, //当前页                pageSize: 5,    //每页显示条数                total: 0        //总条数            },            rules: {                number: [                    {required: true, message: '请输入学号', trigger: 'blur'},                    {min: 2, max: 10, message: '长度在 2 到 10 个字符', trigger: 'blur'}                ],                name: [                    {required: true, message: '请输入姓名', trigger: 'blur'},                    {min: 2, max: 10, message: '长度在 2 到 10 个字符', trigger: 'blur'}                ],                birthday: [                    {required: true, message: '请选择日期', trigger: 'change'}                ],                address: [                    {required: true, message: '请输入地址', trigger: 'blur'},                    {min: 2, max: 200, message: '长度在 2 到 200 个字符', trigger: 'blur'}                ],            }        },        methods:{            //分页查询功能            selectByPage(){                axios.post("studentServlet","method=selectByPage&currentPage=" + this.pagination.currentPage + "&pageSize=" + this.pagination.pageSize)                    .then(resp => {                        //将查询出的数据赋值tableData                        this.tableData = resp.data.list;                        //设置分页参数                        //当前页                        this.pagination.currentPage = resp.data.pageNum;                        //总条数                        this.pagination.total = resp.data.total;                    })            },            //改变每页条数时执行的函数            handleSizeChange(pageSize) {                //修改分页查询的参数                this.pagination.pageSize = pageSize;                //重新执行查询                this.selectByPage();            },            //改变页码时执行的函数            handleCurrentChange(pageNum) {                //修改分页查询的参数                this.pagination.currentPage = pageNum;                //重新执行查询                this.selectByPage();            },            showAddStu() {                //弹出窗口                this.dialogTableVisible4add = true;            },            resetForm(addForm) {                //双向绑定,输入的数据都赋值给了formData, 清空formData数据                this.formData = {};                //清除表单的校验数据                this.$refs[addForm].resetFields();            },            showEditStu(row) {                //1. 弹出窗口                this.dialogTableVisible4edit = true;​                //2. 显示表单数据                this.editFormData = {                    number:row.number,                    name:row.name,                    birthday:row.birthday,                    address:row.address,                }            }           },        mounted(){            //调用分页查询功能            this.selectByPage();        }    });</script>
    • java代码

      • 1、创建StudentServlet.java

      package com.itheima.controller;​import com.fasterxml.jackson.databind.ObjectMapper;import com.github.pagehelper.Page;import com.github.pagehelper.PageInfo;import com.itheima.bean.Student;import com.itheima.service.StudentService;import com.itheima.service.impl.StudentServiceImpl;import org.apache.commons.beanutils.BeanUtils;import org.apache.commons.beanutils.ConvertUtils;import org.apache.commons.beanutils.Converter;​import javax.servlet.ServletException;import javax.servlet.annotation.WebServlet;import javax.servlet.http.HttpServlet;import javax.servlet.http.HttpServletRequest;import javax.servlet.http.HttpServletResponse;import java.io.IOException;import java.text.ParseException;import java.text.SimpleDateFormat;import java.util.Date;import java.util.Map;​@WebServlet("/studentServlet")public class StudentServlet extends HttpServlet {    private StudentService service = new StudentServiceImpl();    @Override    protected void doGet(HttpServletRequest req, HttpServletResponse resp) throws ServletException, IOException {        //设置请求和响应编码        req.setCharacterEncoding("UTF-8");        resp.setContentType("text/html;charset=UTF-8");​        //1.获取方法名        String method = req.getParameter("method");        if(method.equals("selectByPage")) {            //分页查询功能            selectByPage(req,resp);        }    }​    /*        分页查询功能     */    private void selectByPage(HttpServletRequest req, HttpServletResponse resp) {        //获取请求参数        String currentPage = req.getParameter("currentPage");        String pageSize = req.getParameter("pageSize");​        //调用业务层的查询方法        Page page = service.selectByPage(Integer.parseInt(currentPage), Integer.parseInt(pageSize));​        //封装PageInfo        PageInfo info = new PageInfo(page);​        //将info转成json,响应给客户端        try {            String json = new ObjectMapper().writeValueAsString(info);            resp.getWriter().write(json);        } catch (Exception e) {            e.printStackTrace();        }    }​    @Override    protected void doPost(HttpServletRequest req, HttpServletResponse resp) throws ServletException, IOException {        doGet(req,resp);    }}
      • 2、创建StudentService.java

      package com.itheima.service;​import com.github.pagehelper.Page;import com.itheima.bean.Student;​/*    学生业务层接口 */public interface StudentService {    /*        分页查询方法     */    public abstract Page selectByPage(Integer currentPage, Integer pageSize);}
      • 3、创建StudentServiceImpl.java

      package com.itheima.service.impl;​import com.github.pagehelper.Page;import com.github.pagehelper.PageHelper;import com.itheima.bean.Student;import com.itheima.mapper.StudentMapper;import com.itheima.service.StudentService;import org.apache.ibatis.io.Resources;import org.apache.ibatis.session.SqlSession;import org.apache.ibatis.session.SqlSessionFactory;import org.apache.ibatis.session.SqlSessionFactoryBuilder;​import java.io.IOException;import java.io.InputStream;​/*    学生业务层实现类 */public class StudentServiceImpl implements StudentService {​    /*        分页查询功能     */    @Override    public Page selectByPage(Integer currentPage, Integer pageSize) {        InputStream is = null;        SqlSession sqlSession = null;        Page page = null;        try{            //1.加载核心配置文件            is = Resources.getResourceAsStream("MyBatisConfig.xml");            //2.获取SqlSession工厂对象            SqlSessionFactory sqlSessionFactory = new SqlSessionFactoryBuilder().build(is);            //3.通过SqlSession工厂对象获取SqlSession对象            sqlSession = sqlSessionFactory.openSession(true);            //4.获取StudentMapper接口实现类对象            StudentMapper mapper = sqlSession.getMapper(StudentMapper.class);            //5.设置分页参数            page = PageHelper.startPage(currentPage,pageSize);            //6.调用实现类对象查询全部方法            mapper.selectAll();        } catch (Exception e) {            e.printStackTrace();        } finally {            //7.释放资源            if(sqlSession != null) {                sqlSession.close();            }            if(is != null) {                try {                    is.close();                } catch (IOException e) {                    e.printStackTrace();                }            }        }​        //8.返回结果到控制层        return page;    }}
      • 4、创建StudentMapper.java

      package com.itheima.mapper;​import com.itheima.bean.Student;import org.apache.ibatis.annotations.Delete;import org.apache.ibatis.annotations.Insert;import org.apache.ibatis.annotations.Select;import org.apache.ibatis.annotations.Update;​import java.util.List;​/*    学生持久层接口 */public interface StudentMapper {    /*        查询全部方法     */    @Select("SELECT * FROM student")    public abstract List<Student> selectAll();}​

2.4、添加功能的实现

  • 代码实现

    • html代码

      在stuList.html中增加“添加功能”代码

      //添加学生功能            addStu(){                let param = "method=addStu&number=" + this.formData.number + "&name=" + this.formData.name +                        "&birthday=" + this.formData.birthday + "&address=" + this.formData.address +                        "&currentPage=" + this.pagination.currentPage + "&pageSize=" + this.pagination.pageSize;                axios.post("studentServlet",param)                    .then(resp => {                        //将查询出的数据赋值tableData                        this.tableData = resp.data.list;                        //设置分页参数                        //当前页                        this.pagination.currentPage = resp.data.pageNum;                        //总条数                        this.pagination.total = resp.data.total;                    })                //关闭添加窗口                this.dialogTableVisible4add = false;            }
    • java代码

      • 1、在StudentServlet.java中增加“添加功能”代码-addStu

      /**1、直接复制会报错*2、需要将此行代码需要添加到“doGet”方法中*3、增加“addStu”方法名的判断    */else if(method.equals("addStu")) {            //添加数据功能            addStu(req,resp);     }==================================================================================/*        添加数据功能     */    private void addStu(HttpServletRequest req, HttpServletResponse resp) {        //获取请求参数        Map<String, String[]> map = req.getParameterMap();        String currentPage = req.getParameter("currentPage");        String pageSize = req.getParameter("pageSize");        //封装Student对象        Student stu = new Student();        //注册日期转换器方法        dateConvert();        try {            BeanUtils.populate(stu,map);        } catch (Exception e) {            e.printStackTrace();        }        //调用业务层的添加方法        service.addStu(stu);        //重定向到分页查询功能        try {            resp.sendRedirect(req.getContextPath() + "/studentServlet?method=selectByPage&currentPage=" + currentPage + "&pageSize=" + pageSize);        } catch (IOException e) {            e.printStackTrace();        }    }    /*        日期转换     */    private void dateConvert() {        ConvertUtils.register(new Converter() {            public Object convert(Class type, Object value) {                SimpleDateFormat simpleDateFormat = new SimpleDateFormat("yyyy-MM-dd");                try {                    return simpleDateFormat.parse(value.toString());                } catch (ParseException e) {                    e.printStackTrace();                }                return null;            }        }, Date.class);    }
      • 2、在StudentService.java中增加“添加功能”-addStu

      /*        添加数据方法     */    public abstract void addStu(Student stu);
      • 3、StudentServiceImpl.java中增加“添加功能”-addStu

      /*        添加数据方法     */    @Override    public void addStu(Student stu) {        InputStream is = null;        SqlSession sqlSession = null;        try{            //1.加载核心配置文件            is = Resources.getResourceAsStream("MyBatisConfig.xml");            //2.获取SqlSession工厂对象            SqlSessionFactory sqlSessionFactory = new SqlSessionFactoryBuilder().build(is);            //3.通过SqlSession工厂对象获取SqlSession对象            sqlSession = sqlSessionFactory.openSession(true);            //4.获取StudentMapper接口实现类对象            StudentMapper mapper = sqlSession.getMapper(StudentMapper.class);            //5.调用实现类对象添加方法            mapper.addStu(stu);        } catch (Exception e) {            e.printStackTrace();        } finally {            //6.释放资源            if(sqlSession != null) {                sqlSession.close();            }            if(is != null) {                try {                    is.close();                } catch (IOException e) {                    e.printStackTrace();                }            }        }    }
      • 4、StudentMapper.java中增加“添加功能”-addStu

      /*        添加数据方法     */    @Insert("INSERT INTO student VALUES (#{number},#{name},#{birthday},#{address})")    public abstract void addStu(Student stu);

2.5、修改功能的实现

  • 代码实现

    • html代码

      在stuList.html中增加“修改功能”代码

      //修改数据功能            updateStu() {                let param = "method=updateStu&number=" + this.editFormData.number + "&name=" + this.editFormData.name +                    "&birthday=" + this.editFormData.birthday + "&address=" + this.editFormData.address +                    "&currentPage=" + this.pagination.currentPage + "&pageSize=" + this.pagination.pageSize;                axios.post("studentServlet",param)                    .then(resp => {                        //将查询出的数据赋值tableData                        this.tableData = resp.data.list;                        //设置分页参数                        //当前页                        this.pagination.currentPage = resp.data.pageNum;                        //总条数                        this.pagination.total = resp.data.total;                    })                //关闭编辑窗口                this.dialogTableVisible4edit = false;            }
    • java代码

      • 1、在StudentServlet.java中增加“修改功能”-updateStu

      /*        修改数据功能     */    private void updateStu(HttpServletRequest req, HttpServletResponse resp) {        //获取请求参数        Map<String, String[]> map = req.getParameterMap();        String currentPage = req.getParameter("currentPage");        String pageSize = req.getParameter("pageSize");        //封装Student对象        Student stu = new Student();        //注册日期转换器方法        dateConvert();        try {            BeanUtils.populate(stu,map);        } catch (Exception e) {            e.printStackTrace();        }        //调用业务层的修改方法        service.updateStu(stu);        //重定向到分页查询功能        try {            resp.sendRedirect(req.getContextPath() + "/studentServlet?method=selectByPage&currentPage=" + currentPage + "&pageSize=" + pageSize);        } catch (IOException e) {            e.printStackTrace();        }    }
      • 2、在StudentService.java中增加“修改功能”-updateStu

      /*        修改数据方法     */    public abstract void updateStu(Student stu);
      • 3、StudentServiceImpl.java中增加“修改功能”-updateStu

      /**1、直接复制会报错*2、需要将此行代码需要添加到“doGet”方法中*3、增加“updateStu”方法名的判断    */else if(method.equals("updateStu")) {            //添加数据功能            updateStu(req,resp);     }==================================================================================/*        修改数据方法     */    @Override    public void updateStu(Student stu) {        InputStream is = null;        SqlSession sqlSession = null;        try{            //1.加载核心配置文件            is = Resources.getResourceAsStream("MyBatisConfig.xml");            //2.获取SqlSession工厂对象            SqlSessionFactory sqlSessionFactory = new SqlSessionFactoryBuilder().build(is);            //3.通过SqlSession工厂对象获取SqlSession对象            sqlSession = sqlSessionFactory.openSession(true);            //4.获取StudentMapper接口实现类对象            StudentMapper mapper = sqlSession.getMapper(StudentMapper.class);            //5.调用实现类对象修改方法            mapper.updateStu(stu);        } catch (Exception e) {            e.printStackTrace();        } finally {            //6.释放资源            if(sqlSession != null) {                sqlSession.close();            }            if(is != null) {                try {                    is.close();                } catch (IOException e) {                    e.printStackTrace();                }            }        }    }
      • 4、StudentMapper.java中增加“修改功能”-updateStu

      /*        修改数据方法     */    @Update("UPDATE student SET number=#{number},name=#{name},birthday=#{birthday},address=#{address} WHERE number=#{number}")    public abstract void updateStu(Student stu);

2.6、删除功能的实现

  • 代码实现

    • html代码

      在stuList.html中增加“删除功能”代码

      //删除数据功能            deleteStu(row) {                if(confirm("确定要删除" + row.number + "数据?")) {                    let param = "method=deleteStu&number=" + row.number +                        "&currentPage=" + this.pagination.currentPage + "&pageSize=" + this.pagination.pageSize;                    axios.post("studentServlet",param)                        .then(resp => {                            //将查询出的数据赋值tableData                            this.tableData = resp.data.list;                            //设置分页参数                            //当前页                            this.pagination.currentPage = resp.data.pageNum;                            //总条数                            this.pagination.total = resp.data.total;                        })                }            }
    • java代码

      • 1、在StudentServlet.java中增加“删除功能”-

      /*    *1、直接复制会报错    *2、需要将此行代码需要添加到“doGet”方法中    *3、增加“deleteStu”方法名的判断      */    else if(method.equals("deleteStu")) {            //添加数据功能            deleteStu(req,resp);     }  ==================================================================================​​/*        删除数据功能     */    private void deleteStu(HttpServletRequest req, HttpServletResponse resp) {        //获取请求参数        String number = req.getParameter("number");        String currentPage = req.getParameter("currentPage");        String pageSize = req.getParameter("pageSize");​        //调用业务层的删除方法        service.deleteStu(number);​        //重定向到分页查询功能        try {            resp.sendRedirect(req.getContextPath() + "/studentServlet?method=selectByPage&currentPage=" + currentPage + "&pageSize=" + pageSize);        } catch (IOException e) {            e.printStackTrace();        }    }
      • 2、在StudentService.java中增加“删除功能”-

      /*        删除数据方法     */    public abstract void deleteStu(String number);
      • 3、StudentServiceImpl.java中增加“删除功能”-

      /*        删除数据方法     */    @Override    public void deleteStu(String number) {        InputStream is = null;        SqlSession sqlSession = null;        try{            //1.加载核心配置文件            is = Resources.getResourceAsStream("MyBatisConfig.xml");            //2.获取SqlSession工厂对象            SqlSessionFactory sqlSessionFactory = new SqlSessionFactoryBuilder().build(is);            //3.通过SqlSession工厂对象获取SqlSession对象            sqlSession = sqlSessionFactory.openSession(true);            //4.获取StudentMapper接口实现类对象            StudentMapper mapper = sqlSession.getMapper(StudentMapper.class);            //5.调用实现类对象删除方法            mapper.deleteStu(number);        } catch (Exception e) {            e.printStackTrace();        } finally {            //6.释放资源            if(sqlSession != null) {                sqlSession.close();            }            if(is != null) {                try {                    is.close();                } catch (IOException e) {                    e.printStackTrace();                }            }        }    }
      • 4、StudentMapper.java中增加“删除功能”-

      /*        删除数据方法     */    @Delete("DELETE FROM student WHERE number=#{number}")    public abstract void deleteStu(String number);
(0)

相关推荐