分类前端技术下的文章

2024-08-16

要使用CSS3制作波浪的动画效果，可以使用@keyframes规则来创建动画，并使用transform属性的rotate函数来旋转元素，以达到波浪的效果。以下是一个简单的例子：

HTML:




<div class="wave"></div>

CSS:




.wave {
  width: 100px;
  height: 100px;
  background-color: blue;
  border-radius: 50%;
  position: relative;
  animation: wave-animation 2s infinite linear;
}
 
@keyframes wave-animation {
  0% {
    transform: rotate(0deg);
  }
  50% {
    transform: rotate(15deg);
  }
  100% {
    transform: rotate(-15deg);
  }
}

这段代码会创建一个圆形的波浪动画，它会不停地左右旋转来模拟波浪的动态效果。可以根据需要调整动画的时长、次数和函数，以及波浪的大小和颜色。

- 阅读更多 -

探索高效开发起点：Node.js TypeScript 模板项目

System

2024-08-16

所有,nodejs




// 安装 TypeScript 和 Node.js 相关依赖
npm install typescript @types/node express @types/express nodemon -D
 
// tsconfig.json 配置示例
{
  "compilerOptions": {
    "target": "es6",                // 目标语言的版本
    "module": "commonjs",           // 生成代码的模块系统
    "outDir": "./dist",             // 输出目录
    "strict": true,                 // 启用所有严格类型检查
    "esModuleInterop": true,        // 允许导入使用require
    "skipLibCheck": true             // 跳过所有Decorator相关的类型检查
  },
  "include": [
    "src/**/*"                      // 包含src目录下所有文件
  ],
  "exclude": [
    "node_modules",                 // 排除node_modules目录
    "**/*.spec.ts"                  // 排除所有的测试文件
  ]
}
 
// src/server.ts 服务器入口文件示例
import express from 'express';
 
const app = express();
const port = 3000;
 
app.get('/', (req, res) => {
  res.send('Hello World!');
});
 
app.listen(port, () => {
  console.log(`Server running on http://localhost:${port}`);
});
 
// package.json 脚本部分
{
  "scripts": {
    "start": "nodemon --watch src --exec ts-node src/server.ts",
    "build": "tsc"
  }
}

这个代码实例展示了如何设置一个使用Node.js, TypeScript, 和Express的基础项目。它包括了安装所需的npm包，tsconfig.json的配置，以及一个简单的服务器入口文件。通过Nodemon监视源代码的变化，并且使用ts-node直接运行TypeScript代码，无需先编译成JavaScript。

System

2024-08-16

所有,npm

错误解释：

这个错误表明你在尝试使用npm（Node.js的包管理器）运行一个名为"dev"的脚本，但是在你的package.json文件中并没有找到对应的"dev"脚本条目。package.json文件用于定义项目的依赖关系和脚本命令。

解决方法：

检查package.json文件中是否有"scripts"部分，并确认是否有"dev"脚本定义。
如果没有"dev"脚本，你需要添加一个。通常，"dev"脚本用于启动开发环境，比如启动开发服务器或者进行构建等。

例如，你可以在package.json的"scripts"部分添加如下内容：




"scripts": {
  "dev": "node server.js"
}

这里的"node server.js"是一个示例，实际命令应该根据你的项目需求来定。

如果你确信已经有"dev"脚本，但仍然出现错误，可能是因为npm缓存问题。可以尝试运行npm cache clean --force然后再次执行命令。
确保你在正确的目录下执行npm run dev命令，并且npm和Node.js已经正确安装在你的系统上。

- 阅读更多 -

前端主流框架：项目运行命令 npm 详解

System

2024-08-16

所有,npm

在前端开发中，我们通常使用各种主流框架来快速搭建项目，并且对项�进行开发和测试。在这个过程中，我们需要运行一些命令来启动项目，安装依赖，打包项目等。这里我们主要介绍一下使用npm命令运行前端项目的方法。

安装依赖
在运行任何前端项目之前，我们需要安装项目所需的所有依赖。这可以通过以下命令完成：
```
npm install
```
这个命令会根据项目中的package.json文件安装所有必需的依赖。
运行项目
一旦依赖安装完毕，我们就可以运行项目了。通常，这可以通过以下命令完成：
```
npm start
```
这个命令会执行package.json文件中scripts部分定义的start命令。例如，如果你的package.json文件中的scripts部分是这样的：
```
"scripts": {
  "start": "node app.js"
}
```
那么npm start将运行node app.js。
构建项目
在部署生产环境之前，我们通常需要构建项目。这可以通过以下命令完成：
```
npm run build
```
这个命令会执行package.json文件中scripts部分定义的build命令。例如，如果你的package.json文件中的scripts部分是这样的：
```
"scripts": {
  "build": "webpack --config webpack.config.js"
}
```
那么npm run build将运行webpack --config webpack.config.js。
测试项目
测试是开发流程中重要的一环。可以通过以下命令运行测试：
```
npm test
```
这个命令会执行package.json文件中scripts部分定义的test命令。例如，如果你的package.json文件中的scripts部分是这样的：
```
"scripts": {
  "test": "jest"
}
```
那么npm test将运行jest。

以上就是使用npm运行前端项目的基本命令。每个项目可能会有特定的需求，可能需要运行一些特定的命令，但基本的命令都是大同小异的。

- 阅读更多 -

HTML5 应用程序缓存

System

2024-08-16

所有,html5

在HTML5中，应用程序缓存（Application Cache）是一种机制，允许网站对网页和资源进行缓存，这样用户可以在没有网络的情况下访问这些资源。以下是如何使用应用程序缓存的基本步骤和示例代码：

在你的web应用的HTML文件中，添加一个manifest属性到<html>标签。这个属性指定了一个.appcache文件的位置，该文件包含缓存的规则和需要缓存的资源列表。




<!DOCTYPE html>
<html manifest="cache.appcache">
...
</html>

创建一个名为cache.appcache的文件，并在与HTML文件相同的目录中。
在cache.appcache文件中，首先定义一个CACHE MANIFEST字符串，后面跟着需要缓存的文件列表。




CACHE MANIFEST
# 版本标识，可以在更新缓存时更改这个版本号
# 例如：2023-01-01
 
# 需要缓存的文件列表
CACHE:
index.html
style.css
script.js
image.png
 
# 不需要缓存的文件
NETWORK:
*.php
 
# 当离线时，跳转到指定页面
FALLBACK:
offline.html

确保web服务器支持应用程序缓存，并且正确地提供cache.appcache文件。
用户访问页面后，浏览器会根据cache.appcache文件中的指示进行缓存。如果页面已被缓存，用户可以离线访问这些资源。

请注意，应用程序缓存在某些情况下可能会出现问题，例如缓存数据和服务器数据不同步，或者缓存的资源被删除或更改。在更新web应用程序时，可能需要改变版本号来更新缓存。

- 阅读更多 -

JavaWeb--快速入门jQuery

System

2024-08-16

所有,jquery

在JavaWeb项目中使用jQuery可以简化客户端的代码，提高用户体验。以下是如何在JavaWeb项目中快速入门jQuery的步骤：

下载jQuery库：
访问jQuery官网（https://jquery.com/）下载最新版本的jQuery库。
将jQuery库添加到项目中：
将下载的jQuery文件放入Web应用的资源目录，例如：webapp/js/jquery.min.js。
在HTML页面中引入jQuery库：
```
<script src="js/jquery.min.js"></script>
```
确保这个标签位于HTML文件的<head>部分或<body>部分的最前面，以便在DOM完全加载之前就能使用jQuery。
使用jQuery编写代码：
例如，使用jQuery简化按钮点击事件的绑定：
```
<button id="myButton">点击我</button>
<script>
    $(document).ready(function() {
        $('#myButton').click(function() {
            alert('按钮被点击了！');
        });
    });
</script>
```
在这个例子中，$(document).ready确保DOM完全加载后执行内部代码，$('#myButton')选择器用于选中ID为myButton的元素，.click()方法用于绑定点击事件。

以上就是在JavaWeb项目中快速入门jQuery的步骤和示例代码。

- 阅读更多 -

【经典】请求拦截，相应拦截vue3封装，使用dom封装typescript接口

System

2024-08-16

所有,typescript

在Vue 3中，可以通过自定义指令来封装请求拦截器和响应拦截器。以下是一个简单的示例，展示了如何使用TypeScript来封装这些拦截器。

首先，创建一个拦截器封装的TS文件，例如http.ts：




import { AxiosRequestConfig, AxiosResponse, AxiosError } from 'axios';
 
// 请求拦截器
export const requestInterceptor = (config: AxiosRequestConfig) => {
  // 在发送请求前做些什么，例如添加token或其他认证信息
  // config.headers['Authorization'] = `Bearer yourToken`;
  return config;
};
 
// 响应拦截器
export const responseInterceptor = (response: AxiosResponse) => {
  // 对响应数据做处理
  return response.data;
};
 
// 响应错误拦截器
export const errorInterceptor = (error: AxiosError) => {
  // 对响应错误做处理
  return Promise.reject(error);
};

然后，在Vue组件中使用这些拦截器：




<template>
  <div>
    <!-- 组件内容 -->
  </div>
</template>
 
<script lang="ts">
import { defineComponent } from 'vue';
import axios from 'axios';
import { requestInterceptor, responseInterceptor, errorInterceptor } from './http';
 
export default defineComponent({
  name: 'YourComponent',
  setup() {
    // 添加请求拦截器
    axios.interceptors.request.use(requestInterceptor);
 
    // 添加响应拦截器
    axios.interceptors.response.use(responseInterceptor, errorInterceptor);
 
    // 发起请求的函数
    const fetchData = async () => {
      try {
        const response = await axios.get('/api/data');
        // 处理响应数据
      } catch (error) {
        // 处理错误
      }
    };
 
    // 组件挂载时调用
    fetchData();
  }
});
</script>

在这个例子中，我们创建了一个简单的请求拦截器和响应拦截器，以及一个错误处理拦截器。在Vue组件中，我们使用axios.interceptors.request.use()和axios.interceptors.response.use()来添加这些拦截器，并在组件的setup函数中发起请求。这样，我们就可以在一个地方管理所有的请求和响应逻辑，并在需要时在全局范围内应用它们。

- 阅读更多 -

vite配置跨域和环境变量

System

2024-08-16

所有,typescript

在Vite项目中配置跨域，通常是在Vite配置文件中通过代理的方式来实现。以下是一个配置示例：




// vite.config.js
import { defineConfig } from 'vite';
import react from '@vitejs/plugin-react';
 
// https://vitejs.dev/config/
export default defineConfig({
  plugins: [react()],
  server: {
    // 配置代理规则
    proxy: {
      '/api': {
        target: 'http://backend.example.com', // 目标服务器地址
        changeOrigin: true, // 是否改变源地址
        rewrite: (path) => path.replace(/^\/api/, ''), // 重写路径
      },
    },
  },
});

在这个配置中，当开发服务器接收到一个路径以/api开头的请求时，它会将请求代理到http://backend.example.com，并且通过changeOrigin选项使得服务器认为请求来自同源，而不是实际的前端服务器。rewrite函数用于重写请求路径，去除路径中的/api前缀。

环境变量的配置通常在项目根目录下创建.env文件，然后在其中设置环境变量，例如：




# .env
VITE_API_URL=https://api.example.com

然后在代码中通过import.meta.env来访问这些变量：




const apiUrl = import.meta.env.VITE_API_URL;

Vite会自动加载与当前模式（development 或 production）对应的.env文件，以及一个可选的.env.local文件，这个文件中的变量不会被提交到版本控制系统中。

System

2024-08-16

所有,typescript

要使用Vite、Vue 3、TypeScript和Element Plus搭建项目，你需要执行以下步骤：

确保你已经安装了Node.js（建议使用最新的LTS版本）。
安装Vite CLI工具：
```
npm init vite@latest <project-name> --template vue-ts
```
替换 <project-name> 为你的项目名。
进入项目目录：
```
cd <project-name>
```
安装Element Plus：
```
npm install element-plus --save
```

在Vue组件中使用Element Plus：




<template>
  <el-button @click="handleClick">点击我</el-button>
</template>
 
<script lang="ts">
import { defineComponent } from 'vue';
import { ElButton } from 'element-plus';
 
export default defineComponent({
  components: {
    ElButton,
  },
  setup() {
    const handleClick = () => {
      alert('按钮被点击');
    };
 
    return {
      handleClick,
    };
  },
});
</script>

启动开发服务器：
```
npm run dev
```

以上步骤会创建一个新的Vue 3项目，并配置TypeScript和Element Plus。你可以开始开发你的应用了。

- 阅读更多 -

ts中的类型判断

System

2024-08-16

所有,typescript

在TypeScript中，你可以使用多种方式来判断一个变量的类型。以下是一些常用的方法：

typeof 用于检查基础类型（string, number, boolean, symbol, undefined, bigint）。




const str = "Hello, World!";
if (typeof str === "string") {
    // str是字符串类型
}

instanceof 用于判断对象的类型。




class MyClass {}
 
const myObject = new MyClass();
if (myObject instanceof MyClass) {
    // myObject是MyClass的实例
}

in 操作符用于检查对象是否具有某个属性。




interface MyInterface {
    prop: string;
}
 
const myObj: MyInterface = { prop: "value" };
if ("prop" in myObj) {
    // myObj有一个名为'prop'的属性
}

使用自定义类型守卫函数。




function isMyType(arg: any): arg is MyType {
    return typeof arg.myProperty === "string";
}
 
const myVar = { myProperty: "value" };
if (isMyType(myVar)) {
    // myVar是MyType类型
}

使用typeof结合类型别名进行判断。




type MyType = {
    prop: string;
};
 
const myVar: MyType = { prop: "value" };
if (typeof myVar.prop === "string") {
    // myVar.prop是字符串类型
}

使用type of结合内置类型守卫进行判断。




type MyType = string | number;
 
const myVar: MyType = "value";
if (typeof myVar === "string") {
    // myVar是字符串类型
}

以上方法可以根据需要选择适合的方式来判断类型。

- 阅读更多 -