目录
一、Filter
比如之前的登录案例，如果不登录直接访问后面的页面，它任然可以直接访问，那么做这个登陆注册页面将毫无用处，我们需要对每个页面进行过滤，查看用户是否登录
1、Filter快速入门
web三大组件：servlet、Filter、Listener，都在web包下新建包
//拦截所有
@WebFilter("/*")
public class FilterDemo implements Filter {
@Override
public void doFilter(ServletRequest request, ServletResponse response, FilterChain chain) throws IOException, ServletException {
System.out.println("hello。。。");
//放行
chain.doFilter(request,response);
}
@Override
public void init(FilterConfig filterConfig) throws ServletException {
}
@Override
public void destroy() {
}
}2、Filter执行流程
//拦截所有
@WebFilter("/*")
public class FilterDemo implements Filter {
@Override
public void doFilter(ServletRequest request, ServletResponse response, FilterChain chain) throws IOException, ServletException {
//执行前逻辑，对request进行操作
System.out.println("hello。。。");
//放行
chain.doFilter(request,response);
//执行后逻辑，对response进行操作
System.out.println("执行后。。。");
}3、Filter使用细节
1、Filter拦截路径配置
2、过滤器链
先拦截的后执行，后拦截的先执行
注解配置的Filter，优先级按照Filter的类名自然排序，也就是按照包下的Filter类上下顺序进行排序
4、案例：登陆验证
@WebFilter("/*")
public class LoginFilter implements Filter {
@Override
public void doFilter(ServletRequest servletRequest, ServletResponse servletResponse, FilterChain filterChain) throws IOException, ServletException {
//放行前逻辑
HttpServletRequest req = (HttpServletRequest) servletRequest;
//获取页面的Session
HttpSession session = req.getSession();
Object user = session.getAttribute("user");
if (user == null){
req.setAttribute("login_msg","请先登录");
req.getRequestDispatcher("/html/index.jsp").forward(servletRequest,servletResponse);
}
filterChain.doFilter(servletRequest,servletResponse);
}
但是当访问页面时发现连CSS样式都被拦截过滤了
要判断用户访问的是否是与登陆页面相关的资源，相关就要放行
@WebFilter("/*")
public class LoginFilter implements Filter {
@Override
public void doFilter(ServletRequest servletRequest, ServletResponse servletResponse, FilterChain filterChain) throws IOException, ServletException {
//放行前逻辑
//强转为HttpServletRequest
HttpServletRequest req = (HttpServletRequest) servletRequest;
//将与登陆相关的资源放进数组
String[] urls = {"/html/","/css/","/login","/addUser","/check","/img/"};
//获取当前的访问路径
String uri = req.getRequestURI();
//在资源数组中遍历,查看是否包含当前访问路径
for (String s : urls) {
if (uri.contains(s)){
//与登陆资源相关
//放行
filterChain.doFilter(servletRequest,servletResponse);
//如果当前资源是与登陆页面相关直接结束方法，不需要在执行后面的判断
//因为后面的判断是防止用户跳过登录进入商品页面
return;
}
}
二、Listener
三、AJAX
1、AJAX定义
原本是采用jsp使后端数据能够传到前端页面上，但是前端无法从后端获取数据，并且只能通过服务器启动，并传输数据。AJAX实现了前端页面与服务器进行交互，它能够获取服务端的数据返回到前端，实现了前后端分离，
同步与异步
2、AJAX快速入门
前端
<script>
/* 1、创建XmlHttpRequest对象 */
var xhttp;
if (window.XMLHttpRequest) {
xhttp = new XMLHttpRequest();
} else {
// code for IE6, IE5
xhttp = new ActiveXObject("Microsoft.XMLHTTP");
}
/* 2、向服务器发送请求 */
xhttp.open("GET", "http://localhost:8080/web_other_war//ajaxServlet");
xhttp.send();
/* 3、获取服务器响应数据 */
xhttp.onreadystatechange = function() {
if (this.readyState == 4 && this.status == 200) {
//将响应数据弹窗
alert(this.responseText);
}
};
</script>后端
@WebServlet("/ajaxServlet")
public class AjaxServlet extends HttpServlet {
@Override
protected void doGet(HttpServletRequest req, HttpServletResponse resp) throws ServletException, IOException {
PrintWriter writer = resp.getWriter();
writer.write("hello,ajax.....");
}
@Override
protected void doPost(HttpServletRequest req, HttpServletResponse resp) throws ServletException, IOException {
this.doGet(req, resp);
}
}3、使用AJAX验证用户名是否存在
后端
@WebServlet("/selectByName")
public class SelectByName extends HttpServlet {
@Override
protected void doGet(HttpServletRequest req, HttpServletResponse resp) throws ServletException, IOException {
//1、接收用户名
String username = req.getParameter("username");
//2、调用service判断用户名是否存在
//3、用户名存在返回true
boolean flag = true;
//4、将查询的结果相应给前端
PrintWriter writer = resp.getWriter();
writer.write(""+flag);
}
@Override
protected void doPost(HttpServletRequest req, HttpServletResponse resp) throws ServletException, IOException {
this.doGet(req, resp);
}
}前端
<script>
//1、获取用户名的输入框绑定失去焦点事件
document.getElementById("username").onblur = function (){
//2、获取输入的用户名
var username = this.value;
//3、获取后端的响应数据
/* 3.1、创建XmlHttpRequest对象 */
var xhttp;
if (window.XMLHttpRequest) {
xhttp = new XMLHttpRequest();
} else {
// code for IE6, IE5
xhttp = new ActiveXObject("Microsoft.XMLHTTP");
}
/* 3.2、向服务器发送请求 */
xhttp.open("GET", "http://localhost:8080/web_other_war/selectByName?username=" + username);
xhttp.send();
/* 3.3、获取服务器响应数据 */
xhttp.onreadystatechange = function() {
if (this.readyState == 4 && this.status == 200) {
//4、将响应数据提示到页面
if (this.responseText == "true"){
document.getElementById("username_err").style.display='';
}else {
document.getElementById("username_err").style.display='none';
}
}
};
}
</script>
4、Axios异步框架
1、快速入门
<script src="../js/axios-0.27.2.js"></script>
<script>
//1、get
/*axios({
method:"GET",
url:"http://localhost:8080/web_other_war/axios?username=zhangsan"
}).then(function (resp) {
alert(resp.data);
});*/
//2、post
axios({
method:"POST",
url:"http://localhost:8080/web_other_war/axios",
data:"username=zhangsan"
}).then(function (resp) {
alert(resp.data);
})
</script>2、Axios请求方式别名
5、JSON
1、JSON基础语法
2、JSON数据和Java对象转换
public class JsonDemo {
public static void main(String[] args) {
//1、将java对象转成json对象
User user = new User(1,"zhangsan","123");
String s = JSON.toJSONString(user);
System.out.println(s);
//2、将Json字符串转成java对象
User user1 = JSON.parseObject("{\"id\":1,\"password\":\"123\",\"username\":\"zhangsan\"}", User.class);
System.out.println(user1);
}
}四、Vue
1、Vue快速入门
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
</head>
<body>
<div id="app">
<!--绑定模型-->
<input v-model="username" >
<!--使用插值表达式输出-->
{{username}}
</div>
</body>
<script src="../js/vue.js"></script>
<script>
//1、创建vue核心对象
new Vue({
el:"#app",
data(){
return{
username:""
}
}
})
</script>
</html>2、vue常用指令
<div id="app">
<!--1、双向绑定模型-->
<input v-model="username" >
<!--使用插值表达式输出-->
{{username}}
<!--2、绑定属性值，添加href使数据更加灵活-->
<a v-bind:href="url">百度一下</a>
<!--简化书写-->
<a :href="url">简化</a>
<!--使用input标签双向绑定v-model可以改变url的地址值-->
<input v-model="url">
</div>
</body>
<script src="../js/vue.js"></script>
<script>
//1、创建vue核心对象
new Vue({
el:"#app",
data(){
return{
username:"",
url:"https://www.baidu.com"
}
}
})
</script> 
<!--3、v-on 绑定事件-->
<input type="button" value="一个按钮" v-on:click="show">
<!--简化-->
<input type="button" value="按钮简化" @click="show">
<script>
//1、创建vue核心对象
new Vue({
el:"#app",
data(){
return{
username:"",
url:"https://www.baidu.com"
}
},
/*定义方法*/
methods:{
show(){
alert("我被电了")
}
}
})
</script>
<body>
<div id="app2">
<div v-if="count == 1">div1</div>
<div v-else-if="count == 2">div2</div>
<div v-else>div3</div>
<hr>
<!--与if表面结果相同，实际内部渲染不同，v-show是将标签属性设为display:none，
而v-if不会在源代码显示，压根不会在源代码中展示不满足条件的代码代码-->
<div v-show="count == 2">v-show</div>
<input v-model="count">
</div>
</body>
<script src="../js/vue.js"></script>
<script>
new Vue({
el:"#app2",
data(){
return{
count:3
}
}
})
</script>
<body>
<div id="app2">
<!--v-for-->
<div v-for="add in addrs">{{add}}</div>
<hr>
<!--使用序号遍历循环-->
<div v-for="(add,i) in addrs">
{{i+1}}--{{add}}
</div>
</div>
</body>
<script src="../js/vue.js"></script>
<script>
new Vue({
el:"#app2",
data(){
return{
count:3,
addrs:["北京","上海","广州","深圳"]
}
}
})
</script>3、Vue生命周期
五、Element
1、Element快速入门
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
<!-- 引入样式 -->
<link rel="stylesheet" href="https://unpkg.com/element-ui/lib/theme-chalk/index.css">
</head>
<body>
<div id="app">
<el-row>
<el-button>默认按钮</el-button>
<el-button type="primary">主要按钮</el-button>
<el-button type="success">成功按钮</el-button>
<el-button type="info">信息按钮</el-button>
<el-button type="warning">警告按钮</el-button>
<el-button type="danger">危险按钮</el-button>
</el-row>
</div>
</body>
<!--Element基于Vue实现-->
<script src="js/vue.js"></script>
<!-- 引入组件库 -->
<script src="https://unpkg.com/element-ui/lib/index.js"></script>
<script>
//创建Vue核心对象
new Vue({
el:"#app",
})
</script>
</html>
2、Element布局
3、Element组件
