Vue自定义组件&&异步请求
Vue自定义组件&&异步
Vue 高级使用
自定义组件
学完了 Element 组件后，我们会发现组件其实就是自定义的标签。例如 <el-button>就是对<button>的封装
本质上，组件是带有一个名字且可复用的 Vue 实例，我们完全可以自己定义
- 定义格式
Vue.component(组件名称, {
props:组件的属性,
data: 组件的数据函数,
template: 组件解析的标签模板
})
第一步创建固定模式
导包
<script src="vue/vue.js">script>
<div id="div">
<student myname="zgan" age="18">
student>
div>
<script>
Vue.component("student",{
//属性 尽量别与固有属性重名
props:["myname","age"],
template: `
//解析标签模板 只有一个标签,内部可以嵌套多个标签
{{myname}}
{{age}}
`,
//数据函数
data:function(){
return {}
}
});
new Vue({
el:"#div"
});
cript>
script>
Vue 生命周期
- 生命周期的八个阶段
| 状态 | 阶段 |
|---|---|
| beforeCreate | 创建前 |
| created | 创建后 |
| beforeMount | 载入前 |
| mounted | 载入后 |
| beforeUpdate | 更新前 |
| updated | 更新后 |
| beforeDestroy | 销毁前 |
| destroyed | 销毁后 |
Vue 异步操作
- 在 Vue 中发送异步请求，本质上还是 AJAX。我们可以使用 axios 这个插件来简化操作
步骤
1. 引入 axios 核心 js 文件。
2. 调用 axios 对象的方法来发起异步请求。
3. 调用 axios 对象的方法来处理响应的数据。
- axios常用方法
| 方法名 | 作用 |
|---|---|
| get(请求的资源路径与请求的参数) | 发起GET方式请求 |
| post(请求的资源路径,请求的参数) | 发起POST方式请求 |
| then(response) | 请求成功后的回调函数，通过response获取响应的数据 |
| catch(error) | 请求失败后的回调函数，通过error获取错误信息 |
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);
})
}
}
});
iframe标签的使用
//作用： 他可以在当前页面中嵌入其他页面
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
</head>
<body>
<h1>hello world</h1>
<iframe src="login.html" frameborder="false" style="top:80px;left: 120px; width: 100%;height:500px"></iframe>
</body>
</html>
综合案例 学生管理系统
1.工程导入相关问题
1. jar包问题
1. servlet相关的jar是没有的（alt + enter直接下载， 拷贝javax-servlet-api.jar）
2. web-inf下面的libs名字错误的，应该为lib.错误会导致classnotfoundException
2. filter有问题
filter需要实现方法，不需要写任何内容
2.后端前端准备
1创建数据库
所有字段名表名都小写（USER是大写）//尽量别用user做表格名称,
//不同的软件识别不了,有的是默认大写,有的可以小写 sql语句时无法识别
2. mybatis相关配置信息
3. 三层架构的相关的类
4. filter的拷贝
前端 导包 和 相关 html 文件
3.实现登录功能
准备结构搭建好后
1.0 sql
SELECT * FROM user WHERE username=#{username} AND password=#{password}
2.0 编写dao层
public interface UserMapper {
/*
登录方法
*/
@Select("SELECT * FROM user WHERE username=#{username} AND password=#{password}")
public abstract List<User> login(User user);
}
3.0 service编写
-
a 接口编写
/* 业务层约束接口 */ public interface UserService { /* 登录方法 */ public abstract List<User> login(User user); } -
b.实现类
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; } }
4.0 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);
}
}
4.分页查询学生功能
后端
1.0 sql
SELECT * FROM student -- [ limit 0,10]
2.0 dao层编写
public interface StudentMapper {
//查询全部的方法
@Select("SELECT * FROM student")
public abstract List<Student> selectAll()
}
3.0 service 编写(分页查询)
-
接口编写
public interface StudentService { /* 分页查询方法 */ public abstract Page selectByPage(Integer currentPage, Integer pageSize); -
实现类
/* 分页查询功能 */ @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.0 servlet 控制层
@WebServlet("/studentPageServlet")
public class StudentPageServlet extends HttpServlet {
private StudentService service = new StudentServiceImpl();
protected void doPost(HttpServletRequest req, HttpServletResponse resp) throws ServletException, IOException {
doGet(req, resp);
}
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");
String currentPage = req.getParameter("currentPage");
String pageSize = req.getParameter("pageSize");
//调用业务层的查询方法
Page page = service.selectByPage(Integer.parseInt(currentPage), Integer.parseInt(pageSize));
//封装
PageInfo info = new PageInfo(page);
//将info转换成json
try {
String s = new ObjectMapper().writeValueAsString(info);
resp.getWriter().write(s);
} catch (Exception e) {
e.printStackTrace();
}
}
}
前端
//分页查询功能
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;
})
},
5.添加学生
- 后端步骤
1. sql语句
insert into student values(007, 'zhangsan', '2000-01-01', 'dongguan')
2. dao层
@Insert("insert into student values(#{number}, #{name}, '2000-01-01', #{address})")
void insertStudent(Student student);
3. service 层
调用dao层
4. 1. servlet调用service
2. 给用户响应
- service 层
添加数据方法
*/
@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();
}
}
}
}
-
servlet
//获取请求参数 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(); } } -
前端步骤
1. 打开对话窗口 2. 添加学生信息（给窗口中的添加按钮绑定点击事件） 3. 点击事件中 1. 获取数据 2. 发起请求 3. 拿到响应判断是否成功，如果成功重新查询数据 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; },
6删除学生
后端
1. sql
2. dao
3. service
4. servlet
1. 获取参数，number
2. 响应前端，是否删除成功
前端
1. 删除按钮绑定点击事件
1. 获取当前行的学生的编号
2. 发送请求
3. 重新查询
2. 删除时询问
// 如果该弹出你点击确定则result为true，反之为false
let result = confirm("确定要删除10032数据?")
7修改
后端
1. sql
2. dao层
3. service
4. servlet
1. 获取参数（student对象）
2. 调用service中的方法
3. 响应
前端
1. 显示弹窗
2. 显示数据
1. 实际上就是修改vue对应的数据
3. 修改按钮的点击事件
1. 获取数据
2. 发送请求
3. 展示数据（查询）
4. 关闭窗框