学习归纳10：JavaWeb(Maven、HTTP、Servlet、Cookie、Session、Filter、axios、json、vue)

一.Maven

Maven是专门用于管理和构建java项目的工具，主要功能有：

1.提供了一套标准化的项目结构

2.提供了一套标准化的构建流程

3.提供了一套依赖管理机制

clean清空 compile编译 package打包 test运行全部test文件 

<!--  dependencies只有一个，想要引入多个在内部写多个dependency  -->
    <dependencies>
        <dependency>
<!--            组织名称-->
            <groupId>mysql</groupId>
<!--            模块名称-->
            <artifactId>mysql-connector-java</artifactId>
<!--            版本号-->
            <version>8.0.26</version>
        </dependency>

        <dependency>
            <groupId>javax.servlet</groupId>
            <artifactId>servlet-api</artifactId>
            <version>2.5</version>
        </dependency>
    </dependencies>

二.HTTP协议(超文本传输协议)

基于tcp协议，面向连接，安全；请求和响应式一一对应关系；http是无状态协议，对于事物处理没有记忆能力，每次请求-相应都是独立的

缺点：多次请求间不能共享数据      优点：速度快

请求数据格式：请求行，请求头，请求体

请求行：HTTP请求中的第一行数据，请求行包含三块内容，请求方式、请求URL路径、HTTP协议及版本，请求方式有七种，最常用的是get和post

请求头：第二行开始，格式为键值对形式 key：value。常见的请求头有：Host，请求的主机名；User-Agent，浏览器版本；Accept，浏览器能接收的资源类型；Accept-Language，浏览器偏好的语言；Accept-Encoding，浏览器支持的压缩类型

请求体：post请求的最后一部分(get请求参数在请求行中，没有请求体)，存储请求参数

响应数据格式：响应行、响应头、响应体

响应行：响应数据的第一行，包含三块内容：http协议及版本、响应状态码、状态码的描述

响应头：第二行开始，格式为键值对形式 key：value。常见的响应头有:Content-Type,表示响应内容的类型；Content-Length，表示响应内容的长度(字节数)；Content-Encoding，表示该响应压缩算法；Cache-Control，指使客户端如何缓存

响应体：最后一部分，存放相应数据

状态码分类：1XX 响应中 2XX 成功 3XX 重定向 4XX 客户端错误 5XX 服务器端错误

三.Web服务器

Web服务器是一个应用程序，对http协议的操作进行封装，使得程序员不必直接对协议进行操作

Web服务器软件使用步骤：

1.准备静态资源

2.下载安装Web服务器软件

3.将静态资源部署到Web服务器上

4.启动Web服务器使用浏览器访问对应的资源

<!--    打war包,jar包被别人依赖,war包是部署的项目-->
    <packaging>war</packaging>

Servlet

运行在服务器端的java程序

<dependency>
      <groupId>javax.servlet</groupId>
      <artifactId>javax.servlet-api</artifactId>
      <version>4.0.1</version>
      <scope>provided</scope>
    </dependency>

//写多个属性需要写urlPatterns
//loadOnStartup写0或正整数tomcat一启动就创建Servlet，数越小优先级越高，写-1第一个用户访问才创建，默认-1
//tomcat关闭时servlet消亡
@WebServlet(urlPatterns = {"/ccc"},loadOnStartup = 1)
public class ServletDemo1 implements Servlet {
    //执行方法，用户访问一次执行一次，可执行n次
    @Override
    public void service(ServletRequest servletRequest, ServletResponse servletResponse) throws ServletException, IOException {
        System.out.println("已接收到请求");
    }

    //初始化方法，servlet创建时执行，只执行1次
    @Override
    public void init(ServletConfig servletConfig) throws ServletException {
        System.out.println("初始化方法执行");
    }

    //销毁方法，servlet死亡时执行
    @Override
    public void destroy() {
        System.out.println("销毁方法");
    }

    //这两个方法不常用
    @Override
    public ServletConfig getServletConfig() {
        return null;
    }

    @Override
    public String getServletInfo() {
        return null;
    }

}

//注解在Servlet的3版本之后开始支持，之前的版本需要另外的方法
//多路径匹配 value和urlPatterns都可以
//@WebServlet(urlPatterns={"/bb","/aa"})
//目录匹配 路径前面写/cc，后面写什么都行
//@WebServlet("/cc/*")
//扩展名匹配 写路径时前面任意，.do结尾
//@WebServlet("*.do")
//任意匹配 建议写前者，后者会覆盖tomcat的任意匹配
//@WebServlet("/*")或@WebServlet("/")
//精确路径匹配优先级比较高，范围越大优先级越低
//精确路径匹配
@WebServlet("/bb")
//ctrl+o选中doGet和doPost重写，需要的就选中
public class ServletDemo2 extends HttpServlet {
    //req是请求对象,封装着用户发送的数据，resp是响应对象
    //请求方式 req.getMethod()
    //虚拟目录(项目名) req.getContextPath()
    //url路径 req.getRequestURL()
    //通过键取值，只能获取一个 req.getParameter("键名")
    //通过键取值形成数组，可获取多个 req.getParameterValues("键名")
    //接收get方式请求
    @Override
    protected void doGet(HttpServletRequest req, HttpServletResponse resp) throws ServletException, IOException {
        System.out.println(111);
        //请求转发 只能在项目内跳转
        //地址栏不变，一次请求一次响应，传递数据
        //req.setAttribute("mag",123);//只一次请求有效，键值对存储到预对象，随请求转发转发走，Demo2通过getAttribute("mag")接收
        //req.getRequestDispatcher("/WebDemo/Demo2").forward(req,resp);

        //响应字符 进到页面显示的内容
        //中文乱码，设置响应格式
        //resp.setContentType("text/html;charset=utf-8");
        //PrintWriter writer = resp.getWriter();
        //writer.write("上面设置了html，这里可以使用标签");

        //响应字节
        //1.将图片加载进内存
        //FileInputStream is = new FileInputStream("D:\Desktop\1.jpg");
        //2.将图片返回
        //ServletOutputStream os = resp.getOutputStream();
        //byte[] bytes = new byte[1024];
        //int i;
        //while ((i = is.read(bytes)) != -1) {
            //os.write(bytes,0,i);
        //}
        //os不需要关流
        //is.close();


        //重定向
        //两次请求，两次响应 地址栏路径发生变化，可以重定向到外部地址，不能传递数据
        //地址是浏览器在用就需要加上协议的全路径，服务器用不需要，请求转发就是服务器，重定向是浏览器
        //resp.sendRedirect("http://localhost:8080/WebDemo/Demo2");
    }

    //接收post方式请求
    @Override
    protected void doPost(HttpServletRequest req, HttpServletResponse resp) throws ServletException, IOException {
        //post请求会出现中文乱码,设置编码集重新解码
        req.setCharacterEncoding("utf-8");
        //防止代码冗余，接收后调用doGet
        this.doGet(req,resp);
    }
}

 Cookie

客户端会话跟踪技术

protected void doGet(HttpServletRequest request, HttpServletResponse response) throws ServletException, IOException {
        //不能传中文的浏览器需要自己编码、解码
        //编码 String zs = URLEncoder.encode("张三", "utf-8");
        //创建Cookie
        Cookie cookie = new Cookie("name","张三");
        //设置Cookie存活时间 int类型 秒数 默认浏览器关闭就消失，为负数 写0立即删除 写算式可读性好但速度慢，直接写秒数速度快，需要注释时间增加可读性
        cookie.setMaxAge(60*60*24*7);

        //保存在浏览器
        response.addCookie(cookie);
    }

protected void doGet(HttpServletRequest request, HttpServletResponse response) throws ServletException, IOException {
        //获取Cookie
        Cookie[] cookies = request.getCookies();
        for(Cookie cookie : cookies) {
            String name= cookie.getName();
            if("name".equals(name)){
                //解码 URLDecoder.decode(cookie.getValue(),"utf-8");
                System.out.println(cookie.getValue());
                System.out.println("已登录，无需重复登录");
            }
        }
    }

Session

服务器端会话跟踪技术

Session是基于Cookie实现的

<web-app>
  <display-name>Archetype Created Web Application</display-name>
  <session-config>
<!--    min,修改Session存活时间-->
    <session-timeout>20</session-timeout>
  </session-config>
</web-app>

protected void doGet(HttpServletRequest request, HttpServletResponse response) throws ServletException, IOException {
        //获取,默认保存30分钟
        HttpSession session = request.getSession();
        session.setAttribute("name","张三");
        //删除
        //session.removeAttribute("");

    }

Cookie和Session区别

cookie将数据存储在客户端，Session将数据存储在服务器端

Cookie不安全，Session安全

Cookie最大3KB，Session无大小限制

Cookie默认会话结束关闭，Session默认30min

Cookie只能传字符串，Session无限制

Session是基于Cookie实现的

Filter

import com.buka.web.User;

import javax.servlet.*;
import javax.servlet.annotation.*;
import javax.servlet.http.HttpServletRequest;
import java.io.IOException;
//拦截所有路径
@WebFilter("/*")
public class FilterDemo implements Filter {
    public void init(FilterConfig config) throws ServletException {
    }

    public void destroy() {
    }

    @Override
    public void doFilter(ServletRequest request, ServletResponse response, FilterChain chain) throws ServletException, IOException {
        HttpServletRequest req = (HttpServletRequest) request;
        //放行部分资源
        String[] str = {"/login.jsp","/css/","/imgs/","/selUser","/register"};
        String url = req.getRequestURI();
        for (String s : str) {
            if(url.contains(s)) {
                chain.doFilter(req, response);
                return;
            }
        }
        //判断是否登录过
        User user =(User) req.getSession().getAttribute("user");
        if(user==null) {
            req.getRequestDispatcher("login.jsp").forward(request,response);
        }else{
            //放行
            chain.doFilter(request, response);
        }
    }
}

axios

<script src="js/axios-0.18.0.js"></script>
    <script>
        //创建axios
        // axios({
        //     method:"get",
        //     url:"http://localhost:8080/ajaxDemo/servletAjax"
        // }).then(function(resp){//resp返回的是个对象，文字在对象的data属性
        //     console.log(resp.data)
        // })

        // axios({
        //     method:"post",
        //     url:"http://localhost:8080/ajaxDemo/servletAjax",
        //     data:"name=z3"//post请求传参用data属性，get请求没有
        // }).then(function(resp){
        //     console.log(resp.data)
        // })

        //超级简写(get)
        // axios.get("http://localhost:8080/ajaxDemo/servletAjax").then(function (resp){
        //
        // })
        //post
        axios.post("http://localhost:8080/ajaxDemo/servletAjax","name=z3").then(function (resp){

        })
    </script>

json

protected void doGet(HttpServletRequest request, HttpServletResponse response) throws ServletException, IOException {
        //读取json格式
        //String s = request.getReader().readLine();

        //将json字符串转为java对象
        //User user = JSON.parseObject(s, User.class);

        //java对象转json格式
        //User user = new User(1,"张三","123");
        //String str = JSON.toJSONString(user);
        //response.setContentType("text/json;charset=utf-8");
        //response.getWriter().write(str);
    }

vue

    <script src="js/vue.js"></script>
<!--    vue视图和模型双向数据绑定-->
</head>
<body>
<!--视图-->
<div id="app">
<!--    v-model将视图和模型绑定-->
    <input v-model="url">
<!--    差值表达式，内部可以写运算符-->
<!--    {{pass}}-->
<!--    v-bind绑定属性，报红不是代码问题，可以正常运行-->
    <a v-bind:href="url">跳转</a>
<!--    简写 <a :href="url">点击</a>-->
    <button v-on:click="fun()">弹窗</button>
<!--    简写 <button @:click="fun()">弹窗</button>-->
</div>
<script>
    //创建vue
    new Vue({
        //控制范围
        el:"#app",
        //模型
        data(){
            return{
                url:"https://www.baidu.com",
                pass:""
            }
        },
        //方法区，可以获取模型内数据
        methods: {
            fun(){
                alert(this.url)
            }
        },
        //生命周期方法，也叫钩子方法,不需要调用，会自己执行
        //brforeCreat创建前、created创建后、beforeMount载入前、mounted挂载完成、beforeUpdate更新前、updated更新后、beforeDestroy销毁前、destroyed销毁后
        mounted(){
            alert("页面加载完毕")
        }
    })
</script>

<div id="app">
    <input v-model="pass">
<!--    if else多分支-->
    <div v-if="pass==1">div1</div>
    <div v-else-if="pass==2">div2</div>
    <div v-else-if="pass==3">div3</div>
    <div v-else-if="pass==4">div4</div>
    <div v-else="">div5</div>
<!--    if为false时代码不显示，show显示-->
    <div v-show="pass==10">show</div>
</div>
<script>
    new Vue({
        el:"#app",
        data(){
            return{
                pass:"",
            }
        }
    })
</script>

<div id="app">
<!--    for循环-->
<!--    a是临时变量 in是关键字 arr是数组名称 (a,i)前面临时变量后面下标-->
    <div v-for="(a,i) in arr">{{a}}----{{i}}</div>
    <div v-model="obj.age"></div>
    <div v-if="bo">123</div>
</div>
<script>
    new Vue({
        el:"#app",
        data(){
            return{
                //数组
                arr:["奥奥","嗷嗷","啊啊"],
                //对象
                obj:{
                    name:"",
                    age:"",
                },
                //boolean
                bo:false
            }
        }
    })
</script>