[笔记]Web核心学习

水深无声 2023-09-28 11:10 110阅读 0赞

**目录**

HTTP

Tomcat

Servlet

Request

Response

JSP

会话技术（Cookie、Session）

Filter（过滤器）

Listener（监听器）

Ajax、Vue、ElementUI

--------------------

> ## HTTP ##

概念: HyperText Transfer Protocol，超文本传输协议，规定了浏览器和服务器之间数据传输的规则  
![bb44df18575e43cdb4e047cf91d80eb5.png][]

**HTTP协议特点**

*  基于TCP协议：面向连接，安全
 *  基于请求-响应模型的：一次请求对应一次响应
 *  HTTP协议是无状态的协议：对于事务处理没有记忆能力

![c03b3e4254ac418fa5b99df0b645c2d2.png][]

![5eeae009ad7344afb51d90ce41178879.png][]

![f54d12b14e6e421c8546d8ef39808c79.png][]

![2bafed81a4e44c53819b25ed99137351.png][]

> ## Tomcat ##

Tomcat是一个web服务器软件

解决了HTTP通信时大量代码的重复编写

![5228167c4b4344b1b15cb7ba1e940584.png][]

![8cf95495dbd54771b2c0637267ce4fc4.png][]

Tomcat也被称为Web容器、Servlet容器。

官网：[Apache Tomcat® - Welcome!][Apache Tomcat_ - Welcome]

配置Tomcat

在官网下载相应压缩包后解压运行startup.bat即可

遇到问题：The JRE\_HOME environment variable is not defined

解决方法手动设置setclasspath.bat中的JRE\_HOME路径

参考[the JRE\_HOME environment variable is not defined correctly This environment variabl\_过气蟹黄堡的博客-CSDN博客][the JRE_HOME environment variable is not defined correctly This environment variabl_-CSDN]

![6827f516809d44b99950692816dec755.png][]

启动成功访问网页

![6233a51f92114fb19a79eeef3ab31259.png][]

在IDEA中创建 Maven Web项目

![bf926a70d2984770a3702cc3255241e2.png][]

在IDEA中使用Tomcat

本地部署和maven插件部署

> ## Servlet ##

Servlet是Java提供的一门动态web资源开发技术

![6e1a7d8a08264609871237d10a4f1b0f.png][]

Servlet生命周期

*  Servlet运行在Servlet容器（web服务器）中，其生命周期由容器来管理，分为四个阶段

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

![24bd7461e3b541d4a1c04141c963fc7b.png][]

> ## Request ##

Request（请求）对象

保存着HTTP的请求信息

可以获取请求数据

**继承体系**

![8896f3d625a5487f856f801db8552ed0.png][]

**获取请求数据**

![e4ccfea9343440589eda9aa97e15e546.png][]

使用上述技术实现的交互

![e0285ff939bd4826a172abedf5407595.png][]

package com.my016.web;
    
    import javax.servlet.ServletException;
    import javax.servlet.annotation.WebServlet;
    import javax.servlet.http.HttpServlet;
    import javax.servlet.http.HttpServletRequest;
    import javax.servlet.http.HttpServletResponse;
    import java.io.IOException;
    @WebServlet("/demo114514")
    public class ServletDemo5 extends HttpServlet {
        @Override
        protected void doGet(HttpServletRequest req, HttpServletResponse resp) throws ServletException, IOException {
            String name = req.getParameter("name");
    
            resp.setHeader("content-type","text/html;charset=utf-8");
            resp.getWriter().write("<h1>"+name+"欢迎您！</h1>");
        }
    
        @Override
        protected void doPost(HttpServletRequest req, HttpServletResponse resp) throws ServletException, IOException {
            System.out.println("post");
        }
    }

![54ea7878cd504d10b0585e30581fee25.png][]

哈哈哈，好多实用API

怪不得Java工程师也叫API调用工程师，原理就了解一点点（bushi）

使用Request实现表单发送接收

html源码

<!DOCTYPE html>
    <html lang="en">
    <head>
        <meta charset="UTF-8">
        <title>Title</title>
    </head>
    <body>
    <form action="/demo1919810" method="get">
        <h1>114514</h1>
        <input type="text" name="username"><br>
        <input type="password" name="password"><br>
        <input type="checkbox" name="hobby" value="1">唱
        <input type="checkbox" name="hobby" value="2">跳
        <input type="checkbox" name="hobby" value="3">Rap
        <input type="checkbox" name="hobby" value="4">篮球
    
        <input type="submit">
    </form>
    
    </body>
    </html>

java源码

package com.my016.web;
    
    import javax.servlet.ServletException;
    import javax.servlet.annotation.WebServlet;
    import javax.servlet.http.HttpServlet;
    import javax.servlet.http.HttpServletRequest;
    import javax.servlet.http.HttpServletResponse;
    import java.io.IOException;
    import java.util.Map;
    
    @WebServlet("/demo1919810")
    public class ServletDemo6 extends HttpServlet {
        @Override
        protected void doGet(HttpServletRequest req, HttpServletResponse resp) throws ServletException, IOException {
            System.out.println("===============get============");
            Map<String,String[]> map = req.getParameterMap();
            for (String key : map.keySet()) {
                //username ： 张山
                System.out.print(key + ':');
    
                //获取值
                String[] values = map.get(key);
                for (String value : values) {
                    System.out.print(value+" ");
                }
    
                System.out.println();
            }
        }
    
        @Override
        protected void doPost(HttpServletRequest req, HttpServletResponse resp) throws ServletException, IOException {
    
        }
    }

![678e231456ab42d99804d06ae5fa0e55.png][]

![71845ce225ac44b3a4e559052a4fa1a3.png][]

![d99725f932b84905b8144cbc393c1ef2.png][]

有意思

**请求转发**

![4766ba3a2af14d66b6764515003e0c38.png][]

> ## Response ##

Request（响应）对象

可以设置响应信息

可以发送数据

![1e6ae597e0db443c8abcdc4e5c570233.png][]

Response完成重定向

![8a6743bf956f41098d3a053b8f485d48.png][]

package com.my016.web.response;
    
    import javax.servlet.ServletException;
    import javax.servlet.annotation.WebServlet;
    import javax.servlet.http.HttpServlet;
    import javax.servlet.http.HttpServletRequest;
    import javax.servlet.http.HttpServletResponse;
    import java.io.IOException;
    @WebServlet("/resp1")
    public class ResponseDemo1 extends HttpServlet {
        @Override
        protected void doGet(HttpServletRequest req, HttpServletResponse resp) throws ServletException, IOException {
            System.out.println("resp1");
    
    //        //重定向
    //        resp.setStatus(302);
    //        //设置响应头
    //        resp.setHeader("Location","/resp2");
    
            //常用方法
            resp.sendRedirect("/resp2"); //重定向Redirect
    
        }
    
        @Override
        protected void doPost(HttpServletRequest req, HttpServletResponse resp) throws ServletException, IOException {
            super.doPost(req, resp);
        }
    }
    
    
    
    
    /
    
    package com.my016.web.response;
    
    import javax.servlet.ServletException;
    import javax.servlet.annotation.WebServlet;
    import javax.servlet.http.HttpServlet;
    import javax.servlet.http.HttpServletRequest;
    import javax.servlet.http.HttpServletResponse;
    import java.io.IOException;
    
    @WebServlet("/resp2")
    public class ResponseDemo2 extends HttpServlet {
        @Override
        protected void doGet(HttpServletRequest req, HttpServletResponse resp) throws ServletException, IOException {
            System.out.println("resp2");
        }
    
        @Override
        protected void doPost(HttpServletRequest req, HttpServletResponse resp) throws ServletException, IOException {
            super.doPost(req, resp);
        }
    }

结果

访问

[http://localhost:4514/resp1][http_localhost_4514_resp1]

自动跳转到

[http://localhost:4514/resp2][http_localhost_4514_resp2]

控制台

![bb23df04571442049915ebe44a06139b.png][]

Response对象可以获得字符输出流往网页输出字符信息，还可以设置输出流的类型，可以把类型改为text/html以便浏览器以HTML 的格式解析字符。

> ## JSP ##

**\*已经严重过时的技术\***

![9c2b55b8dd4d4fa69356f4aa81a23571.png][]

在maven导入jsp坐标

JSP本质上就是Servlet

![0034f54730ba4334aed76932527c39d4.png][]

![d341225846aa471494434b4588dca766.png][]

技术发展历程

![64d0f881d39448d8a6ebee787a3a2438.png][]

**EL表达式**

（全称Expression Language ）

用于简化 JSP 页面内的 Java 代码

EL 表达式的主要作用是 获取数据。其实就是从域对象中获取数据，然后将数据展示在页面上。

而 EL 表达式的语法也比较简单，$\{expression\} 。

例如：$\{brands\} 就是获取域中存储的 key 为 brands 的数据。

**域对象**

JavaWeb中有四大域对象，分别是：

*  page：当前页面有效
 *  request：当前请求有效
 *  session：当前会话有效
 *  application：当前应用有效

el 表达式获取数据，会依次从这4个域中寻找，直到找到为止。而这四个域对象的作用范围如下图所示

![e51871521f3b4024b5c5a0a3de0b9fb0.png][]

例如： $\{brands\}，el 表达式获取数据，会先从page域对象中获取数据，如果没有再到 requet 域对象中获取数据，如果再 没有再到 session 域对象中获取，如果还没有才会到 application 中获取数据。

**JSTL标签**

JSP标准标签库(Jsp Standarded Tag Library) ，使用标签取代JSP页面上的Java代码。

## ![ab41524ce8ec4c02830ce83305bfa861.png][] ##

**MVC模式和三层架构**

*  **MVC模式**

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

M：Model，业务模型，处理业务

V：View，视图，界面展示

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

![17d76173dbbe4f94a67437d9c3968862.png][]

控制器（serlvlet）用来接收浏览器发送过来的请求，控制器调用模型（JavaBean）来获取数据，比如从数据库查询数据； 控制器获取到数据后再交由视图（JSP）进行数据展示。

MVC 好处： 职责单一，互不影响。每个角色做它自己的事，各司其职。 有利于分工协作。 有利于组件重用

*  **三层架构**

三层架构是将我们的项目分成了三个层面，分别是 表现层 、 业务逻辑层 、 数据访问层 。

![7b77949fa368413fb00bd1349c1e9b96.png][]

![4f0a66a4d62a41b4ab1d072740efbe8d.png][]

**联系**

![dfc74001768b405ab6d5397e0fedb3f1.png][]

如上图上半部分是 MVC 模式，上图下半部分是三层架构。 MVC 模式 中的 C（控制器）和 V（视图）就是 三层架构 中的表 现层，而 MVC 模式 中的 M（模型）就是 三层架构 中的 业务逻辑层 和 数据访问层。 可以将 MVC 模式 理解成是一个大的概念，而 三层架构 是对 MVC 模式 实现架构的思想。 那么我们以后按照要求将不同层的 代码写在不同的包下，每一层里功能职责做到单一，将来如果将表现层的技术换掉，而业务逻辑层和数据访问层的代码不需 要发生变化。

> ## 会话技术（Cookie、Session） ##

**会话**:用户打开浏览器，访问web服务器的资源，会话建立，直到有一方断开连接，会话结束。在 一次会话中可以包含多次请求和响应。 从浏览器发出请求到服务端响应数据给前端之后，一次会话(在浏览器和服务器之间)就被建立 了 会话被建立后，如果浏览器或服务端都没有被关闭，则会话就会持续建立着 浏览器和服务器就可以继续使用该会话进行请求发送和响应，上述的整个过程就被称之为会 话。

**会话跟踪**:一种维护浏览器状态的方法，服务器需要识别多次请求是否来自于同一浏览器，以便在 同一次会话的多次请求间共享数据。 服务器会收到多个请求，这多个请求可能来自多个浏览器，如上图中的6个请求来自3个浏览器 服务器需要用来识别请求是否来自同一个浏览器 服务器用来识别浏览器的过程，这个过程就是会话跟踪 服务器识别浏览器后就可以在同一个会话中多次请求之间来共享数据

浏览器和服务器之间使用的是HTTP请求来进行数据传输

HTTP协议是无状态的，每次浏览器向服务器请求时，服务器都会将该请求视为新的请求

HTTP协议设计成无状态的目的是让每次请求之间相互独立，互不影响

请求与请求之间独立后，就无法实现多次请求之间的数据共享

**Cookie**

客户端会话技术，将数据保存到客户端，以后每次请求都携带Cookie数据进行访问。

![b60067cc027546d2a768294817241209.png][]

![2827dd346abc49d891aeb6feb3c57254.png][]

![f0504345cc6445578f6619bd5c601b4c.png][]

package com.my016.web;
    
    import javax.servlet.ServletException;
    import javax.servlet.annotation.WebServlet;
    import javax.servlet.http.Cookie;
    import javax.servlet.http.HttpServlet;
    import javax.servlet.http.HttpServletRequest;
    import javax.servlet.http.HttpServletResponse;
    import java.io.IOException;
    @WebServlet("/AServlet")
    public class AServlet extends HttpServlet {
        @Override
        protected void doGet(HttpServletRequest req, HttpServletResponse resp) throws ServletException, IOException {
            Cookie cookie = new Cookie("username" , "zs");
            resp.addCookie(cookie);//发送cookie
            
            Cookie[] cookies = req.getCookies();//接收cookie
            for (Cookie cookie1 : cookies) {
                String name = cookie1.getName();
                String value = cookie1.getValue();
                System.out.println(name+":"+value);
            }
        }
    
    
        @Override
        protected void doPost(HttpServletRequest req, HttpServletResponse resp) throws ServletException, IOException {
            this.doPost(req, resp);
        }
    }

对于Cookie的实现原理是基于HTTP协议的,其中设计到HTTP协议中的两个请求头信息:

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

![e5346e4eb9204f78b0c33e58e9efb7c6.png][]

默认情况下，Cookie存储在浏览器内存中，当浏览器关闭，内存释放，则Cookie被销毁

![1840087d0efc4c02910f9a70c816f748.png][]

**Session**

![f3f2c07b4a5548d4ab063957beb7cafc.png][]

![03eea28c1a644498af021d9757691f3f.png][]

![e3e8ba17a80a4ac3999aee1f4e0a0559.png][]

**Cookie和Session小结**

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

![1807a59ba0f545e68f4cc1b584b22cbc.png][]

> ## Filter（过滤器） ##

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

过滤器可以把对资源的请求拦截下来，从而实现一些特殊的功能。

![55dc276134214ad2a388796c068300a5.png][]

拦截器拦截到后可以做什么功能呢？

过滤器一般完成一些通用的操作。比如每个资源都要写一些代码完成某个功能，我们总不能在每个资源中写这样的代码吧， 而此时我们可以将这些代码写在过滤器中，因为请求每一个资源都要经过过滤器。

![072c7e423e4f49ab91817f2810375152.png][]

![a4a23dece3fe4193aaf927ae75941af2.png][]

> ## Listener（监听器） ##

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

![bbc981ca75764ad8b1795ea87a289827.png][]

> ## Ajax、Vue、ElementUI ##

`AJAX` (Asynchronous JavaScript And XML)：异步的 JavaScript 和 XML

![c2717b28ff0d41e784da448fcea1935d.png][]

### JSON ###

概念：`JavaScript Object Notation`。JavaScript 对象表示法

![3491025d8beb4dcab0ffdd73e60b228b.png][]

## Vue ##

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

**v-bind & v-model 指令**

![42a2cfd54cdb44b2adbd90eb08fcd4f6.png][]

**生命周期**

![c2ca89a1da4044d6af8a901863ddba5d.png][]

## Element ##

Element：是饿了么公司前端开发团队提供的一套基于 Vue 的网站组件库，用于快速构建网页。

Element 提供了很多组件（组成网页的部件）供我们使用。例如 超链接、按钮、图片、表格等等~

如下图左边的是我们编写页面看到的按钮，上图右边的是 Element 提供的页面效果，效果一目了然。

![bbe0b96ad4704d2398cd14059af33bd9.png][]

[Element - The world's most popular Vue UI framework][Element - The world_s most popular Vue UI framework]

element官网提供的按钮样式代码

<!DOCTYPE html>
    <html lang="en">
    <head>
        <meta charset="UTF-8">
        <title>Title</title>
    </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>
        <el-row>
            <el-button plain>朴素按钮</el-button>
            <el-button type="primary" plain>主要按钮</el-button>
            <el-button type="success" plain>成功按钮</el-button>
            <el-button type="info" plain>信息按钮</el-button>
            <el-button type="warning" plain>警告按钮</el-button>
            <el-button type="danger" plain>危险按钮</el-button>
        </el-row>
    
        <el-row>
            <el-button round>圆角按钮</el-button>
            <el-button type="primary" round>主要按钮</el-button>
            <el-button type="success" round>成功按钮</el-button>
            <el-button type="info" round>信息按钮</el-button>
            <el-button type="warning" round>警告按钮</el-button>
            <el-button type="danger" round>危险按钮</el-button>
        </el-row>
    
        <el-row>
            <el-button icon="el-icon-search" circle></el-button>
            <el-button type="primary" icon="el-icon-edit" circle></el-button>
            <el-button type="success" icon="el-icon-check" circle></el-button>
            <el-button type="info" icon="el-icon-message" circle></el-button>
            <el-button type="warning" icon="el-icon-star-off" circle></el-button>
            <el-button type="danger" icon="el-icon-delete" circle></el-button>
        </el-row>
    </div>
    
    <script src="js/vue.js"></script>
    <script src="element-ui/lib/index.js"></script>
    <link rel="stylesheet" href="element-ui/lib/theme-chalk/index.css">
    
    <script>
        new Vue({
            el:"#app"
        })
    </script>
    
    </body>
    </html>

[bb44df18575e43cdb4e047cf91d80eb5.png]: https://img-blog.csdnimg.cn/bb44df18575e43cdb4e047cf91d80eb5.png
[c03b3e4254ac418fa5b99df0b645c2d2.png]: https://img-blog.csdnimg.cn/c03b3e4254ac418fa5b99df0b645c2d2.png
[5eeae009ad7344afb51d90ce41178879.png]: https://img-blog.csdnimg.cn/5eeae009ad7344afb51d90ce41178879.png
[f54d12b14e6e421c8546d8ef39808c79.png]: https://img-blog.csdnimg.cn/f54d12b14e6e421c8546d8ef39808c79.png
[2bafed81a4e44c53819b25ed99137351.png]: https://img-blog.csdnimg.cn/2bafed81a4e44c53819b25ed99137351.png
[5228167c4b4344b1b15cb7ba1e940584.png]: https://img-blog.csdnimg.cn/5228167c4b4344b1b15cb7ba1e940584.png
[8cf95495dbd54771b2c0637267ce4fc4.png]: https://img-blog.csdnimg.cn/8cf95495dbd54771b2c0637267ce4fc4.png
[Apache Tomcat_ - Welcome]: https://tomcat.apache.org/
[the JRE_HOME environment variable is not defined correctly This environment variabl_-CSDN]: https://blog.csdn.net/qq_36654606/article/details/87875756
[6827f516809d44b99950692816dec755.png]: https://img-blog.csdnimg.cn/6827f516809d44b99950692816dec755.png
[6233a51f92114fb19a79eeef3ab31259.png]: https://img-blog.csdnimg.cn/6233a51f92114fb19a79eeef3ab31259.png
[bf926a70d2984770a3702cc3255241e2.png]: https://img-blog.csdnimg.cn/bf926a70d2984770a3702cc3255241e2.png
[6e1a7d8a08264609871237d10a4f1b0f.png]: https://img-blog.csdnimg.cn/6e1a7d8a08264609871237d10a4f1b0f.png
[24bd7461e3b541d4a1c04141c963fc7b.png]: https://img-blog.csdnimg.cn/24bd7461e3b541d4a1c04141c963fc7b.png
[8896f3d625a5487f856f801db8552ed0.png]: https://img-blog.csdnimg.cn/8896f3d625a5487f856f801db8552ed0.png
[e4ccfea9343440589eda9aa97e15e546.png]: https://img-blog.csdnimg.cn/e4ccfea9343440589eda9aa97e15e546.png
[e0285ff939bd4826a172abedf5407595.png]: https://img-blog.csdnimg.cn/e0285ff939bd4826a172abedf5407595.png
[54ea7878cd504d10b0585e30581fee25.png]: https://img-blog.csdnimg.cn/54ea7878cd504d10b0585e30581fee25.png
[678e231456ab42d99804d06ae5fa0e55.png]: https://img-blog.csdnimg.cn/678e231456ab42d99804d06ae5fa0e55.png
[71845ce225ac44b3a4e559052a4fa1a3.png]: https://img-blog.csdnimg.cn/71845ce225ac44b3a4e559052a4fa1a3.png
[d99725f932b84905b8144cbc393c1ef2.png]: https://img-blog.csdnimg.cn/d99725f932b84905b8144cbc393c1ef2.png
[4766ba3a2af14d66b6764515003e0c38.png]: https://img-blog.csdnimg.cn/4766ba3a2af14d66b6764515003e0c38.png
[1e6ae597e0db443c8abcdc4e5c570233.png]: https://img-blog.csdnimg.cn/1e6ae597e0db443c8abcdc4e5c570233.png
[8a6743bf956f41098d3a053b8f485d48.png]: https://img-blog.csdnimg.cn/8a6743bf956f41098d3a053b8f485d48.png
[http_localhost_4514_resp1]: http://localhost:4514/resp1
[http_localhost_4514_resp2]: http://localhost:4514/resp2
[bb23df04571442049915ebe44a06139b.png]: https://img-blog.csdnimg.cn/bb23df04571442049915ebe44a06139b.png
[9c2b55b8dd4d4fa69356f4aa81a23571.png]: https://img-blog.csdnimg.cn/9c2b55b8dd4d4fa69356f4aa81a23571.png
[0034f54730ba4334aed76932527c39d4.png]: https://img-blog.csdnimg.cn/0034f54730ba4334aed76932527c39d4.png
[d341225846aa471494434b4588dca766.png]: https://img-blog.csdnimg.cn/d341225846aa471494434b4588dca766.png
[64d0f881d39448d8a6ebee787a3a2438.png]: https://img-blog.csdnimg.cn/64d0f881d39448d8a6ebee787a3a2438.png
[e51871521f3b4024b5c5a0a3de0b9fb0.png]: https://img-blog.csdnimg.cn/e51871521f3b4024b5c5a0a3de0b9fb0.png
[ab41524ce8ec4c02830ce83305bfa861.png]: https://img-blog.csdnimg.cn/ab41524ce8ec4c02830ce83305bfa861.png
[17d76173dbbe4f94a67437d9c3968862.png]: https://img-blog.csdnimg.cn/17d76173dbbe4f94a67437d9c3968862.png
[7b77949fa368413fb00bd1349c1e9b96.png]: https://img-blog.csdnimg.cn/7b77949fa368413fb00bd1349c1e9b96.png
[4f0a66a4d62a41b4ab1d072740efbe8d.png]: https://img-blog.csdnimg.cn/4f0a66a4d62a41b4ab1d072740efbe8d.png
[dfc74001768b405ab6d5397e0fedb3f1.png]: https://img-blog.csdnimg.cn/dfc74001768b405ab6d5397e0fedb3f1.png
[b60067cc027546d2a768294817241209.png]: https://img-blog.csdnimg.cn/b60067cc027546d2a768294817241209.png
[2827dd346abc49d891aeb6feb3c57254.png]: https://img-blog.csdnimg.cn/2827dd346abc49d891aeb6feb3c57254.png
[f0504345cc6445578f6619bd5c601b4c.png]: https://img-blog.csdnimg.cn/f0504345cc6445578f6619bd5c601b4c.png
[e5346e4eb9204f78b0c33e58e9efb7c6.png]: https://img-blog.csdnimg.cn/e5346e4eb9204f78b0c33e58e9efb7c6.png
[1840087d0efc4c02910f9a70c816f748.png]: https://img-blog.csdnimg.cn/1840087d0efc4c02910f9a70c816f748.png
[f3f2c07b4a5548d4ab063957beb7cafc.png]: https://img-blog.csdnimg.cn/f3f2c07b4a5548d4ab063957beb7cafc.png
[03eea28c1a644498af021d9757691f3f.png]: https://img-blog.csdnimg.cn/03eea28c1a644498af021d9757691f3f.png
[e3e8ba17a80a4ac3999aee1f4e0a0559.png]: https://img-blog.csdnimg.cn/e3e8ba17a80a4ac3999aee1f4e0a0559.png
[1807a59ba0f545e68f4cc1b584b22cbc.png]: https://img-blog.csdnimg.cn/1807a59ba0f545e68f4cc1b584b22cbc.png
[55dc276134214ad2a388796c068300a5.png]: https://img-blog.csdnimg.cn/55dc276134214ad2a388796c068300a5.png
[072c7e423e4f49ab91817f2810375152.png]: https://img-blog.csdnimg.cn/072c7e423e4f49ab91817f2810375152.png
[a4a23dece3fe4193aaf927ae75941af2.png]: https://img-blog.csdnimg.cn/a4a23dece3fe4193aaf927ae75941af2.png
[bbc981ca75764ad8b1795ea87a289827.png]: https://img-blog.csdnimg.cn/bbc981ca75764ad8b1795ea87a289827.png
[c2717b28ff0d41e784da448fcea1935d.png]: https://img-blog.csdnimg.cn/c2717b28ff0d41e784da448fcea1935d.png
[3491025d8beb4dcab0ffdd73e60b228b.png]: https://img-blog.csdnimg.cn/3491025d8beb4dcab0ffdd73e60b228b.png
[42a2cfd54cdb44b2adbd90eb08fcd4f6.png]: https://img-blog.csdnimg.cn/42a2cfd54cdb44b2adbd90eb08fcd4f6.png
[c2ca89a1da4044d6af8a901863ddba5d.png]: https://img-blog.csdnimg.cn/c2ca89a1da4044d6af8a901863ddba5d.png
[bbe0b96ad4704d2398cd14059af33bd9.png]: https://img-blog.csdnimg.cn/bbe0b96ad4704d2398cd14059af33bd9.png
[Element - The world_s most popular Vue UI framework]: https://element.eleme.cn/#/zh-CN