分类前端技术下的文章

2024-08-25




<template>
  <div>
    <div v-bind:style="{ color: activeColor, fontSize: fontSize + 'px' }">动态绑定样式</div>
  </div>
</template>
 
<script>
export default {
  data() {
    return {
      activeColor: 'red',
      fontSize: 30
    }
  }
}
</script>

这个例子中，我们使用了v-bind:style来动态绑定元素的style属性。activeColor和fontSize是在组件的data函数中定义的响应式属性，它们的值可以动态改变，从而实时更新元素的样式。

- 阅读更多 -

【前端系列】CSS 常见的选择器

System

2024-08-25

所有,css

CSS 常用的选择器包括：

标签选择器（Element selector）：直接使用元素名作为选择器，比如 div、p。
类选择器（Class selector）：使用.前缀，比如.classname。
ID选择器（ID selector）：使用#前缀，比如#idname。
群组选择器（Grouping selector）：使用逗号,分隔多个选择器，比如h1, h2, p。
后代选择器（Descendant selector）：使用空格分隔，表示嵌套关系，比如div a。
子选择器（Child selector）：使用>表示直接子元素，比如div > p。
相邻兄弟选择器（Adjacent sibling selector）：使用+表示紧跟在另一个元素后的元素，比如h1 + p。
通用兄弟选择器（General sibling selector）：使用~表示同一父元素下的所有某一元素之后的兄弟元素，比如h1 ~ p。
伪类选择器（Pseudo-class selector）：使用:前缀，表示元素的特殊状态，比如:hover、:active。
伪元素选择器（Pseudo-element selector）：使用::前缀，表示元素的特定部分，比如::before、::after。

示例代码：




/* 标签选择器 */
div {
  background-color: blue;
}
 
/* 类选择器 */
.highlight {
  color: yellow;
}
 
/* ID选择器 */
#logo {
  width: 100px;
}
 
/* 群组选择器 */
h1, h2, p {
  margin: 0;
}
 
/* 后代选择器 */
div a {
  text-decoration: underline;
}
 
/* 子选择器 */
div > p {
  font-weight: bold;
}
 
/* 相邻兄弟选择器 */
h1 + p {
  color: green;
}
 
/* 通用兄弟选择器 */
h1 ~ p {
  font-style: italic;
}
 
/* 伪类选择器 */
a:hover {
  text-decoration: none;
}
 
/* 伪元素选择器 */
p::first-letter {
  font-size: 200%;
}

- 阅读更多 -

前端三剑客之CSS

System

2024-08-25

所有,css

CSS，即层叠样式表(Cascading Style Sheets)，是一种用来 describe 如何显示 HTML（标准通用标记语言的一个应用）或 XML（标准通用标记语言的一个子集）等文件的样式表语言。CSS 的主要目的是为了让我们的网页更加美观，有利于用户体验。

CSS 的主要特点有：

简单性和可扩展性：CSS 的语言非常简单，可以通过几种简单的规则就可以对网页进行样式定义。
样式可重定义：通过 CSS 可以实现样式信息的重用，即可以在多个页面中使用同一个样式定义。
多样化输出：通过 CSS 可以实现表格的横向打印和纵向打印，可以实现不同的媒体类型输出，如屏幕、打印机等。
与 HTML 的兼容性：CSS 可以和多种版本的 HTML 兼容，包括 HTML1.0 到 HTML4.0。

CSS 的基本语法结构：




selector {
    property: value;
    property: value;
    ...
}

其中，selector 是选择器，property 是属性，value 是值。

CSS 的选择器主要有：

标签选择器：直接使用 HTML 标签作为选择器。
类选择器：使用 "." 开头，后跟一个自定义的名称。
ID 选择器：使用 "#" 开头，后跟一个唯一的名称。
群组选择器：使用逗号隔开多个选择器。

CSS 的属性有很多，常用的有：

color：设置文字颜色。
background-color：设置背景颜色。
font-size：设置文字大小。
border：设置边框。
margin：设置外边距。
padding：设置内边距。

CSS 的继承性：某些属性会被继承到子元素中，如 color 和 font-family。

CSS 的优先级：当同一个元素被多个选择器选中并且设置了相同的属性时，将根据选择器的优先级来决定应用哪个样式。

CSS 的注释：/* 注释内容 */

CSS 的使用方法：

内联样式：直接在 HTML 标签的 style 属性中书写 CSS。
内部样式表：在 HTML 的 <head> 标签中使用 <style> 标签书写 CSS。
外部样式表：创建一个单独的 CSS 文件，然后在 HTML 中使用 <link> 标签引入。

CSS 的使用可以极大地提高我们的工作效率，使得我们可以更加专注于网页的内容和结构，而不用过多地关注样式的实现。

System

2024-08-25

所有,css

在Vue中，可以使用v-show指令结合CSS的:hover伪类实现鼠标悬停时显示悬浮框的效果。以下是一个简单的示例：




<template>
  <div>
    <div class="hover-box" @mouseenter="showBox = true" @mouseleave="showBox = false">
      鼠标悬停显示悬浮框
      <div v-show="showBox" class="floating-box">
        这是悬浮框的内容
      </div>
    </div>
  </div>
</template>
 
<script>
export default {
  data() {
    return {
      showBox: false,
    };
  },
};
</script>
 
<style>
.hover-box {
  position: relative;
  width: 200px;
  height: 50px;
  line-height: 50px;
  text-align: center;
  border: 1px solid #000;
}
 
.floating-box {
  position: absolute;
  width: 200px;
  height: 100px;
  background-color: #f0f0f0;
  border: 1px solid #000;
  display: none;
}
 
.hover-box:hover .floating-box {
  display: block;
}
</style>

在这个例子中，.hover-box是触发区域，.floating-box是悬浮框本身。CSS中.hover-box:hover .floating-box规则确保了当鼠标悬停在.hover-box上时，.floating-box会显示出来。

如果不想使用CSS，也可以完全用Vue来控制显示和隐藏，但这种方式可能会使用更多的JavaScript逻辑，并可能会引入额外的状态管理问题。

- 阅读更多 -

vite配置postcss

System

2024-08-25

所有,css

在Vite项目中配置PostCSS，你需要按照以下步骤操作：

安装PostCSS和相关插件（如postcss-preset-env）:




npm install -D postcss postcss-preset-env

在项目根目录下创建一个PostCSS配置文件（如postcss.config.js）:




// postcss.config.js
module.exports = {
  plugins: {
    'postcss-preset-env': {
      // 选项
    },
  },
};

在Vite配置文件（默认为vite.config.js）中启用PostCSS:




// vite.config.js
import { defineConfig } from 'vite';
import postcss from 'vite-plugin-postcss';
 
export default defineConfig({
  plugins: [
    postcss({
      // 插件等配置
    }),
  ],
});

确保你的Vite版本是最新的，并且vite-plugin-postcss插件与你的Vite版本兼容。如果vite-plugin-postcss不是必需的，Vite 官方插件可能会直接支持PostCSS。

以上步骤提供了一个基本的配置框架，你可以根据自己的需求对其进行调整。

- 阅读更多 -

CSS定位（如果想知道CSS有关定位的知识点，那么只看这一篇就足够了！）

System

2024-08-25

所有,css

CSS定位属性主要有以下几种：

position: 指定定位类型。
top: 定义顶部边缘。
right: 定义右侧边缘。
bottom: 定义底部边缘。
left: 定义左侧边缘。
z-index: 定义堆叠顺序。
overflow: 定义溢出内容的处理方式。
clip: 定义剪切的区域。
vertical-align: 定义元素的垂直对齐方式。

解决方案

以下是一些CSS定位的常用示例：

1. 相对定位(relative positioning)




.relative {
  position: relative;
  top: 20px;
  left: 40px;
}

2. 绝对定位(absolute positioning)




.absolute {
  position: absolute;
  top: 20px;
  right: 30px;
  bottom: 40px;
  left: 50px;
}

3. 固定定位(fixed positioning)




.fixed {
  position: fixed;
  bottom: 0;
  right: 0;
  width: 200px;
}

4. 粘性定位(sticky positioning)




.sticky {
  position: -webkit-sticky; /* Safari */
  position: sticky;
  top: 0;
  background-color: green;
  border: 2px solid #4CAF50;
}

5. 使用z-index分层




.first {
  position: relative;
  z-index: 1;
}
 
.second {
  position: relative;
  z-index: 2;
}

6. 使用clip属性剪切




.clip {
  position: absolute;
  clip: rect(10px, 100px, 100px, 50px);
}

7. 使用overflow属性处理溢出




.overflow {
  position: relative;
  overflow: auto;
  width: 200px;
  height: 200px;
}

8. 使用vertical-align属性对齐




.vertical-align {
  display: table-cell;
  vertical-align: middle;
  width: 200px;
  height: 200px;
}

以上都是CSS定位的常用方法，可以根据实际需求选择合适的定位方式。

- 阅读更多 -

【核心代码】JS+ajax无刷新验证短信验证码和缓存中的是否一致提交表单

System

2024-08-25

所有,ajax




// 发送短信验证码并验证的函数
function sendSMSAndVerify(phoneNumber, formData) {
    $.ajax({
        url: '/api/sms/send', // 发送短信验证码的API接口
        type: 'POST',
        data: { phone: phoneNumber },
        dataType: 'json',
        success: function(response) {
            if (response.status === 'success') {
                // 短信发送成功，缓存验证码
                sessionStorage.setItem('smsCode', response.code);
                // 开始验证短信验证码
                verifySMSCode(phoneNumber, response.code, formData);
            } else {
                alert('短信发送失败，请稍后重试。');
            }
        },
        error: function() {
            alert('请求失败，请检查网络连接。');
        }
    });
}
 
// 验证短信验证码的函数
function verifySMSCode(phoneNumber, code, formData) {
    $.ajax({
        url: '/api/sms/verify', // 验证短信验证码的API接口
        type: 'POST',
        data: { phone: phoneNumber, code: code },
        dataType: 'json',
        success: function(response) {
            if (response.status === 'success') {
                // 验证成功，提交表单
                $('#yourForm').submit();
            } else {
                alert('验证码错误。');
            }
        },
        error: function() {
            alert('请求失败，请检查网络连接。');
        }
    });
}
 
// 假设你有一个表单的id为yourForm，电话号码字段为phone
// 当用户提交表单时，执行以下操作：
$('#yourForm').submit(function(e) {
    e.preventDefault(); // 阻止表单默认提交行为
    var phoneNumber = $('#phone').val(); // 获取电话号码
    var formData = $(this).serialize(); // 序列化表单数据
    sendSMSAndVerify(phoneNumber, formData); // 发送短信并验证
});

这段代码首先定义了sendSMSAndVerify函数，该函数通过AJAX调用发送短信验证码的API接口，并在成功获取验证码后调用verifySMSCode函数进行验证。verifySMSCode函数则用于验证用户输入的验证码是否与缓存中的验证码一致，一致则提交表单，不一致则给出错误提示。最后，当用户尝试提交表单时，我们阻止了表单的默认提交行为，并调用sendSMSAndVerify函数进行操作。

- 阅读更多 -

【AJAX】简单学习记录

System

2024-08-25

所有,ajax

AJAX（Asynchronous JavaScript and XML）是一种创建交互式网页的技术，可以使网页的更新不需要重新加载整个页面。

以下是一个使用原生JavaScript实现AJAX的例子：




// 创建一个新的 XMLHttpRequest 对象
var xhr = new XMLHttpRequest();
 
// 配置请求类型、URL 以及是否异步处理
xhr.open('GET', 'your-api-endpoint', true);
 
// 设置请求完成的回调函数
xhr.onreadystatechange = function () {
  // 请求完成并且响应状态码为 200
  if (xhr.readyState === XMLHttpRequest.DONE) {
    if (xhr.status === 200) {
      // 处理请求成功的响应数据
      console.log(xhr.responseText);
    } else {
      // 处理请求失败
      console.error('AJAX Request failed');
    }
  }
};
 
// 发送请求
xhr.send();

在这个例子中，我们创建了一个新的 XMLHttpRequest 对象，并对其进行了配置，以发送一个GET请求到指定的API端点。我们还定义了一个回调函数，当请求的状态发生变化时会被调用，它会检查请求是否完成并且响应状态码为200，如果是，则处理响应数据。

这只是AJAX的简单使用示例，实际应用中可能需要处理更复杂的逻辑，例如处理POST请求、发送数据、处理JSON响应等。

- 阅读更多 -

ajax的封装

System

2024-08-25

所有,ajax

在JavaScript中，可以通过创建一个函数来封装AJAX调用的常用模式。以下是一个简单的AJAX封装函数示例，使用了原生的JavaScript XMLHttpRequest 对象：




function ajax(method, url, data, callback) {
  var xhr = new XMLHttpRequest();
  xhr.open(method, url, true);
  xhr.onreadystatechange = function() {
    if (xhr.readyState === 4 && xhr.status === 200) {
      callback(xhr.responseText);
    }
  };
  if (method === 'POST') {
    xhr.setRequestHeader('Content-Type', 'application/x-www-form-urlencoded');
  }
  xhr.send(method === 'POST' ? data : null);
}
 
// 使用方法：
ajax('GET', 'https://api.example.com/data', null, function(response) {
  console.log('Response:', response);
});
 
ajax('POST', 'https://api.example.com/data', 'key1=value1&key2=value2', function(response) {
  console.log('Response:', response);
});

这个 ajax 函数接受四个参数：HTTP 请求方法（'GET' 或 'POST'），请求的URL，发送的数据（对于POST请求），以及一个回调函数，该函数在接收到响应时被调用。这个封装提供了一个简单易用的接口来进行AJAX请求。

- 阅读更多 -

jsp页面上传图片后不显示，页面控制台报404（最新解决）

System

2024-08-25

所有,ajax

报错解释：

HTTP 404 错误表示客户端能够与服务器通信，但服务器找不到请求的资源。在 JSP 页面上传图片后不显示且控制台报 404 错误，可能的原因通常有：

图片上传成功，但没有正确地显示在页面上。可能是因为图片的路径不正确，或者图片标签的属性设置有误。
上传的图片没有保存在预期的目录中，或者保存后的路径不正确。
服务器配置问题，如 web.xml 中的servlet映射错误，或者servlet没有正确处理图片上传的请求。
文件权限问题，上传的图片文件可能没有正确的读取权限。

解决方法：

确认图片上传成功，检查图片是否已保存在预期目录。
检查图片标签的路径是否正确，确保路径指向正确的文件夹和文件。
检查服务器配置，包括 web.xml 中的servlet配置和相关的servlet代码。
确认文件权限设置正确，确保服务器有权限访问上传的图片文件。
如果使用框架（如Spring MVC），确保相关的controller方法能正确处理图片上传请求。

如果以上步骤无法解决问题，可以进一步检查服务器日志文件，查看更详细的错误信息，以便进行针对性的排查。

- 阅读更多 -