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: `
<div> //解析标签模板 只有一个标签,内部可以嵌套多个标签
<div>{{myname}}</div>
<div>{{age}}</div>
</div>
`,
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(){
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是大写）
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{
is
= Resources
.getResourceAsStream("MyBatisConfig.xml");
SqlSessionFactory sqlSessionFactory
= new SqlSessionFactoryBuilder().build(is
);
sqlSession
= sqlSessionFactory
.openSession(true);
UserMapper mapper
= sqlSession
.getMapper(UserMapper
.class);
list
= mapper
.login(user
);
}catch (Exception e
) {
e
.printStackTrace();
} finally {
if(sqlSession
!= null
) {
sqlSession
.close();
}
if(is
!= null
) {
try {
is
.close();
} catch (IOException e
) {
e
.printStackTrace();
}
}
}
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");
String username
= req
.getParameter("username");
String password
= req
.getParameter("password");
User user
= new User(username
,password
);
List
<User> list
= service
.login(user
);
if(list
.size() != 0) {
req
.getSession().setAttribute("username",username
);
resp
.getWriter().write("true");
}else {
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{
is
= Resources
.getResourceAsStream("MyBatisConfig.xml");
SqlSessionFactory sqlSessionFactory
= new SqlSessionFactoryBuilder().build(is
);
sqlSession
= sqlSessionFactory
.openSession(true);
StudentMapper mapper
= sqlSession
.getMapper(StudentMapper
.class);
page
= PageHelper
.startPage(currentPage
,pageSize
);
mapper
.selectAll();
} catch (Exception e
) {
e
.printStackTrace();
} finally {
if(sqlSession
!= null
) {
sqlSession
.close();
}
if(is
!= null
) {
try {
is
.close();
} catch (IOException e
) {
e
.printStackTrace();
}
}
}
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");
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
);
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{
is
= Resources
.getResourceAsStream("MyBatisConfig.xml");
SqlSessionFactory sqlSessionFactory
= new SqlSessionFactoryBuilder().build(is
);
sqlSession
= sqlSessionFactory
.openSession(true);
StudentMapper mapper
= sqlSession
.getMapper(StudentMapper
.class);
mapper
.addStu(stu
);
} catch (Exception e
) {
e
.printStackTrace();
} finally {
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 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
=> {
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. 删除时询问
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. 关闭窗框
