tomcatServlet
2024-05-09 18:53:49
JavaWeb技术
JavaWeb技术栈
- web：全球广域网，也称万维网，能够通过浏览器访问的网站
- B/S架构：browser/server，浏览器服务器架构，它的特点是，客户端只需要浏览器，应用程序的逻辑和数据都存储在服务器端。浏览器只需要请求服务器，获取Web资源，服务器把Web资源发送给浏览器即可
- 好处：易于维护升级，服务器端升级后，客户端无需任何部署就可以使用到新的版本
- 静态资源：HTML、CSS、JS、图片等。负责页面展现
- 动态资源：Servlet、JSP等。负责逻辑处理
- 数据库：负责存储数据
- HTTP协议：定义通信的规则
- Web服务器：负责解析HTTP协议，解析请求数据，并发送响应数据
HTTP
HyperText Transfer Protocol,超文本传输协议，规定浏览器与服务器之间数据传输的规则
http协议特点
- 基于TCP协议：面向连接，安全
- 基于请求-响应模型的：一次请求对应一次响应
- HTTP协议是无状态的协议：对于事务处理没有记忆能力。每次请求-响应都是独立的
- 缺点：多次请求之间不能共享数据
- 优点：速度快
HTTP请求数据格式
1.请求行：请求数据的第一行。其中GET表示请求方式，/表示请求资源路径，HTTP/1.1表示协议版本
2.请求头：第二行开始，格式为key:value形式
3.请求体:POST请求的最后一部分，存放请求参数
常见的HTTP请求头
Host：请求的主机名
User-Agent：浏览器版本，如谷歌浏览器的标识类似Mozilla/5.0...
Accept:表示浏览器能接收的资源类型
Accept-Language:表示浏览器偏好的语言
Accept-Encoding:表示浏览器可以支持的压缩类型，例如gzip，deflate等
- GET与POST请求区别
- GET请求参数在请求行中，没有请求体，POST请求请求参数在请求体中
- GET请求参数大小有限制，POST没有
响应数据格式
1.响应行：响应数据的第一行。由协议版本，响应状态码，状态码描述组成
2.响应头：第二行开始，格式为key:value形式
3.响应体：最后一部分。存放响应数据
常见响应头
Content-Type：表示该响应内容的类型
Content-Length：表示响应内容的长度
Content-Encoding：表示该响应压缩算法
Cache-Control：指示客户端应如何缓存
响应状态码中：200代表客户端请求成功，404代表资源找不到，一般是URL输入有误，500服务器发生不可预期的错误，服务器异常
Web服务器
Web服务器是一个应用程序软件，对HTTP协议的操作进行封装，使得程序员不必直接对协议进行操作，让Web开发更加便捷
Tomcat
- 它是一个开源且免费的轻量级Web服务器，支持Servlet/JSP,少量JavaEE规范
- JavaEE:Java企业版。包含13项技术规范：JDBC、JNDI、EJB、RMI、JSP、Servlet、XML、JMS、JavaIDL、JTS、JTA、JavaMail、JAF
- Tomcat也被称为Web容器，Servlet容器。Servlet需要依赖于Tomcat才能运行
IDEA中创建Maven Web项目
创建项目两种方式：使用骨架，不使用骨架
Web项目结构：
Maven Web项目结构：开发中的项目 项目名称src 主目录main java java代码resources 资源文件，配置文件webapp Web项目特有目录html HTML文件目录WEB-INF Web项目核心目录web.xml Web项目配置文件test 测试目录javaresourcespom.xml部署的JavaWeb项目结构：开发完成，可以部署的项目项目名称 项目访问路径html HTML文件目录WEB-INF Web项目核心目录web.xml Web项目配置文件classes Java字节码文件lib 项目所需jar包编译后的Java字节码文件和resources的资源文件，放到WEB-INF下的classes目录下 pom.xml中依赖坐标对应的jar包，放入WEB-INF下的lib目录下
Servlet
是JavaEE的一个规范，体现出来就是一个接口
Servlet是Java提供的一门动态web资源开发技术
Servlet快速入门
1.创建web项目，导入Servlet依赖坐标
<dependency><groupId>javax.servlet</groupId><artifactId>javax.servlet-api</artifactId><version>3.1.0</version><!--此处为什么需要添加该标签?provided指的是在编译和测试过程中有效,最后生成的war包时不会加入因为Tomcat的lib目录中已经有servlet-api这个jar包，如果在生成war包的时候生效就会和Tomcat中的jar包冲突，导致报错--><scope>provided</scope>
</dependency>
2.创建：定义一个类，实现Servlet接口，并重写接口中所有方法
3.配置：在类上使用@WebServlet注解，配置该Servlet的访问路径
4.访问：启动Tomcat，浏览器输入URL访问该Servlet例：localhost/虚拟目录/资源路径
Servlet执行流程
tomcat接收请求，解析请求路径，找到具体访问项目，再找到要访问的资源，tomcat就会创建对应的servlet实现类对象，并且调用service方法
servlet生命周期
init():tomcat创建Servlet实现类对象的时候会自动调用该方法1.默认是第一次访问该动态资源时，可以通过loadOnStartup属性进行修改，如果值是正整数就是在服务器启动的时候创建Servlet实现类对象2.@WebServlet(value="动态资源路径",loadOnStartup=1)service():每一次请求该资源都会执行destory():销毁servlet时。
Servlet方法介绍
初始化方法，在Servlet被创建时执行，只执行一次
public void init(ServletConfig servletConfig)
获取ServletConfig对象
public ServletConfig getServletConfig()
提供服务的方法，每次Servlet别访问，都会调用该方法
public void service(ServletRequest servletRequest, ServletResponse servletResponse)
获取Servlet信息
public String getServletInfo()
销毁方法，当Servlet被销毁时，调用该方法。在内存释放或服务器关闭时销毁Servlet
public void destroy()
Servlet体系结构
Interface Servlet Servlet体系的根接口Class GenericServlet 抽象实现类Class HttpServlet 对Http协议封装的Servlet实现类HttpServlet使用步骤1.继承HttpServlet2.重写doGet和doPost方法
原理：获取请求方式，并根据不同的请求方式调用不同的doXxx方法
Servlet urlPattern配置
1.一个Servlet，可以配置多个urlPattern
@WebServlet(urlPatterns={"/demo1","/demo2"})
2.urlPattern配置规则
1.精确匹配 精确的路径，/ 开头
2.目录匹配 / 开头 *结尾
3.扩展名匹配 * 开头，后面跟上 .后缀名，如 *.do
4.任意匹配 @WebServlet("/") @WebServlet("/*")
XML配置方式编写Servlet
- Servlet从3.0版本开始支持使用注解配置，3.0版本之前只支持XML配置文件的配置方式
- 步骤
- 1.编写Servlet类
- 2.在web.xml中配置该Servlet
<servlet><servlet-name>demo1</servlet-name><servlet-class>com.itheima.web.ServletDemo1</servlet-class>
</servlet>
<servlet-mapping><servlet-name>demo1</servlet-name><url-pattern>/demo1</url-pattern>
</servlet-mapping>
Request&Response
Request(获取请求数据)
继承体系
ServletRequest Java提供的请求对象根接口
HttpServletRequest Java提供的对Http协议封装的请求对象接口
RequestFacade Tomcat定义的实现类
获取请求数据
请求行
String getMethod():获取请求方式
String getContextPath():获取虚拟目录
StringBuffer getRequestURL():获取URL(统一资源定位符)
String getRequestUPI():获取URI(统一资源标识符)
String getQueryString():获取请求参数(GET方式)
请求头
String getHeader(String name):根据请求头名称，获取值(如：User-Agent)
请求体
ServletInputStream getInputStream():获取字节流
BufferedReader getReader():获取字符输入流
通用的方式获取请求参数
Map<String,String[]> getParameterMap():获取所有参数Map集合
String[] getParameterValues(String name):根据名称获取参数值（数组）
String getParameter(String name):根据名称获取参数值（单个值）
请求参数中文乱码处理
1.POST请求的解决方式
request.setCharacterEncoding("UTF-8") 设置字符输入流的编码
2.GET请求的解决方式
乱码原因：浏览器使用设置的UTF-8对数据进行URL编码，发送到Tomcat，默认ISO-8859-1进行URL解码，所以出现乱码//URL编码String encode=URLEncoder.encode("哈哈","UTF-8");//URL解码String decode=URLDecode.decode(encode,"UTF-8");//解决方案1username=new String(username.getBytes(StandardCharsets.ISO_8859_1),StandardCharsets.UTF_8)//解决方案2，在pom.xml文件tomcat中配置uriEncoding<plugin><groupId>org.apache.tomcat.maven</groupId><artifactId>tomcat7-maven-plugin</artifactId><version>2.2</version><configuration><!--端口控制--><port>80</port><!--虚拟目录--><path>/web-demo</path><!--编码（get请求方式）--><uriEncoding>UTF-8</uriEncoding></configuration></plugin>
请求转发
- 请求转发(forward)：一种在服务器内部的资源跳转方式
实现：
request.getRequestDispatcher("/资源路径").forward(request,response);
request用于共享数据的方法：
setAttribute(String name,Object value)
Object getAttribute(String name)
removeAttribute(String name)
请求转发的特点
1.浏览器地址栏不发生变化‘
2.只能转发到当前服务器的内部资源
3.一次请求，可以在转发的资源间使用request共享数据
Response(设置响应数据)
继承体系
ServletResponse Java提供的响应对象根接口
HttpServletResponse Java提供的HTTP协议封装的响应对象
ResponseFacade Tomcat定义的实现类
Response设置响应数据功能介绍
响应行
void setStatus(int sc):设置响应状态码
响应头
void setHeader(String name,String value):设置响应头键值对
响应体
PrintWriter getWriter():获取字符输出流
ServletOutputStream getOutputStream():获取字节输出流
Response完成重定向
- 重定向(Redirect):一种资源跳转方式
1.设置响应状态码302
2.响应头 location:xxx
- 实现方式
resp.setStatus(302);
resp.setHeader("location","资源b的路径");
简化实现方式
resp.sendRedirect("资源b的路径");
重定向特点
- 浏览器地址栏路径发生变化
- 可以重定向到任意位置的资源（服务器内部、外部均可）
- 两次请求，不能在多个资源使用request共享数据
路径问题
浏览器使用：需要加虚拟目录
服务端使用：不需要加虚拟目录
Response响应字符数据
response.setContenType("text/html;charset=utf-8");
//1.获取字符输出流
PrintWriter writer=response.getWriter();
//2.设置响应头信息(内容类型)
response.setHeader("content-type","text/html");
//3.写入数据
writer.writer("hahaha");注意：该流不需要关闭，随着响应结束，response对象销毁，由服务器关闭中文数据乱码：原因通过Response获取的字符输出流编码:ISO-8859-1resp.setContentType("text/html;charset=utf-8");
Response响应字节数据
1.通过Response对象获取字节输出流
ServletOutputStream outputStream=resp.getOutputStream();
2.写数据
outputStream.write(字节数据);
IOUtils工具类的使用
1.导入坐标
<dependency><groupId>commons-io</groupId><artifactId>commons-io</artifactId><version>2.6</version>
</dependency>
2.使用
IOUtils.copy(输入流,输出流);
JSP
- 概念：Java Server Pages，Java服务端页面
- 动态网页技术，其中既可以定义HTML、CSS、JS等静态页面内容，还可以定义Java代码动态内容
JSP快速入门
1.导入JSP坐标
<dependency><groupId>javax.servlet.jsp</groupId><artifactId>jsp-api</artifactId><version>2.2</version><scope>provided</scope>
</dependency>
2.创建JSP文件
3.编写HTML标签和Java代码
JSP原理
JSP本质上就是一个Servlet
浏览器发送请求到tomcat，tomcat将jsp文件自动转换成java文件(Servlet)，再由tomcat编译为字节码文件，向浏览器发送响应
JSP脚本
- JSP脚本用于在jsp页面定义Java代码
- JSP脚本分类
1.<%...%>:内容会直接放到_jspServlet()方法中
2.<%=...%>:内容会放到out.print()中，作为out.print的参数
3.<%!...%>:内容会放到_jspService()方法之外，被类直接包含
JSP缺点
- 书写麻烦，特别是复杂的页面
- 阅读麻烦
- 复杂度高：运行需要依赖各种环境，JRE，JSP容器，JavaEE
- 占内存和磁盘：JSP会自动生成java文件和class文件占磁盘，运行的是.class文件占内存
- 调试困难：出错后，需要找到自动生成的java文件进行调试
- 不利于团队协作，前端人员不精Java，后端人员不精html
Servlet-->JSP-->Servlet+JSP-->Servlet+html+ajax
不要直接在JSP里写Java代码Servlet：逻辑处理，封装数据JSP：获取数据，遍历展现数据
EL表达式
- Expression Language 表达式语言，用于简化JSP页面的Java代码
- 主要功能：获取数据，还可以用来进行运算
- 语法：${expression}
- ${brands}
- 获取域中存储的key为brands的数据
//例：List<Brand> brands = new ArrayList<Brand>();brands.add(new Brand(1,"三只松鼠","三只松鼠",100,"三只松鼠，好吃不上火",1));brands.add(new Brand(2,"优衣库","优衣库",200,"优衣库，服适人生",0));brands.add(new Brand(3,"小米","小米科技有限公司",1000,"为发烧而生",1));//存储到req域中req.setAttribute("brands",brands);//请求转发req.getRequestDispatcher("/brandjsp.jsp").forward(req,resp);
JSP文件中获取数据${brands}
JavaWeb中的四大域对象：
1.page:当前页面有效
2.request：当前请求有效
3.session：当前会话有效
4.application：当前应用有效
el表达式获取数据，会依次从这4个域中寻找，直到找到为止
JSTL标签
- JSP标准标签库，使用标签取代JSP页面上的Java代码
JSTL快速入门
1.导入坐标
<dependency><groupId>jstl</groupId><artifactId>jstl</artifactId><version>1.2</version>
</dependency>
<dependency><groupId>taglibs</groupId><artifactId>standard</artifactId><version>1.1.2</version>
</dependency>
2.在JSP页面上引入JSTL标签库
<%@ taglib prefix="c" uri="http://java.sun.com/jsp/jstl/core"%>标签前缀 标签库位置
3.使用
<!--例：-->
<c:if test="${flag==1}"><h1>男</h1>
</c:if><!-- <c:forEach>:相当于增强for循环items:被遍历的容器var:遍历产生的临时变量varStatus:遍历状态对象，index，count -->
<!--例子-->
<table><c:forEach items="${entryList}" var="blogEntry" varStatus="status"><tr><td align="left" class="blogTitle"><c:out value="${status.count}"/><c:out value="${blogEntry.title}" escapeXml="false"/></td></tr><tr><td align="left" class="blogText"><c:out value="${blogEntry.text}" escapeXml="false"/></td></tr></c:forEach>
</table>
MVC模式
MVC是一种分层开发的模式，其中：
- M：Model，业务模型，处理业务
- V：View，视图，界面展示
- C：Controller，控制器，处理请求，调用模型和视图
MVC好处
- 职责单一，互不影响
- 有利于分工协作
- 有利于组件重用
三层架构
- 表现层
- 接收请求，封装数据，调用业务逻辑层，响应数据
- 业务逻辑层
- 对业务逻辑进行封装，组合数据访问层层中基本功能，形成复杂的业务逻辑功能
- 数据访问层
- 对数据库的CRUD基本操作
编写案例步骤1.创建新的模块，引入需要的坐标2.创建三层架构的包结构3.数据库表4.实体类5.Mybatis基础环境：mybatis-config.xml XxxMapper.xml XxxMapper接口
回话跟踪技术
- 会话：用户打开浏览器，访问web服务器资源，会话建立，直到有一方断开连接，会话结束，在一次会话中可以包含多次请求和响应
- 绘画跟踪：一种维护浏览器状态的方法，服务器需要识别多次请求是否来自于同一浏览器，以便在同一次会话的多次请求间共享数据
Cookie
Cookie基本使用
- Cookie：客户端会话技术，将数据保存到客户端，以后每次请求都携带Cookie数据进行访问
发送Cookie对象1.创建Cookie对象，设置数据Cookie cookie=new Cookie("key","value");2.发送Cookie到客户端：使用response对象response.addCookie(cookie);
获取Cookie对象1.获取客户端携带的所有Cookie，使用request对象Cookie[] cookies=request.getCookie();2.遍历数组，获取每一个Cookie对象3.使用对象方法获取数据cookie.getName();cookie.getValue();Cookie的实现是基于HTTP协议的
Cookie使用细节
- Cookie存活时间
- 默认情况下，cookie存储在浏览器内存中，当浏览器关闭，内存释放，则Cookie被销毁
- setMaxAge(int seconds)：设置Cookie存活时间
- 正数：将Cookie写入浏览器所在电脑的硬盘，持久化存储，到时间自动删除
- 负数：默认：Cookie在一次会话中有效
- 零：删除对应Cookie
- Cookie存储中文
1.Cookie不能直接存储中文
如需要存储，则需要进行转码：URL编码
编码
URLEncoder.encode(value,"UTF-8");
解码
URLDecoder.decode(value,"UTF-8");
Session
Session
- 服务端会话跟踪技术：将数据保存到服务端
1.获取Session对象HttpSession session=request.getSession();
2.Session对象功能setAttribute(String name,Object o); 存储数据到session域中getAttribute(String name):根据key，获取值removeAttribute(String name)：根据key，删除该键值对Session的实现是基于Cookie的
Session使用细节
Session的钝化、活化
- 钝化：在服务器正常关闭后，Tomcat会自动将Session数据持久化到硬盘文件中
- 活化：再次启动服务器后，将硬盘上的session反序列化到内存中
Session销毁：
默认情况下，无操作，30分钟自动销毁
<session-config><session-timeout>30</session-timeout>
</session-config>
调用Session对象的invalidate()方法，自毁
Session和Cookie小结
- Cookie和Session都是来完成一次会话内多次请求间数据共享的
- 区别
- 存储位置：Cookie是将数据存储在客户端，Session将数据存储在服务端
- 安全性：Cookie不安全，Session安全
- 数据大小：Cookie最大3kb，Session大小无限制
- 存储时间：Cookie可以长期存储，Session默认30分钟
- 服务器性能：Cookie不占用服务器资源，Session占用服务器资源
Filter过滤器
- 概念：Filter表示过滤器，是JavaWeb三大组件(Servlet、Filter、Listener)之一
- 过滤器可以把对资源的请求拦截下来，从而实现一些特殊的功能
- 过滤器一般完成一些通用的操作，比如：权限控制、统一编码处理、敏感字符处理等等
Filter快速入门
//1.定义类，实现Filter接口，并重写其所有方法
public class FilterDemo implements Filter{public void init(FilterConfig config) throws ServletException {}public void destroy() {}@Overridepublic void doFilter(ServletRequest request, ServletResponse response, FilterChain chain) throws ServletException, IOException {}
}
2.配置Filter拦截资源的路径：在类上定义@WebFilter注解
@WebFilter("/*")
public class FilterDemo implements Filter{}
3.在doFilter方法中输出一段话，并放行
public void doFilter(ServletRequest request, ServletResponse response, FilterChain chain) throws ServletException, IOException {System.out.println("放行前逻辑被执行了...");chain.doFilter(request,response);System.out.println("放行后逻辑被执行了...");} 1.放行后访问对应资源，资源访问完成后，会回到Filter中
2.回到Filter中，会执行放行后的逻辑
Filter使用细节
Filter拦截路径配置
@WebFilter("/*")
1.拦截具体的资源：/index.jsp:只有访问index.jsp时才会被拦截
2.目录拦截：/user/*:访问/user下的所有资源，都会被拦截
3.后缀名拦截：*.jsp,访问后缀名为jsp的资源，都会被拦截
4.拦截所有：/*:访问所有资源，都会被拦截
过滤器链
- 一个Web应用，可以配置多个过滤器，这多个过滤器称为过滤器链
- 注解配置过滤器，优先级按照过滤器类名(字符串)的自然排序
过滤器案例
//访问服务器资源时，需要先进行登录验证，如果没有登录，则自动跳转到登录页面
@WebFilter("/*")
public class Filter1 implements Filter {public void init(FilterConfig config) throws ServletException {}public void destroy() {}@Overridepublic void doFilter(ServletRequest request, ServletResponse response, FilterChain chain) throws ServletException, IOException {HttpServletRequest req= (HttpServletRequest) request;//1.定义一个字符串数组，数据中存储的是需要放行的资源路径String[] urls={"/login.jsp","/imgs/","/css/","/loginServlet","/register.jsp","/registerServlet","/checkCodeServlet"};//2.获取用户请求资源路径String uri=req.getRequestURI();//3.遍历字符串数组，获取每一个需要放行的资源路径for (String url : urls) {if (uri.contains(url)){//用户请求资源包含需要放行的资源路径chain.doFilter(request, response);return;}}//1.获取session对象HttpSession session = req.getSession();//2从Session中获取User对象Object user = session.getAttribute("user");//3.判断返回的user对象是否为nullif (user==null){request.setAttribute("login_msg","您尚未登录");request.getRequestDispatcher("/login.jsp").forward(req, response);}else {//已经登陆过了，放行chain.doFilter(request, response);}}
}
Listener
- 概念：Listener表示监听器，是JavaWeb三大组件(Servlet,Filter,Listener)之一
- 监听器可以监听在application，session，request三个对象创建，销毁或者往其中添加修改删除属性时自动执行代码的功能组件
- Listener分类：JavaWeb中提供了8个监听器
Ajax
AJAX 是一种在无需重新加载整个网页的情况下，能够更新部分网页的技术。
与服务器进行数据交换：通过AJAX可以给服务器发送请求，并获取服务器响应的数据
- 可以使用HTML+AJAX来替换JSP页面
异步交互：可以在不重新加载整个页面的情况下，与服务器交换数据并更新网页的技术，如搜索联想，用户名是否可用校验，等等
GET 还是 POST？
与 POST 相比，GET 更简单也更快，并且在大部分情况下都能用。
然而，在以下情况中，请使用 POST 请求：
- 无法使用缓存文件（更新服务器上的文件或数据库）
- 向服务器发送大量数据（POST 没有数据量限制）
- 发送包含未知字符的用户输入时，POST 比 GET 更稳定也更可靠
AJAX快速入门步骤
1.编写AjaxServlet，并使用response输出字符串
2.创建XMLHttpRequest对象：用于和服务器交换数据
3.向服务器发送请求
4.获取服务器响应数据
Axios
- Axios是对原生Ajax的封装，代码更加简洁易懂
快速入门
1.引入Axios的js文件
<script src="js/axios-0.18.0.js"></script>
2.使用axios发送请求，并获取响应结果
axios({method:"get",url:"http://localhost/web/axiosServlet?username="+this.value}).then(function (resp) {alert(resp.data);});
axios({method:"post",url:"http://localhost/web/axiosServlet",data:"username="+this.value}).then(function (resp) {alert(resp.data);});
- 为了方便起见，Axios已经为所有支持的请求方法提供了别名
axios.get(url,config)
axios.post(url,data,config)
JSON
- 概念：JavaScript Object Notation。JavaScript对象表示法
- 由于其语法简单，层次结构鲜明，现多用于作为数据载体，在网络中进行数据传输
JSON{"name":"zhangsan","age":23,"city":"北京"}
value的数据类型为：数字，整数或浮点型字符串（在双引号中）逻辑值（true或false）数组（在方括号中）对象（在花括号中）null
注意:
Axios中，JSON字符串和JS对象自动进行转换1、定义JSON字符串
var jsonStr="{"name":"zhangsan","age":23,"addr":["北京","上海","西安"]}"
2、将JSON字符串转为JS对象
let jsObject=JSON.parse(jsonStr);
3、JS对象转为JSON字符串
let jsonStr2=JSON.Stringify(jsObject);
JSON数据和Java对象转换
Fastjson是阿里巴巴提供的一个Java语言编写的高性能功能完善的JSON库，是目前Java语言中最快的JSON库，可以实现Java对象和JSON字符串的相互转换
使用：
导入坐标
<dependency><groupId>com.alibaba</groupId><artifactId>fastjson</artifactId><version>1.2.58</version> </dependency>请求数据：JSON字符串转为Java对象
User user=JSON.parseObject(jsonStr,User.class);响应数据：Java对象转为JSON字符串
String jsonStr=JSON.toJSONString(obj);
Vue
- Vue是一套前端框架，免除了原生JS中的DOM操作，简化书写
- 基于MVVM思想，实现数据的双向绑定，将编程的关注点放在数据上
- 官网：https://cn.vuejs.org
Vue常用指令
- HTML标签上带有v-前缀的特殊属性，不同指令具有不同含义
- 常用指令
v-bind 在html标签绑定属性值，如设置href，css样式
v-model 在表单元素上创建双向数据绑定
v-on 为html标签绑定事件
v-if，v-else，v-else-if 条件性的渲染某元素，判定为true时渲染，否则不渲染
v-show 根据条件展示某元素，区别在于切换的是display属性的值
v-for 列表渲染，遍历容器元素或者对象的属性
- 使用
<a v-bind:href="url">百度一下</a>
<!--v-bind 可以省略-->
<a :href="url">百度一下</a>
<input v-model="username">
html:<input type="button" value="一个按钮" v-on:click="show()"><input type="button" value="一个按钮" @click="show()">
vue:
new Vue({el:"#app",methods:{show(){alert("我被点了");}}
})v-if:
<body>
<div id="app"><div v-if="count == 3">div1</div><div v-else-if="count == 4">div2</div><div v-else>div3</div><hr><input v-model="count">
</div>
<script src="js/axios-0.18.0.js"></script>
<script src="js/vue.js"></script>
<script>new Vue({el:"#app",data(){return {count:3}}});
</script>
</body>v-for:
<tr v-for="(brand,i) in brands" align="center"><td>{{i+1}}</td><td>{{brand.brandName}}</td><td>{{brand.companyName}}</td><td>{{brand.ordered}}</td><td>{{brand.description}}</td><td>{{brand.statusStr}}</td><td><a href="#">修改</a> <a href="#">删除</a></td>
</tr>
<script>new Vue({el: "#app",data() {return {brands: []}},mounted() {axios({method: "get",url: "http://localhost/brand-demo/selectAllServlet"}).then((resp) => {this.brands = resp.data});}});
</script>
Vue生命周期
- 生命周期的八个阶段：没触发一个生命周期时间，会自动执行一个生命周期方法
- 重点关注 mounted：挂载完成，Vue初始化成功，HTML页面渲染成功
- 发送异步请求，加载数据
tomcatServlet相关推荐
- 【Java Web前端开发】TomcatServlet基础
文章目录 web相关概念回顾 web服务器软件 Servlet: server applet IDEA与tomcat的相关配置 web相关概念回顾 1. 软件架构1. C/S:客户端/服务器端2. B ...
- 【Java12】tomcatservlet（nginx，web.xml，生命周期，适配器优化），requestresponse（请求转发，登陆案例（1），重定向，文件下载）
文章目录 1.nginx的conf文件:以前网络编程中B/S架构中服务器是用socket写,用文件输入流读一个文件,读到后socket通过outputstream写出去,这些过程有了nginx后再也不 ...
- TomcatServlet笔记
今日内容 1. web相关概念回顾 2. web服务器软件:Tomcat 3. Servlet入门学习 web相关概念回顾 1. 软件架构1. C/S:客户端/服务器端2. B/S:浏览器/服务器端2 ...
- JavaWeb基础5——HTTP，TomcatServlet
导航: [黑马Java笔记+踩坑汇总]JavaSE+JavaWeb+SSM+SpringBoot+瑞吉外卖+SpringCloud/SpringCloudAlibaba+黑马旅游+谷粒商城 目录 一 ...
- TomcatServlet快速入门
web概念 软件架构 C/S:客户端/服务器端 B/s:浏览器/服务器端 资源分类 静态资源 所有用户访问后得到的结果是一样的,即被称为静态资源,比如html.css.javascript 动态资源 ...
- TomcatServlet入门学习
今日内容 1. web相关概念回顾 2. web服务器软件:Tomcat 3. Servlet入门学习 web相关概念回顾 1. 软件架构1. C/S:客户端/服务器端2. B/S:浏览器/服务器端2 ...
- tomcatservlet入门
tomcat&servlet入门 web相关知识概述[了解] 1.WEB简介 Web(World Wide Web)即全球广域网,也称为万维网.它是一种基于超文本和HTTP的.全球性的.动态交 ...
- SpringBoot Web原生组件注入（Servlet、Filter、Listener）
一.使用原生Servlet API(推荐) @Slf4j @WebFilter(urlPatterns={"/css/*","/images/*"}) //my ...
- Springboot2Web原生组件注入
官方文档 - Servlets, Filters, and listeners 使用原生的注解Servlet API @ServletComponentScan(basePackages = &quo ...
最新文章
- Opencv4测试报错00007FFB3253A9C0 (ntdll.dll)处引发的异常: 0xC0000005: 读取位置 0x0000000000000010 时发生访问冲突
- Bloglines手机伴侣支持走cmwap代理了
- Windows 市场份额十年来首次跌破 90%
- Java_cpu飙升排查
- LeetCode 1800. 最大升序子数组和
- 如何应对视觉深度学习存在的问题
- linux 中断和进程 传递,Linux内核之进程上下文和中断上下文的区别
- WriteFreely：创建博客，建立社区
- 量化交易策略matlab交易方案,【策略分享】Matlab量化交易策略源码分享
- 跟着小甲鱼学习C语言
- Cordova+Vue实现Android APP开发
- 考计算机初级难不难,初级程序员好考吗_考试难不难_上学吧
- Astah绘制UML图形
- 【学习笔记】SAP资产模块
- 使用Modular QoS CLI（MQC）基于FR的DLCI号对包进行分类
- html怎么添加自动关机,电脑自动关机设置方法大全
- HTTP请求和请求头的详解
- 独立站运营 | 强烈推荐，这5款WordPress电子商务插件
- 五种流行虚拟化桌面优缺点PK
- Golang项目 Go Build时报错