javaweb学习以及相关框架使用

JavaWeb技术栈

• B/S架构： Browser/Server，浏览器/服务器架构模式，它的特点是，客户端只需要浏览器，应用程序的逻辑和数据都存储在服务器端。浏览器只需要请求服务器，获取Web资源，服务器把Web资源发送给浏览器即可。
• 好处：易于维护升级，服务器端升级后，客户端无需任何部署就可以使用到新的版本。
• 静态资源：HTML、CSS、JavaScript、图片等。负责页面展现。
• 动态资源：Servlet、JSP等。负责逻辑处理。
• 数据库：负责存储数据。
• HTTP协议：定义通信规则。
• Web服务器：负责解析HTTP协议，解析请求数据，并发送响应数据。

HTTP

HTTP：超文本传输协议，规定了浏览器和服务器之间数据传输的规则。

HTTP协议特点

1. 基于TCP协议：面向连接，安全。
2. 基于请求-响应模型的：一次请求对应一次响应。
3. HTTP协议是无状态的协议：对于事务处理没有记忆能力。每次请求-响应都是独立的。
   缺点：多次请求间不能共享数据。
   优点：速度快。

HTTP-请求数据格式

请求数据分为3部分:

1. 请求行：请求数据的第一行。其中GET表示请求方式 ，/ 表示请求资源路径，HTTP/1.1表示协议版本。
2. 请求头：第二行开始，格式为key: value形式。
3. 请求体：POST请求的最后一部分，存放请求参数。

常见的HTTP请求头:

• Host：表示请求的主机名
• User-Agent：浏览器版本，例如Chrome浏览器的标识类似Mozilla/5.0 …Chrome/79，IE浏览器的标识类似Mozilla/5.0 (Windows NT …) like Gecko;
• Accept：表示浏览器能接收的资源类型，如text/，image/或者/表示所有;
• Accept-Language：表示浏览器偏好的语言，服务器可以据此返回不同语言的网页;
• Accept-Encoding：表示浏览器可以支持的压缩类型，例如gzip, deflate等。

GET请求和POST请求区别:

• get 提交的数据会放在 URL 之后，并且请求参数会被完整的保留在浏览器的记录里，由于参数直接暴露在 URL 中，可能会存在安全问题，因此往往用于获取资源信息。而 post 参数放在请求主体中，并且参数不会被保留，相比 get 方法，post 方法更安全，主要用于修改服务器上的资源。
• get 请求只支持 URL 编码，post 请求支持多种编码格式。
• get 只支持 ASCII 字符格式的参数，而 post 方法没有限制。
• get 提交的数据大小有限制（这里所说的限制是针对浏览器而言的），而 post 方法提交的数据没限制。
• get请求请求参数在请求行中，没有请求体。post请求请求参数在请求体中。
• get 方式需要使用 Request.QueryString 来取得变量的值，而 post 方式通过 Request.Form 来获取。
• get 方法产生一个 TCP 数据包，post 方法产生两个（并不是所有的浏览器中都产生两个）。

HTTP-响应数据格式

响应数据分为3部分:

1. 响应行：响应数据的第一行。其中HTTP/1.1表示协议版本，200表示响应状态码，OK表示状态码描述。
2. 响应头：第二行开始，格式为key：value形式
3. 响应体：最后一部分。存放响应数据。

状态码查询网站：https://cloud.tencent.com/developer/chapter/13553

Web服务器

Tomcat

Web服务器
Web服务器是一个应该程序（软件)，对HTTP协议的操作进行封装，使得程序员不必直接对协议进行操作，让web开发更加便捷。主要功能是“提供网上信息浏览服务”。

• 概念: Tomcat是Apache软件基金会一个核心项目，是一个开源免费的轻最级Web服务器，支持Servlet/SP少量JavaEE规范。
• JavaEE： Java Enterprise Edition，Java企业版。指Java企业级开发的技术规范总和。包含13项技术规范:JDBC、JNDI、EJB、RMI、JSP、Servlet、XML、JMS、Java lDL、JTS、JTA、JavaMail、JAF。
• Tomcat也被称为Web容器、Servlet容器。Servlet需要依赖于Tomcat才能运行。
• 官网: https://tomcat.apache.org/

1. Web服务器作用?

   封装HTTP协议操作，简化开发.
   可以将web项目部署到服务器中，对外提供网上浏览服务.

2. Tomcat是一个轻量级的Web服务器，支持Servlet/JSP少量JavaEE规范，也称为Web容器，Servlet容器

Servlet

servlet入门

1. 创建web项目，导入Servlet依赖坐标

   <dependency>
   	<groupld>javax.servlet</groupld>
   	<artifactld>javax.servlet-api</artifactld>
       <version>3.1.0</version>
   	<scope>provided</scope>
   </dependency>

2. 创建:定义一个类，实现Servlet接口，并重写接口中所有方法，并在service方法中输入一句话

   public class ServletDemo1 implements Servlet {
   	public void service(){}
   }

3. 配置:在类上使用@WebServlet注解，配置该Servlet的访问路径

   @WebServlet("/demo1")
   public class ServletDemo1 implements Servlet {}

4. 访问:启动Tomcat，浏览器输入URL访问该Servlet：http://localhost:8080/web-demo/demo1

Servlet执行流程

Servlet生命周期

• 对象的生命周期指一个对象从被创建到被销毁的整个过程。

• Servlet运行在servlet容器(web服务器)中，其生命周期由容器来管理，分为4个阶段:

  1. 加载和实例化：默认情况下，当Servlet第一次被访问时，由容器创建Servlet对象。
  2. 初始化：在Servlet实例化之后，容器将调用Servlet的 init() 方法初始化这个对象，完成一些如加载配置文件、创建连接等初始化的工作。该方法只调用一次。
  3. 请求处理：每次请求servlet时，Servlet容器都会调用Servlet的service()方法对请求进行处理。
  4. 服务终止：当需要释放内存或者容器关闭时，容器就会调用Servlet实例的destroy()方法完成资源的释放。在destroy()方法调用之后，容器会释放这个Servlet实例，该实例随后会被Java的垃圾收集器所回收。

测试用例：

package com.jpc;

import javax.servlet.*;
import javax.servlet.annotation.WebServlet;
import java.io.IOException;

@WebServlet("/demo2")
public class ServletDemo2 implements Servlet {


    /**
     * 初始化方法
     * 1. 调用时机：默认情况下,Servlet被第一次访问的时候调用
     *          loadOnStartup: 默认是启动时创建，可以设置为1（提前创建）
     * 2. 调用次数：1
     * @param servletConfig
     * @throws ServletException
     */
    @Override
    public void init(ServletConfig servletConfig) throws ServletException {
        System.out.println("init~~~");
    }

    @Override
    public ServletConfig getServletConfig() {
        return null;
    }

    /**
     * 提供服务
     * 1. 调用时机：每次访问时调用
     * 2. 调用次数：多次
     * @param servletRequest
     * @param servletResponse
     * @throws ServletException
     * @throws IOException
     */
    @Override
    public void service(ServletRequest servletRequest, ServletResponse servletResponse) throws ServletException, IOException {
        System.out.println("servlet hello ~~");
    }

    /**
     * 销毁方法：
     * 1. 调用时机：内存释放的时候或者服务器关闭的时候，Servlet对象会被销毁
     * 2. 调用次数：1次
     */
    @Override
    public void destroy() {

    }

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

}

Servlet的urlPattern配置

1. 精确匹配：
   • 配置路径：@WebServlet(“/user/select”)
   • 访问路径：localhost:8080/web-demo/user/select
2. 目录匹配:
   • 配置路径：@WebServlet( “/user/*”)
   • 访问路径：localhost:8080/web-demd/user/aaa，localhost:8080/web-demd/user/bbb
3. 扩展名匹配:
   • 配置路径：@WebServlet( “*.do” )
   • 访问路径：localhost:8080/web-demo/aaa.do，localhost:8080/web-demo/bbb.do
4. 任意匹配
   • 配置路径：@WebServlet(“/“)，@WebServlet(“/*”)
   • 访问路径：localhost:8080/web-demo/hhh
   • /和/*区别:
     • 当我们的项目中的Servlet配置了“/”，会覆盖掉tomcat中的DefaultServlet，当其他的url-pattern都匹配不上时都会走这个Servlet.
     • 当我们的项目中配置了“/*”，意味着匹配任意访问路径

Request(请求)和Response(响应)

• Request：获取请求数据
• Response：设置响应数据

Request

Request继承体系

1. Tomcat需要解析请求数据，封装为request对象，并且创建request对象传递到service方法中
2. 使用request对象，查阅JavaEE API文档的HttpServletRequest接口

Request获取请求数据

1. 请求行: GET /request-demo/req1?username=zhangsan HTTP/1.1
   • String getMethod()：获取请求方式:GET
   • String getContextPath()：获取虚拟目录(项目访问路径):/request-demo
   • StringBuffer getRequestURLO：获取URL(统一资源定位符): http://localhost:8080/request-demo/req1
   • String getRequestURI()：获取URI(统一资源标识符)：/request-demo/req1
   • String getQueryString()：获取请求参数(GET方式)：username=zhangsan&password=123
2. 请求头：User-Agent: Mozilla/5.0 Chrome/91.0.4472.106
   • String getHeader(String name):根据请求头名称，获取值
3. 请求体：username=superbaby&password=123
   • ServletInputStream getlnputStream()：获取字节输入流
   • BufferedReader getReader()：获取字符输入流

@Override
    protected void doGet(HttpServletRequest req, HttpServletResponse resp) throws ServletException, IOException {


        // 请求行部分
        // 获取请求方式：GET
        String method = req.getMethod();

        // 获取虚拟目录
        String contextPath = req.getContextPath();

        // 获取URL
        StringBuffer url = req.getRequestURL();

        // 获取URI
        String uri = req.getRequestURI();

        // 获取请求参数
        String queryString = req.getQueryString();


        //--------请求头部分
        // 获取请求头：user-agent:浏览器版本信息
        String header = req.getHeader("user-agent");


        System.out.println(method);
        System.out.println(contextPath);
        System.out.println(url);
        System.out.println(uri);
        System.out.println(queryString);
        System.out.println(header);
    }

    @Override
    protected void doPost(HttpServletRequest req, HttpServletResponse resp) throws ServletException, IOException {
        // 获取请求体：
        // 获取字符输入流：
        BufferedReader br = req.getReader();

        // 读取数据
        String line = br.readLine();
        System.out.println(line); 
    }

Request通用方式获取请求参数

• MapgetParameterMap()：获取所有参数Map集合
• String[] getParameterValues(String name)∶根据名称获取参数值（数组)
• String getParameter(String name)：根据名称获取参数值（单个值)

@Override
    protected void doGet(HttpServletRequest req, HttpServletResponse resp) throws ServletException, IOException {

        // 获取Map集合
        Map<String, String[]> map = req.getParameterMap();
        for(String key : map.keySet()) {
            System.out.print(key+": ");
            String[] values = map.get(key);
            for(String val : values){
                System.out.print(val + " ");
            }
            System.out.println("");
        }
        System.out.println("===============");

        // 更具key获取参数
        String[] hobbies = req.getParameterValues("hobby");
        for(String hobby : hobbies) {
            System.out.print(hobby + " ");
        }
        System.out.println("");
        System.out.println("===============");


        // 获取单个值
        String username = req.getParameter("username");
        String password = req.getParameter("password");
        System.out.println(username);
        System.out.println(password);
    }

    @Override
    protected void doPost(HttpServletRequest req, HttpServletResponse resp) throws ServletException, IOException {
        this.doGet(req, resp);
    }

解决中文乱码

// post解决：设置字符输入流编码
req.setCharacterEncoding("UTF-8");


// get方式因为浏览器编码方式是UTF-8而tomcat解码方式是ISO-8859-1，导致乱码

// 1.url编码
String encode = URLEncoder.encode(username, "utf-8");

// 2.url解码
String decode = URLDecoder.decode(encode, "utf-8");

// 3.转化为字节数据
byte[] bytes = decode.get("ISO-8859-1");

// 4.将字节数据转化成字符串
String s = new String(bytes, "utf-8"); 


// get解决：
String username = req.getParameter("username");
username = new String(username.get(StandarCharsets.ISO_8859_1), StanderCharsets.UTF_8);

Request请求转发

• 请求转发(forward)：一种在服务器内部的资源跳转方式。
• 实现方式：req.getRequestDispatcher(“资源B路径”).forward(req,resp);
• 请求转发资源间共享数据：使用Request对象
  • void setAttribute(String name, Object o)：存储数据到request域中
  • Object getAttribute(String name)：根据key，获取值
  • void removeAttribute(String name)：根据key，删除该键值对
• 请求转发特点:
  • 浏览器地址栏路径不发生变化
  • 只能转发到当前服务器的内部资源
  • 一次请求，可以在转发的资源间使用request共享数据

Response

Response设置响应数据功能介绍

响应数据分为3部分:

1. 响应行:HTTP/1.1 200 OK
   void setStatus(int sc)∶设置响应状态码

2. 响应头: Content-Type: text/html
   void setHeader(String name, String value)∶设置响应头键值对

3. 响应体:

   <html><head></head><body></body></html>

   PrintWriter getWriter():获取字符输出流
   ServletOutputStream getOutputStream():获取字节输出流

Response重定向

重定向是一种资源跳转的方式，与转发有很大的区别

重定向流程：浏览器请求资源A，资源A响应（我处理不了，找别人处理《状态码：302 》，那个人的位置是xx）然后浏览器自动请求资源B

转发：浏览器请求资源A，资源处理数据资源将数据转发给资源B

 // 重定向
//        // 设置响应状态码302
//        response.setStatus(302);
//        // 设置响应头
//        response.setHeader("Location", "/servlet_demo1_war/resp2");

        // 简化方式完成重定向
        response.sendRedirect("/servlet_demo1_war/resp2");

重定向特点:

• 浏览器地址栏路径发生变化
• 可以重定向到任意位置的资源（服务器内部、外部均可)
• 两次请求，不能在多个资源使用request共享数据

重定向与转发比较

• 请求转发：客户浏览器发送http请求,web服务器接受此请求,调用内部的一个方法在容器内部完成请求处理和转发动作,将目标资源发送给客户;在这里，转发的路径必须是同一个web容器下的url，其不能转向到其他的web路径上去，中间传递的是自己的容器内的request。在客户浏览器路径栏显示的仍然是其第一次访问的路径，也就是说客户是感觉不到服务器做了转发的。转发行为是浏览器只做了一次访问请求。
• 重定向过程：客户浏览器发送http请求,web服务器接受后发送302状态码响应及对应新的location给客户浏览器,客户浏览器发现是302响应，则自动再发送一个新的http请求，请求url是新的location地址,服务器根据此请求寻找资源并发送给客户。在这里location可以重定向到任意URL，既然是浏览器重新发出了请求，则就没有什么request传递的概念了。在客户浏览器路径栏显示的是其重定向的路径，客户可以观察到地址的变化的。重定向行为是浏览器做了至少两次的访问请求的。

区别	重定向	请求转发
在哪里完成	客户端完成(可以在不同的服务器下完成)	服务器端完成(必须是在同一台服务器下完成)
浏览器发送请求的次数	2次或者2次以上	1次
地址栏URL是否发生改变	地址栏发生变化	地址栏的地址不变
是否共享request	不共享数据(经过重定向后，request内的对象将无法使用)	共享数据(以前的request中存放的变量不会失效，就像把两个页面拼到了一起)
第二次请求发起者	浏览器	服务器
第二次的请求路径方式	绝对路径	相对路径
速度	因为还要浏览器发送第二次请求，重定向相对慢一点	快
语句	response.sendRedirect(“success.jsp”);	request.getRequestDispatcher(“success.jsp”).forward(request,response);

Response响应字符

response.setContentType("text/html;charset=utf-8");
       // 1.获取字符串输出流
       PrintWriter writer = response.getWriter();

       // content-type,设置头
       // response.setHeader("content-type", "text/html");

       writer.write("张三");
       writer.write("<h1>aaa</h1>");

Response响应字节

 // 1.读取文件
        FileInputStream fis = new FileInputStream("C://Users//jpc//Desktop//OldDesktop//5.jpg");

        // 2.获取response字节输出流
        ServletOutputStream os = response.getOutputStream();

        // 3.完成流的copy
//        byte[] buff = new byte[1024];
//        int len = 0;
//        while((len = fis.read(buff)) != -1) {
//            os.write(buff, 0, len);
//        }
        IOUtils.copy(fis, os);

        fis.close();

案例

用户登录

流程说明:

1. 用户填写用户名密码，提交到LoginServlet。
2. 在LoginServlet中使用MyBatis查询数据库，验证用户名密码是否正确。
3. 如果正确，响应“登录成功”，如果错误，响应“登录失败”。

JSP

JSP简介

• 概念:Java Server Pages，Java服务端页面。
• 一种动态的网页技术，其中既可以定义HTML、JS、CSS等静态内容，还可以定义Java代码的动态内容。
• JSP = HTML + Java。
• JSP的作用:简化开发，避免了在Servlet中直接输出HTML标签。

JSP原理

• 概念: Java Server Pages，Java服务端页面
• JSP = HTML + Java，用于简化开发的
• JSP本质上就是一个Servlet
• JSP在被访问时，由JSP容器(Tomcat)将其转换为Java文件(Servlet)，在由JSP容器(Tomcat)将其编译，最终对外提供服务的其实就是这个字节码文件

JSP脚本

JSP脚本用于在JSP页面内定义Java代码

JSP脚本分类:

1. <%…%>:内容会直接放到_jspService()方法之中
2. <%=..%>:内容会放到out.print()中，作为out.print()的参数.
3. <%!..%>:内容会放到_jspService()方法之外,被类直接包含.

JSP缺点

由于JSP页面内，既可以定义HTML标签，又可以定义Java代码，造成了以下问题:

1. 书写麻烦：特别是复杂的页面。
2. 阅读麻烦。
3. 复杂度高：运行需要依赖于各种环境，JRE，JSP容器，JavaEE…
4. 占内存和磁盘：JSP会自动生成.java和.class文件占磁盘，运行的是.class文件占内存。
5. 调试困难：出错后，需要找到自动生成的.java文件进行调试。
6. 不利于团队协作：前端人员不会Java，后端人员不精HTML。

jsp已经比较老了，可替换成html+ajax

EL表达式

• Expression Language表达式语言，用于简化JSP页面内的Java代码

• 主要功能:获取数据

• 语法:${expression}

  ${brands}：获取域中存储的key为brands的数据

• JavaWeb中的四大域对象:

  1. page:当前页面有效
  2. request:当前请求有效
  3. session:当前会话有效
  4. application:当前应用有效

el表达式获取数据，会依次从这4个域中寻找，直到找到为止

MVC模式

MVC是一种分层开发的模式，其中:

• M: Model，业务模型，处理业务

• V: View，视图，界面展示

• C: Controller，控制器，处理请求，调用模型和视图

MVC好处

• 职责单一，互不影响
• 有利于分工协作
• 有利于组件重用

三层架构

• 数据访问层:对数据库的CRUD基本操作

• 业务逻辑层:对业务逻辑进行封装，组合数据访问层层中基本功能，形成复杂的业务逻辑功能

• 表现层:接收请求，封装数据，调用业务逻辑层，响应数据

  

会话跟踪

• 会话:用户打开浏览器，访问web服务器的资源，会话建立，直到有一方断开连接，会话结束。在一次会话中可以包含多次请求和响应。

• 会话跟踪:一种维护浏览器状态的方法，服务器需要识别多次请求是否来自于同一浏览器，以便在同一次会话的多次请求间共享数据。

• HTTP协议是无状态的，每次浏览器向服务器请求时，服务器都会将该请求视为新的请求，因此我们需要会话跟踪技术来实现会话内数据共享。

• 实现方式:

  1. 客户端会话跟踪技术:Cookie
  2. 服务端会话跟踪技术: Session

Cookie

Cookie的实现是基于HTTP协议的

• 响应头: set-cookie
• 请求头: cookie

Cookie存活时间
默认情况下，Cookie存储在浏览器内存中，当浏览器关闭，内存释放，则Cookie被销毁
setMaxAge(int seconds)：设置Cookie存活时间

1. 正数：将Cookie写入浏览器所在电脑的硬盘，持久化存储。到时间自动删除

2. 负数：默认值，Cookie在当前浏览器内存中，当浏览器关闭，则Cookie被销毁

3. 零：删除对应Cookie

Session

服务端会话跟踪技术：将数据保存到服务端

JavaEE提供HttpSession接口，来实现一次会话的多次请求间数据共享功能使用:

1. 获取Session对象HttpSession session = request.getSession();
2. Session对象功能:
   • void setAttribute(String name, Object o)：存储数据到session域中
   • Object getAttribute(String name)：根据key，获取值
   • void removeAttribute(String name)：根据key，删除该键值对

Session是基于Cookie的

Session钝化、活化:

服务器重启后，Session中的数据是否还在?

• 钝化：在服务器正常关闭后， Tomcat会自动将Session数据写入硬盘的文件中
• 活化：再次启动服务器后，从文件中加载数据到Session中

Cookie和Session都是来完成一次会话内多次请求间数据共享的

区别:

• 存储位置:Cookie是将数据存储在客户端，Session将数据存储在服务端
• 安全性:Cookie不安全，Session安全
• 数据大小: Cookie最大3KB，Session无大小限制
• 存储时间:Cookie可以长期存储，Session 默认30分钟
• 服务器性能: Cookie不占服务器资源，Session占用服务器资源

Filter

概念:Filter表示过滤器，是JavaWeb三大组件(Servlet、Filter、Listener)之一。

过滤器可以把对资源的请求拦截下来，从而实现一些特殊的功能。
过滤器一般完成一些通用的操作，比如:权限控制、统一编码处理、敏感字符处理等等。

Filter执行流程

1. 放行后访问对应资源，资源访问完成后，还会回到Filter中。

2. 如果回到Filter中，执行放行后的逻辑呢。
   执行放行前逻辑——》放行——》访问资源——》执行放行后逻辑

一个Web应用，可以配置多个过滤器，这多个过滤器称为过滤器链。

Listener

概念: Listener表示监听器，是JavaWeb三大组件(Servlet、Filter、Listener)之一。

监听器可以监听就是在application,session,request三个对象创建、销毁或者往其中添加修改删除属性时自动执行代码的功能组件。
Listener分类: JavaWeb中提供了8个监听器

AJAX

概念:AJAX(Asynchronous JavaScript And XML):异步的JavaScript和XMLAJAX作用:

1. 与服务器进行数据交换:通过AJAX可以给服务器发送请求，并获取服务器响应的数据
   使用了AJAX和服务器进行通信，就可以使用HTML+AJAX来替换JSP页面了
2. 异步交互:可以在不重新加载整个页面的情况下，与服务器交换数据并更新部分网页的技术，如:搜索联想、用
   户名是否可用校验，等等..

异步和同步

ajax创建流程

1. 创建核心对象

   var xhttp;
   if (window.XMLHttpRequest) {
       xhttp = new XMLHttpRequest();
   } else {
       // code for IE6, IE5
       xhttp = new ActiveXObject("Microsoft.XMLHTTP");
   }

2. 发送请求

   open(method, url, async)

   • method：请求的类型：GET 还是 POST
   • url：服务器（文件）位置
   • async：true（异步）或 false（同步）

   xhttp.open("GET", "http://localhost:8080/ajax_1_war/ajaxServlet");
   xhttp.send(); //向服务器发送请求（用于 GET）

3. 获取响应

   onreadystatechange 属性定义当 readyState 发生变化时执行的函数。

   status 属性和 statusText 属性存有 XMLHttpRequest 对象的状态。

   readyState：保存了 XMLHttpRequest 的状态。

   • 0: 请求未初始化
   • 1: 服务器连接已建立
   • 2: 请求已接收
   • 3: 正在处理请求
   • 4: 请求已完成且响应已就绪

   status：200: “OK”

   xhttp.onreadystatechange = function() {
       if (this.readyState == 4 && this.status == 200) {
           alert(this.responseText);
       }
   };

AXIOS

1. 引入axios 的js 文件

   <script src=""js/axios-0.18.0.js"></script>

2. 使用axios 发送请求，并获取响应结果

   axios({
       method:"get",
       url:"http://localhost:8080/ajax-demo1/aJAXDemo1?username=zhangsan"
   }).then(function (resp){
   	alert(resp.data);
   });

   axios({
       method:"post",
       url:"http://localhost:8080lajax-demo1/aJAXDemo1",data:"username=zhangsan"
   }).then(function (resp){
   	alert(resp.data);
   });

Axios请求方式别名

axios.request(config)

axios.get(url[, config])

axios.delete(url[, config])

axios.head(url[, config])

axios.options(url[, config])

axios.post(url[, data[, config]])

axios.put(url[, data[, config]])

axios.patch(url[, data[, config]])

axios.getUri([config])

例如发送get请求

axios.get("url").then(function(resp){
    alert(resp.data);
})

发送post请求

axios.post("url", "参数").then(function(resp){
	alert(resp.data);
})

JSON

定义：

var 变量名 = {
	"key1":value1,
    "key2":value2,
    ...
};
    
// 例子
var json  = {
    "name":"jpc"
    "age":21
    "addr":["武汉","北京"]
}

// 获取数据
变量名.key

value类型：浮点数，整数，对象，数组，字符串, 逻辑值，null

JSON数据和Java对象转换

请求数据:JSON字符串转为Java对象（反序列化）
响应数据:Java对象转为JSON字符串(序列化)

fastjson的使用

1. 导入坐标fastjson
2. java对象转JSON String jsonStr = JSON.toJSONString(obj);
3. JSON字符串转java对象User user = JSON.parseObject(jsonStr, User.class);

VUE

• Vue是一套前端框架，免除原生JavaScript中的DOM操作，简化书写。

• 基于MWVM(Model-View-ViewModel)思想，实现数据的双向绑定，将编程的关注点放在数据上。

• 官网: https://cn.vuejs.org

Vue常用指令

指令:HTML标签上带有v-前缀的特殊属性，不同指令具有不同含义。

指令	作用
v-bind	为HTML标签绑定属性值，如设置href , css样式
v-model	在表单元素上创建双向数据绑定
v-on	为HTML标签绑定事件
v-if	条件性的渲染某元素，判定为true时渲染,否则不渲染
v-else
v-else-if
v-show	根据条件展示某元素，区别在于切换的是display属性的值
v-for	列表渲染，遍历容器的元素或者对象的属性

Vue生命周期

生命周期的八个阶段:每触发一个生命周期事件，会自动执行一个生命周期方法(钩子)

Element

总体来说类似于Bootstrap

• Element:是饿了么公司前端开发团队提供的一套基于Vue的网站组件库，用于快速构建网页
• 组件:组成网页的部件，例如超链接、按钮、图片、表格等等～
• 自己完成的按钮

Element入门

1.引入Element 的css、js文件和Vue.js

<script src="vue.js"></script>
<script src="element-ui/liblindex.js"></script>
<link rel="stylesheet" href="element-ui/lib/theme-chalk/index.css">

2.创建Vue核心对象

<script>
new Vue({
	el:"#app"
})
</script>

3.官网复制Element组件代码

Element布局

Element中有两种布局方式:

1. Layout布局:通过基础的24分栏，迅速简便地创建布局。
2. Container布局容器:用于布局的容器组件，方便快速搭建页面的基本结构。