Java Web 之 前端 100问

已于 2025-04-19 11:47:25 修改
阅读量1k 收藏 27
点赞数 27
CC 4.0 BY-SA版权
分类专栏： Java知识体系构建 文章标签： java 前端 开发语言
于 2025-04-14 07:21:46 首次发布
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.youkuaiyun.com/A_m_of_m/article/details/147200739

JSP 的全拼是什么？

Java Server Pages。

JSP 作用是什么

JSP（JavaServer Pages）简化服务器端的Web开发，用于开发动态网页的Java技术，允许将Java代码嵌入HTML页面中。
JSP = 静态页面 + java 动态展示JSP用于生成动态内容，根据用户请求实时生成HTML。

JSP 代码的工作原理是什么

JSP页面在首次请求时被编译成Servlet，后续请求直接由Servlet处理，JSP代码在服务器端执行，生成HTML后发送到客户端。

当浏览器请求一个JSP页面时，服务器将JSP文件编译成一个Servlet（Java类）。
这个Servlet生成HTML内容并发送回客户端（浏览器）。

JSP 的基本语法有哪些？

基本语法

JSP脚本元素:

  • <% ... %>: 嵌入Java代码。
  • <%= ... %>: 输出表达式结果。
  • <%! ... %>: 声明变量或方法。

JSP指令:

  • <%@ page ... %>: 定义页面属性。
  • <%@ include ... %>: 包含其他文件。
  • <%@ taglib ... %>: 引入标签库。

JSP动作:

  • <jsp:include>: 包含其他页面。
  • <jsp:useBean>: 使用JavaBean。
  • <jsp:setProperty>: 设置JavaBean属性。
  • <jsp:getProperty>: 获取JavaBean属性。

示例代码
JSP 页面 (example.jsp):

<%@ page language="java" contentType="text/html; charset=UTF-8" pageEncoding="UTF-8"%>
<!DOCTYPE html>
<html>
<head>
    <title>JSP 示例</title>
</head>
<body>
    <h1>当前时间</h1>
    <p><%= new java.util.Date() %></p>

    <jsp:useBean id="user" class="com.example.User" scope="session"/>
    <jsp:setProperty name="user" property="name" value="Alice"/>
    <p>用户名: <jsp:getProperty name="user" property="name"/></p>
</body>
</html>

JavaBean (User.java):

package com.example;

public class User {
    private String name;

    public String getName() {
        return name;
    }

    public void setName(String name) {
        this.name = name;
    }
}

JSP 和 Servlet 是什么关系

  1. JSP和Servlet可以相互调用，形成MVC（Model-View-Controller）模式。
  2. JSP是Servlet的简化版，专注于页面显示。
  3. Servlet适合处理复杂的逻辑和控制流程。

JSP 与 Servlet 、JavaScript、静态 HTML 相比，分别有什么区别？

  1. 与纯 Servlet 相比：JSP可以很方便的编写或者修改HTML网页而不用去面对大量的println语句
  2. 与JavaScript相比：虽然JavaScript可以在客户端动态生成 HTML，但是很难与服务器交互，因此不能提供复杂的服务，比如访问数据库和图像处理等等
  3. 与静态HTML相比：静态HTML不包含动态信息

W3C 是什么？

W3C（World Wide Web Consortium，万维网联盟）是一个国际性的组织，致力于制定和维护 Web 技术的标准。它的使命是通过开发和推广开放的技术标准，确保 Web 的长期发展和互操作性。W3C 的标准是 Web 技术的基石，涵盖了 HTML、CSS、XML、HTTP、DOM 等核心技术。

负责动态更新内容，如 AJAX 请求等的是哪一个？

JavaScript

负责操作 DOM 的是哪一个？

HTML

负责设置颜色、字体、间距、背景等样式的是哪一个？

CSS

DOM 是什么？

DOM 是 Web 开发中用于操作 HTML 和 XML 文档的核心接口。通过 DOM，开发者可以动态修改文档的内容、结构和样式，并处理用户交互事件。理解 DOM 是掌握前端开发的基础。

DOM全拼是什么？中文是什么？

Document Object Model，文档对象模型。

DOM中，如何访问元素？

访问元素

  • 通过 ID: document.getElementById("id")
  • 通过标签名: document.getElementsByTagName("div")
  • 通过类名: document.getElementsByClassName("class")
  • 通过 CSS 选择器: document.querySelector("selector") 和 document.querySelectorAll("selector")

示例：

const elementById = document.getElementById("myId");
const elementsByTag = document.getElementsByTagName("div");
const elementsByClass = document.getElementsByClassName("myClass");
const elementBySelector = document.querySelector("myId .myClass");

DOM中，如何修改属性和文本内容？

修改内容

  • 修改文本: element.textContent 或 element.innerHTML
  • 修改属性: element.setAttribute("attribute", "value")

示例：

const element = document.getElementById("myId");
element.textContent = "新的文本内容";
element.setAttribute("class", "newClass");

DOM中，如何绑定和移除事件？

事件处理

  • 绑定事件: element.addEventListener("event", handler)
  • 移除事件: element.removeEventListener("event", handler)

示例：

const button = document.getElementById("myButton");
button.addEventListener("click", function() {
    alert("按钮被点击了！");
});

BOM 中的“B“指的是什么？

B：Browser，即浏览器。

打开新窗口、调整窗口大小，使用DOM还是BOM？

BOM。

DOM和BOM是什么关系？

DOM（Document Object Model，文档对象模型） 和 BOM（Browser Object Model，浏览器对象模型） 是 Web 开发中两个重要的概念，它们都与浏览器环境相关，但功能和作用不同。

DOMBOM
简介DOM 是将 HTML 或 XML 文档表示为树形结构的编程接口。BOM 是浏览器提供的对象模型，用于操作浏览器窗口和浏览器本身的行为。
核心对象documentwindow
作用操作文档的内容、结构和样式，专注于文档内容的操作控制浏览器的导航、历史、屏幕信息等，专注于浏览器窗口和浏览器行为的操作。
核心关系DOM 是 BOM 的一部分。DOM 的核心对象 document 是 BOM 的核心对象 window 的一个属性。
共同点都是浏览器提供的 JavaScript API。都是浏览器提供的 JavaScript API。

DOM示例：

const element = document.getElementById("myId");
element.textContent = "新的文本内容";

BOM示例：

window.location.href = "https://example.com"; // 跳转到新页面
window.alert("Hello, World!"); // 弹出警告框

DOM 与 BOM 协作：

  1. 通过 BOM 的 window.location 跳转页面后，使用 DOM 更新页面内容。
  2. 通过 BOM 的 window.setTimeout 设置定时器，使用 DOM 动态修改页面元素。

示例:

// 使用 BOM 设置定时器
window.setTimeout(function() {
    // 使用 DOM 修改页面内容
    const element = document.getElementById("myId");
    element.textContent = "5 秒后更新的内容";
}, 5000);

“专注于文档内容的操作“的是DOM还是BOM？

DOM

”专注于浏览器窗口和浏览器行为的操作“的是DOM还是BOM？

BOM

DOM的核心对象是什么？

document

BOM的核心对象是什么？

window

BOM中的核心属性有哪些？

window：BOM 的顶层对象，代表浏览器窗口。

  1. window.location: 提供当前页面的 URL 信息。
  2. window.navigator: 提供浏览器信息（如用户代理、平台）。
  3. window.screen: 提供屏幕信息（如宽度、高度）。
  4. window.history: 提供浏览器历史记录。

window 对象的核心方法有哪些？

  1. window.alert(): 弹出警告框。
  2. window.open(): 打开新窗口。
  3. window.setTimeout(): 设置定时器。

示例:

console.log(window.location.href); // 获取当前页面的 URL
window.navigator.userAgent; // 获取用户代理信息
window.screen.width; // 获取屏幕宽度
window.history.back(); // 返回上一页

解析XML文档的技术有哪些？

SAX 和 DOM。

SAX的全拼是什么？

Simple API for XML

SAX 解析方式和 DOM 解析方式最主要的区别是什么？

SAX 和 DOM 是两种用于解析 XML 文档的技术。它们的主要区别如下：

特性DOMSAX
解析方式将整个 XML 文档加载到内存中，形成树结构。基于事件驱动，逐行解析 XML 文档。
内存占用占用内存较大，适合小文件。占用内存较小，适合大文件。
速度解析速度较慢（需要加载整个文档）。解析速度较快（逐行解析）。
修改文档支持对 XML 文档的增删改查。不支持直接修改 XML 文档。
适用场景小型 XML 文档或需要频繁操作 XML 的场景。大型 XML 文档或只需读取数据的场景。
API 复杂度API 较复杂，但操作方便。API 较简单，但需要编写事件处理器。

DOM 解析示例

import javax.xml.parsers.DocumentBuilder;
import javax.xml.parsers.DocumentBuilderFactory;
import org.w3c.dom.Document;
import org.w3c.dom.NodeList;

public class DOMParser {
    public static void main(String[] args) throws Exception {
        DocumentBuilderFactory factory = DocumentBuilderFactory.newInstance();
        DocumentBuilder builder = factory.newDocumentBuilder();
        Document document = builder.parse("example.xml");

        NodeList nodeList = document.getElementsByTagName("name");
        for (int i = 0; i < nodeList.getLength(); i++) {
            System.out.println(nodeList.item(i).getTextContent());
        }
    }
}

SAX 解析示例

import org.xml.sax.Attributes;
import org.xml.sax.SAXException;
import org.xml.sax.helpers.DefaultHandler;
import javax.xml.parsers.SAXParser;
import javax.xml.parsers.SAXParserFactory;

public class SAXParserExample {
    public static void main(String[] args) throws Exception {
        SAXParserFactory factory = SAXParserFactory.newInstance();
        SAXParser saxParser = factory.newSAXParser();

        DefaultHandler handler = new DefaultHandler() {
            boolean isName = false;

            @Override
            public void startElement(String uri, String localName, String qName, Attributes attributes) {
                if (qName.equalsIgnoreCase("name")) {
                    isName = true;
                }
            }

            @Override
            public void characters(char[] ch, int start, int length) {
                if (isName) {
                    System.out.println(new String(ch, start, length));
                    isName = false;
                }
            }
        };

        saxParser.parse("example.xml", handler);
    }
}

当XML文档较大时，应该使用哪种解析方式？

SAX

为什么SAX的解析方式，不能修改数据？DOM的解析方式，可以修改数据？

因为 SAX 的解析方式是基于事件驱动，逐行解析 XML 文档并触发事件。而 DOM 的解析方式是将整个 XML 文档加载到内存中，形成树结构，开发者通过操作 DOM 树的节点来访问或修改数据。。

只需读取数据的场景使用哪种解析方式比较好？

SAX

占用内存比较低的是哪种解析方式？

SAX

需要频繁操作元素时，使用哪种解析方式比较好？

DOM

常见的解析器有哪些？

常见的解析器有三种：

  1. JAXP：sum 公司提供的解析器。支持 dom sax
  2. DOM4J：比较优秀
  3. jsoup：HTML 解析

推荐挑选 DOM4J 的版本 2.1.3以上。

HTML、CSS、JavaScript 是什么关系？

  1. HTML: 提供网页的基本结构和内容。
  2. CSS: 美化网页，使其更具吸引力。
  3. JavaScript: 增加交互性，提升用户体验。。

示例：结合使用三大组件：

<!DOCTYPE html>
<html>
<head>
    <title>三大组件示例</title>
    <style>
        body {
            font-family: Arial, sans-serif;
            background-color: f0f0f0;
            text-align: center;
        }
        button {
            padding: 10px 20px;
            font-size: 16px;
            background-color: blue;
            color: white;
            border: none;
            cursor: pointer;
        }
    </style>
</head>
<body>
    <h1>欢迎来到我的网页</h1>
    <button id="demo">点击我</button>
    <script>
        document.getElementById("demo").addEventListener("click", function() {
            alert("按钮被点击了！");
        });
    </script>
</body>
</html>

HTML 的全拼是什么？CSS全拼是什么？

HyperText Markup Language

Cascading Style Sheets

Tags 是什么？

Tags 即 HTML 中所谓的”标签“。

文档结构标签有哪些？

文档结构标签

这些标签用于定义 HTML 文档的基本结构。

  • <!DOCTYPE html>
    声明文档类型，告诉浏览器使用 HTML5 标准。
  • <html>
    定义 HTML 文档的根元素。
  • <head>
    包含文档的元数据（如标题、字符编码、样式表链接等）。
  • <title>
    定义文档的标题，显示在浏览器的标题栏或标签页上。
  • <body>
    定义文档的主体内容，显示在浏览器窗口中。

<title>标签中的内容显示在什么位置？

显示在网页顶部的标签栏。

<hr>标签的作用是什么？

插入水平线。

<br/>标签的作用是什么？

插入换行符。

<strong>标签的作用是什么？

定义加粗文本，表示重要内容。

<em>标签的作用是什么？

定义斜体文本，表示强调内容。

<a>标签中，最重要的属性是什么？

<a>标签用于定义超链接，href属性指定链接的目标地址。

<a href="https://www.example.com">访问示例网站</a>

<img>标签中，src属性的作用是什么？alt属性的作用是什么？

src属性用于指定图像的路径，alt属性提供替代文本。

<img src="image.jpg" alt="示例图片">

有序列表的标签是什么？

<ol>
    <li>第一项</li>
    <li>第二项</li>
</ol>

无序列表的标签是什么？

<ul>
    <li>项目 1</li>
    <li>项目 2</li>
</ul>

定义表格的标签是什么？

<table>标签用于定义表格。

<table>
    <tr>
        <th>姓名</th>
        <th>年龄</th>
    </tr>
    <tr>
        <td>张三</td>
        <td>25</td>
    </tr>
</table>

表格标签中，定义表格行的标签是什么？

<tr>标签定义表格行。

<table>
    <tr>
        <th>姓名</th>
        <th>年龄</th>
    </tr>
    <tr>
        <td>张三</td>
        <td>25</td>
    </tr>
</table>

定义表单的标签是什么？

<form>
    <label for="username">用户名：</label>
    <input type="text" id="username" name="username"><br>
    <label for="password">密码：</label>
    <input type="password" id="password" name="password"><br>
    <button type="submit">提交</button>
</form>

定义“多行文本输入框”的标签是什么？

<textarea>

定义“下拉列表”的标签是什么？

<select>

定义“下拉列表的选项”的标签是什么？

<option>

定义“表单控件”的标签是什么？

<label>

定义“输入字段”的标签是什么？

<input>，其中的type属性指定输入的类型（如文本、密码、复选框等）。

什么是“语义化标签”？

语义化标签用于定义网页的结构和内容的意义。它们本身没有特殊的显示效果，只是标签的名称有更明显的结构含义。

定义“页眉或章节的头部”的标签是什么？

<header>

<header>
    <h1>网站标题</h1>
    <nav>
        <a href="#">首页</a> |
        <a href="#">关于我们</a> |
        <a href="#">联系我们</a>
    </nav>
</header>
<main>
    <article>
        <h2>文章标题</h2>
        <p>文章内容...</p>
    </article>
</main>
<footer>
    <p>版权所有 &copy; 2023</p>
</footer>

定义“页脚或章节的尾部”的标签是什么？

<footer>

定义“导航链接”的标签是什么？

<nav>

定义“块级容器”的标签是什么？

<div>

定义“客户端脚本（如 JavaScript）”的标签是什么？

<script>

定义“行内容器”的标签是什么？

<span>

定义“文档的元数据”的标签是什么？

<meta>

定义“内部样式表”的标签是什么？

<style>

定义“外部资源链接（如样式表）”的标签是什么？

<link>

<meta charset="UTF-8">
<link rel="stylesheet" href="styles.css">
<script src="script.js"></script>
<style>
    body { font-family: Arial, sans-serif; }
</style>

CSS的全拼是什么？中文名是什么？

Cascading Style Sheets，层叠样式表。

如何选择类名为"example"的元素？

/* 选择类名为"example"的元素 */
.example {
    background-color: yellow;
    padding: 10px;
}

内联CSS和内部CSS有什么区别？

内联样式：直接在HTML元素的style属性中定义样式。

<p style="color: red;">这是一个段落。</p>

内部样式表：在HTML文档的<head>部分使用<style>标签定义样式。

<head>
    <style>
        p {
            color: green;
        }
    </style>
</head>

CSS的使用方式有哪些？

CSS的使用方式有以下三种：

内联样式：直接在HTML元素的style属性中定义样式。

<!DOCTYPE html>
<html lang="zh-CN">
<head>
    <meta charset="UTF-8">
    <title>内联样式示例</title>
</head>
<body>
    <h1 style="color: red;">Hello, World!</h1>
    <p style="font-size: 18px;">这是一个段落。</p>
</body>
</html>

内部样式表：在HTML文档的<head>部分使用<style>标签定义样式。

<!DOCTYPE html>
<html lang="zh-CN">
<head>
    <meta charset="UTF-8">
    <title>内部样式表示例</title>
    <style>
        h1 {
            color: green;
        }
        p {
            font-size: 16px;
        }
    </style>
</head>
<body>
    <h1>Hello, World!</h1>
    <p>这是一个段落。</p>
</body>
</html>

外部样式表：在单独的CSS文件中定义样式，并通过<link>标签引入。

<!DOCTYPE html>
<html lang="zh-CN">
<head>
    <meta charset="UTF-8">
    <title>外部样式表示例</title>
    <link rel="stylesheet" href="styles.css">
</head>
<body>
    <h1>Hello, World!</h1>
    <p>这是一个段落。</p>
</body>
</html>

外部CSS要如何引入？

<!DOCTYPE html>
<html lang="zh-CN">
<head>
    <meta charset="UTF-8">
    <title>外部样式表示例</title>
    <link rel="stylesheet" href="styles.css">
</head>
<body>
    <h1>Hello, World!</h1>
    <p>这是一个段落。</p>
</body>
</html>

内部CSS的<style>标签一般放在什么位置？

一般放在<head>标签中。

选择所有元素的选择器如何写？

/* 选择所有元素 */
* {
    color: blue;
    font-size: 16px;
}

CSS 文件的后缀名是什么？

.css

最推荐的CSS导入方式是哪一种？

外部样式。

  1. 外部样式表易于维护。
  2. 外部样式表可以被浏览器缓存，提高加载速度。

如何在 CSS 文件中导入其他 CSS 样式表？

@import

@import url("reset.css");
@import url("typography.css");

h1 {
    color: purple;
}

CSS的选择器有哪些？

CSS 选择器分为基本选择器和组合选择器两大类。（属性选择器、伪类选择器和伪元素选择器不常用）

基本选择器主要有：

  1. 元素选择器
  2. ID 选择器
  3. 类选择器
  4. 通用选择器

组合选择器主要有：

  1. 后代选择器
  2. 子元素选择器
  3. 相邻兄弟选择器
  4. 通用兄弟选择器

如何选择p标签中，class属性为center的元素？

p.center {
  text-align: center;
  color: red;
}

如何“动态导入 CSS ”？

使用 JavaScript 动态导入
通过 JavaScript 动态插入 <link> 标签来加载 CSS 文件，适用于需要条件加载的场景。

<!DOCTYPE html>
<html lang="zh-CN">
<head>
    <meta charset="UTF-8">
    <title>动态导入样式表示例</title>
    <script>
        function loadStyleSheet(url) {
            var link = document.createElement("link");
            link.rel = "stylesheet";
            link.href = url;
            document.head.appendChild(link);
        }
        loadStyleSheet("styles.css");
    </script>
</head>
<body>
    <h1>Hello, World!</h1>
    <p>这是一个段落。</p>
</body>
</html>

JavaScript 是什么？

JavaScript 是一种广泛用于网页开发的脚本语言，主要用于增强网页的交互性和动态功能。

示例代码：

// 在网页中显示 "Hello, World!"
document.getElementById("demo").innerHTML = "Hello, World!";

引入 JavaScript 的方式有哪些？

在网页中引入 JavaScript 有多种方式，常见的有以下三种：

  1. 内联 JavaScript
    直接将 JavaScript 代码嵌入 HTML 文件的 <script> 标签中。
<!DOCTYPE html>
<html lang="zh-CN">
<head>
    <meta charset="UTF-8">
    <title>内联 JavaScript 示例</title>
</head>
<body>
    <h1 id="demo">Hello, World!</h1>
    <script>
        // 内联 JavaScript 代码
        document.getElementById("demo").innerHTML = "你好，世界！";
    </script>
</body>
</html>
  1. 内部 JavaScript
    将 JavaScript 代码放在 HTML 文件的 <script> 标签中，通常放在 <head> 或 <body> 的末尾。（把脚本置于<head> 或 <body> 的末尾，可改善显示速度，因为脚本编译会拖慢显示。）
<!DOCTYPE html>
<html lang="zh-CN">
<head>
    <meta charset="UTF-8">
    <title>内部 JavaScript 示例</title>
    <script>
        // 内部 JavaScript 代码
        function changeText() {
            document.getElementById("demo").innerHTML = "你好，世界！";
        }
    </script>
</head>
<body>
    <h1 id="demo">Hello, World!</h1>
    <button onclick="changeText()">点击我</button>
</body>
</html>
  1. 外部 JavaScript（推荐使用）
    将 JavaScript 代码保存在单独的 .js 文件中，通过 <script> 标签的 src 属性引入。

HTML 文件:

<!DOCTYPE html>
<html lang="zh-CN">
<head>
    <meta charset="UTF-8">
    <title>外部 JavaScript 示例</title>
    <script src="script.js"></script>
</head>
<body>
    <h1 id="demo">Hello, World!</h1>
    <button onclick="changeText()">点击我</button>
</body>
</html>

JavaScript 文件 (script.js):

// 外部 JavaScript 代码
function changeText() {
    document.getElementById("demo").innerHTML = "你好，世界！";
}

引入 JavaScript 拓展：

异步和延迟加载
通过 async 和 defer 属性控制脚本加载和执行时机。

  • async: 脚本异步加载，下载完成后立即执行。
  • defer: 脚本延迟到 HTML 解析完成后执行。
<script src="script.js" async></script>
<script src="script.js" defer></script>

内联 JavaScript 和内部 JavaScript 的区别是什么？

这个问题不重要，没必要研究。

  1. 内联 JavaScript
    直接将 JavaScript 代码嵌入 HTML 文件的 <script> 标签中。
<!DOCTYPE html>
<html lang="zh-CN">
<head>
    <meta charset="UTF-8">
    <title>内联 JavaScript 示例</title>
</head>
<body>
    <h1 id="demo">Hello, World!</h1>
    <script>
        // 内联 JavaScript 代码
        document.getElementById("demo").innerHTML = "你好，世界！";
    </script>
</body>
</html>
  1. 内部 JavaScript
    将 JavaScript 代码放在 HTML 文件的 <script> 标签中，通常放在 <head> 或 <body> 的末尾。（把脚本置于<head> 或 <body> 的末尾，可改善显示速度，因为脚本编译会拖慢显示。）
<!DOCTYPE html>
<html lang="zh-CN">
<head>
    <meta charset="UTF-8">
    <title>内部 JavaScript 示例</title>
    <script>
        // 内部 JavaScript 代码
        function changeText() {
            document.getElementById("demo").innerHTML = "你好，世界！";
        }
    </script>
</head>
<body>
    <h1 id="demo">Hello, World!</h1>
    <button onclick="changeText()">点击我</button>
</body>
</html>

外部JavaScript文件的后缀名是什么？

.js

为什么内部JavaScript最好放在<body>或<head>标签的末尾？

因为脚本编译会拖慢显示，所有把脚本置于<head> 或 <body> 的末尾，可改善显示速度。

三种引入方式中，最推荐哪一种？为什么？

推荐使用外部 JavaScript 。原因有以下几点：

  1. 外部 JavaScript 能够做到分离解耦，使 HTML 和 JavaScript 更易于阅读和维护。
  2. 已缓存的 JavaScript 文件可加速页面加载

引入外部 JavaScript 脚本文件的标签是什么？

通过 <script> 标签的 src 属性引入。

HTML 文件:

<!DOCTYPE html>
<html lang="zh-CN">
<head>
    <meta charset="UTF-8">
    <title>外部 JavaScript 示例</title>
    <script src="script.js"></script>
</head>
<body>
    <h1 id="demo">Hello, World!</h1>
    <button onclick="changeText()">点击我</button>
</body>
</html>

JavaScript 文件 (script.js):

// 外部 JavaScript 代码
function changeText() {
    document.getElementById("demo").innerHTML = "你好，世界！";
}

JavaScript中，let和const的区别是什么？

let和const都用于块级作用域的变量的声明。

区别在于：

  • let: 可重新赋值。
  • const: 声明后不可重新赋值。
let y = 20;
const z = 30;

JavaScript 中的引用类型有哪些？

JavaScript 中的引用类型有3种：

  1. object
  2. array
  3. function
let obj = { name: "Alice", age: 25 }; // object
let arr = [1, 2, 3]; // array

JavaScript 中的基本类型有哪些？

JavaScript 中的基本类型有7种：

  1. number,
  2. string,
  3. boolean,
  4. null,
  5. undefined,
  6. symbol,
  7. bigint。
let num = 42; // number
let str = "Hello"; // string
let bool = true; // boolean

JavaScript 中，如何定义对象？

对象: 使用 {} 定义，包含键值对。

let person = {
    name: "Alice",
    age: 25,
    greet: function() {
        console.log("Hello, " + this.name);
    }
};

JavaScript 中，如何定义数组？

数组: 使用 [] 定义，元素可任意类型。

let fruits = ["apple", "banana", "cherry"];
fruits.push("orange"); // 添加元素

JavaScript 中，如何”捕获和处理异常“？

错误处理

  • try...catch: 捕获并处理异常。
try {
    let result = riskyOperation();
} catch (error) {
    console.error("发生错误:", error);
}

JavaScript 中，如何”定义和继承类“？

类和面向对象

  • class: 定义类。
  • constructor: 构造函数。
  • extends: 继承。
class Animal {
    constructor(name) {
        this.name = name;
    }
    speak() {
        console.log(`${this.name} 发出声音。`);
    }
}

class Dog extends Animal {
    speak() {
        console.log(`${this.name} 汪汪叫。`);
    }
}

let dog = new Dog("Rex");
dog.speak(); // Rex 汪汪叫。

JavaScript 中，==和===的区别是？

两者的区别主要在于是否进行”类型转换“：

  1. ==（宽松相等）
  • 有类型转换: 在比较前会进行类型转换，尝试将操作数转换为相同类型。
  • 比较值: 转换后比较值是否相等。

示例:

console.log(5 == "5"); // true，字符串 "5" 转换为数字 5
console.log(true == 1); // true，true 转换为数字 1
console.log(null == undefined); // true，null 和 undefined 在宽松相等下被视为相等
  1. ===（严格相等，在大多数情况下，使用 === 更为安全可靠。）
  • 无类型转换: 直接比较值和类型，不进行类型转换。
  • 严格比较: 值和类型都必须相同才返回 true。

示例:

console.log(5 === "5"); // false，类型不同
console.log(true === 1); // false，类型不同
console.log(null === undefined); // false，类型不同
  1. 使用建议
  • 推荐使用 ===: 避免类型转换带来的意外行为，代码更可预测。
  • 谨慎使用 ==: 仅在明确需要类型转换时使用。

示例对比:

console.log(0 == false); // true，0 转换为 false
console.log(0 === false); // false，类型不同

JavaScript 中，null和undefined的区别是？

特性undefinednull
含义未定义的值显式的空值
类型"undefined""object"
默认赋值系统自动赋值需手动赋值
null == undefined;truetrue
null === undefined; falsefalse

XML的全拼是什么？中文名是什么？

eXtensible Markup Language，可扩展标记语言

XML和HTML的区别是什么？

相比 HTML，XML 的设计宗旨是存储和传输数据，而不是显示数据。

XML的声明标签是什么？

声明标签: <?xml version="1.0" encoding="UTF-8"?> 。

<?xml version="1.0" encoding="UTF-8"?>
<bookstore>
    <book category="fiction">
        <title lang="en">Harry Potter</title>
        <author>J.K. Rowling</author>
        <year>2005</year>
        <price>29.99</price>
    </book>
    <book category="non-fiction">
        <title lang="en">Learning XML</title>
        <author>John Doe</author>
        <year>2020</year>
        <price>39.95</price>
    </book>
</bookstore>

XML 和 JSON 有什么区别？

XML 和 JSON 的区别主要有以下几个方面：

特性XMLJSON
格式标签和属性键值对
可读性低高
文件大小大小
解析性能慢快
用途数据存储、配置文件、Web 服务数据交换、API 通信

常见的 HTML 解析方式有哪些？

常见的 HTML 解析器有哪些？

JSON和XML的格式有什么区别？

XML的格式是标签 + 属性，JSON 的格式是键值对。

XML和JSON哪一个的解析性能更高？

JSON

DTD全拼是什么？作用是什么？

Document Type Definition，用于定义 XML 文档结构。

XML文件的后缀名是什么？

.xml

为什么要避免在XML文档中使用属性？

相比通过属性来描述数据，通过标签来描述数据更具优势：

  1. 属性难以阅读和维护
  2. 属性不易扩展
  3. 属性无法描述树型结构
  4. 属性无法包含多重的值

XML 中，标签名可以以数字开头吗？可以包含数字吗？

标签名不能以数字开头，但是可以包含数字。

XML 中，标签名的命名有什么要求？

标签名的命名有以下几个条件：

  1. 不可以以数字或标点符号开始，
  2. 也不可以包含空格，会报错。
  3. XML文档中的标签是对大小写敏感的。

XML 中，标签对大小写敏感吗？

XML 中的标签对大小写是敏感的。

XML 中的实体引用有哪些？

XML中，有5预定义的实体引用：

  1. &lt;：小于
  2. &gt;：大于
  3. &amp;：和号&
  4. &apos;：单引号
  5. &quot;：双引号

XML 中，“小于”引用怎么写？

&lt;

“大于”引用怎么写？

&gt;

“单引号”引用怎么写？

&apos;

“双引号”引用怎么写？

&quot;

“和号”引用怎么写？

&amp;

XML 约束的作用是什么？

XML 约束：用于定义 XML 文档的结构和内容规则，确保文档符合预定的格式和要求。

常见的 XML 约束技术有哪些？

常见的 XML 约束技术主要有两种：

  1. DTD（Document Type Definition ）
  2. XML Schema

以及其它一些 XML 约束技术。

DTD示例：

<!DOCTYPE note [
  <!ELEMENT note (to, from, heading, body)>
  <!ELEMENT to (PCDATA)>
  <!ELEMENT from (PCDATA)>
  <!ELEMENT heading (PCDATA)>
  <!ELEMENT body (PCDATA)>
]>

此 DTD 定义了一个 note 元素，包含 to、from、heading 和 body 四个子元素，且这些子元素只能包含文本。

XML Schema示例：

<xs:schema xmlns:xs="http://www.w3.org/2001/XMLSchema">
  <xs:element name="note">
    <xs:complexType>
      <xs:sequence>
        <xs:element name="to" type="xs:string"/>
        <xs:element name="from" type="xs:string"/>
        <xs:element name="heading" type="xs:string"/>
        <xs:element name="body" type="xs:string"/>
      </xs:sequence>
    </xs:complexType>
  </xs:element>
</xs:schema>

此 Schema 定义了一个 note 元素，包含 to、from、heading 和 body 四个子元素，且这些子元素必须为字符串类型。

Schema 约束文件的后缀是什么？

.xsd

DTD 约束文件的扩展名是什么？

.dtd

如何导入 DTD 约束文件？

<!DOCTYPE note SYSTEM "D:\02-WEB\JAVA_WEB\homework\html_project\xml\xml约束\note.dtd">

JSON 是什么？

JSON（JavaScript Object Notation） 是一种轻量级的数据交换格式，广泛用于 Web 应用程序中的数据传输和存储。

JSON 和 XML 有什么区别？

JSON 与 XML 的比较：

特性JSONXML
格式键值对标签和属性
可读性较好较好
文件大小较小较大
解析性能较快较慢
数据类型有限支持复杂数据类型
用途数据交换、配置文件数据存储、配置文件、Web 服务

JSON 和 JavaScript 是什么关系？

JSON 与 JavaScript 的关系：

  • JSON 是 JavaScript 的子集: JSON 的语法基于 JavaScript 的对象字面量。
  • JavaScript 中的 JSON 支持:
    • JSON.parse(): 将 JSON 字符串解析为 JavaScript 对象。
    • JSON.stringify(): 将 JavaScript 对象转换为 JSON 字符串。

示例:

// JSON 字符串
const jsonString = '{"name":"Alice","age":25}';

// 解析为 JavaScript 对象
const obj = JSON.parse(jsonString);
console.log(obj.name); // 输出: Alice

// 将 JavaScript 对象转换为 JSON 字符串
const newJsonString = JSON.stringify(obj);
console.log(newJsonString); // 输出: {"name":"Alice","age":25}

JSON 中，数组如何表示？

JSON 的基本语法：

  • 键值对: 数据以键值对的形式表示，键和值之间用冒号 : 分隔。
  • 对象: 使用花括号 {} 表示，键值对之间用逗号 , 分隔。
  • 数组: 使用方括号 [] 表示，元素之间用逗号 , 分隔。
  • 数据类型: 支持字符串、数字、布尔值、数组、对象和 null。

示例:

{
    "name": "Alice",
    "age": 25,
    "isStudent": false,
    "courses": ["Math", "Science"],
    "address": {
        "city": "Beijing",
        "postalCode": "100000"
    },
    "graduated": null
}

JSON 的局限性有哪些？

JSON 的局限性：

  • 不支持注释: JSON 标准不支持注释。
  • 数据类型有限: 仅支持字符串、数字、布尔值、数组、对象和 null。
  • 不适合存储复杂数据: 对于二进制数据或复杂数据结构，可能需要其他格式（如 XML、Protocol Buffers）。

Fastjson 是什么？

Fastjson 是阿里巴巴开源的一个高性能 Java 库，用于处理 JSON 数据。它能够将 Java 对象序列化为 JSON 字符串，并将 JSON 字符串反序列化为 Java 对象。

Fastjson 的主要功能有哪些？

Fastjson 的主要功能

  • 序列化: 将 Java 对象转换为 JSON 字符串。
  • 反序列化: 将 JSON 字符串转换为 Java 对象。
  • 支持注解: 通过注解控制序列化和反序列化的行为。
  • 支持泛型: 可以处理泛型类型的对象。
  • 自定义序列化: 支持自定义序列化和反序列化逻辑。

JSON 字符串转为 Java 对象是序列化还是反序列化？

反序列化

Fastjson 中，最常用的类是哪一个？

如何将java对象转JSON字符串？

如何将JSON字符串转java对象？

@JSONField(serialize = false)有什么意义？

使用注解
Fastjson 提供注解来控制序列化和反序列化的行为。

示例:

import com.alibaba.fastjson.annotation.JSONField;

public class User {
    @JSONField(name = "user_name")
    private String name;

    @JSONField(serialize = false)
    private int age;

    // 构造函数、getter 和 setter 省略

    public static void main(String[] args) {
        User user = new User();
        user.setName("Alice");
        user.setAge(25);

        String jsonString = JSON.toJSONString(user);
        System.out.println(jsonString); // 输出: {"user_name":"Alice"}
    }
}

常用的JSON库有哪些？其中最常用的是哪一个？

Fastjson 如何使用？

(1) 添加依赖
在 Maven 项目中添加 Fastjson 依赖：

<dependency>
    <groupId>com.alibaba</groupId>
    <artifactId>fastjson</artifactId>
    <version>1.2.83</version>
</dependency>

(2) 序列化（Java 对象 → JSON 字符串）

import com.alibaba.fastjson.JSON;

public class User {
    private String name;
    private int age;

    // 构造函数、getter 和 setter 省略

    public static void main(String[] args) {
        User user = new User();
        user.setName("Alice");
        user.setAge(25);

        String jsonString = JSON.toJSONString(user);
        System.out.println(jsonString); // 输出: {"age":25,"name":"Alice"}
    }
}

(3) 反序列化（JSON 字符串 → Java 对象）

import com.alibaba.fastjson.JSON;

public class User {
    private String name;
    private int age;

    // 构造函数、getter 和 setter 省略

    public static void main(String[] args) {
        String jsonString = "{\"name\":\"Alice\",\"age\":25}";
        User user = JSON.parseObject(jsonString, User.class);
        System.out.println(user.getName()); // 输出: Alice
        System.out.println(user.getAge());  // 输出: 25
    }
}

Fastjson 的缺点是什么？

Fastjson 的安全性问题
Fastjson 在过去曾多次被发现存在安全漏洞（如反序列化漏洞），因此在使用时需要谨慎：

  • 及时更新: 使用最新版本以修复已知漏洞。
  • 避免反序列化不可信数据: 防止恶意数据导致的安全问题。

Vue 是什么？

全名：Vue.js
作用：用于构建用户界面的渐进式JavaScript框架，是前端开发中最流行的框架之一。
示例代码：

<div id="app">
  {{ message }}
</div>

<script>
  var app = new Vue({
    el: 'app',
    data: {
      message: 'Hello Vue!'
    }
  });
</script>

Vue 中文文档的网址是什么？

中文文档网址： https://vuejs.bootcss.com/guide/

Vue 中，常用的指令有哪些？

  1. v-bind：为HTML标签绑定属性值，如设置 href，css样式等
  2. v-model：在表单元素上创建双向数据绑定
  3. V-on：为HTML标签绑定事件
  4. V-if：条件性的渲染某元素，判定为true时渲染,否则不渲染
  5. v-else：条件性渲染某元素 执行 else语句
  6. v-else-if：条件性渲染某元素 执行 else if语句 判断
  7. v-show：根据条件展示某元素，区别在于切换的是display属性的值
  8. v-for：列表渲染，遍历容器的元素或者对象的属性

MVVM中的各个元素分别是什么意义？

  1. M：
  2. V：
  3. V：
  4. M：

Vue.js的核心是什么？

Vue.js的核心是一个允许采用简洁的模板语法来声明式地将数据渲染进 DOM 的系统:

如何引入vue.js文件？

<script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script>

如何使用v-once指令插值？

<span>Message: {{ message }}</span>

<!--只插值一次-->
<span v-once>{{message}}</span>

v-bind指令如何使用？

<div id="app">
    <a v-bind:href="url"> 点击我 </a>
    <a :href="url"> 点击我 </a>
</div>

v-model指令如何使用？

<div id="app">
    <a v-bind:href="url"> 点击我 </a>
    <input v-model="url" placeholder="输入修改">
    <textarea v-model="message" placeholder="add multiple lines"></textarea>
</div>

条件渲染指令如何使用？

<div id="app">
    <span v-if="number == 1"> 星期一</span>
    <span v-else-if="number == 2"> 星期二</span>
    <span v-else-if="number == 3"> 星期三</span>
    <span v-else-if="number == 4"> 星期四</span>
    <span v-else-if="number == 5"> 星期五</span>
    <span v-else-if="number == 6"> 星期六</span>
    <span v-else> 星期天</span>

    <input v-model="number">
</div>

列表渲染v-for指令如何使用？

<li v-for="(item,i) in items" :key="item.course">
    {{i+1}}:{{ item.course }}
</li>

事件处理v-on指令如何使用？

<!DOCTYPE html>
<html lang="en" xmlns:v-on="http://www.w3.org/1999/xhtml">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script>
</head>
<body>
<div id="app">
    <button v-on:click="counter += 1">点击次数加 1</button>
    <button v-on:click="add('what')">点击</button>
    <p>已经点击的次数 {{ counter }} </p>
</div>

<script>
    var app = new Vue({
        el: '#app',
        data: {
            items:[
                {course:'java'},
                {course:'mysql'},
                {course:'spring'}
            ],
            counter:0
        },
        methods:{
            add:function (hi) {
                alert('Hello ' + hi)
            }
        }
    })
</script>
</body>
</html>

Element中文学习地址是什么？

https://element.eleme.cn/#/zh-CN/component/installation

Element是什么？

Element（通常称为 Element UI 或 Element Plus）是一套基于 Vue.js 的开源 UI 组件库，专为开发者提供丰富的、高质量的组件，用于快速构建企业级中后台前端应用。

Element 的常用组件有哪些？

  • 基础组件：按钮（Button）、输入框（Input）、布局（Layout）等。
  • 表单组件：表单（Form）、选择器（Select）、日期选择器（DatePicker）等。
  • 数据展示：表格（Table）、标签（Tag）、卡片（Card）等。
  • 导航组件：菜单（Menu）、面包屑（Breadcrumb）等。
  • 反馈组件：对话框（Dialog）、消息提示（Message）、加载（Loading）等。

如何安装与使用 Element ？

安装 Element Plus（Vue 3）

npm install element-plus --save

在项目中引入

import { createApp } from 'vue';
import ElementPlus from 'element-plus';
import 'element-plus/dist/index.css';
import App from './App.vue';

const app = createApp(App);
app.use(ElementPlus);
app.mount('app');

示例代码

<template>
  <el-button type="primary">点击我</el-button>
</template>

<script>
export default {
  name: 'App',
};
</script>

Element 的资源有哪些？

如何引入 Element 文件？

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
	<!--引入js 和 css-->
    <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">
</head>
<body>

</body>
</html>

如何创建Vue对象？

<div id="app">
        
</div>
<script>
    new Vue({
        el:'#app'
    })
</script>

Ajax 是什么

Ajax（Asynchronous JavaScript and XML，异步 JavaScript 和 XML）是一种用于创建快速动态网页的技术。它允许网页在不重新加载整个页面的情况下，与服务器进行异步通信并更新部分页面内容，常见场景如搜索框中，输入关键字后，可以即时生成下拉框中的内容。

什么是“异步通信”？

异步通信：Ajax 可以在后台与服务器交换数据，而不会阻塞用户的操作或刷新页面。

什么是“局部更新”？

局部更新：只更新网页的某一部分，而不是整个页面，提升了用户体验。

Ajax 的工作原理是什么？

Ajax 工作原理：

  1. 用户触发事件（如点击按钮）。
  2. JavaScript 创建一个 XMLHttpRequest 对象（或使用 fetch API）。
  3. 通过该对象向服务器发送请求。
  4. 服务器处理请求并返回数据（通常是 JSON 或 XML 格式）。
  5. JavaScript 解析返回的数据并更新网页内容。

Ajax 的使用场景有哪些？

  • 表单验证：实时验证用户输入，无需刷新页面。
  • 动态加载内容：如无限滚动、分页加载等。
  • 自动补全：搜索框的自动补全功能。
  • 实时更新：如聊天应用、通知系统等。
  • 交互式网页：提升用户体验，减少页面刷新。

Ajax 的实现方式是什么？

使用 XMLHttpRequest 对象

// 创建 XMLHttpRequest 对象
var xhr = new XMLHttpRequest();

// 设置请求方法和 URL
xhr.open('GET', 'https://api.example.com/data', true);

// 设置回调函数
xhr.onreadystatechange = function() {
  if (xhr.readyState === 4 && xhr.status === 200) {
    var response = JSON.parse(xhr.responseText);
    console.log(response);
  }
};

// 发送请求
xhr.send();

使用 fetch API（现代方式）

fetch('https://api.example.com/data')
  .then(response => response.json())
  .then(data => console.log(data))
  .catch(error => console.error('Error:', error));

Ajax 的优点是什么？

优点：

  • 提升用户体验：页面无需刷新，操作更加流畅。
  • 减少带宽消耗：只传输需要的数据，而不是整个页面。
  • 提高性能：局部更新比重新加载页面更快。

Ajax 的缺点有哪些？

缺点：

  • SEO 不友好：搜索引擎可能无法抓取通过 Ajax 动态加载的内容。
  • 浏览器兼容性：虽然现代浏览器都支持 Ajax，但旧版浏览器可能需要额外处理。
  • 复杂性：需要处理异步编程和错误处理。

axios 是什么？

Axios 是一个基于 Promise 的现代化 HTTP 客户端库，专门为浏览器和 Node.js 环境设计，用于发送异步 HTTP 请求。

axios 的官网是？

https://www.axios-http.cn/docs

如何引入 axios?

<script src="https://unpkg.com/axios/dist/axios.min.js"></script>

如何调用 axios？

axios.get('/ajax')
        .then(function (response) {
            // 处理成功情况	
            console.log(response);
        })
        .catch(function (error) {
            // 处理错误情况
            console.log(error);
        })
        .then(function () {
            // 总是会执行
        });

axios 如何使用？

安装

npm install axios
 或
yarn add axios

发起请求

// GET 请求
axios.get('/user?ID=12345')
  .then(response => console.log(response))
  .catch(error => console.error(error));

// POST 请求
axios.post('/user', { firstName: 'John', lastName: 'Doe' })
  .then(response => console.log(response));
为什么说HTTP是“无状态”的协议
为什么使用HTTP协议的时候，要配合Cookie或Session来保留客户端的状态信息
HTTP的请求和响应消息格式
HTTP的工作流程
HTTP 请求组成部分
请求行包含哪些信息？
常见的请求方法有哪些？
为什么GET请求的数据量有大小的限制，而POST请求则没有大小的限制？
HEAD请求和GET请求的区别是什么？
HTTP 响应由哪些部分组成？
4xx是什么含义？重要
5xx是什么含义？
HTTP/1.0和HTTP/1.1的区别是什么？
HTTP 与 HTTPS的区别是什么？重要
OSI 模型分为几层？分别是什么？
TCP/IP模型分为几层？分别是什么？
OSI 和 TCP/IP 中，哪一个是理论模型，哪一个 是实际应用模型？
TCP全拼是什么？中文是什么？
UDP全拼是什么？中文是什么？
TCP 的应用场景有哪些？
UDP 的应用场景有哪些？
HTTP属于哪一层的协议？TCP 和 UDP 属于哪一层的协议？！！！！
TCP和UDP的区别是什么？！！！！
TCP和UDP中，当传输的数据量较大时，应该采用哪种协议？要进一步分析
TCP和UDP中，当对可靠性要求较高时，应该采用哪种协议？
TCP和UDP中，当实时性要求较高时，应该采用哪种协议？
TCP建立连接的三次握手是如何进行的？
TCP关闭连接的四次挥手是如何进行的？
如果数据包丢失或损坏，UDP 协议会如何处理？
UDP 协议中，数据包的顺序有什么特点？

EL表达式是什么

EL（Expression Language）表达式是一种用于在JSP（JavaServer Pages）和JSF（JavaServer Faces）等Java Web应用中简化数据访问的表达式语言。它主要用于在JSP页面中嵌入动态内容，访问JavaBean属性、集合、请求参数、会话属性等。

EL 表达式的基本语法有哪些？

  • 访问Bean属性：${user.name}
  • 访问集合元素：${users[0].name}
  • 访问请求参数：${param.username}
  • 访问会话属性：${sessionScope.user}
  • 条件判断：${user.age > 18 ? "Adult" : "Minor"}

示例
假设有一个JavaBean User：

public class User {
    private String name;
    private int age;
    // getters and setters
}

在JSP页面中使用EL表达式：

<p>User Name: ${user.name}</p>
<p>User Age: ${user.age}</p>
<p>Is Adult: ${user.age > 18 ? "Yes" : "No"}</p>

JSTL 标签是什么

JSTL（JavaServer Pages Standard Tag Library）是Java EE中的一组标准标签库，用于简化JSP页面的开发。它提供了一系列标签，帮助开发者在JSP中执行常见任务，如循环、条件判断、数据格式化等，减少Java代码的嵌入，使页面更简洁易读。

如何引入 JSTL 标签？

引入JSTL标签：

<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>

JSTL 的常用标签有哪些？

  1. 核心标签（Core Tags）：

    • <c:out>：输出表达式结果。
    • <c:set>：设置变量值。
    • <c:remove>：删除变量。
    • <c:if>：条件判断。
    • <c:choose>、<c:when>、<c:otherwise>：多条件判断。
    • <c:forEach>：循环遍历集合或数组。
    • <c:forTokens>：按分隔符遍历字符串。

  2. 格式化标签（Formatting Tags）：

    • <fmt:formatNumber>：格式化数字。
    • <fmt:parseNumber>：解析数字字符串。
    • <fmt:formatDate>：格式化日期。
    • <fmt:parseDate>：解析日期字符串。
    • <fmt:setLocale>：设置本地化环境。
    • <fmt:setTimeZone>：设置时区。

  3. SQL标签（SQL Tags）：

    • <sql:setDataSource>：设置数据源。
    • <sql:query>：执行SQL查询。
    • <sql:update>：执行SQL更新。
    • <sql:param>：设置SQL参数。
    • <sql:dateParam>：设置SQL日期参数。

  4. XML标签（XML Tags）：

    • <x:parse>：解析XML文档。
    • <x:out>：输出XPath表达式结果。
    • <x:set>：设置XPath表达式结果。
    • <x:if>：条件判断。
    • <x:choose>、<x:when>、<x:otherwise>：多条件判断。
    • <x:forEach>：循环遍历XML节点。

  5. 函数标签（Function Tags）：

    • 提供字符串处理函数，如fn:contains、fn:substring等。

使用示例

<%@ taglib uri="http://java.sun.com/jsp/jstl/core" prefix="c" %>
<%@ taglib uri="http://java.sun.com/jsp/jstl/fmt" prefix="fmt" %>

<c:set var="name" value="World" />
<c:if test="${not empty name}">
    <p>Hello, <c:out value="${name}" />!</p>
</c:if>

<c:forEach items="${product}" var="i" begin="1" end="5">
    <tr align="center">
        <td>${i.id}
        </td>
        <td>${i.name}
        </td>
        <td>${i.price}
        </td>
        <td><a href="#">编辑</a><a href="#">删除</a></td>
    </tr>
</c:forEach>

<fmt:formatNumber value="12345.678" type="currency" />

Cookie与Session是什么？

Cookie和Session是用于在Web应用中管理用户状态的两种常见会话跟踪技术。

Cookie

  • 定义：Cookie是由服务器发送到用户浏览器并保存在本地的一小段数据，浏览器会在后续请求中将Cookie发送回服务器。
  • 特点：
    • 存储位置：客户端（浏览器）。
    • 生命周期：可设置过期时间，可以是会话结束时失效，也可以长期保存。
    • 大小限制：通常每个Cookie不超过4KB。
    • 安全性：相对较低，容易被篡改或窃取。
  • 用途：常用于保存用户偏好、登录状态、购物车信息等。

Session

  • 定义：Session是服务器端存储的用户会话数据，每个用户会话都有一个唯一的Session ID，通常通过Cookie传递给客户端。
  • 特点：
    • 存储位置：服务器端。
    • 生命周期：用户会话期间有效，通常用户关闭浏览器后失效。
    • 大小限制：理论上无限制，但受服务器内存限制。
    • 安全性：较高，因为数据存储在服务器端。
  • 用途：常用于保存用户的登录状态、购物车内容等敏感信息。

使用场景

  • Cookie：适合存储不敏感的小数据，如用户偏好、跟踪信息。
  • Session：适合存储敏感数据，如用户登录状态、购物车内容。

如何创建 Cookie 对象？

创建 Cookie 对象：

Cookie cookie = new Cookie(String name, String value)

Cookie 常用方法有哪些？

String	getName()
    
String	getValue()

如何响应Cookie 给客户端？

void addCookie(Cookie cookie)

如何获取 Cookie？

Cookie[] getCookies()

如何设置Cookie 有效期设置？

设置 Cookie 存活时间：public void setMaxAge(int expiry)。

  1. 设置0 ：删除 Cookie，cookie.setMaxAge(0);。
  2. 正数：设置过期时间，到时间自动删除，cookie.setMaxAge(24*60*60);。
  3. 负数：关闭浏览器同时关闭Cookie，cookie.setMaxAge(-1);。

如何获取 Session 对象？

获取 Session 对象：

HttpSession getSession()
//Returns the current session associated with this request, or if the request does not have a session, creates one.

如何设置值进 Session 中？

void setAttribute(String name,Object value);

如何从 Session 中取值？

Object getAttribute(String name);

如何从 Session 中删除属性？

void removeAttribute(String name);

什么是 Session 的钝化与活化？

钝化与活化的目的是为了存储session,保证正常关闭下正常启动的时候，同一会话有效。

  1. 服务器正常关闭的时候，tomcat 会把 session 数据写入硬盘work 目录下（sessions.ser文件）
  2. 服务器启动的时候，tomcat 读取 sessions.ser 中的数据，并且删掉这个文件（删掉是为了减少不需要的钝化文件污染磁盘，造成磁盘空间的浪费）

Cookie与Session的区别有哪些？

区别CookieSession
存储位置客户端服务器端
生命周期可以长期保存默认30分钟，通常在会话结束时失效
存储数据大小最大3KB无限制
安全性不安全安全
服务器性能影响不占用服务器资源占用服务器资源

Cookie 与 Session 的应用场景有什么区别？

使用场景

  • Cookie：适合存储不敏感的小数据，如用户偏好、跟踪信息。
  • Session：适合存储敏感数据，如用户登录状态、购物车内容。

如何销毁 Session

Session 的销毁分为两种方式：

  1. 自动销毁：默认情况下无操作 30分钟
  2. 手动销毁

设置自动销毁：

<!--web.xml -->
<web-app>
  <display-name>Archetype Created Web Application</display-name>
  <session-config>
    <session-timeout>33333</session-timeout>
  </session-config>
</web-app>

手动销毁Session

void invalidate()
//Invalidates this session then unbinds any objects bound to it.

请求转发和重定向的有什么区别？

区别请求转发（Forward）重定向（Redirect）
定义服务器内部的跳转，客户端（浏览器）并不知道跳转的发生。服务器告诉客户端去请求一个新的URL，客户端会发起新的请求。
实现方式在Servlet中使用RequestDispatcher的forward()方法。在Servlet中使用response.sendRedirect()方法。
在JSP中使用<jsp:forward>标签。在JSP中使用response.sendRedirect()。
地址栏地址栏不变地址栏改变
请求次数客户端发起一次请求客户端发起两次请求
数据共享转发前后的页面共享同一个request对象，共享请求数据。不共享请求数据，之前的request对象中的数据会丢失。
效率服务器内部操作，不需要额外的网络请求，效率较高需要额外的网络请求，效率较低
使用场景需要在多个页面或Servlet之间共享数据时需要跳转到外部网站或不同应用时
不希望客户端知道跳转的目标地址时需要让客户端知道跳转的目标地址时
需要防止表单重复提交（通过重定向到结果页面）时

请求转发（Forward）示例：

RequestDispatcher dispatcher = request.getRequestDispatcher("target.jsp");
dispatcher.forward(request, response);

重定向（Redirect）示例：

response.sendRedirect("target.jsp");

可以共享数据的是哪种跳转方式？

请求转发

客户端发起的请求数量更多的是哪种跳转方式？

重定向

Maven 的功能有哪些？

Maven 是基于项目对象模型（POM）的项目管理工具。

功能
1Java 项目构建生命周期支持编译、测试、打包、部署等操作，简化项目构建流程。
2依赖管理自动下载并管理依赖，解决版本冲突，减少手动配置。
3项目信息管理管理项目元数据，如版本、开发者信息等。
4报告生成生成测试报告、代码覆盖率报告等。
5多环境支持支持不同环境的配置管理，如开发、测试、生产。
多模块支持支持多模块项目，便于管理复杂项目结构。

如何使用Maven？

  1. 安装 Maven：

    • 下载并配置 Maven，确保 mvn 命令可用。

  2. 创建项目：

    • 使用以下命令创建项目：
      mvn archetype:generate -DgroupId=com.example -DartifactId=my-app -DarchetypeArtifactId=maven-archetype-quickstart -DinteractiveMode=false

  3. 编译项目：

    • 进入项目目录，运行：
      mvn compile

  4. 运行测试：

    • 运行：
      mvn test

  5. 打包项目：

    • 运行：
      mvn package

  6. 安装到本地仓库：

    • 运行：
      mvn install

  7. 清理项目：

    • 运行：
      mvn clean

Maven 中的常用命令有哪些？

mvn clean清理项目。
mvn compile编译项目。
mvn test运行测试。
mvn package打包项目。
mvn install安装到本地仓库。
mvn deploy部署到远程仓库。

Spring 的功能有哪些？

主要功能介绍
重点依赖注入（DI）通过 XML 或注解配置 Bean 管理对象及其依赖，降低耦合度。
重点面向切面编程（AOP）支持 AOP，便于处理日志、事务管理等横切关注点。
模块化设计由多个模块组成，开发者可按需选择使用。
声明式编程提供声明式事务管理、安全等功能，减少样板代码。
集成支持支持与多种框架和技术集成，如 Hibernate、JPA、JMS 等。
测试支持提供测试框架，便于单元和集成测试。
重点事务管理提供声明式和编程式事务管理。
重点MVC框架提供模型-视图-控制器架构，便于 Web 开发。
数据访问简化数据库操作，支持 JDBC、ORM 等。
安全性提供安全框架，支持认证和授权。

如何使用 Spring ？

1.创建 Spring 项目使用 Maven 或 Gradle 创建项目，添加 Spring 依赖。
2.配置 Spring 容器通过 XML 或 Java 配置类定义 Bean。
3.使用依赖注入通过 @Autowired 或 XML 配置注入依赖。
4.创建 Spring MVC 应用配置 DispatcherServlet，定义控制器和视图。
5.运行和测试使用 Spring Test 进行单元和集成测试。

Spring 的主要模块有哪些？

Spring Core提供 IoC 容器和依赖注入功能。
Spring Context在 Core 基础上扩展，支持国际化、事件传播等。
Spring AOP提供面向切面编程支持。
Spring DAO简化数据库操作，提供一致的异常处理。
Spring ORM支持与 ORM 框架集成，如 Hibernate、JPA。
Spring Web提供 Web 开发支持，包括 MVC 框架。
Spring Test提供测试支持，便于单元和集成测试。

什么是“面向切面编程”？

简述面向切面编程是一种编程范式，旨在通过分离横切关注点（cross-cutting concerns）来提高模块化程度。
全拼AOP（Aspect-Oriented Programming）
核心概念横切关注点：那些影响多个模块的功能（如日志、安全、事务管理等）
切面（Aspect）：模块化的横切关注点
连接点（Join point）：程序执行过程中的特定点（如方法调用）
通知（Advice）：在连接点执行的动作
切入点（Pointcut）：定义通知应在哪些连接点执行
AOP优势减少代码重复：将通用功能集中处理
业务逻辑更清晰：核心业务代码不再混杂辅助功能
更易维护：横切关注点变更只需修改切面
常见应用场景日志记录
事务管理
安全控制
性能监控
异常处理

如何实现 AOP ？

  1. 编译时织入：在编译阶段修改源代码
  2. 类加载时织入：在类加载时修改字节码
  3. 运行时织入：通过代理模式实现（如Spring AOP）

AOP 示例（Spring AOP）：

@Aspect
@Component
public class LoggingAspect {
    
    @Before("execution(* com.example.service.*.*(..))")
    public void logBefore(JoinPoint joinPoint) {
        System.out.println("调用方法: " + joinPoint.getSignature().getName());
    }
    
    @AfterReturning(pointcut = "execution(* com.example.service.*.*(..))", 
                    returning = "result")
    public void logAfterReturning(JoinPoint joinPoint, Object result) {
        System.out.println("方法返回: " + result);
    }
}

如何实现依赖注入？

DI 示例代码

依赖注入：

@Service
public class MyService {
    public String getMessage() {
        return "Hello, Spring!";
    }
}

@RestController
public class MyController {
    @Autowired
    private MyService myService;

    @GetMapping("/message")
    public String getMessage() {
        return myService.getMessage();
    }
}

.bat 是什么文件？

.bat 结尾的是 windows 的可执行文件

.sh 是什么文件？

.sh 结尾的是linux 的可执行文件

评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值