Vue高级使用-Vue的生命周期(了解）
1 生命周期
2 生命周期的八个阶段
Vue高级使用-异步操作(重点)
在Vue中发送异步请求，本质上还是ajax,我们可以使用axios这个插件来简化操作
- 使用步骤
- 引入axios核心js文件
- 调用axios对象的方法来发起异步请求
- 调用axios对象的方法来处理响应的数据
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 后台代码实现
- UserController代码
@WebServlet("/userController")
public class UserController extends HttpServlet {
//创建业务层对象
private UserService userService = 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> userList = userService.login(user);
//对查询出来的结果进行判断
if (userList.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);
}
}
- UserServiceImpl代码
/**
* 登录
* @param user
* @return
*/
@Override
public List<User> login(User user) {
InputStream is =null;
SqlSession sqlSession=null;
List<User> userList =null;
try {
//加载核心配置文件
is = Resources.getResourceAsStream("MyBatisConfig.xml");
//创建session工厂对象
SqlSessionFactory sqlSessionFactory = new SqlSessionFactoryBuilder().build(is);
//创建session对象
sqlSession = sqlSessionFactory.openSession(true);
//创建mapper对象
UserMapper mapper = sqlSession.getMapper(UserMapper.class);
userList = mapper.login(user);
} catch (IOException e) {
e.printStackTrace();
}finally {
if (sqlSession!=null){
sqlSession.close();
}
if (is!=null){
try {
is.close();
} catch (IOException e) {
e.printStackTrace();
}
}
}
return userList;
}
- UserMapper代码
public interface UserMapper {
/*
登录
*/
@Select("select * from user where username = #{username} and password = #{password}")
public abstract List<User> login(User user);
}
2.3 前台代码实现
<script>
new Vue({
el:"#app",
data: {
form: {
username: '',
password: '',
},
rules: { //校验规则
username: [
{required: true, message: '请输入用户名', trigger: 'blur'}
],
password: [
{required: true, message: '请输入密码', trigger: 'blur'}
]
}
},
methods: {
onSubmit(formName) {//formName就是传递过来的'loginForm'值，通过loginForm就可以找到form表单对象
// 为表单绑定验证功能 ,validate()表示的是校验的方法，valid表示校验结果
this.$refs[formName].validate((valid) => {
if (valid) {
//请求服务器完成登录功能
axios.get("userController",{params:this.form})
.then(resp =>{
if (resp.data == true){
//登录成功，跳转到首页
location.href="index.html";
} else {
//登录失败
alert("登录失败，请检查用户或者密码");
location.href="login.html";
}
})
} else {
return false;
}
});
}
}
});
</script>
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 后台代码
- StudentController代码
@WebServlet("/studentController")
public class StudentController extends HttpServlet {
//调用业务层
private StudentService studentService = new StudentServiceImpl();
//创建json核心对象
private ObjectMapper mapper = new ObjectMapper();
@Override
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");
System.out.println(method);
if (method.equals("selectByPage")){
//分页功能
selectByPage(req,resp);
}else if (method.equals("insertStu")){
//添加学生功能
insertStu(req,resp);
}else if (method.equals("updateStu")){
//修改学生功能
updateStu(req,resp);
System.out.println("执行了更新操作");
}else if (method.equals("deleteStu")){
//删除学生功能
deleteStu(req,resp);
}
}
/**
* 分页功能
* @param req
* @param resp
*/
private void selectByPage(HttpServletRequest req, HttpServletResponse resp) {
//获取请求的参数
String currentPage = req.getParameter("currentPage");
String pageSize = req.getParameter("pageSize");
//调用业务层的方法
Page page = studentService.selectByPage(Integer.parseInt(currentPage), Integer.parseInt(pageSize));
//封装PageInfo
PageInfo pageInfo = new PageInfo(page);
//将pageInfo转为json对象
try {
String json = mapper.writeValueAsString(pageInfo);
System.out.println(json);
System.out.println("==================");
//响应给浏览器
resp.getWriter().write(json);
} catch (Exception 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);
}
@Override
protected void doPost(HttpServletRequest req, HttpServletResponse resp) throws ServletException, IOException {
doGet(req, resp);
}
- StudentServiceImpl代码
/**
* 分页功能
* @param currentPage
* @param pageSize
* @return
*/
@Override
public Page selectByPage(Integer currentPage, Integer pageSize) {
InputStream is =null;
SqlSession sqlSession=null;
Page page =null;
try {
//加载核心配置文件
is = Resources.getResourceAsStream("MyBatisConfig.xml");
//创建session工厂对象
SqlSessionFactory sqlSessionFactory = new SqlSessionFactoryBuilder().build(is);
//创建session对象
sqlSession = sqlSessionFactory.openSession(true);
//创建mapper对象
StudentMapper mapper = sqlSession.getMapper(StudentMapper.class);
//设置分页参数
page = PageHelper.startPage(currentPage,pageSize);
//调用实现类对象查询全部方法
mapper.selectAll();
} catch (IOException e) {
e.printStackTrace();
}finally {
if (sqlSession!=null){
sqlSession.close();
}
if (is!=null){
try {
is.close();
} catch (IOException e) {
e.printStackTrace();
}
}
}
//把结果返回给控制层
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;
});
//在methods外面写立即加载的方法(页面一加载就执行这个方法)
mounted(){
//调用分页查询功能
this.selectByPage();
}
4 添加功能
4.1 后台代码实现
- StudentController代码
/**
* 添加学生信息
* @param req
* @param resp
*/
private void insertStu(HttpServletRequest req, HttpServletResponse resp) {
//获取参数
Map<String, String[]> map = req.getParameterMap();
//封装对象
Student student = new Student();
//日期转换
dateConvert();
try {
BeanUtils.populate(student,map);
} catch (Exception e) {
e.printStackTrace();
}
//调用业务层方法
int num = studentService.insertStu(student);
//响应浏览器
try {
resp.getWriter().write(num+"");
} catch (IOException e) {
e.printStackTrace();
}
}
- StudentServiceImpl代码
/**
* 添加学生
* @param student
*/
@Override
public int insertStu(Student student) {
InputStream is =null;
SqlSession sqlSession=null;
int num = 0;
try {
//加载核心配置文件
is = Resources.getResourceAsStream("MyBatisConfig.xml");
//创建session工厂对象
SqlSessionFactory sqlSessionFactory = new SqlSessionFactoryBuilder().build(is);
//创建session对象
sqlSession = sqlSessionFactory.openSession(true);
//创建mapper对象
StudentMapper mapper = sqlSession.getMapper(StudentMapper.class);
num = mapper.insertStu(student);
} catch (IOException e) {
e.printStackTrace();
}finally {
if (sqlSession!=null){
sqlSession.close();
}
if (is!=null){
try {
is.close();
} catch (IOException e) {
e.printStackTrace();
}
}
}
return num;
}
- StudentMapper
/**
* 添加学生
* @param student
*/
@Insert("insert into student values(#{number},#{name},#{birthday},#{address})")
public abstract int insertStu(Student student);
4.2 前台代码实现
//添加学生信息
insertStu(){
this.formData.method="insertStu";
axios.get("studentController",{params:this.formData})
.then(resp =>{
if (resp.data){
this.selectByPage();
}
});
//关闭窗口
this.dialogTableVisible4add = false;
},
5 修改功能
5.1 后台代码实现
- StudentController代码
/**
* 修改学生信息
* @param req
* @param resp
*/
private void updateStu(HttpServletRequest req, HttpServletResponse resp) {
//获取参数
Map<String, String[]> map = req.getParameterMap();
System.out.println(map);
//封装对象
Student student = new Student();
//日期转换
dateConvert();
try {
BeanUtils.populate(student,map);
} catch (Exception e) {
e.printStackTrace();
}
//调用业务层方法
int num = studentService.updateStu(student);
//响应浏览器
try {
resp.getWriter().write(num+"");
} catch (IOException e) {
e.printStackTrace();
}
}
- StudentServiceImpl代码
/**
* 修改学生
* @param student
*/
@Override
public int updateStu(Student student) {
InputStream is =null;
SqlSession sqlSession=null;
int num =0;
try {
//加载核心配置文件
is = Resources.getResourceAsStream("MyBatisConfig.xml");
//创建session工厂对象
SqlSessionFactory sqlSessionFactory = new SqlSessionFactoryBuilder().build(is);
//创建session对象
sqlSession = sqlSessionFactory.openSession(true);
//创建mapper对象
StudentMapper mapper = sqlSession.getMapper(StudentMapper.class);
num = mapper.updateStu(student);
} catch (IOException e) {
e.printStackTrace();
}finally {
if (sqlSession!=null){
sqlSession.close();
}
if (is!=null){
try {
is.close();
} catch (IOException e) {
e.printStackTrace();
}
}
}
return num;
}
- StudentMapper
/**
* 修改学生
* @param student
*/
@Update("update student set name=#{name},birthday=#{birthday},address=#{address} where number=#{number}")
public abstract int updateStu(Student student);
5.2 前台代码实现
//修改学生信息
updateStu(){
this.editFormData.method="updateStu";
axios.get("studentController",{params:this.editFormData})
.then(resp =>{
if (resp.data){
this.selectByPage();
}
});
//关闭窗口
this.dialogTableVisible4edit = false;
},
6 删除功能
6.1 后台代码实现
- StudentController代码
/**
* 删除学生信息
* @param req
* @param resp
*/
private void deleteStu(HttpServletRequest req, HttpServletResponse resp) {
//获取参数
String number = req.getParameter("number");
//调用业务层的删除方法
studentService.deleteStu(number);
//响应浏览器
try {
resp.getWriter().write("true");
} catch (IOException e) {
e.printStackTrace();
}
}
- StudentServiceImpl代码
/**
* 删除学生
* @param number
*/
@Override
public void deleteStu(String number) {
InputStream is =null;
SqlSession sqlSession=null;
try {
//加载核心配置文件
is = Resources.getResourceAsStream("MyBatisConfig.xml");
//创建session工厂对象
SqlSessionFactory sqlSessionFactory = new SqlSessionFactoryBuilder().build(is);
//创建session对象
sqlSession = sqlSessionFactory.openSession(true);
//创建mapper对象
StudentMapper mapper = sqlSession.getMapper(StudentMapper.class);
mapper.deleteStu(number);
} catch (IOException e) {
e.printStackTrace();
}finally {
if (sqlSession!=null){
sqlSession.close();
}
if (is!=null){
try {
is.close();
} catch (IOException e) {
e.printStackTrace();
}
}
}
}
- StudentMapper
/**
* 删除学生
* @param number
*/
@Delete("delete from student where number=#{number}")
public abstract void deleteStu(String number);
6.2 前台代码实现
//删除学生
deleteStu(row){
if (confirm("确定要删除"+row.number+"数据？")){
//先将查询的标记添加到pagination对象中
this.pagination.method="deleteStu";
this.pagination.number=row.number;
axios.get("studentController",{params:this.pagination})
.then(resp =>{
if (resp.data){
this.selectByPage();
}
})
}
}
总结
html+css(2天)-->javascript(2天)--->jquery+ajax(2天)--->Vue+ElementUI(2天)
DOM操作：
操作内容：
javascript：
元素对象.innerHTML;
元素对象.value;
jquery：
jquery元素对象.html();
jquery元素对象.val();
Vue：
插值表达式:{{表达式}}、v-html指令
v-model表单数据双向绑定
操作属性：
javascript：
元素对象.setAttribute(name,value);
元素对象.getAttribute(name);
jquery：
jquery元素对象.attr();
设置值：jquery元素对象.attr(name,value);
获取值：jquery元素对象.attr(name);
jquery元素对象.prop(); //一般用于操作checked、selected属性
Vue：
v-bind:属性名 将vue中变量的值绑定到标签的属性中，也可以简写(:属性名)
操作样式：
javascript：
元素对象.style.样式名=样式值;
元素对象.className="class属性值";
jquery：
jquery元素对象.css();
设置值：jquery元素对象.css(name,value);
设置值：jquery元素对象.css({name:value,name:value,...});
Vue：
先使用类选择器写好样式，然后给class属性绑定值
v-bind:属性名 将vue中变量的值绑定到标签的属性中，也可以简写(:属性名)
标签增删改查：
javascript：
推荐使用innerHTML属性
jquery：
推荐使用html()方法
append()
remove()
Vue：
v-for遍历展示数据
事件：
单击事件：
javascript：
方式1:<input type="button" value="新按钮" onclick="fun()"/>
方式2:标签对象.onclick=function(){}
jquery：
标签对象.click(function(){
})
Vue：
第一步：
<input type="button" value="新按钮" @click="fun()"/>
第二步：
methods:{
fun(){
}
}
失去焦点事件：
页面加载完成事件
javascript：
window.onload=function(){}
jquery：
$(function{
})
Vue：利用生命周期方法
new Vue({
created(){
//Vue对象被创建完成了
}
});
内容改变事件：
表单提交事件：必须有一个true或者false的返回值表示允许提交或者阻止提交
ajax异步请求：重点
jquery中的ajax操作：
$.ajax({
url:"", //请求路径
data:"", //请求参数，两种写法
type:"", //请求方式
dataType:"json"，//响应回来的数据类型
success:function(resp){ //响应成功要调用的函数，resp表示响应结果
//在成功的函数中需要进行DOM操作：获取标签对象，拼接html代码，添加到标签的内容体中
}
})
$.get(url,data,function(resp){},dataType);
$.post(url,data,function(resp){},dataType);
说明：传递给服务器的参数格式最终都是name=value&name=value...，在后台Servlet中可以使用BeanUtils封装请求参数
Vue和axios异步操作：
axios.get(url?参数).then((resp)=>{
//响应成功要调用的函数，resp封装了响应结果，如果需要获取响应数据，那么就需要resp.data;
})
axios.get(url,{params:参数对象).then((resp)=>{ //params是固定写法
//响应成功要调用的函数，resp封装了响应结果，如果需要获取响应数据，那么就需要resp.data;
})
axios.post(url,拼接参数字符串).then((resp)=>{
//响应成功要调用的函数，resp封装了响应结果，如果需要获取响应数据，那么就需要resp.data;
})
说明：以上三种方式，传递给服务器的参数格式最终都是name=value&name=value...，在后台Servlet中可以使用BeanUtils封装请求参数
axios.post(url,参数对象).then((resp)=>{ //params是固定写法
//响应成功要调用的函数，resp封装了响应结果，如果需要获取响应数据，那么就需要resp.data;
})
注意/特殊点：axios底层会先使用JSON将参数对象转换成json字符串，然后发送给服务器。在服务器端无法使用request.getParameter()等方法获取，也无法使用BeanUtils封装。需要使用jackson中的ObjectMapper中的readValue(request.getReader(),bean类.class)将json转换成Java对象
414
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
