JavaWeb、其他技术

目录

一、Filter

1、Filter快速入门

2、Filter执行流程

3、Filter使用细节

1、Filter拦截路径配置

2、过滤器链

 4、案例：登陆验证

二、Listener

三、AJAX

1、AJAX定义

         同步与异步

2、AJAX快速入门

3、使用AJAX验证用户名是否存在

 4、Axios异步框架

1、快速入门

2、Axios请求方式别名

5、JSON

1、JSON基础语法

2、JSON数据和Java对象转换

四、Vue

1、Vue快速入门

2、vue常用指令

3、Vue生命周期

五、Element

1、Element快速入门

2、Element布局

3、Element组件

六、JavaWeb终章案例

---

一、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快速入门

前端

后端

@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);
    }
}

前端

 4、Axios异步框架

 1、快速入门

 
<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>Titletitle>
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">
    
    <input v-model="username" >
    
    {{username}}
 
    
    <a v-bind:href="url">百度一下a>
    
    <a :href="url">简化a>
    
    <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>

 

    <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">div1div>
    <div v-else-if="count == 2">div2div>
    <div v-else>div3div>
 
    <hr>
 
    
    <div v-show="count == 2">v-showdiv>
    <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">
 
    
    <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快速入门

html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Titletitle>
    
    <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>
<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组件

六、JavaWeb终章案例