分类前端技术下的文章

vue用vite配置代理解决跨域问题（target、rewrite和changeOrigin的使用场景）

2024-08-07

在Vite项目中，你可以通过修改Vite配置文件（vite.config.js或vite.config.ts）来设置代理服务器，以解决开发时的跨域问题。以下是一个配置示例：




// vite.config.js 或 vite.config.ts
import { defineConfig } from 'vite'
 
export default defineConfig({
  server: {
    proxy: {
      '/api': {
        target: 'http://backend.example.com',
        changeOrigin: true,
        rewrite: (path) => path.replace(/^\/api/, ''),
      },
    },
  },
})

解释：

/api：这是一个虚拟的路径前缀，它会被请求URL匹配并替换。
target：目标服务器的URL，即你想要代理到的API服务器地址。
changeOrigin：设置为true时，代理服务器会将接收到的请求的Origin头部修改为目标服务器的地址，这对于一些需要根据Origin判断是否允许请求的服务器非常重要。
rewrite：一个函数，用于重写请求路径。在这个例子中，它会将匹配到的/api前缀替换为空字符串。

使用场景：

当你的前端应用在开发环境中运行，并且需要调用一个位于不同域的后端API时，你可以配置一个代理来绕过浏览器的同源策略限制。当你访问/api/some/path时，代理服务器会将请求转发到http://backend.example.com/some/path。

- 阅读更多 -

VUE登录注册页面,完整vue，直接复制

System

2024-08-07

所有,vue.js

以下是一个简单的Vue登录注册页面的示例代码。请确保你已经安装了Vue CLI并创建了一个新的Vue项目，或者你可以直接在浏览器中使用Vue CDN。




<!DOCTYPE html>
<html>
<head>
    <title>Vue 登录注册页面</title>
    <script src="https://unpkg.com/vue@next"></script>
</head>
<body>
    <div id="app">
        <div v-if="!isLoggedIn">
            <h2>登录</h2>
            <input type="text" v-model="loginForm.username" placeholder="用户名">
            <input type="password" v-model="loginForm.password" placeholder="密码">
            <button @click="login">登录</button>
 
            <h2>注册</h2>
            <input type="text" v-model="registerForm.username" placeholder="用户名">
            <input type="password" v-model="registerForm.password" placeholder="密码">
            <button @click="register">注册</button>
        </div>
        <div v-else>
            <h2>你已登录</h2>
            <button @click="logout">退出登录</button>
        </div>
    </div>
 
    <script>
        const app = Vue.createApp({
            data() {
                return {
                    isLoggedIn: false,
                    loginForm: {
                        username: '',
                        password: ''
                    },
                    registerForm: {
                        username: '',
                        password: ''
                    }
                }
            },
            methods: {
                login() {
                    // 这里应该是用户验证逻辑，例如发送API请求
                    this.isLoggedIn = true;
                },
                register() {
                    // 这里应该是用户注册逻辑，例如发送API请求
                    this.isLoggedIn = true;
                },
                logout() {
                    this.isLoggedIn = false;
                }
            }
        });
 
        app.mount('#app');
    </script>
</body>
</html>

这段代码提供了一个简单的登录注册页面，并且使用了Vue的双向数据绑定和事件处理。在实际应用中，登录和注册的逻辑需要替换为API请求以与后端通信。

- 阅读更多 -

css--属性总结记录

System

2024-08-07

所有,css

CSS（层叠样式表）是一种用来描述网页和其他HTML文件样式的语言。CSS属性可以用来控制文本内容（如字体、大小、对齐方式等）、图片的外形（宽高、边框样式、阴影效果等）、版面布局（比如排列方式、空间分配等）、背景（颜色、图片、渐变等）等外观。

以下是一些常见的CSS属性及其简单说明：

color - 文本颜色
font-size - 字体大小
background-color - 背景颜色
background-image - 背景图片
border - 边框
padding - 内边距
margin - 外边距
width - 宽度
height - 高度
display - 显示方式（如 none 隐藏，block 显示为块级元素）
position - 定位方式（如 relative 相对定位，absolute 绝对定位）
top / right / bottom / left - 定位偏移
text-align - 文本水平对齐方式
vertical-align - 文本垂直对齐方式
font-family - 字体
font-weight - 字体粗细
text-decoration - 文本装饰（如 underline 下划线）
opacity - 透明度
z-index - 层叠顺序
filter - 滤镜效果（如 blur() 模糊效果）

CSS属性可以通过内联、内部样式表、外部样式表等方式应用到HTML文档中。

例如，设置一个元素的文本颜色为黑色，可以这样写：




p {
  color: black;
}

设置一个元素的背景图片：




div {
  background-image: url('image.jpg');
}

设置一个元素的宽度和高度：




img {
  width: 100px;
  height: 100px;
}

设置一个元素的内边距和外边距：




div {
  padding: 20px;
  margin: 10px;
}

设置一个元素的定位：




div {
  position: absolute;
  top: 50px;
  left: 100px;
}

设置一个元素的文本对齐方式：




p {
  text-align: center;
}

设置一个元素的透明度：




div {
  opacity: 0.5;
}

CSS属性是构建网页样式的基础，有了它们，开发者可以创建出丰富多样的网页布局和设计。

- 阅读更多 -

CSS响应式布局（网页如何根据不同尺寸调整状态）

System

2024-08-07

所有,css

CSS响应式布局是一种设计方法，使得网页可以在各种屏幕尺寸和设备上工作良好。实现方法是通过CSS媒体查询来应用不同的样式规则，以适应不同的屏幕宽度。

以下是一个简单的响应式布局示例：




/* 基础样式，适用于大屏幕设备 */
.container {
  width: 100%;
  margin: auto;
}
 
/* 当屏幕宽度小于或等于768像素时，调整布局 */
@media (max-width: 768px) {
  .container {
    width: 80%;
    margin: auto;
  }
}
 
/* 当屏幕宽度小于或等于480像素时，调整布局 */
@media (max-width: 480px) {
  .container {
    width: 100%;
    margin: 0;
  }
}

在这个例子中，.container 类定义了一个容器的基础样式。通过媒体查询，当屏幕尺寸减小时，.container 类的样式会相应调整，以适应不同的屏幕大小。

- 阅读更多 -

制作一个简单的HTML个人网站

System

2024-08-07

所有,html

下面是一个简单的HTML个人网站的示例代码。请注意，这只是一个起点，您可以根据自己的设计偏好和需求进行更多的自定义。




<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>个人网站标题</title>
    <style>
        body {
            font-family: Arial, sans-serif;
            margin: 0;
            padding: 0;
            background-color: #f7f7f7;
        }
        .header {
            background-color: #333;
            color: #fff;
            padding: 20px 0;
            text-align: center;
        }
        .navigation {
            list-style-type: none;
            margin: 0;
            padding: 0;
            overflow: hidden;
            background-color: #ddd;
        }
        .navigation li {
            float: left;
        }
        .navigation li a {
            display: block;
            color: #000;
            text-align: center;
            padding: 14px 16px;
            text-decoration: none;
        }
        .navigation li a:hover {
            background-color: #ddd;
        }
        .content {
            margin: 20px;
            padding: 20px;
        }
    </style>
</head>
<body>
 
<div class="header">
    <h1>个人网站标题</h1>
</div>
 
<ul class="navigation">
    <li><a href="#">主页</a></li>
    <li><a href="#">关于</a></li>
    <li><a href="#">作品</a></li>
    <li><a href="#">联系</a></li>
</ul>
 
<div class="content">
    <h2>欢迎来到我的网站</h2>
    <p>这里是网站的内容，您可以根据自己的需要添加更多的信息。</p>
</div>
 
</body>
</html>

这个示例包括了一个简单的头部（header），导航栏（navigation）和内容区域（content）。您可以根据自己的需求来添加更多的样式、图片和功能。

- 阅读更多 -

vue生成pdf文件以及pdf分页隔断处理

System

2024-08-07

所有,vue.js

在Vue中生成PDF文件并处理分页隔断可以使用jspdf和html2canvas库。以下是一个简化的例子：

安装依赖：




npm install jspdf html2canvas

Vue组件中使用这些库生成PDF并处理分页：




<template>
  <div>
    <div id="content" ref="pdfContent">
      <!-- 这里是你想转换成PDF的内容 -->
    </div>
    <button @click="generatePDF">生成PDF</button>
  </div>
</template>
 
<script>
import jsPDF from 'jspdf';
import html2canvas from 'html2canvas';
 
export default {
  methods: {
    generatePDF() {
      const content = this.$refs.pdfContent;
      html2canvas(content).then((canvas) => {
        const imgData = canvas.toDataURL('image/png');
        const pdf = new jsPDF({
          orientation: 'portrait',
          unit: 'px',
          format: 'a4',
        });
        const imgProps= pdf.getImageProperties(imgData);
        const pdfWidth = pdf.internal.pageSize.getWidth();
        const pdfHeight = (imgProps.height * pdfWidth) / imgProps.width;
        let heightLeft = pdfHeight;
        const pageHeight = pdf.internal.pageSize.getHeight();
        let position = 0;
 
        pdf.addImage(imgData, 'PNG', 0, position, pdfWidth, pdfHeight);
 
        heightLeft -= pageHeight;
 
        while (heightLeft >= 0) {
          position = heightLeft - pageHeight;
          pdf.addPage();
          pdf.addImage(imgData, 'PNG', 0, position, pdfWidth, pageHeight);
          heightLeft -= pageHeight;
        }
 
        pdf.save('download.pdf');
      });
    },
  },
};
</script>

这段代码中，我们首先通过html2canvas将Vue组件中的部分转换为canvas，然后使用jspdf创建PDF文档。通过计算生成的图片与PDF页面的宽度和高度比例，我们可以计算出图片在PDF中放置的位置，并通过循环添加新的页面来处理分页。最后，我们通过save方法保存PDF文件。

- 阅读更多 -

vite创建ts项目定义变量无法类型检测

System

2024-08-07

所有,typescript

报错问题："vite创建ts项目定义变量无法进行类型检测"可能是因为以下原因：

缺少类型定义文件（.d.ts 文件）。
TypeScript配置问题，可能是tsconfig.json配置不正确。
Vite配置问题，可能是vite.config.ts或vite.config.js中的配置不正确。
缺少类型注解或注解错误。
使用了不支持的第三方库或语法特性。

解决方法：

确保已经安装了必要的类型定义文件，如node或dom的类型定义。
检查tsconfig.json文件，确保配置正确，特别是compilerOptions中的类型相关选项。
检查Vite配置文件，确保没有错误，并且所有的插件都是最新的或者兼容的。
仔细检查变量定义和使用处的类型注解，确保它们是正确的。
如果是第三方库导致的问题，尝试更新到最新版本或者查找是否有官方提供的类型定义文件。

如果以上步骤无法解决问题，可以尝试清理缓存（如node_modules和lock文件），重新安装依赖，或者查看具体的错误信息，根据错误信息进一步定位问题。

- 阅读更多 -

利用fetch实现请求超时功能以及fetch和ajax的区别

System

2024-08-07

所有,ajax




// 使用fetch实现请求超时功能
function fetchWithTimeout(url, options, timeout = 3000) {
  const timeoutId = setTimeout(() => {
    console.log('请求超时');
    // 清理已经发起的fetch请求
    abortController.abort();
  }, timeout);
 
  const abortController = new AbortController();
  options.signal = abortController.signal;
 
  return fetch(url, options).finally(() => clearTimeout(timeoutId));
}
 
// 示例使用
fetchWithTimeout('https://api.example.com/data', {
  method: 'GET',
  headers: { 'Content-Type': 'application/json' }
}).then(response => {
  if (!response.ok) {
    throw new Error('网络请求失败');
  }
  return response.json();
}).then(data => {
  console.log(data);
}).catch(error => {
  console.error(error);
});

这段代码定义了一个fetchWithTimeout函数，它接收一个URL、请求选项和超时时间作为参数。它使用setTimeout来设置一个超时，并在超时发生时中断fetch请求。这是通过使用AbortController实现的，这是一个实现fetch cancellation point的标准方法。如果请求在规定的时间内完成，fetch 调用会正常返回；如果超时，请求会被中止，并且会清除相关的定时器。这是一个实现请求超时功能的简洁例子。

- 阅读更多 -

前端 JS生成32位UUID (安全的随机数)

System

2024-08-07

所有,javascript

在JavaScript中生成一个32位UUID可以使用以下方法：




function generateUUID() {
  var d = new Date().getTime(); //Timestamp
  var d2 = (performance && performance.now && (performance.now()*1000)) || 0; //Time in microseconds since page-load or 0 if unsupported
  return 'xxxxxxxx-xxxx-4xxx-yxxx-xxxxxxxxxxxx'.replace(/[xy]/g, function(c) {
      var r = Math.random() * 16; //random number between 0 and 16
      if(d > 0) { //Use timestamp until depleted
          r = (d + r)%16 | 0;
          d = Math.floor(d/16);
      } else { //Use microseconds since page-load if supported
          r = (d2 + r)%16 | 0;
          d2 = Math.floor(d2/16);
      }
      return (c === 'x' ? r : (r & 0x3 | 0x8)).toString(16);
  });
}
 
console.log(generateUUID()); // 输出类似于 "9fd9a3e8-ae6f-490d-8a8e-6e5d34faef69" 的UUID

这段代码使用了伪随机数生成器和当前时间戳来生成一个看似随机的32位UUID。这种生成方式保证了足够的随机性，适合安全性要求较高的场合。

- 阅读更多 -

用纯HTML写一个凭证并打印

System

2024-08-07

所有,html

要用纯HTML创建一个凭证并打印，你可以使用以下简单的HTML结构，并利用浏览器的打印功能来格式化和打印凭证。




<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Credentials</title>
    <style>
        body {
            margin: 0;
            padding: 20px;
            font-family: Arial, sans-serif;
            font-size: 14px;
        }
        .credentials {
            width: 500px;
            margin: 0 auto;
            padding: 20px;
            border: 1px solid #000;
        }
        .credentials h1 {
            text-align: center;
            margin-bottom: 20px;
        }
        .credentials p {
            margin: 5px 0;
        }
        .credentials .label {
            text-align: left;
        }
        .credentials .data {
            text-align: right;
        }
    </style>
</head>
<body>
    <div class="credentials">
        <h1>Credentials</h1>
        <p class="label">Name:</p>
        <p class="data">John Doe</p>
        <p class="label">Date of Birth:</p>
        <p class="data">01/01/1990</p>
        <p class="label">Issued By:</p>
        <p class="data">Authority Name</p>
        <p class="label">Issued On:</p>
        <p class="data">01/01/2023</p>
    </div>
    <script>
        window.print();
    </script>
</body>
</html>

将上述代码保存到一个HTML文件中，然后使用浏览器打开它。当你准备好打印时，直接使用浏览器的打印功能即可。这个简单的凭证会在打印时保持在一个500像素宽的中心框架内，并且使用黑色边框。你可以根据需要调整样式和内容。

- 阅读更多 -