2. 技术
    3. Vue&综合案例

    Vue&综合案例

    技术2022-07-11  137

    Vue&综合案例

    Vue 高级使用

    自定义组件

    学完了 Element 组件后，我们会发现组件其实就是自定义的标签。例如<el-button>就是对<button>的封装。本质上，组件是带有一个名字且可复用的 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="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>

    效果:

    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>

    Vue 异步操作

    在 Vue 中发送异步请求，本质上还是 AJAX。我们可以使用 axios 这个插件来简化操作！使用步骤 1. 引入 axios 核心 js 文件。 2. 调用 axios 对象的方法来发起异步请求。 3. 调用 axios 对象的方法来处理响应的数据。axios 常用方法

    综合案例 学生管理系统

    案例效果

    登录功能实现

    三层架构 1.sql语句 select * from user where name = #{name} and password = #{password} 2.编写dao层（实现目的：通过java拿到数据库的数据） 3.编写service层，让service调用dao,实现业务逻辑 4.编写控制层（servlet），调用service中的方法,获取数据,响应前端前端实现步骤 1.获取到用户输入的数据（或则说你想要传递给后端的数据） 2.利用异步请求通过后端拿到数据 3.展示数据（页面跳转、列表数据展示、alert弹窗）

    登录功能具体步骤

    sql语句 SELECT * FROM user WHERE username=#{username} AND password=#{password} 编写DAO层 public interface UserMapper { /* 登录方法 */ @Select("SELECT * FROM user WHERE username=#{username} AND password=#{password}") public abstract List<User> login(User user); } 编写servie层 1.接口编写 /* 业务层约束接口 */ public interface UserService { /* 登录方法 */ public abstract List<User> login(User user); } 2.实现类 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; } } 3.控制层(servlet) 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); } }

    filter类:

    package com.itheima.filter; import javax.servlet.*; import javax.servlet.annotation.WebFilter; import javax.servlet.http.HttpServletRequest; import javax.servlet.http.HttpServletResponse; /* 检查登录 */ @WebFilter(value = {"/index.html"}) public class LoginFilter implements Filter{ @Override public void init(FilterConfig filterConfig) throws ServletException { } @Override public void doFilter(ServletRequest servletRequest, ServletResponse servletResponse, FilterChain filterChain) { try{ //1.将请求和响应对象转换为和HTTP协议相关 HttpServletRequest request = (HttpServletRequest) servletRequest; HttpServletResponse response = (HttpServletResponse) servletResponse; //2.获取会话域对象中数据 Object username = request.getSession().getAttribute("username"); //3.判断用户名 if(username == null || "".equals(username)) { //重定向到登录页面 response.sendRedirect(request.getContextPath() + "/login.html"); return; } //4.放行 filterChain.doFilter(request,response); } catch (Exception e) { e.printStackTrace(); } } @Override public void destroy() { } }

    User类:

    package com.itheima.bean; /* 用户实体类 */ public class User { private String username; //账号 private String password; //密码 public User() { } public User(String username, String password) { this.username = username; this.password = password; } public String getUsername() { return username; } public void setUsername(String username) { this.username = username; } public String getPassword() { return password; } public void setPassword(String password) { this.password = password; } }

    登录页面:

    <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>登录页面</title> <link rel="stylesheet" href="element-ui/lib/theme-chalk/index.css"> <script src="js/vue.js" type="text/javascript"></script> <script src="js/axios-0.18.0.js" type="text/javascript"></script> <script src="element-ui/lib/index.js"></script> <style lang="scss" scoped> .login-box { border: 1px solid #DCDFE6; width: 350px; margin: 120px auto; padding: 35px 35px 15px 35px; border-radius: 5px; -webkit-border-radius: 5px; -moz-border-radius: 5px; box-shadow: 0 0 25px #909399; } .login-title { text-align: center; margin: 0 auto 40px auto; color: #303133; } </style> </head> <body> <div id="app"> <el-form ref="loginForm" :model="form" :rules="rules" label-width="80px" class="login-box"> <h3 class="login-title">欢迎登录</h3> <el-form-item label="账号" prop="username"> <el-input type="text" placeholder="请输入账号" v-model="form.username"/> </el-form-item> <el-form-item label="密码" prop="password"> <el-input type="password" placeholder="请输入密码" v-model="form.password"/> </el-form-item> <el-form-item> <el-button type="primary" v-on:click="onSubmit('loginForm')">登录</el-button> </el-form-item> </el-form> </div> </body> <script> new Vue({ el:"#app", data: { form: { username: '', password: '', }, rules: { //校验规则 username: [ {required: true, message: '请输入用户名', trigger: 'blur'} ], password: [ {required: true, message: '请输入密码', trigger: 'blur'} ] } }, methods: { 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) { //登录成功，跳转到首页 location.href = "index.html"; }else { //登录失败，跳转到登录页面 alert("登录失败，请检查用户名和密码"); location.href = "login.html"; } }) } else { return false; } }); } } }); </script> </html>

    学生信息的增删改查功能实现

    DAO层:

    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") List<Student> selectAll(); /* 添加数据方法 */ @Insert("insert into student values(#{number},#{name},#{birthday},#{address})") void addStu(Student stu); /* 修改数据方法 */ @Update("update student set number=#{number},name=#{name},birthday=#{birthday} where id=#{id}") void updateStu(Student stu); /* 删除数据方法 */ @Delete("delete from student where number=#{number}") void deleteStu(String number); }

    service层接口:

    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); /* 添加数据方法 */ public abstract void addStu(Student stu); /* 修改数据方法 */ public abstract void updateStu(Student stu); /* 删除数据方法 */ public abstract void deleteStu(String number); }

    service层实现类:

    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 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(); } } } } /* 修改数据方法 */ @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(); } } } } /* 添加数据方法 */ @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(); } } } } /* 分页查询功能 */ @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; } }

    控制层(servlet):

    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); }else if(method.equals("addStu")) { //添加数据功能 addStu(req,resp); } else if(method.equals("updateStu")) { //修改数据功能 updateStu(req,resp); } else if(method.equals("deleteStu")) { //删除数据功能 deleteStu(req,resp); } } /* 删除数据功能 */ private void deleteStu(HttpServletRequest req, HttpServletResponse resp) { //获取请求参数 String number = req.getParameter("number"); //调用业务层的删除方法 service.deleteStu(number); //响应客户端 try { resp.getWriter().write("true"); } catch (IOException e) { e.printStackTrace(); } } /* 修改数据功能 */ private void updateStu(HttpServletRequest req, HttpServletResponse resp) { //获取请求参数 Map<String, String[]> map = req.getParameterMap(); //封装Student对象 Student stu = new Student(); //注册日期转换器方法 dateConvert(); try { BeanUtils.populate(stu,map); } catch (Exception e) { e.printStackTrace(); } //调用业务层的修改方法 service.updateStu(stu); //响应客户端 try { resp.getWriter().write("true"); } catch (IOException e) { e.printStackTrace(); } } /* 添加数据功能 */ private void addStu(HttpServletRequest req, HttpServletResponse resp) { //获取请求参数 Map<String, String[]> map = req.getParameterMap(); //封装Student对象 Student stu = new Student(); //注册日期转换器方法 dateConvert(); try { BeanUtils.populate(stu,map); } catch (Exception e) { e.printStackTrace(); } //调用业务层的添加方法 service.addStu(stu); //响应客户端 try { resp.getWriter().write("true"); } catch (IOException e) { e.printStackTrace(); } } /* 分页查询功能 */ 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(); } } /* 日期转换 */ 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); } @Override protected void doPost(HttpServletRequest req, HttpServletResponse resp) throws ServletException, IOException { doGet(req,resp); } }

    学生类:

    package com.itheima.bean; import java.sql.Date; /* 学生实体类 */ public class Student { private String number; //学号 private String name; //姓名 private Date birthday; //生日 private String address; //地址 public Student() { } public Student(String number, String name, Date birthday, String address) { this.number = number; this.name = name; this.birthday = birthday; this.address = address; } public String getNumber() { return number; } public void setNumber(String number) { this.number = number; } public String getName() { return name; } public void setName(String name) { this.name = name; } public Date getBirthday() { return birthday; } public void setBirthday(Date birthday) { this.birthday = birthday; } public String getAddress() { return address; } public void setAddress(String address) { this.address = address; } }

    主页面:

    <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <title>学生管理系统</title> <link rel="stylesheet" href="element-ui/lib/theme-chalk/index.css"> <script src="js/vue.js"></script> <script src="element-ui/lib/index.js"></script> <style> .el-header{ background-color: #545c64; } .header-img{ width: 100px; margin-top:20px; } </style> </head> <body> <div id="div"> <el-container> <!-- 头部--> <el-header class="el-header"> <el-container> <div> <el-image src="img/export.png" class="header-img"></el-image> </div> <el-menu :default-active="activeIndex2" mode="horizontal" @select="handleSelect" background-color="#545c64" text-color="white" active-text-color="#ffd04b" style="margin-left: auto;"> <el-menu-item index="1">处理中心</el-menu-item> <el-submenu index="2"> <template slot="title">我的工作台</template> <el-menu-item index="2-1">选项1</el-menu-item> <el-menu-item index="2-2">选项2</el-menu-item> <el-menu-item index="2-3">选项3</el-menu-item> </el-submenu> <el-menu-item index="3"><a href="index.html" target="_self">首页</a></el-menu-item> </el-menu> </el-container> </el-header> <!-- 中间部分 --> <el-container style="height: 580px; border: 1px solid #eee"> <!-- 侧边栏 --> <el-aside width="200px" style="background-color: rgb(238, 241, 246)"> <el-menu :default-openeds="['1']"> <el-submenu index="1"> <template slot="title"><i class="el-icon-menu"></i>学工部</template> <el-menu-item-group> <el-menu-item index="1-1" @click="findAll"><i class="el-icon-help"></i>在校学生管理</el-menu-item> <el-menu-item index="1-2"><i class="el-icon-help"></i>学生升级/留级</el-menu-item> <el-menu-item index="1-3"><i class="el-icon-help"></i>学生就业情况</el-menu-item> </el-menu-item-group> </el-submenu> <el-submenu index="2"> <template slot="title"><i class="el-icon-menu"></i>咨询部</template> <el-menu-item-group> <el-menu-item index="2-1"><i class="el-icon-help"></i>意向学生管理</el-menu-item> <el-menu-item index="2-2"><i class="el-icon-help"></i>未报名学生管理</el-menu-item> <el-menu-item index="2-3"><i class="el-icon-help"></i>已报名学生管理</el-menu-item> </el-menu-item-group> </el-submenu> <el-submenu index="3"> <template slot="title"><i class="el-icon-menu"></i>教研部</template> <el-menu-item-group> <el-menu-item index="3-1"><i class="el-icon-help"></i>已有课程管理</el-menu-item> <el-menu-item index="3-2"><i class="el-icon-help"></i>正在研发课程管理</el-menu-item> <el-menu-item index="3-3"><i class="el-icon-help"></i>新技术课程管理</el-menu-item> </el-menu-item-group> </el-submenu> </el-menu> </el-aside> <el-container> <!-- 主区域部分 --> <el-main> <iframe :src="iframeSrc" frameborder="false" style="top:80px;left: 120px; width: 100%;height:500px"></iframe> </el-main> </el-container> </el-container> </el-container> </div> </body> <script> new Vue({ el:"#div", data: { iframeSrc: "manager.html" }, methods:{ findAll:function () { this.iframeSrc = "stuList.html" } } }); </script> </html>

    学生列表页面

    <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <title>学生管理系统</title> <link rel="stylesheet" href="element-ui/lib/theme-chalk/index.css"> <script src="js/vue.js"></script> <script src="element-ui/lib/index.js"></script> <script src="js/axios-0.18.0.js"></script> </head> <body> <div id="div"> <b style="color: red; font-size: 20px;">学生列表</b> <div style="float: right;"> <el-button type="primary" @click="showAddStu">添加学生</el-button> </div> <el-table :data="tableData"> <el-table-column prop="number" label="学号" width="120"> </el-table-column> <el-table-column prop="name" label="姓名" width="120"> </el-table-column> <el-table-column prop="birthday" label="生日" width="140"> </el-table-column> <el-table-column prop="address" label="地址"> </el-table-column> <el-table-column label="操作" width="180"> <template slot-scope="props"> <el-button type="warning" @click="showEditStu(props.row)">编辑</el-button> <el-button type="danger" @click="deleteStu(props.row)">删除</el-button> </template> </el-table-column> </el-table> <!-- 分页组件 @size-change： 当改变每页条数时触发的函数 @current-change：当改变页码时触发的函数 current-page ：默认的页码 :page-sizes：每页条数选择框中显示的值 :page-size : 默认的每页条数 layout： 分页组件的布局 total（总条数）, sizes(每页条数), prev（上一页）, pager(所有的页码), next(下一页), jumper（跳转页码） :total: 总条数 --> <el-pagination @size-change="handleSizeChange" @current-change="handleCurrentChange" :current-page="pagination.currentPage" :page-sizes="[3,5,8]" :page-size="pagination.pageSize" layout="total, sizes, prev, pager, next, jumper" :total="pagination.total"> </el-pagination> <el-dialog title="添加学生信息" :visible.sync="dialogTableVisible4add" @close="resetForm('addForm')"> <!-- :model="formData": 关联数据 :rules: 关联校验规则 ref： 在获取表单对象时使用 --> <el-form :model="formData" :rules="rules" ref="addForm" label-width="100px" class="demo-ruleForm"> <el-form-item label="学生学号" prop="number"> <el-input v-model="formData.number"></el-input> </el-form-item> <el-form-item label="学生姓名" prop="name"> <el-input v-model="formData.name"></el-input> </el-form-item> <el-form-item label="学生生日" prop="birthday"> <!--v-model : 双向绑定 --> <el-input v-model="formData.birthday" type="date"></el-input> </el-form-item> <el-form-item label="学生地址" prop="address"> <el-input v-model="formData.address"></el-input> </el-form-item> <el-form-item align="right"> <el-button type="primary" @click="addStu()">添加</el-button> <el-button @click="resetForm('addForm')">重置</el-button> </el-form-item> </el-form> </el-dialog> <el-dialog title="编辑学生信息" :visible.sync="dialogTableVisible4edit" @close="resetForm('editForm')" > <!-- :model="formData": 关联数据 :rules: 关联校验规则 ref： 在获取表单对象时使用 --> <el-form :model="editFormData" :rules="rules" ref="editForm" label-width="100px" class="demo-ruleForm"> <el-form-item label="学生学号" prop="number"> <el-input v-model="editFormData.number"></el-input> </el-form-item> <el-form-item label="学生姓名" prop="name"> <el-input v-model="editFormData.name"></el-input> </el-form-item> <el-form-item label="学生生日" prop="birthday"> <!--v-model : 双向绑定 --> <el-input v-model="editFormData.birthday" type="date"></el-input> </el-form-item> <el-form-item label="学生地址" prop="address"> <el-input v-model="editFormData.address"></el-input> </el-form-item> <el-form-item align="right"> <el-button type="warning" @click="updateStu()">修改</el-button> </el-form-item> </el-form> </el-dialog> </div> </body> <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¤tPage=" + 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; }, //添加学生功能 addStu(){ let param = "method=addStu&number=" + this.formData.number + "&name=" + this.formData.name + "&birthday=" + this.formData.birthday + "&address=" + this.formData.address; axios.post("studentServlet",param) .then(resp => { if(resp.data){ //调用分页查询 this.selectByPage(); } }); //关闭添加窗口 this.dialogTableVisible4add = false; }, 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, } }, //修改数据功能 updateStu() { let param = "method=updateStu&number=" + this.editFormData.number + "&name=" + this.editFormData.name + "&birthday=" + this.editFormData.birthday + "&address=" + this.editFormData.address; axios.post("studentServlet",param) .then(resp => { if(resp.data){ //调用分页查询方法 this.selectByPage(); } }); //关闭编辑窗口 this.dialogTableVisible4edit = false; }, //删除数据功能 deleteStu(row) { if(confirm("确定要删除" + row.number + "数据?")) { let param = "method=deleteStu&number=" + row.number; axios.post("studentServlet",param) .then(resp => { if(resp.data){ //调用分页查询方法 this.selectByPage(); } }); } } }, mounted(){ //调用分页查询功能 this.selectByPage(); } }); </script> </html>
    Processed: 0.011, SQL: 9