昨日回顾
Vue
概念
使用
常用指令
文本插值
绑定属性
条件渲染
列表渲染
事件绑定
表单绑定
ElementUI
概念
使用
常见组件
容器布局
表单组件
表格组件
顶部导航栏
侧边导航栏
今日目标
vue异步操作
学生管理系统
补充:vue中的ref属性和$refs对象-了解
作用：标签的ref属性可以将该标签注册到vue中，通过vue对象内部的$refs对象可以获取到ref属性注册的所有标签对象，并且通根据ref属性值获取到某一个标签对象，类似于我们之前通过document.querySelector()获取元素对象一样。
<body>
<div id="div">
<p ref="p1">传智播客</p>
<p ref="p2">黑马程序员</p>
<p ref="p3">博学谷</p>
<form ref="registForm" action="" method="get">
</form>
<input type="button" value="点击发送异步请求" @click="getElement('p2')">
</div>
<script>
new Vue({
el:"#div",
data:{
username:"tom",
obj:"p3"
},
methods:{
//获取标签对象
getElement:function (fieldName) {
//从对象身上获取属性值的第一种写法：对象名.属性名
console.log(this.$refs); //获取所有注册的标签对象
//需求1：获取"黑马程序员"p标签对象
let p2 = this.$refs.p2; //获取p2对象
console.log(p2);
//需求2：获取form表单对象对象，并进行校验和提交
console.log(this.$refs.registForm);
//从对象身上获取属性值的第二种写法：对象名["属性名"]
console.log(this.$refs[fieldName]);
//获取form表单对象，调用validate进行表单校验，valid为true表示校验通过，false表示校验失败
//validate方法属于ElementUI提供的，需要结合ElementUI才可以调用
this.$refs[fieldName].validate((valid) => {
if (valid) {
//校验通过，可以使用axios发送一步请求
} else {
//校验是否，提示错误信息，return false阻止提交
return false;
}
});
}
}
});
</script>
【第一章】Vue高级使用-Vue的生命周期【了解】
1 生命周期
2 生命周期的八个阶段
【第二章】Vue高级使用-异步操作【重点】
使用的是axios插件，需要复制js文件以及在页面引入js文件
1 常用的方法
2 get请求
axios.get("testServlet?name="+this.name).then(resp=>{
alert(resp.data);
}).catch(error=>{
alert(error);
})
3 post请求
axios.post("testServlet","name="+this.name).then(resp=>{
alert(resp.data);
}).catch(error=>{
alert(error);
})
【第三章】学生管理系统【重点】
1 案例效果
- 效果1:登录
- 效果2:对学生进行增删改查
2 登录功能
2.1 环境搭建
1 使用提供的SQL创建数据库和表以及表中的数据
2 将给的src和web中的内容直接复制到我们的module对应位置
2.2 后台代码实现
- UserServlet代码
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");
}
}
- UserServiceImpl代码
/**
* 定义登录的方法
* @param user 封装用于登录的用户名和密码
* @return 返回查到的用户信息
*/
@Override
public User login(User user) {
SqlSession sqlSession = null;
User existUser = null;
try {
//1 加载核心配置文件资源
InputStream is = Resources.getResourceAsStream("MybatisConfig.xml");
//2 获取SqlSessionFactory对象
SqlSessionFactory factory = new SqlSessionFactoryBuilder().build(is);
//3 获取SqlSession对象
sqlSession = factory.openSession(true);
//4 获取mapper的代理对象，执行操作
UserMapper mapper = sqlSession.getMapper(UserMapper.class);
existUser = mapper.login(user);
} catch (IOException e) {
e.printStackTrace();
} finally {
//5 释放资源
if(sqlSession!=null){
sqlSession.close();
}
}
//6 返回结果
return existUser;
}
- UserMapper代码
public interface UserMapper {
/*
登录方法
*/
@Select("SELECT * FROM user WHERE username=#{username} AND password=#{password}")
public abstract List<User> login(User user);
}
2.3 前台代码实现
methods: {
onSubmit(formName) { //formName就是传递过来的'loginForm'值，通过loginForm就可以找到form表单对象
// 为表单绑定验证功能,//validate()表示的是校验的方法，valid表示校验结果
this.$refs[formName].validate(valid=>{
if (valid) {
//请求服务器完成登录功能
//如何是用axios发送异步请求,form就是我们要提交的请求参数对象
axios.get("userServlet",{params:this.form}).then((resp)=>{
if(resp.data){
//跳转到index.html页面
location.href="index.html";
}else{
//失败
location.href = "login.html";
}
});
} else {
return false;
}
})
}
}
2.4 过滤器代码实现
@WebFilter(value = {"/index.html"})
public class LoginFilter implements Filter{
@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();
}
}
}
3 分页查询功能
1 后台代码
- StudentServlet代码
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();
}
}
- StudentServiceImpl代码
@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;
}
- StudentMapper代码
/*
查询全部方法
*/
@Select("SELECT * FROM student")
public abstract List<Student> selectAll();
2 前台代码
//先将查询的标记添加到pagination对象中
this.pagination.method="selectByPage";
//再发送分页的异步请求
axios.get("studentServlet",{params:this.pagination}).then((resp)=>{
//将查询出的数据赋值tableData
this.tableData=resp.data.list;
//设置当前页
this.pagination.pageSize=resp.data.pageNum；
//设置总条数
this.pagination.total=resp.data.total;
});
4 添加功能
4.1 后台代码实现
- StudentServlet代码
/*
添加数据功能
*/
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();
}
}
- StudentServiceImpl代码
/*
添加数据方法
*/
@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();
}
}
}
}
- StudentMapper
/*
添加数据方法
*/
@Insert("INSERT INTO student VALUES (#{number},#{name},#{birthday},#{address})")
public abstract void addStu(Student stu);
4.2 前台代码实现
//向formData添加请求标记
Object.assign(this.formData,this.pagination)//可以将pagination的数据拼接到formData中
this.formData.method="addStu";
//向服务器发送异步请求,传递表单参数
axios.get("studentServlet",{params:this.formData}).then(resp=>{
//将查询出的数据赋值tableData
this.tableData = resp.data.list;
//设置分页参数
//当前页
this.pagination.currentPage = resp.data.pageNum;
//总条数
this.pagination.total = resp.data.total;
});
5 修改功能
5.1 后台代码实现
- StudentServlet代码
/*
修改数据功能
*/
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();
}
}
- StudentServiceImpl代码
/*
修改数据方法
*/
@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();
}
}
}
}
- StudentMapper
/*
修改数据方法
*/
@Update("UPDATE student SET number=#{number},name=#{name},birthday=#{birthday},address=#{address} WHERE number=#{number}")
public abstract void updateStu(Student stu);
5.2 前台代码实现
//向formData添加请求标记
Object.assign(this.formData,this.pagination)//可以将pagination的数据拼接到formData中
this.editFormData.method="updateStu";
//向服务器发送异步请求,传递表单参数
axios.get("studentServlet",{params:this.editFormData}).then(resp=>{
//将查询出的数据赋值tableData
this.tableData = resp.data.list;
//设置分页参数
//当前页
this.pagination.currentPage = resp.data.pageNum;
//总条数
this.pagination.total = resp.data.total;
});
6 删除功能
6.1 后台代码实现
- StudentServlet代码
/*
删除数据功能
*/
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();
}
}
- StudentServiceImpl代码
/*
删除数据方法
*/
@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();
}
}
}
}
- StudentMapper
/*
删除数据方法
*/
@Delete("DELETE FROM student WHERE number=#{number}")
public abstract void deleteStu(String number);
6.2 前台代码实现
//先将查询的标记添加到pagination对象中
this.pagination.method="deleteStu";
this.pagination.number=row.number;
//再发送分页的异步请求
axios.get("studentServlet",{params:this.pagination}).then((resp)=>{
//将查询出的数据赋值tableData
this.tableData=resp.data.list;
//设置当前页
this.pagination.pageSize=resp.data.pageNum；
//设置总条数
this.pagination.total=resp.data.total;
});
4. 作业:
- 能够axios 去发送 异步请求,并且serlvet收到请求, 并且 回送响应数据, 在前端页面中能够 拿到响应的数据
- 把 学生管理系统的 分页 功能 实现
预习明天的redis ( 推荐 用 windows 版本的, linux 的环境不 稳定, 总是 容易出问题 …)
259
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
