分类前端技术下的文章

2024-08-12

以下是一个简单的Flutter登录界面示例，使用了Material Design和一些简单的动画：




import 'package:flutter/material.dart';
 
void main() => runApp(MyApp());
 
class MyApp extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return MaterialApp(
      home: LoginPage(),
      debugShowCheckedModeBanner: false,
      theme: ThemeData(
        primarySwatch: Colors.blue,
      ),
    );
  }
}
 
class LoginPage extends StatefulWidget {
  @override
  _LoginPageState createState() => _LoginPageState();
}
 
class _LoginPageState extends State<LoginPage> with TickerProviderStateMixin {
  AnimationController _controller;
  Animation<Offset> _slideAnimation;
 
  @override
  void initState() {
    super.initState();
    _controller = AnimationController(
      vsync: this,
      duration: Duration(milliseconds: 300),
    );
    _slideAnimation = Tween<Offset>(
      begin: Offset(0, 1),
      end: Offset(0, 0),
    ).animate(_controller);
    _controller.forward();
  }
 
  @override
  Widget build(BuildContext context) {
    return Scaffold(
      body: Stack(
        fit: StackFit.expand,
        children: <Widget>[
          Image.asset(
            'assets/background.jpg',
            fit: BoxFit.cover,
            alignment: Alignment.center,
          ),
          SingleChildScrollView(
            child: Column(
              crossAxisAlignment: CrossAxisAlignment.center,
              children: <Widget>[
                SizedBox(height: 100.0),
                Image.asset(
                  'assets/logo.png',
                  width: 200.0,
                  height: 200.0,
                ),
                SizedBox(height: 30.0),
                AnimatedBuilder(
                  animation: _controller,
                  builder: (context, child) {
                    return SlideTransition(
                      position: _slideAnimation,
                      child: child,
                    );
                  },
                  child: Padding(
                    padding: const EdgeInsets.all(30.0),
                    child: Column(
                      children: <Widget>[
                        TextField(
                          decoration: InputDecoration(
                            hintText: 'Enter your email',
                          ),
                        ),
                        SizedBox(height: 20.0),

- 阅读更多 -

h5实现i18n语言切换

System

2024-08-12

所有,jquery

在HTML5中，可以使用JavaScript和本地存储来实现语言切换的i18n功能。以下是一个简单的示例：




<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Internationalization Example</title>
    <script>
        // 语言设置对象
        var i18n = {
            "en": {
                "greeting": "Hello"
            },
            "es": {
                "greeting": "Hola"
            },
            "fr": {
                "greeting": "Bonjour"
            }
        };
 
        // 初始化语言
        function initLanguage() {
            var lang = localStorage.getItem('language') || navigator.language.split('-')[0]; // 获取本地存储的语言或浏览器语言
            document.querySelector('html').setAttribute('lang', lang);
            document.querySelector('#greeting').textContent = i18n[lang].greeting;
        }
 
        // 切换语言
        function toggleLanguage(lang) {
            localStorage.setItem('language', lang); // 存储语言选择
            initLanguage(); // 初始化新的语言设置
        }
 
        // 页面加载时初始化语言
        window.onload = initLanguage;
    </script>
</head>
<body>
    <h1 id="greeting"></h1>
    <button onclick="toggleLanguage('en')">English</button>
    <button onclick="toggleLanguage('es')">Español</button>
    <button onclick="toggleLanguage('fr')">Français</button>
</body>
</html>

这段代码定义了一个简单的i18n对象，包含了不同语言的问候语。initLanguage 函数会在页面加载时调用，或在用户切换语言时调用，以更新页面语言。toggleLanguage 函数会保存用户的语言选择到本地存储，并重新初始化语言设置。用户每次刷新页面或进入页面时，都会检查本地存储的语言设置，如果存在则使用该设置，否则使用浏览器语言。

- 阅读更多 -

el-dialog 关闭窗口数据销毁问题

System

2024-08-12

所有,elementui

在Vue.js中，如果你想在关闭el-dialog组件时销毁其中的数据，你可以使用before-close事件来清理数据。这里是一个简单的例子：




<template>
  <el-dialog
    :visible.sync="dialogVisible"
    @before-close="handleClose"
  >
    <!-- 你的对话框内容 -->
  </el-dialog>
</template>
 
<script>
export default {
  data() {
    return {
      dialogVisible: false
    };
  },
  methods: {
    handleClose() {
      // 这里清理你的数据
      this.dialogVisible = false; // 可选，关闭对话框
    }
  }
};
</script>

在这个例子中，当对话框准备关闭时，handleClose方法会被调用。在这个方法里，你可以清理掉所有需要销毁的数据。设置this.dialogVisible = false是可选的，因为当el-dialog关闭时，它通常会自动同步这个属性。如果你需要在其他条件下关闭对话框，你可以手动设置this.dialogVisible = false来关闭对话框。

- 阅读更多 -

css伪元素实现选中效果【打勾效果】

System

2024-08-12

所有,css3

CSS伪元素可以用来创建打勾效果，以下是一个简单的例子：

HTML:




<label class="checkbox">
  <input type="checkbox" />
  <span class="checkmark"></span>
  Check me out
</label>

CSS:




/* 复选框样式 */
.checkbox input {
  position: absolute;
  opacity: 0;
  cursor: pointer;
}
 
/* 打勾标记样式 */
.checkbox .checkmark {
  position: absolute;
  top: 0;
  left: 0;
  height: 20px;
  width: 20px;
  background-color: #eee;
}
 
/* 当复选框被选中时，显示打勾 */
.checkbox input:checked + .checkmark:before {
  position: absolute;
  content: "";
  left: 7px;
  top: 3px;
  width: 5px;
  height: 10px;
  border: solid #000;
  border-width: 0 2px 2px 0;
  transform: rotate(45deg);
}
 
/* 隐藏原生的复选框样式 */
.checkbox input:checked + .checkmark {
  background-color: #bada55;
}
 
.checkbox span.checkmark {
  display: inline-block;
  width: 20px;
  height: 20px;
  background: #fff;
  border: 1px solid #ddd;
  vertical-align: middle;
  margin-right: 5px;
  margin-top: -2px;
}

这段代码中，.checkbox input 隐藏了原生的复选框，.checkbox .checkmark 创建了一个空白的打勾区域，.checkbox input:checked + .checkmark:before 在复选框被选中时，通过伪元素 :before 创建了打勾效果。通过CSS的 transform: rotate(45deg); 属性，将打勾样式旋转成标准的对勾形状。

- 阅读更多 -

js原生实现步骤条

System

2024-08-12

所有,css3

要使用原生JavaScript实现步骤条，你可以创建一个HTML结构，然后用JavaScript来处理步骤的显示和交互。以下是一个简单的实现示例：

HTML:




<div id="step-bar">
  <div class="step" data-step="1">步骤1</div>
  <div class="step" data-step="2">步骤2</div>
  <div class="step" data-step="3">步骤3</div>
  <div class="step" data-step="4">步骤4</div>
</div>

CSS:




#step-bar {
  display: flex;
}
 
.step {
  padding: 10px;
  margin: 5px;
  border: 1px solid #ccc;
  text-align: center;
  cursor: pointer;
}
 
.step.active {
  color: #fff;
  background-color: #007bff;
}

JavaScript:




document.querySelectorAll('.step').forEach(function(step) {
  step.addEventListener('click', function() {
    // 移除所有步骤的active类
    document.querySelectorAll('.step').forEach(function(s) {
      s.classList.remove('active');
    });
    
    // 添加当前点击的步骤的active类
    this.classList.add('active');
    
    // 这里可以添加更多的逻辑，比如显示或隐藏内容区域等
  });
});

这个实现允许用户点击步骤条上的任何一个步骤，然后该步骤会被高亮显示，同时其他步骤保持不变。你可以根据需要添加更多的功能，比如显示对应步骤的内容等。

- 阅读更多 -

CSS3如何实现元素的固定不滚动

System

2024-08-12

所有,css3

在CSS3中，可以使用position: sticky;属性来实现元素的固定效果，即使元素在滚动时仍然保持在某个位置。position: sticky;的工作需要基于一些条件：

必须指定top, right, bottom或left四个方向之一来指定sticky元素所需要达到的位置，才能使粘性定位生效。
其父元素不能有任何overflow属性设置为visible的情况，否则sticky定位不会生效。

下面是一个简单的例子，演示如何使用position: sticky;来实现元素的固定效果：




<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<style>
  body, html {
    height: 200%;
    margin: 0;
    padding: 0;
  }
  .sticky {
    position: -webkit-sticky; /* Safari */
    position: sticky;
    top: 0; /* 距离顶部的距离 */
    background-color: yellow;
    padding: 50px;
    font-size: 20px;
  }
</style>
</head>
<body>
 
<p>向下滚动页面。</p>
 
<div class="sticky">我在滚动时保持固定。</div>
 
<p>继续向下滚动页面...</p>
 
</body>
</html>

在这个例子中，.sticky类使得包含文本的<div>在滚动时保持在顶部。当用户向下滚动页面时，sticky元素会固定在顶部，并不会随着页面的其余部分滚动。

System

2024-08-12

所有,css3




/* 设置图片初始大小 */
img {
  width: 200px;
  height: auto;
}
 
/* 鼠标悬停时，缩小图片 */
img:hover {
  transform: scale(0.8);
}

这段代码示例中，我们首先为所有img元素设置了一个初始宽度，并让其高度自动调整。然后，我们使用CSS的:hover伪类选择器来定义当鼠标悬停在图片上时的变换效果，使用transform属性中的scale函数将图片缩小到原始大小的80%。这种效果在用户希望在用户交互时增加页面视觉效果时非常有用。

- 阅读更多 -

前端如何中断请求 ( axios、原生 ajax、fetch)

System

2024-08-12

所有,ajax

在前端中，可以通过多种方式发起HTTP请求，如axios、原生ajax和fetch。如果你想要在请求完成之前就中断它，你可以使用axios的cancel token功能或者对原生的XMLHttpRequest进行中断。

以下是使用axios和原生ajax以及fetch中断请求的方法：

使用axios的cancel token功能：




const axios = require('axios');
const CancelToken = axios.CancelToken;
const source = CancelToken.source();
 
axios.get('someUrl', {
  cancelToken: source.token
}).catch(function(thrown) {
  if (axios.isCancel(thrown)) {
    console.log('Request canceled', thrown.message);
  } else {
    // handle other errors
  }
});
 
// cancel the request
source.cancel('Operation canceled by the user.');

对原生的XMLHttpRequest进行中断：




const xhr = new XMLHttpRequest();
 
xhr.open('GET', 'someUrl', true);
 
xhr.onreadystatechange = function() {
  if (xhr.readyState === XMLHttpRequest.DONE) {
    try {
      if (xhr.status === 200) {
        // handle response
      } else {
        // handle other status codes
      }
    } catch (e) {
      // handle network errors
    }
  }
};
 
xhr.send();
 
// abort the request
xhr.abort();

使用fetch的AbortController中止请求：




const controller = new AbortController();
const signal = controller.signal;
 
fetch('someUrl', {
  signal: signal
}).then(function(response) {
  return response.text();
}).then(function(text) {
  console.log(text);
}).catch(function(error) {
  if (error.name === 'AbortError') {
    console.log('Fetch aborted');
  } else {
    console.log('Fetch error:', error);
  }
});
 
// abort the fetch request
controller.abort();

以上代码展示了如何在不同的HTTP请求库中中断请求。你可以根据你的具体需求和环境选择合适的方法。

- 阅读更多 -

【SpringBoot + Vue 尚庭公寓实战】项目初始化准备

System

2024-08-12

所有,vue.js

在这个实战中，我们将会创建一个SpringBoot后端项目和一个Vue前端项目，并将它们关联起来。

首先，我们需要创建一个SpringBoot项目作为后端API服务器。这可以通过Spring Initializr (https://start.spring.io/) 快速完成。

访问Spring Initializr网站。
选择对应的Java版本和SpringBoot版本。
添加依赖：Web、Lombok、MyBatis Framework、MySQL Driver。
输入Group和Artifact信息，点击"Generate Project"下载项目压缩包。
解压项目压缩包，并用IDE（如IntelliJ IDEA）打开。

接下来，我们将创建一个Vue前端项目。这可以通过Vue CLI (https://cli.vuejs.org/) 完成。

确保Node.js和npm已经安装。
安装Vue CLI：npm install -g @vue/cli。
创建新项目：vue create frontend-project。
进入项目目录：cd frontend-project。
启动项目：npm run serve。

在实际开发中，后端API和前端Vue应用可能会分别部署在不同的服务器上，但在实战中，我们可以将前端Vue应用部署在SpringBoot内嵌的Tomcat服务器中，或者使用Vue的history模式配置与SpringBoot的集成。

以上步骤仅提供了大体框架，实际开发中会涉及到更多细节，比如数据库设计、API接口设计、前后端联调等。

- 阅读更多 -

前端工程化Vue使用Node.js设置国内高速npm镜像源（踩坑记录版）

System

2024-08-12

所有,vue.js




// 使用Node.js脚本设置中国区的npm镜像
const { execSync } = require('child_process');
const fs = require('fs');
const path = require('path');
 
// 设置npm的中国区镜像
const setNpmMirror = () => {
  try {
    execSync('npm config set registry https://registry.npm.taobao.org', { stdio: 'inherit' });
    console.log('设置npm镜像源成功！');
  } catch (error) {
    console.error('设置npm镜像源失败：', error);
  }
};
 
// 创建或更新.npmrc文件
const updateNpmrcFile = () => {
  const npmrcPath = path.join(process.cwd(), '.npmrc');
  try {
    fs.writeFileSync(npmrcPath, 'registry=https://registry.npm.taobao.org\n', 'utf-8');
    console.log('更新.npmrc文件成功！');
  } catch (error) {
    console.error('更新.npmrc文件失败：', error);
  }
};
 
// 主函数
const main = () => {
  setNpmMirror();
  updateNpmrcFile();
};
 
main();

这段代码使用Node.js的child_process模块执行命令行指令，并且使用fs模块来创建或更新.npmrc配置文件。它提供了一种自动化设置npm镜像源的方法，并且可以避免手动操作带来的错误风险。

- 阅读更多 -