JavaWeb web.xml配置详解

news2025/2/27 17:03:57

参考：

  • XML 教程
  • Java web之web.xml配置详解

Javaweb三大组件是：Servlet，Filter，Listener。

  • 1、Servlet
    Servlet作为中转处理的容器，连接了客户端和服务器端的信息交互和处理。
  • 2、Filter
    拦截用户请求，在服务器作出响应前，可以在拦截后修改request和response，实现开发者想得到的功能。
  • 3、Listener
    Listener就是监听器，监听主要是对ServletContext，HttpSession，ServletRequest这三大域对象的创建和销毁事件监听，还有就是对域对象属性的操作监听，当监听这些事件发生是就会进行一些适当的操作。

0、概述

web.xml文件不是必须的

  1. 一个web中可以没有web.xml文件，也就是说，web.xml文件并不是web工程必须的。
  2. web.xml文件是用来初始化配置信息：比如Welcome页面、servlet、filter、listener、启动加载级别等。
  3. 当你的web工程没用到这些时，你可以不用web.xml文件来配置你的web应用。

web容器的加载顺序 ServletContext -> context-param -> listener -> filter -> servlet。

启动一个web项目，web容器会读取它的配置文件web.xml，读取和两个结点。
创建一个ServletContext(Servlet上下文)，这个web项目的所有部分都将共享这个上下文
容器将转换为键值对，并交给ServletContext。
容器创建中的类实例，创建监听器。

1、头文件

参考：

  • XML：文件头部xmlns详解
  • XML 中的 xmlns、xmlns:xsi、xsi:schemaLocation
<web-app xmlns="http://xmlns.jcp.org/xml/ns/javaee"
         xmlns:xsi="http://www.w3.org/2001/XMLSchema-instance"
         xsi:schemaLocation="http://xmlns.jcp.org/xml/ns/javaee http://xmlns.jcp.org/xml/ns/javaee/web-app_4_0.xsd"
         version="4.0">
</web-app>
  • xmlns:xsi , xmlns, xsi:schmeLocation 这些看上去相近的属性是什么含义， 为什么他们的值是不一样的 URL？
  • 这些 URL 是否对应一些可以访问的资源，对于该文件的解析是否会需要下载这些 URL 对应的资源？

①、xmlns:h="http://xmlns.jcp.org/xml/ns/javaee"
为h元素定义一个命名空间，"http://xmlns.jcp.org/xml/ns/javaee"是标识该空间的唯一字符串（常采用URL形式）
②、xmlns="http://xmlns.jcp.org/xml/ns/javaee"
默认空间的唯一标识符"http://xmlns.jcp.org/xml/ns/javaee"

对于命名空间的标识符, URI 的作用仅仅是保证唯一性， 它并不需要对应一个可以访问的资源或文件 ！ 但是， 有很多公司都会让namespace 的 URI 指向一个包含该命名空间信息的网页。

③、xmlns:xsi="http://www.w3.org/2001/XMLSchema-instance"
④、xsi:schemaLocation="http://xmlns.jcp.org/xml/ns/javaee http://xmlns.jcp.org/xml/ns/javaee/web-app_4_0.xsd"
根据之前的知识我们可以理解， xmlns:xsi 定义了一个命名空间前缀 xsi 对应的唯一字符串 http://www.w3.org/2001/XMLSchema-instance。 但是读者会发现， 这个 xmlns:xsi 在不同的 xml 文档中似乎都会出现。 这是因为， xsi 已经成为了一个业界默认的用于 XSD(XML Schema Definition) 文件的命名空间。 而 XSD 文件（也常常称为 Schema 文件）是用来定义 xml 文档结构的。

注： XML 解析器可以根据 一个 XSD 文件的内容来解析另一个 XML 文件， 判断该文件的结构是否和 XSD 文件中定义的一致。 XSD 文件 可以理解为 XML 文档可以自定义的语法或格式检查器

④这行的语法其实是， xsi:schemaLocation = "键" “值”，即 xsi 命名空间下 schemaLocation 元素的值为一个由空格分开的键值对。

前一个“键” http://maven.apache.org/POM/4.0.0 指代 【命名空间】， 只是一个全局唯一字符串而已。

后一个值指代 【XSD location URI】 , 这个值指示了前一个命名空间所对应的 XSD 文件的位置， xml parser 可以利用这个信息获取到 XSD 文件， 从而通过 XSD 文件对所有属于 命名空间 http://maven.apache.org/POM/4.0.0 的元素结构进行校验， 因此这个值必然是可以访问的， 且访问到的内容是一个 XSD 文件的内容。

例：

<beans 
	xmlns="http://www.springframework.org/schema/beans"
	xmlns:xsi="http://www.w3.org/2001/XMLSchema-instance"
	xmlns:context="http://www.springframework.org/schema/context"
	xmlns:util="http://www.springframework.org/schema/util"
	xsi:schemaLocation="
		http://www.springframework.org/schema/beans 
		http://www.springframework.org/schema/beans/spring-beans.xsd
		http://www.springframework.org/schema/context 
		http://www.springframework.org/schema/context/spring-context.xsd
		http://www.springframework.org/schema/util 
		http://www.springframework.org/schema/util/spring-util.xsd">
</beans>
  • xmlns="http://www.springframework.org/schema/beans"就是定义了一个默认命名空间， xmlns 的值可以随便改，只要是唯一的就行，如果更改了这里的值，下面的xsi:schemaLocation中的也要修改为对应的值。
  • xmlns:context="http://www.springframework.org/schema/context"就是定义了一个 context 的命名空间，使用 context 下的元素，需要加上 context 前缀。
  • xmlns:xsi="http://www.w3.org/2001/XMLSchema-instance"，创建了一个 xsi 命名空间，可以通过xsi:schemaLocation来定义 xsd 文件的位置，以便 XML 解析器解析 XML 文件。

2、配置欢迎页面

<web-app>
	<welcome-file-list>
		<welcome-file>wecome1.jsp</welcome-file>
		<welcome-file>wecome2.jsp</welcome-file>
		<description>欢迎页面</description>
	</welcome-file-list>
</web-app>

上面代码中就配置了两个欢迎页面 wecome1.jsp 和 wecome2.jsp，显示时按照配置顺序显示，如果能找到 wecome1.jsp 文件就显示该文件，如果找不到就找第二个，依次类推。

欢迎页面是用于访问 web 工程时，只给了根名，没有给出具体的页面，这时就回去访问配置的欢迎页面，如果没有配置欢迎页面，不同的应用服务器可能会有不同的行为。对于 Tomcat 来说，会默认先查找 index.html 文件，如果找到了，就将其返回给浏览器；如果没有找到，就继续查找 index.jsp 文件，如果都没有找到，那么 Tomcat 就会显示 The requested resource is not available 的页面。

欢迎页面只是在没有给出具体的访问页面时会被用到，如果指定了具体页面，只要访问的路径正确，是可以正常访问的。

3、配置Servlet

为Servlet命名和定制URL

<web-app>
	<servlet>
		<servlet-name>TestServlet</servlet-name>
		<servlet-class>com.yiyu.servlet.showAllServlet</servlet-class>
	</servlet>
	<servlet-mapping>
		<servlet-name>TestServlet</servlet-name>
		<url-pattern>/TestServlet</url-pattern>
	</servlet-mapping>
</web-app>

<!-- <servlet-name></servlet-name> 指定servlet的名称 
<servlet-class></servlet-class> 指定servlet的类名称 \
<jsp-file></jsp-file> 指定web站台中的某个JSP网页的完整路径 
<init-param></init-param> 用来定义参数，可有多个init-param。在servlet类中通过getInitParamenter(String name)方法访问初始化参数 

<load-on-startup></load-on-startup>指定当Web应用启动时，装载Servlet的次序。当值为正数或零时：Servlet容器先加载数值小的servlet，再依次加载其他数值大的servlet。当值为负或未定义：Servlet容器将在Web客户首次访问这个servlet时加载它。 

<servlet-mapping></servlet-mapping> 用来定义servlet所对应的URL，包含两个子元素 <servlet-name></servlet-name> 指定servlet的名称 
<url-pattern></url-pattern> 指定servlet所对应的URL -->

<servlet-name>：注册的名字
<servlet-class>：配置的 Servlet 的全类名
<url-pattern>：为这个 Servlet 映射一个对外访问路径
servlet 和 url-pattern 之间的关系是 一对多的关系。

4、配置Filter

参考：

  • web.xml filter配置

详见该博客

包：servlet-api.jar
在这里插入图片描述

过滤器配置

<web-app>
	<filter>
		<filter-name>Filter1</filter-name><!--过滤器名称-->
		<filter-class>D2020128.TestFilter</filter-class><!--过滤器类的包路径-->
		<!-- 可使用<init-param>标签初始化 -->
	</filter>
	<!-- 一个过滤器需要过滤多种文件，则可以配置多个<filter-mapping>，一个mapping定义一个url-pattern来定义过滤规则 -->
	<filter-mapping><!--过滤器映射-->
		<filter-name>Filter1</filter-name>
		<url-pattern>/TestServlet</url-pattern><!--指定过滤器作用的对象-->
	</filter-mapping>
	<filter-mapping>
		<filter-name>Filter1</filter-name>
		<!-- 所有外部访问都需要先经过该过滤器。 -->
		<url—pattern>/*</url-pattern>
		<!-- 作用于某一文件夹下所有文件 -->
		<!-- <url—pattern>/dir/*</url-pattern> -->
		<!-- 作用于某一种类型的文件 -->
		<!-- <url—pattern>*.扩展名</url-pattern> -->
		<!-- 作用于某一文件夹下某一类型文件 -->
		<!-- <url—pattern>/dir/*.扩展名</url-pattern> -->
	</filter-mapping>
</web-app>
  • Filter 的 url-pattern 中配置的路径是访问已经存在的网络资源，如静态页面、jsp、servlet等。
  • filter 和 url-pattern 之间的关系是 多对多的关系。即，Filter可负责拦截多个请求或响应；一个请求或响应也可被多个Filter拦截。(多个 filter 会根据 web.xml 中配置的顺序组成 filter 链)。

常用场合：
(1)认证Filter
(2)日志和审核Filter
(3)图片转换Filter
(4)数据压缩Filter
(5)密码Filter
(6)令牌Filter
(7)触发资源访问事件的Filter
(8)XSLT Filter
(9)媒体类型链Filter

此时你就可以对请求或响应(Request、Response)统一设置编码，简化操作；同时还可进行逻辑判断，如用户是否已经登陆、有没有权限访问该页面、权限管理、过滤敏感词汇 等等工作。它是随你的web应用启动而启动的，只初始化一次，以后就可以拦截相关请求，只有当你的web应用停止或重新部署的时候才销毁

过滤器生命周期：初始化init() → 过滤doFilter() → 析构（销毁）destroy()
过滤器有四种拦截方式！分别是：REQUEST、FORWARD、INCLUDE、ERROR。
过滤器链 顺序：按照web.xml中配置的顺序

4.1、如何创建Filter？

类似于servlet，需两步
第一步：创建Filter处理类（一般我们都用现有的）
Filter必须实现javax.servlet.Filter接口，在该接口中定义了三个方法：
(1) void init(FilterConfig config)：用于Filter的初始化。FilteConfig用于访问Filter的配置信息。
(2) void destroy()：Filter销毁前的操作，例如完成某些资源的回收。
(3) void doFilter(ServletRequest request,ServletResponse response,FilterChain chain)：
实现过滤功能的核心方法，实现对请求request进行预处理，也可以实现对服务器响应response进行后处理—它们的分界线为是否调用了chain.doFilter(request，response)，执行该方法之前，即对用户请求request进行预处理，执行该方法之后，即对服务器响应response进行后处理。

第二步：Web.xml文件中配置Filter
Filter配置与Servlet的配置非常相似，区别在于Servlet通常只配置一个URL，而Filter可以同时配置多个请求的URL。配置Filter有两种方式：
(1). 在Filter类中通过Annotation进行配置。
(2). 在web.xml文件中通过配置文件进行配置。

5、监听器

<listener> 
    <listerner-class>com.listener.SessionListener</listener-class> 
</listener>

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

application是ServletContext类型的对象。ServletContext 代表整个web应用，在服务器启动的时候，tomcat会自动创建该对象。在服务器关闭时会自动销毁该对象。
在这里插入图片描述

6、配置会话超时

单位为秒

<session-config>
    <session-timeout>120</session-timeout>
</session-config>

7、配置上下文参数

声明应用范围内的初始化参数。用于向Servlet+Context提供键值对，即应用程序上下文信息。后续的listener，filter在初始化时会用到这些上下文信息。在servlet里面可以通过getServletContext().getInitParameter(“context/param”)得到

<context-param>
    <param-name>log4jConfiguration</param-name>
    <param-value>/WEB-INF/log4j2.xml</param-value>
</context-param>

8、配置应用描述

<disciption>Tomcat Example servlets and JSP pages.</disciption>

9、配置应用名称

<display-name>Tomcat Example</display-name>

10、指定错误处理页面

可以通过“异常类型”或“错误码”来指定错误处理页面。

<error-page>
    <error-code>404</error-code>
    <location>/error404.jsp</location>
</error-page>
<error-page>
    <exception-type>java.lang.Exception<exception-type>
    <location>/exception.jsp<location>
</error-page>

11、配置Web应用图标

<icon>    
	<small-icon>/images/app_small.gif</small-icon>    
	<large-icon>/images/app_large.gif</large-icon>    
</icon>

12、配置安全限制

<security-constraint>    
  <display-name>Example Security Constraint</display-name>    
   <web-resource-collection>    
      <web-resource-name>Protected Area</web-resource-name>    
      <url-pattern>/jsp/security/protected/*</url-pattern>
      <url-pattern>*.jsp</url-pattern>
      <!-- 如果没有 <http-method> 元素，这表示将禁止所有 HTTP 方法访问相应的资源。 -->
      <http-method>DELETE</http-method>    
      <http-method>GET</http-method>    
      <http-method>POST</http-method>    
      <http-method>PUT</http-method>    
   </web-resource-collection>
   <!-- 子元素 <auth-constraint> 需要和 <login-config> 相配合使用，但可以被单独使用。 -->
   <!-- 如果没有 <auth-constraint> 子元素，这表明任何身份的用户都可以访问相应的资源。 -->
   <!-- 如果加入了 <auth-constraint> 子元素，但是其内容为空，这表示所有身份的用户都被禁止访问相应的资源。  -->
   <auth-constraint>
   	 <role-name>All Role</role-name>
     <role-name>tomcat</role-name>    
     <role-name>role1</role-name>    
   </auth-constraint>
   <!-- <user-data-constraint>   
     <transport-guarantee>NONE</transport-guarantee>   
   </user-data-constraint> -->
</security-constraint>

<login-config>Xml代码   
<!--四种验证方式,附在最后有说明-->    
  <auth-method>FORM</auth-method>    
  <form-login-config>    
   <form-login-page>/login.html</form-login-page>    
   <form-error-page>/error.html</form-error-page>    
  </form-login-config>    
</login-config>    
<security-role>    
  <role-name>All Role</role-name>    
</security-role>

13、配置登录验证

<login-config>    
  <auth-method>FORM</auth-method>    
  <realm-name>Example-Based Authentiation Area</realm-name>    
  <form-login-config>    
     <form-login-page>/jsp/security/protected/login.jsp</form-login-page>    
     <form-error-page>/jsp/security/protected/error.jsp</form-error-page>    
  </form-login-config>    
</login-config>

初始化参数

<web-app>
	<servlet>
		<servlet-name>InitParamServlet</servlet-name>
		<servlet-class>InitParamServlet</servlet-class>
		<init-param>
			<param-name>encoding</param-name>
			<param-value>utf-8</param-value>
		</init-param>
		<init-param>
			<param-name>helloween</param-name>		<!--用户: helloween-->
			<param-value>password</param-value>
		</init-param>
		<init-param>
			<param-name>admin</param-name>			<!--用户： admin-->
			<param-value>admin</param-value>
		</init-param>
		<init-param>
			<param-name>babyface</param-name>	<!--用户： babyface-->
			<param-value>babyface</param-value>
		</init-param>
		<load-on-startup>1</load-on-startup>	
		<!-- 
		1、load-on-startup 元素标记容器是否应该在web应用程序启动的时候就加载这个servlet，(实例化并调用其init()方法)。
		2、它的值必须是一个整数，表示servlet被加载的先后顺序。
		3、如果该元素的值为负数或者没有设置，则容器会当Servlet被请求时再加载。
		4、如果值为正整数或者0时，表示容器在应用启动时就加载并初始化这个servlet，值越小，servlet的优先级越高，就越先被加载。值相同时，容器就会自己选择顺序来加载。 -->
	</servlet>
	<servlet-mapping>
		<servlet-name>InitParamServlet</servlet-name>
		<url-pattern>/initParamServlet</url-pattern>
	</servlet-mapping>
</web-app>

public void doPost(HttpServletRequest request, HttpServletResponse response) throws IOException, ServletException {
		String username = request.getParameter("username");
		String password = request.getParameter("password");
		Enumeration params = this.getInitParameterNames(); // 所有的初始化参数名称
		while (params.hasMoreElements()) {
			String nameParam = (String) params.nextElement(); // 获取参数名
			String valueParam = this.getInitParameter(nameParam); // 获取参数值
			// 如果用户名，密码匹配则显示notice.html
			if (nameParam.equalsIgnoreCase(username) && valueParam.equalsIgnoreCase(password)) { 
				request.getRequestDispatcher("/WEB-INF/notice.html").forward(request, response);
				return;
			}
		}
		this.doGet(request, response); // 若username,password不匹配，显示登录页面。
	}

使用到了枚举类型： Enumeration params = this.getInitParameterNames();

  1. 获取web.xml中所有的参数名： this.getInitParameterNames();
  2. 对枚举的遍历： while (params.hasMoreElements()){ …}
  3. 获取下一个元素： params.nextElement();
  4. 获取名称对应的值： getInitParameter(nameParam);
  5. 重定向： request.getRequestDispatcher(“/WEB-INF/notice.html”).forward(request,response);

本文来自互联网用户投稿，该文观点仅代表作者本人，不代表本站立场。本站仅提供信息存储空间服务，不拥有所有权，不承担相关法律责任。如若转载，请注明出处：http://www.coloradmin.cn/o/405170.html

如若内容造成侵权/违法违规/事实不符，请联系多彩编程网进行投诉反馈，一经查实，立即删除！

相关文章

tomcat下载安装及配置教程

tomcat下载安装及配置教程

之前选择的版本是tomcat 10.0按照下面流程走了一遍&#xff0c;发现一直是未发现&#xff08;Not Found&#xff09;的状态。 后来&#xff0c;我换成了tomcat 9版本就OK了 下面以tomcat 9.0版本为例讲述其过程 一、下载Tomcat及解压 官网&#xff1a; http://tomcat.apach…
阅读更多...
Vue基础知识总结 9：vue webpack打包原理

Vue基础知识总结 9：vue webpack打包原理

&#x1f345; 作者简介&#xff1a;哪吒&#xff0c;CSDN2021博客之星亚军&#x1f3c6;、新星计划导师✌、博客专家&#x1f4aa; &#x1f345; 哪吒多年工作总结&#xff1a;Java学习路线总结&#xff0c;搬砖工逆袭Java架构师 &#x1f345; 关注公众号【哪吒编程】&#…
阅读更多...
解决npm warn config global `--global`, `--local` are deprecated. use `--location=global` instead.

解决npm warn config global `--global`, `--local` are deprecated. use `--location=global` instead.

在安装配置node时&#xff0c;cmd检查node没问题 但是检查npm就出现npm warn config global --global, --local are deprecated. use --locationglobal instead.的报警 问题出现在&#xff0c;以前版本npm的命令一般时XXX -g 但是随着版本更替&#xff0c;这个老方法被弃用了&a…
阅读更多...
详细vite创建vue3项目(vue3+vue-router+ts+vite+element-plus+pinia)

详细vite创建vue3项目(vue3+vue-router+ts+vite+element-plus+pinia)

vite创建vue3ts项目 为何选择vite&#xff1a; vite 是一个基于 Vue3 单文件组件的非打包开发服务器&#xff0c;它做到了本地快速开发启动&#xff1a; 快速的冷启动&#xff0c;不需要等待打包操作&#xff1b; 即时的热模块更新&#xff0c;替换性能和模块数量的解耦让更新…
阅读更多...
uniapp中自定义导航栏

uniapp中自定义导航栏

相信很多小伙伴在使用uniapp进行多端开发的时候呢&#xff0c;在面对一些奇葩的业务需求的时候&#xff0c;uniapp给我们提供的默认导航栏已经不能满足我们的业务需求了&#xff0c;这个时候就需要我们自己自定义导航栏使用啦。 当然uniapp也给我们提供了很多的自定义导航栏的…
阅读更多...
开箱即用，这些 Vue3 后台管理系统模板绝对让你爽歪歪！

开箱即用，这些 Vue3 后台管理系统模板绝对让你爽歪歪！

原文链接&#xff1a;Vue3 后台管理系统模板推荐。 之前写了一篇关于 Vue2 的后台管理系统模板的推荐&#xff0c;详情请见 Vue后台管理系统模板推荐。 Vue3 在今年2月份已成为新的默认版本&#xff0c;本文收集了一些 Vue3 的后台管理系统模板&#xff0c;分享给在座的仌 &am…
阅读更多...
web前端面试题（必背面试题）

web前端面试题（必背面试题）

必背面试题-手写题 前端面试&#xff08;手写题&#xff09;_Z_Xshan的博客-CSDN博客 css系列 面试官&#xff1a;说说你对盒子模型的理解 一、是什么 所有元素都可以有像盒子一样的平面空间和外形 一个盒子由四部分组成&#xff1a;context ,padding,margin,border con…
阅读更多...
Django web开发(一) - 前端

Django web开发(一) - 前端

文章目录前端开发1.快速开发网站2.标签2.1 编码2.2 title2.3 标题2.4 div和span2.5 超链接2.6 图片小结标签的嵌套2.7 列表2.8 表格2.9 input系列2.10 下拉框2.11 多行文本用户注册案例: 用户注册GET 方式POST 方式表单数据提交优化3.CSS样式3.1 快速上手3.2 CSS应用方式1. 在标…
阅读更多...
小程序生命周期

小程序生命周期

小程序的生命周期说白了就是指程序从创建、到开始、暂停、唤起、停止、卸载的过程。 我们大概从三个角度看一下小程序的生命周期。 &#xff08;1&#xff09;&#xff1a;应用生命周期 &#xff08;2&#xff09;&#xff1a;页面生命周期 &#xff08;3&#xff09;&…
阅读更多...
Threejs入门教程

Threejs入门教程

一、本地搭建Threejs官方文档网站 1.官网地址&#xff1a;https://github.com/mrdoob/three.js 下载压缩包并解压或使用git clone 若github过慢&#xff0c;则使用gitee对应网址&#xff1a;three.js: mrdoob/three.js 同步库 2.目录解析 3.启动方式 在three.js项目根目录下…
阅读更多...
Vue中created和mounted详解

Vue中created和mounted详解

目录 一、生命周期概念 二、浏览器渲染过程 三、生命周期中的浏览器渲染 beforeCreate阶段 created阶段 beforeMount阶段 mounted阶段 四、使用场景 五、常见相关问题 一些页面跳转后, 一些基础数据接口没有重新请求 一、生命周期概念 通俗地讲&#xff0c;生命周期即Vue实例或…
阅读更多...
vite.config.js详细配置。

vite.config.js详细配置。

Vue3vite vite和webpack区别&#xff1f; 1.vite服务器启动速度比webpack快&#xff0c;由于vite启动的时候不需要打包&#xff0c;也就无需分析模块依赖、编译&#xff0c;所以启动速度非常快。当浏览器请求需要的模块时&#xff0c;再对模块进行编译&#xff0c;这种按需动态…
阅读更多...
Vue-cli(vue脚手架)上万字总结，超详细教程

Vue-cli(vue脚手架)上万字总结，超详细教程

1、创建Vue脚手架 1.1、首先系统需要全局安装Vue脚手架 npm install -g vue/cli 1.2、创建Vue脚手架工程 进入你想创建vue脚手架的目录&#xff0c;然后输入命令 vue create xxx项目名 需要注意的是工程名字不能大写&#xff0c;这里我们选择选择Vue2&#xff0c;敲下回车&am…
阅读更多...
Java实现Token登录验证(基于JWT的token认证实现)

Java实现Token登录验证(基于JWT的token认证实现)

文章目录 一、JWT是什么&#xff1f;二、使用步骤 1.项目结构2.相关依赖3.数据库4.相关代码 三、测试结果 一、JWT是什么&#xff1f; 在介绍JWT之前&#xff0c;我们先来回顾一下利用token进行用户身份验证的流程&#xff1a; 1、客户端使用用户名和密码请求登录 2、服务端…
阅读更多...
【微信小程序】view和scroll-view组件的基本使用

【微信小程序】view和scroll-view组件的基本使用

✅作者简介&#xff1a;CSDN内容合伙人、阿里云专家博主、51CTO专家博主&#x1f3c6; &#x1f4c3;个人主页&#xff1a;hacker707的csdn博客 &#x1f525;系列专栏&#xff1a;微信小程序 &#x1f4ac;个人格言&#xff1a;但行好事&#xff0c;莫问前程 view和scroll-vie…
阅读更多...
移动端适配详解 , 给你解决适配烦恼

移动端适配详解 , 给你解决适配烦恼

试想一下&#xff0c;如果我们只能开发web端&#xff0c;那么移动端的网友由谁来做&#xff01;那也太悲惨了 所以&#xff0c;这里说的就是如何开发页面到移动端&#xff0c;适配各个手机型号&#xff0c;让页面在手机上跑起来&#xff5e; 目录 理解些许概念 1. 开发的种…
阅读更多...
Vue3新特性——Composition API详解

Vue3新特性——Composition API详解

文章目录一、 Vue3快速入门1. Vue3 带来了什么2. Vue3工程的创建2.1 使用vue-cli创建2.2 使用vite创建2.2.1 是什么2.2.2 vite的优势2.2.3 使用步骤3. vue3项目结构的分析3.1 vue-cli 项目结构4. vue3中的开发者工具4.1 在线安装4.2 离线安装二、常用Composition API1. setup2.…
阅读更多...
Vue3获取DOM、操作组件

Vue3获取DOM、操作组件

文章目录&#x1f31f; 写在前面&#x1f31f; Vue2 ref 的使用&#x1f31f; Vue3获取DOM&#x1f31f; Vue3操作组件&#x1f31f; 写在最后&#x1f31f; 写在前面 专栏介绍&#xff1a; 凉哥作为 Vue 的忠实 粉丝输出过大量的 Vue 文章&#xff0c;应粉丝要求开始更新 Vue…
阅读更多...
若依框架前端Vue项目分析实战

若依框架前端Vue项目分析实战

说明 前面讲解了vue2的单点知识&#xff0c;下面用若依提供的vue项目&#xff0c;实战分析一下&#xff0c;拿到一个vue项目&#xff0c;如何进行分析并进行二次开发。 一、public/index.html与main.js和App.vue三者的关系 vue项目是单界面应用&#xff0c;所有的界面将在pu…
阅读更多...
VSCode 入门操作大全 + 实用插件推荐【零基础专属详细教程】

VSCode 入门操作大全 + 实用插件推荐【零基础专属详细教程】

&#x1f4c0; 前言&#xff1a; &#x1f3ab; 选择一个好的开发工具很重要&#xff0c;很多刚学编程的小伙伴在 webstorm 和 vscode 上很难抉择&#xff0c;我个人更喜欢使用 vscode&#xff0c;因为其有着简洁的操作风格和丰富的人性化的各种功能&#xff0c;这篇文章带给大…
阅读更多...
推荐文章
最新文章

Copyright @ 2022~2023