分类前端技术下的文章

2024-08-23

所有,nodejs

Node.js是一个基于Chrome V8引擎的JavaScript运行时环境，它使得JavaScript代码能够在服务器端运行。以下是一些常见的Node.js命令以及它们的功能和用途：

node：这是运行Node.js代码的基本命令。例如，运行一个名为app.js的文件，你可以在终端中输入node app.js。
npm：这是Node.js的包管理器，它允许你安装和管理Node.js的依赖库。例如，安装一个包可以使用npm install package-name，更新包可以使用npm update package-name。
npx：这是一个npm工具，用于运行本地安装的包，无需额外指定路径。例如，运行本地安装的脚本可以使用npx script-name。
nodemon：这是一个开发工具，用于监视Node.js应用程序中文件的更改并自动重启服务器。例如，使用nodemon app.js来启动应用程序并监视文件变化。
npm start：这是一个在package.json文件中定义的启动脚本，通常用于启动Node.js应用程序。
npm run：这是运行在package.json中定义的自定义脚本的命令。例如，运行一个名为start的脚本可以使用npm run start。
npm install -g：这个命令用于全局安装一个npm包。例如，全局安装nodemon可以使用npm install -g nodemon。
npm uninstall -g：这个命令用于全局卸载一个npm包。例如，卸载nodemon可以使用npm uninstall -g nodemon。
npm list：这个命令用于列出项目中安装的npm包。例如，列出项目中安装的包可以使用npm list。
npm outdated：这个命令用于检查项目中的包是否有可用的更新。例如，检查项目中的过时包可以使用npm outdated。

这些命令是Node.js开发中最常用的。每个命令都有其特定的用途和使用场景，熟练掌握这些命令对于Node.js开发者来说是必不可少的。

如何升级node.js版本

2024-08-23

所有,nodejs

升级Node.js版本通常可以通过以下几种方式进行：

使用Node Version Manager (nvm):
- 安装nvm: 在终端运行curl -o- https://raw.githubusercontent.com/nvm-sh/nvm/v0.39.1/install.sh | bash或者wget -qO- https://raw.githubusercontent.com/nvm-sh/nvm/v0.39.1/install.sh | bash
- 重新打开终端或者运行source ~/.bashrc (或对应的shell配置文件)
- 查看已安装的Node版本: nvm ls
- 安装新版本的Node: nvm install node (最新版本) 或 nvm install [version] (指定版本)
- 切换到新版本: nvm use [version]
使用Node.js版本管理器（n）:
- 安装n: npm install -g n
- 升级Node.js: n stable 或 n [version]
使用Node.js的安装程序:
- 下载最新版本的Node.js安装程序
- 运行安装程序来升级
使用包管理器（如apt或yum）:
- 更新本地包索引: sudo apt-get update (Debian/Ubuntu) 或 sudo yum update (CentOS/RedHat)
- 升级Node.js: sudo apt-get upgrade nodejs (Debian/Ubuntu) 或 sudo yum upgrade nodejs (CentOS/RedHat)
如果你是通过编译源代码安装的Node.js，那么需要下载最新的源代码，编译并安装。

选择适合你的系统和环境的方法进行升级。如果你使用的是Windows系统，建议使用nvm来管理Node.js版本。

前端笔记01---html 的加载

2024-08-23

HTML 文档的加载和解析过程是浏览器的一个系列步骤，其中包括从服务器请求文档、解析 HTML 结构、然后构建 DOM（文档对象模型）树、之后解析 CSS 并合并到 DOM 树中、最后渲染页面。

以下是一个简单的 HTML 页面模板，展示了基本的页面结构：




<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document Title</title>
    <link rel="stylesheet" href="styles.css">
</head>
<body>
    <h1>Hello, World!</h1>
    <p>This is a simple paragraph.</p>
    <img src="image.jpg" alt="Sample Image">
    <script src="script.js"></script>
</body>
</html>

解释：

<!DOCTYPE html>：HTML5 文档类型声明。
<html>：整个文档的根元素。
<head>：包含文档的元数据，如 <title>、<meta>\` 标签和样式表链接。
<title>：定义了浏览器工具栏的标题和页面标签的标题。
<body>：包含了页面的主要内容，如文本、图片、视频等。
<link>：链接外部 CSS 样式表。
<script>：引入外部 JavaScript 文件。

注意：

为了最佳性能，通常建议将 <script> 标签放在 <body> 标签的底部，即紧接在关闭 </body> 标签之前。这是因为脚本的加载会阻塞页面内容的渲染，将脚本放在页面底部可以先显示页面内容，然后再运行脚本。
对于外部 CSS 和 JavaScript 资源，应该尽可能地使用多个域名来加载，这样会提高浏览器的并行下载数量，加快页面加载速度。

解决vite打包的项目不能直接用浏览器运行HTML文件

2024-08-23

报错解释：

当你尝试直接在浏览器中打开Vite打包的项目中的HTML文件时，可能会遇到一个错误，通常是因为HTML文件试图通过JavaScript模块导入其他资源，但是浏览器不支持这种导入机制。这是因为Vite打包项目通常会生成一个或多个JavaScript入口文件，这些文件会处理模块的动态导入和静态资源的加载。

解决方法：

确保你已经正确构建了项目，通常是通过运行npm run build或yarn build。
构建完成后，将dist目录中的文件部署到你的服务器或者静态资源托管服务上。
通过服务的URL访问你的应用，而不是直接打开本地的HTML文件。

如果你需要本地测试，可以使用本地服务器来运行你的应用。一种简单的方式是使用serve工具：

安装serve：npm install -g serve
在dist目录下运行serve：serve
服务器将会启动，并且会提供一个可以在浏览器中访问的URL。

确保在部署到生产环境时，你仍然需要使用适当的服务器来提供这些静态资源。直接打开本地文件系统上的HTML文件通常不会工作，除非你在一个特殊的环境中（例如使用了特定的服务器软件或者开发服务器软件），该环境能够解析HTML中的JavaScript模块导入。

spring-boot-starter-thymeleaf加载外部html文件

2024-08-23

在Spring Boot项目中使用Thymeleaf加载外部HTML文件，你可以通过以下步骤实现：

在pom.xml中添加Thymeleaf依赖（如果尚未添加）：




<dependency>
    <groupId>org.springframework.boot</groupId>
    <artifactId>spring-boot-starter-thymeleaf</artifactId>
</dependency>

将你的外部HTML文件放在src/main/resources/templates目录下。
在Controller中指定要渲染的视图名称，并确保Thymeleaf配置能正确找到这个视图。
使用Thymeleaf的标准语法来引用外部HTML文件。

例如，假设你有一个名为external.html的外部HTML文件，放在src/main/resources/templates目录下：




<!-- src/main/resources/templates/external.html -->
<!DOCTYPE html>
<html xmlns:th="http://www.thymeleaf.org">
<head>
    <title>External Content</title>
</head>
<body>
    <h1>This is external content</h1>
</body>
</html>

然后，创建一个Controller来渲染这个视图：




import org.springframework.stereotype.Controller;
import org.springframework.web.bind.annotation.GetMapping;
 
@Controller
public class MyController {
 
    @GetMapping("/showExternal")
    public String showExternal() {
        return "external"; // 这里的"external"对应templates目录下的external.html文件名
    }
}

最后，在你的HTML模板中使用Thymeleaf的th:replace属性来引用外部HTML：




<!-- src/main/resources/templates/main.html -->
<!DOCTYPE html>
<html xmlns:th="http://www.thymeleaf.org">
<head>
    <title>Main Template</title>
</head>
<body>
    <div th:replace="~{external.html}"></div>
</body>
</html>

当你访问/showExternal时，main.html中的th:replace会将external.html的内容插入到<div>标签中。

uni-app加载HTML网页

2024-08-23

在uni-app中加载HTML页面，可以使用web-view组件。以下是一个简单的示例：




<template>
  <view>
    <web-view src="https://www.example.com"></web-view>
  </view>
</template>

确保你的页面配置中包含了web-view组件的权限：




{
  "permission": {
    "web-view": {
      "optional": ["https://www.example.com"]
    }
  }
}

请替换https://www.example.com为你想要加载的HTML页面的URL。这个组件允许你在uni-app应用中嵌入一个web页面。

html js加载本地文件报错处理，跨域问题

2024-08-23

在HTML和JavaScript中处理本地文件时，出现跨域问题通常是因为浏览器的安全策略阻止了本地文件系统中的文件被访问。

解决方法：

使用本地服务器：通过在本地运行一个Web服务器来避免跨域问题。可以使用如Python的SimpleHTTPServer模块或其他Web服务器软件。
修改浏览器设置：在某些浏览器中（例如Chrome），可以启动带有禁用安全策略的标签页，但这种方法不推荐用于生产环境。
修改JavaScript代码：如果确实需要直接操作本地文件，可以使用特定的API（如果存在），例如在部分浏览器中，可以使用<input type="file">让用户选择文件，然后使用File API进行操作。

示例代码：




// 使用File API读取用户选择的文件
document.getElementById('fileInput').addEventListener('change', function(event) {
    const file = event.target.files[0];
    if (!file) {
        return;
    }
    const reader = new FileReader();
    reader.onload = function(e) {
        const contents = e.target.result;
        // 处理文件内容
    };
    reader.onerror = function(e) {
        console.error("File could not be read! Code " + e.target.error.code);
    };
    reader.readAsText(file); // 或者其他方式，如readAsArrayBuffer等
});

HTML部分：




<input type="file" id="fileInput">

请注意，这些方法可能会根据浏览器的具体实现和安全设置有所不同。在实际生产环境中，为了安全和稳定性，应尽量避免跨域操作，并使用服务器端处理文件。

[html]HTML 速查列表

2024-08-23

HTML 速查列表包括常用的 HTML 标签、属性和特殊字符。

文件标签：




<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Document</title>
</head>
<body>
 
</body>
</html>

标题标签：




<h1>标题 1</h1>
<h2>标题 2</h2>
...
<h6>标题 6</h6>

段落和换行标签：




<p>这是一个段落。</p>
<br>  <!-- 换行 -->

文本格式化标签：




<strong>粗体文本</strong>
<em>斜体文本</em>
<del>被删除的文本</del>
<ins>被插入的文本</ins>

链接和图像标签：




<a href="https://www.example.com">链接文本</a>
<img src="image.jpg" alt="图片描述">

列表标签：




<ul>
    <li>无序列表项1</li>
    <li>无序列表项2</li>
</ul>
<ol>
    <li>有序列表项1</li>
    <li>有序列表项2</li>
</ol>

块和内联标签：




<div>块级元素</div>
<span>内联元素</span>

表格标签：




<table>
    <tr>
        <th>表头1</th>
        <th>表头2</th>
    </tr>
    <tr>
        <td>单元格1</td>
        <td>单元格2</td>
    </tr>
</table>

多媒体标签：




<audio src="audio.mp3" controls></audio>
<video src="video.mp4" controls></video>

表单和输入标签：




<form action="/submit" method="post">
    <label for="name">姓名:</label>
    <input type="text" id="name" name="username">
    <input type="submit" value="提交">
</form>

特殊字符：




&lt;   <!-- 小于号 -->
&gt;   <!-- 大于号 -->
&amp;  <!-- 和号 -->
&quot; <!-- 引号 -->
&copy; <!-- 版权符号 -->

这些是 HTML 的基础知识，可以帮助你快速创建一个基本的网页。对于更高级的功能，你可能需要学习 CSS 和 JavaScript。

2024-08-23

HTML、CSS、JavaScript 和 jQuery 是网页开发中的基本技术。

HTML (Hypertext Markup Language):
HTML 是用来创建网页的标准标记语言。它被用来结构化信息，并给网页提供意义。




<!DOCTYPE html>
<html>
<head>
    <title>Page Title</title>
</head>
<body>
    <h1>My First Heading</h1>
    <p>My first paragraph.</p>
</body>
</html>

CSS (Cascading Style Sheets):
CSS 是用来描述网页样式的语言。它可以控制字体、颜色、布局等外观方面。




body {
  background-color: lightblue;
}
 
h1 {
  color: navy;
  margin-left: 20px;
}

JavaScript:
JavaScript 是一种编程语言，可以在网页中实现复杂的交互功能。




function myFunction() {
  alert('Hello, World!');
}

jQuery:
jQuery 是一个 JavaScript 库，它简化了 JavaScript 编程。它使得处理 HTML 文档、事件处理、动画和 Ajax 变得更简单。




$(document).ready(function(){
  $("p").click(function(){
    $(this).hide();
  });
});

这些是基本的网页开发技术，每个技术都有其特性和用途。在实际开发中，通常会将它们结合起来，创建富有交互性的网页应用程序。

HTML知识点

2024-08-23

HTML是用于创建网页的标准标记语言。以下是一些常见的HTML知识点和示例代码：

基本页面结构：




<!DOCTYPE html>
<html>
<head>
    <title>页面标题</title>
</head>
<body>
    <h1>这是一个标题</h1>
    <p>这是一个段落。</p>
    <a href="https://www.example.com">这是一个链接</a>
</body>
</html>

图像插入：




<img src="image.jpg" alt="描述文字" />

超链接：




<a href="https://www.example.com">访问example.com</a>

列表：

无序列表：




<ul>
    <li>列表项1</li>
    <li>列表项2</li>
</ul>

有序列表：




<ol>
    <li>列表项1</li>
    <li>列表项2</li>
</ol>

表格：




<table>
    <tr>
        <th>表头1</th>
        <th>表头2</th>
    </tr>
    <tr>
        <td>单元格1</td>
        <td>单元格2</td>
    </tr>
</table>

表单和输入：




<form action="submit.php" method="post">
    <label for="name">姓名:</label>
    <input type="text" id="name" name="name">
    <input type="submit" value="提交">
</form>

多媒体元素：

视频：




<video width="320" height="240" controls>
  <source src="movie.mp4" type="video/mp4">
  <source src="movie.ogg" type="video/ogg">
  您的浏览器不支持视频标签。
</video>

音频：




<audio controls>
  <source src="song.mp3" type="audio/mpeg">
  <source src="song.ogg" type="audio/ogg">
  您的浏览器不支持音频元素。
</audio>

样式和脚本：

内联样式：




<p style="color:blue;">这是一个蓝色的段落。</p>

外部脚本：




<script src="script.js"></script>

内联样式：




<style>
    body {background-color: powderblue;}
    h1   {color: blue;}
    p2   {color: red;}
</style>

以上是一些基本的HTML知识点和示例代码，实际应用中可能还会涉及更多标签和属性。