Tech Blog

2024-08-17

以下是实现手风琴特效的简化版示例代码，使用了jQuery库：




<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>手风琴特效</title>
<style>
  .accordion {
    width: 315px;
    height: 460px;
    position: relative;
    perspective: 1000px;
  }
  .accordion .card {
    width: 100%;
    height: 100%;
    position: absolute;
    backface-visibility: hidden;
    transition: transform 1s;
  }
  .accordion .card.show {
    transform: rotateY(180deg);
  }
  .accordion img {
    width: 100%;
    height: 100%;
    object-fit: cover;
  }
</style>
</head>
<body>
 
<div class="accordion">
  <div class="card">
    <img src="https://placekitten.com/315/460" alt="Card 1">
  </div>
  <!-- Add more cards if needed -->
</div>
 
<script src="https://code.jquery.com/jquery-3.5.1.min.js"></script>
<script>
$(document).ready(function() {
  $('.accordion .card').on('click', function() {
    $(this).toggleClass('show');
  });
});
</script>
 
</body>
</html>

这段代码实现了基本的手风琴效果，点击卡片会将其翻转180度显示背面内容。在实际应用中，您可能需要为每个卡片添加不同的背面内容，并且可能需要添加更多的交互细节，比如动画完成的回调函数等。

- 阅读更多 -

前端篇-jquery发送数据的三种方式

System

2024-08-17

所有,jquery

在jQuery中，可以通过$.ajax、$.get和$.post方法来发送数据。

使用$.ajax方法发送数据：




$.ajax({
    url: 'your-endpoint.php', // 服务器端的URL
    type: 'POST',             // 请求类型，这里是POST
    data: {key1: 'value1', key2: 'value2'}, // 要发送的数据
})
.done(function(response) {
    // 请求成功后的回调函数
    console.log(response);
})
.fail(function() {
    // 请求失败后的回调函数
    console.log('request failed');
});

使用$.get方法发送GET请求：




$.get('your-endpoint.php', {key1: 'value1', key2: 'value2'}, function(response) {
    // 请求成功后的回调函数
    console.log(response);
});

使用$.post方法发送POST请求：




$.post('your-endpoint.php', {key1: 'value1', key2: 'value2'}, function(response) {
    // 请求成功后的回调函数
    console.log(response);
});

以上代码中，your-endpoint.php是服务器端处理请求的脚本地址，{key1: 'value1', key2: 'value2'}是要发送的数据，response是服务器返回的响应数据。

- 阅读更多 -

【ElementUI】详细分析DatePicker 日期选择器

System

2024-08-17

所有,elementui

在Element UI中，DatePicker 组件是一个常用的日期选择器，它允许用户通过界面选择日期。

以下是一个简单的例子，展示如何使用DatePicker组件：




<template>
  <el-date-picker
    v-model="value"
    type="date"
    placeholder="选择日期">
  </el-date-picker>
</template>
 
<script>
export default {
  data() {
    return {
      value: ''
    };
  }
};
</script>

在这个例子中，我们创建了一个带有v-model的el-date-picker组件，它绑定了名为value的数据属性。用户可以通过这个控件选择一个日期，选择的值将自动绑定到value属性。

DatePicker 组件的type属性可以设置为date、datetime、year、month，分别对应日期、日期时间、年、月选择器。placeholder属性用于设置文本框占位符。

此外，DatePicker 还支持许多其他属性和事件，如size、format、value-format、align、picker-options、default-value、range-separator、start-placeholder、end-placeholder等，以满足不同场景下的需求。

- 阅读更多 -

ElementUI框架搭建及组件使用+登录界面精美模版分享

System

2024-08-17

所有,elementui

以下是使用ElementUI创建一个简单登录页面的示例代码：




<template>
  <el-form ref="loginForm" :model="loginForm" label-width="80px" class="login-container">
    <h3 class="login-title">系统登录</h3>
    <el-form-item label="账号">
      <el-input v-model="loginForm.username" auto-complete="off"></el-input>
    </el-form-item>
    <el-form-item label="密码">
      <el-input type="password" v-model="loginForm.password" auto-complete="off"></el-input>
    </el-form-item>
    <el-form-item>
      <el-button type="primary" v-on:click="submitLogin">登录</el-button>
    </el-form-item>
  </el-form>
</template>
 
<script>
export default {
  data() {
    return {
      loginForm: {
        username: '',
        password: ''
      }
    };
  },
  methods: {
    submitLogin() {
      // 这里应该是登录请求的处理逻辑
      console.log('登录请求处理...');
    }
  }
};
</script>
 
<style scoped>
.login-container {
  width: 300px;
  margin: 180px auto 0;
  padding: 35px 35px 15px;
  background: #fff;
  border: 1px solid #eaeaea;
  box-shadow: 0 0 25px #cac6c6;
}
.login-title {
  text-align: center;
  margin: 0 0 20px;
  color: #505458;
}
</style>

这段代码展示了如何使用ElementUI创建一个简单的登录页面，包括表单输入、按钮和样式。在实际应用中，登录逻辑需要与后端服务配合，并且需要加入表单验证等功能。

- 阅读更多 -

vue3.0递归组件的使用

System

2024-08-17

所有,typescript

在Vue 3.0中，可以使用递归组件来表示树形结构或者是无限下拉菜单等。以下是一个简单的Vue 3.0递归组件示例，该组件用于显示一个简单的树形结构：




<template>
  <ul>
    <li v-for="(item, index) in treeData" :key="index">
      {{ item.name }}
      <RecursiveTree v-if="item.children && item.children.length > 0" :tree-data="item.children" />
    </li>
  </ul>
</template>
 
<script>
export default {
  name: 'RecursiveTree',
  props: {
    treeData: Array
  }
}
</script>

使用该组件时，你需要传递一个树形结构的数组作为treeData属性。每个数组元素都应该是一个对象，拥有name属性和可能的children属性，后者又是一个树形结构的数组。

以下是如何使用该组件的示例：




<template>
  <div>
    <RecursiveTree :tree-data="treeData" />
  </div>
</template>
 
<script>
import RecursiveTree from './RecursiveTree.vue';
 
export default {
  components: {
    RecursiveTree
  },
  data() {
    return {
      treeData: [
        {
          name: 'Node 1',
          children: [
            {
              name: 'Node 1.1',
              children: []
            },
            {
              name: 'Node 1.2',
              children: [
                {
                  name: 'Node 1.2.1',
                  children: []
                }
              ]
            }
          ]
        },
        {
          name: 'Node 2',
          children: []
        }
      ]
    };
  }
}
</script>

在这个例子中，RecursiveTree组件用于显示一个简单的树形结构，每个节点都是通过递归调用自身来显示其子节点的。递归调用停止的条件是节点没有子节点，或者子节点数组为空。

- 阅读更多 -

vue3+TypeScript实现拖拽

System

2024-08-17

所有,typescript

在Vue 3和TypeScript中实现拖拽功能，你可以使用原生JavaScript的相关API。以下是一个简单的示例，展示了如何使用Vue 3和TypeScript创建一个可拖拽的组件：




<template>
  <div
    ref="draggable"
    class="draggable"
    @mousedown="startDrag"
    @touchstart="startDrag"
    :style="{ top: top + 'px', left: left + 'px' }"
  >
    拖动我
  </div>
</template>
 
<script lang="ts">
import { ref } from 'vue';
 
export default {
  setup() {
    const draggable = ref<HTMLElement | null>(null);
    const top = ref(0);
    const left = ref(0);
 
    function startDrag(event: MouseEvent | TouchEvent) {
      const clientX = 'clientX' in event ? (event as MouseEvent).clientX : (event as TouchEvent).touches[0].clientX;
      const clientY = 'clientY' in event ? (event as MouseEvent).clientY : (event as TouchEvent).touches[0].clientY;
 
      const offsetX = clientX - draggable.value!.offsetLeft;
      const offsetY = clientY - draggable.value!.offsetTop;
 
      function moveHandler(event: MouseEvent | TouchEvent) {
        const x = 'clientX' in event ? (event as MouseEvent).clientX : (event as TouchEvent).touches[0].clientX;
        const y = 'clientY' in event ? (event as MouseEvent).clientY : (event as TouchEvent).touches[0].clientY;
 
        top.value = y - offsetY;
        left.value = x - offsetX;
      }
 
      function upHandler() {
        document.removeEventListener('mousemove', moveHandler);
        document.removeEventListener('mouseup', upHandler);
        document.removeEventListener('touchmove', moveHandler);
        document.removeEventListener('touchend', upHandler);
      }
 
      document.addEventListener('mousemove', moveHandler);
      document.addEventListener('mouseup', upHandler);
      document.addEventListener('touchmove', moveHandler);
      document.addEventListener('touchend', upHandler);
    }
 
    return { draggable, top, left, startDrag };
  },
};
</script>
 
<style>
.draggable {
  position: absolute;
  width: 100px;
  height: 100px;
  cursor: pointer;
  background-color: #3498db;
  color: white;
  text-align: center;
  line-height: 100px;
  user-select: none;
}
</style>

在这个例子中，我们创建了一个可拖动的组件，其中包含了一些样式和事件监听器。\`startD

- 阅读更多 -

TypeScrip入门基础

System

2024-08-17

所有,typescript

TypeScript 是 JavaScript 的一个超集，并且添加了一些额外的类型系统。以下是一个简单的 TypeScript 示例，它定义了一个函数，该函数接受两个参数并返回它们的和。




function add(a: number, b: number): number {
    return a + b;
}
 
console.log(add(1, 2)); // 输出: 3

在这个例子中，a 和 b 被指定为 number 类型，这意味着它们只能是数字。函数的返回类型也是 number，表示返回结果也是一个数字。

如果你想要运行这段 TypeScript 代码，你需要先安装 TypeScript 编译器。可以使用 npm 安装：




npm install -g typescript

然后，你可以使用 tsc 命令来编译 TypeScript 文件：




tsc example.ts

这将会生成一个 JavaScript 文件 example.js，里面包含了转换后的 JavaScript 代码。你可以直接运行生成的 JavaScript 文件来看到结果。

- 阅读更多 -

vue3使用和汉化element-plus组件库+图标

System

2024-08-17

所有,typescript




// 引入Vue
import { createApp } from 'vue';
// 引入Element Plus组件库
import ElementPlus from 'element-plus';
// 引入Element Plus图标
import * as ElIcons from '@element-plus/icons';
// 引入Element Plus中文语言包
import ElementLocale from 'element-plus/lib/locale';
import locale from 'element-plus/lib/locale/lang/zh-cn';
 
// 创建Vue应用实例
const app = createApp(App);
 
// 使用Element Plus及其图标
for (const [key, component] of Object.entries(ElIcons)) {
  app.component(key, component);
}
 
// 使用Element Plus并汉化
app.use(ElementPlus, {
  locale,
});
 
// 挂载Vue应用到DOM
app.mount('#app');

这段代码展示了如何在Vue 3项目中引入和使用Element Plus组件库，以及如何加载Element Plus的中文语言包来进行汉化。代码中使用了createApp来创建Vue应用实例，并通过app.use方法来安装Element Plus，同时遍历导入的图标并注册为组件，最后将Vue应用挂载到DOM中。

- 阅读更多 -

vue3 + ts 封装 axios

System

2024-08-17

所有,typescript

在Vue 3和TypeScript中封装Axios，你可以创建一个用于发送HTTP请求的服务，并使用axios的拦截器来处理通用的逻辑，如错误处理或请求头设置。以下是一个简单的封装示例：

首先，安装axios:




npm install axios

然后创建一个http.ts文件来封装Axios：




import axios, { AxiosRequestConfig, AxiosResponse } from 'axios';
 
class HttpClient {
  constructor() {
    // 设置默认请求配置
    axios.defaults.baseURL = 'https://your-api-url.com';
    axios.defaults.headers.post['Content-Type'] = 'application/json';
    axios.defaults.timeout = 10000; // 请求超时时间
  }
 
  public request<T>(config: AxiosRequestConfig): Promise<AxiosResponse<T>> {
    // 在请求发送前进行一些处理
    // ...
 
    return axios(config);
  }
 
  public get<T>(url: string, config?: AxiosRequestConfig): Promise<AxiosResponse<T>> {
    return this.request({ ...config, method: 'GET', url });
  }
 
  public post<T>(url: string, data?: any, config?: AxiosRequestConfig): Promise<AxiosResponse<T>> {
    return this.request({ ...config, method: 'POST', url, data });
  }
 
  // 可以根据需要添加其他HTTP方法的封装
}
 
// 创建实例
const httpClient = new HttpClient();
 
export default httpClient;

使用封装后的httpClient发送请求：




import httpClient from './http';
 
async function fetchData() {
  try {
    const response = await httpClient.get<any>('/your-endpoint');
    console.log(response.data);
  } catch (error) {
    console.error('An error occurred while fetching data:', error);
  }
}
 
fetchData();

在这个例子中，HttpClient类封装了Axios，并提供了request方法来发送任意类型的HTTP请求，以及get和post方法来发送GET和POST请求。你可以根据需要添加更多的方法，如put、delete等。同时，通过拦截器可以添加全局的请求处理逻辑，比如添加认证token、错误处理等。

- 阅读更多 -

vue 基层使用+ css样式 + js

System

2024-08-17

所有,javascript

在Vue中，你可以通过以下方式将CSS样式和JavaScript结合在一起：

在Vue组件的<template>标签内添加HTML结构。
在<script>标签内添加JavaScript逻辑。
在<style>标签内添加CSS样式，可以通过特殊的选择器（如scoped）来限定样式只作用于当前组件。

下面是一个简单的Vue组件示例，它展示了如何将CSS和JavaScript应用于Vue组件：




<template>
  <div class="greeting">
    Hello, {{ name }}!
  </div>
</template>
 
<script>
export default {
  data() {
    return {
      name: 'World'
    }
  }
}
</script>
 
<style scoped>
.greeting {
  color: blue;
  font-size: 20px;
}
</style>

在这个例子中，<template>定义了一个包含问候语的div，<script>定义了一个返回包含问候名字的数据对象，<style>定义了蓝色的font-size和greeting类。scoped属性确保这些样式只应用于当前组件的元素。

- 阅读更多 -