Vue和综合案例

1、Vue 高级使用
- 1.1、自定义组件
- 1.2、Vue的生命周期(了解)
- 1.3、Vue异步操作
2、综合案例学生管理系统
- 2.1、开发思路
- 2.2、效果环境的介绍
- 2.3、登录功能的实现
- 2.4、分页查询功能的实现
- 2.5、添加功能的实现
- 2.6、修改功能的实现
- 2.7、删除功能的实现

1、Vue 高级使用

1.1、自定义组件

（1）概述：
学完了 Element 组件后，我们会发现组件其实就是自定义的标签。例如就是对组件的封装。本质上，组件是带有一个名字且可复用的 Vue 实例，我们完全可以自己定义。
（2）定义格式

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

（3）代码演示

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

（4）代码解析
a) 目标
用vue的标签来代替以下代码，即用替换以下代码+

<button style='color:red'>我的按钮</button>

b) 制作过程
声明新标签

Vue.component("my-button",{});

把我们要代替的html代码写在template里

Vue.component("my-button",{//解析标签模板template:"<button style='color:red'>我的按钮</button>"
});

c) 开发页面发现显示不正常，并且控制台报错。因为vue.js中的数据必须通过data

    Vue.component("my-button",{// 数据函数data: function(){return{msg:"我的按钮"}},//解析标签模板template:"<button style='color:red'>{{msg}}</button>"});

1.2、Vue的生命周期(了解)

（1）生命周期

（2）生命周期的八个阶段

（3）代码实现

  <!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); //undefinedconsole.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); //undefinedconsole.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>

（4）总结
a) 八大阶段4个关键词:
b) 4个关键词：create–>mount–>update–>destroy(创建–>载入–>更新–>销毁)
c) 一个vue的组件,本质来说是一个Vue类的对象实例
而这个对象从’出生’到’死’整个过程叫’生命周期’，在整个过程当前，vue给了我们机会在它的某一阶段，执行我们自己的代码，而我们只需要掌握2个函数，一个是初始化data对象结束的created方法和把组件渲染到页面之后的mound的方法

1.3、Vue异步操作

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

（4）代码实现
a) 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>

b) java代码

  @WebServlet("/testServlet")public class TestServlet extends HttpServlet {@Overrideprotected 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("请求成功");}@Overrideprotected void doPost(HttpServletRequest req, HttpServletResponse resp) throws ServletException, IOException {this.doGet(req,resp);}}

（5）注意：
post和get的请求参数的位置是不同的

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

2.1、开发思路

（1）一次http请求的流程
a) 由页面进行数据封装(后台需要什么数据就封装什么数据)，发起请求
b) 后台接受请求，controller层的Servlet要继承HttpServlet，重写doPost和doGet方法，同时注意@WebServlet注解(路径要一致)
c) 对请求进行业务处理(service层)
d) 从db（数据库）中获取数据或者把数据保存至db中(使用mybatis操作数据库)
e) 返回响应
f) 页面接受到响应后要做哪些动作：页面根据效果(需求)来进行改变dom节点或者跳转页面
（2）核心的步骤三步
a) 页面需要封装什么数据给后台
b) 页面接受到响应后要做哪些动作
c) 由响应从而联想后台需要做哪些事

2.2、效果环境的介绍

2.3、登录功能的实现

（1）代码实现
a) 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;}});
}

b) java代码
aa) UserServlet.java

    @WebServlet("/userServlet")public class UserServlet extends HttpServlet {private UserService service = new UserServiceImpl();@Overrideprotected 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);//响应给客户端trueresp.getWriter().write("true");}else {//响应给客户端falseresp.getWriter().write("false");}}@Overrideprotected void doPost(HttpServletRequest req, HttpServletResponse resp) throws ServletException, IOException {doGet(req,resp);}}

bb) UserService.java

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

cc) UserServiceImpl.java

    public class UserServiceImpl implements UserService {@Overridepublic 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;}}

dd) UserMapper.java

    public interface UserMapper {/*登录方法*/@Select("SELECT * FROM user WHERE username=#{username} AND password=#{password}")public abstract List<User> login(User user);}

（2）总结分析
a) 核心问题
aa) 页面需要封装哪些数据
aaa) 用户名
bbb) 密码
bb) 响应回来后需要做哪些动作
aaa) 如果用户名和密码正确跳转主页
bbb)如果用户名和密码不正确则提示"登录失败，请检查用户名和密码"
b) 联想
aa) 后台如何返回用户名和密码是否正确
aaa)获取页面传递过来的参数(controller层)
bbb) 判断是用户名/密码否存在数据库(service层+dao层)
ccc) 返回结果(controller层)

2.4、分页查询功能的实现

（1）代码实现
a) 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 => {//将查询出的数据赋值tableDatathis.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>

b) java代码

aa) 创建StudentServlet.java

    @WebServlet("/studentServlet")public class StudentServlet extends HttpServlet {private StudentService service = new StudentServiceImpl();@Overrideprotected 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));//封装PageInfoPageInfo info = new PageInfo(page);//将info转成json，响应给客户端try {String json = new ObjectMapper().writeValueAsString(info);resp.getWriter().write(json);} catch (Exception e) {e.printStackTrace();}}@Overrideprotected void doPost(HttpServletRequest req, HttpServletResponse resp) throws ServletException, IOException {doGet(req,resp);}}

bb)创建StudentService.java

    /*学生业务层接口*/public interface StudentService {/*分页查询方法*/public abstract Page selectByPage(Integer currentPage, Integer pageSize);}

cc) 创建StudentServiceImpl.java

    /*学生业务层实现类*/public class StudentServiceImpl implements StudentService {/*分页查询功能*/@Overridepublic 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;}}

dd) 创建StudentMapper.java

    /*学生持久层接口*/public interface StudentMapper {/*查询全部方法*/@Select("SELECT * FROM student")public abstract List<Student> selectAll();}

（2）总结
a) 核心问题
aa) 页面需要封装哪些数据
aaa) method:方法名
bbb) currentPage:当前页
ccc) pageSize:每页条数
bb) 响应回来后需要做哪些动作
aaa)显示当前页的数据
b) 联想
aa) 后台如何返回用户名和密码是否正确
aaa) 获取页面传递过来的参数(controller层)
bbb) 根据当前页和每页条数查询student表的数据
ccc) 返回结果(controller层)
c) 注意：由对象转换为json时需要指定Date的格式@JsonFormat(locale=“zh”, timezone=“GMT+8”, pattern=“yyyy-MM-dd”)

2.5、添加功能的实现

（1）代码实现
a) 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 => {//将查询出的数据赋值tableDatathis.tableData = resp.data.list;//设置分页参数//当前页this.pagination.currentPage = resp.data.pageNum;//总条数this.pagination.total = resp.data.total;})//关闭添加窗口this.dialogTableVisible4add = false;
}

b) java代码
aa) 在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);}

bb) 在StudentService.java中增加“添加功能”-addStu

        /*添加数据方法*/public abstract void addStu(Student stu);

cc) StudentServiceImpl.java中增加“添加功能”-addStu

    /*添加数据方法*/@Overridepublic 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();}}}}

dd) StudentMapper.java中增加“添加功能”-addStu

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

（3）总结
a) 核心问题
aa) 页面需要封装哪些数据
aaa) student表单
学号
姓名
生日
地址
bb) 响应回来后需要做哪些动作
返回列表页面
b) 联想
aa) 后台如何返回用户名和密码是否正确
aaa) 获取页面传递过来的参数(controller层)
bbb) 根据将数据保存至student表的数据
ccc) 跳转列表页面

2.6、修改功能的实现

（1）代码实现
a) 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 => {//将查询出的数据赋值tableDatathis.tableData = resp.data.list;//设置分页参数//当前页this.pagination.currentPage = resp.data.pageNum;//总条数this.pagination.total = resp.data.total;})//关闭编辑窗口this.dialogTableVisible4edit = false;
}

b) java代码
aa) 在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();}}

bb) 在StudentService.java中增加“修改功能”-updateStu

    /*修改数据方法*/public abstract void updateStu(Student stu);

cc) StudentServiceImpl.java中增加“修改功能”-updateStu

     /**1、直接复制会报错*2、需要将此行代码需要添加到“doGet”方法中*3、增加“updateStu”方法名的判断 */else if(method.equals("updateStu")) {//添加数据功能updateStu(req,resp);}  /*修改数据方法*/@Overridepublic 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();}}}}

dd) 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.7、删除功能的实现

（1）代码实现
a) html代码
aa) 在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 => {//将查询出的数据赋值tableDatathis.tableData = resp.data.list;//设置分页参数//当前页this.pagination.currentPage = resp.data.pageNum;//总条数this.pagination.total = resp.data.total;})}
}

b) java代码
aa) 在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();}
}

bb) 在StudentService.java中增加“删除功能”-

/*删除数据方法
*/
public abstract void deleteStu(String number);

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

dd) StudentMapper.java中增加“删除功能”-

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

Java Web学习day25------Vue和综合案例相关推荐

Java Web 学习路线
Java Web 学习路线实际上,如果时间安排合理的话,大概需要六个月左右,有些基础好,自学能力强的朋友,甚至在四个月左右就开始找工作了. 大三的时候,我萌生了放弃本专业的念头,断断续续学 Java ...
Java Web 学习路线(2018)
实际上,如果时间安排合理的话,大概需要六个月左右,有些基础好,自学能力强的朋友,甚至在四个月左右就开始找工作了. 大三的时候,我萌生了放弃本专业的念头,断断续续学 Java Web 累计一年半左右,总 ...
java web学习项目20套源码完整版
java web学习项目20套源码完整版自己收集的各行各业的都有,这一套源码吃遍所有作业项目! 1.BBS论坛系统(jsp+sql) 2.ERP管理系统(jsp+servlet) 3.OA办公自动化 ...
2019年Java Web学习笔记目录
Java Web学习笔记目录 1.Java Web学习笔记01:动态网站初体验 2.Java Web学习笔记02:在Intellij里创建Web项目 3.Java Web学习笔记03:JSP元素 4. ...
java web学习笔记（持续更新）
java web学习笔记一.Java Web简介二.认识Servlet 1.什么是Servlet? 2.请求路径 3.tomcat 4.Servlet的使用三.Servlet简单应用 1.创建S ...
[原创]java WEB学习笔记02：javaWeb开发的目录结构
本博客为原创:综合尚硅谷(http://www.atguigu.com)的系统教程(深表感谢)和网络上的现有资源(博客,文档,图书等),资源的出处我会标明本博客的目的:①总结自己的学习过程,相当 ...
Java web学习文档
Java web 一,第一章 1,tomcat的下载及配置部署学习本章内容需要具备以下知识点 java基础知识面向对象oop思想 java进阶数据库前端网页技术(html/css/js/jqu ...
java web学习笔记-jsp篇
转载自:http://www.cnblogs.com/happyfans/archive/2015/03/17/4343571.html 1.java web简介 1.1静态页面与动态页面表现形 ...
Java Web学习(1)
打算开始学习Java Web,之前软件工程的课程设计做的非常水,想重新系统的学一遍. C/S结构:服务器采用高性能PC或工作站,客户端安装专用客户端软件. (客户端/服务器) B/S结构:通过Web浏 ...
1、JAVA web学习笔记
以下内容是在学习某机构视频过程中记录的笔记,不准确的地方请大家评论指正. JavaWeb是使用Java语言开发基于互联网的项目. 资源分类有两类: 静态资源: 使用静态网页开发技术发布的资源. 特点: ...

Java Web学习day25------Vue和综合案例

Vue和综合案例

1、Vue 高级使用

1.1、自定义组件

1.2、Vue的生命周期(了解)

1.3、Vue异步操作

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

2.1、开发思路

2.2、效果环境的介绍

2.3、登录功能的实现

2.4、分页查询功能的实现

2.5、添加功能的实现

2.6、修改功能的实现

2.7、删除功能的实现

Java Web学习day25------Vue和综合案例相关推荐

最新文章

热门文章

Java Web学习day25------Vue和综合案例

Vue和综合案例

1、Vue 高级使用

1.1、自定义组件

1.2、Vue的生命周期(了解)

1.3、Vue异步操作

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

2.1、开发思路

2.2、效果环境的介绍

2.3、登录功能的实现

2.4、分页查询功能的实现

2.5、添加功能的实现

2.6、修改功能的实现

2.7、删除功能的实现

Java Web学习day25------Vue和综合案例相关推荐

最新文章

热门文章

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