Vue和综合案例
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); //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>
（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 {
@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);
}
}
（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();
@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);
}
}
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 {
@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;
}
}
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¤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;
},
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();
@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);
}
}
bb)创建StudentService.java
/*
学生业务层接口
*/
public interface StudentService {
/*
分页查询方法
*/
public abstract Page selectByPage(Integer currentPage, Integer pageSize);
}
cc) 创建StudentServiceImpl.java
/*
学生业务层实现类
*/
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;
}
}
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 +
"¤tPage=" + 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;
}
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¤tPage=" + 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
/*
添加数据方法
*/
@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();
}
}
}
}
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 +
"¤tPage=" + 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;
}
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¤tPage=" + 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);
}
/*
修改数据方法
*/
@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();
}
}
}
}
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 +
"¤tPage=" + 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;
})
}
}
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¤tPage=" + 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);
扫一扫
758
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
