1. 首页
  2. 标签
  3. Javascript
【JS特效之手风琴效果】基于jquery实现手风琴网页特效
System
2024-08-17
所有,jquery

以下是实现手风琴特效的简化版示例代码，使用了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度显示背面内容。在实际应用中，您可能需要为每个卡片添加不同的背面内容，并且可能需要添加更多的交互细节，比如动画完成的回调函数等。

- 阅读更多 -
vue 基层使用+ css样式 + js
System
2024-08-17
所有,javascript

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

  1. 在Vue组件的<template>标签内添加HTML结构。
  2. 在<script>标签内添加JavaScript逻辑。
  3. 在<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属性确保这些样式只应用于当前组件的元素。

- 阅读更多 -
ES7 React/Redux/React-Native/JS snippets
System
2024-08-17
所有,typescript

ES7 React/Redux/React-Native/JS snippets 是一个Visual Studio Code的代码提示工具，它提供了在编写React, Redux, 和 React-Native 以及 JavaScript 时的代码提示。

如果你想要使用这个工具，你可以按照以下步骤进行：

  1. 打开Visual Studio Code。
  2. 打开扩展视图（Ctrl+Shift+X）。
  3. 在搜索框中输入 "ES7 React/Redux/React-Native/JS snippets" 并安装。

安装完成后，你可以在编写React, Redux, 和 React-Native 以及 JavaScript 文件时，通过输入特定的代码片段，如 "rcc" 或 "rfc" 等，来快速生成React组件的class或function组件的基本代码结构。

例如，输入 "rcc" 然后按Tab键，将生成以下代码：




import React, { Component } from 'react';
 
class ClassName extends Component {
    render() {
        return (
            <View>
                
            </View>
        );
    }
}
 
export default ClassName;

输入 "rfc" 然后按Tab键，将生成以下代码：




import React from 'react';
 
const FunctionalComponentName = () => {
    return (
        <View>
            
        </View>
    );
}
 
export default FunctionalComponentName;

这些代码片段可以帮助开发者提高编码速度，减少代码出错的几率。

注意：这个工具只适用于Visual Studio Code编辑器，不适用于其他IDE。

- 阅读更多 -
Node.js+MySQL的后端数据库交互封装与示例
System
2024-08-17
所有,typescript



// 导入MySQL模块
const mysql = require('mysql');
 
// 配置数据库连接参数
const dbConfig = {
  host: 'localhost',
  user: 'your_username',
  password: 'your_password',
  database: 'your_database'
};
 
// 创建数据库连接
const connection = mysql.createConnection(dbConfig);
 
// 打开数据库连接
connection.connect(err => {
  if (err) throw err;
  console.log('Connected to database successfully.');
});
 
// 查询数据库示例
connection.query('SELECT * FROM your_table', (error, results, fields) => {
  if (error) throw error;
  // 使用results数据
  console.log(results);
});
 
// 关闭数据库连接
connection.end();

这段代码演示了如何在Node.js中使用mysql模块与MySQL数据库进行交互。首先导入mysql模块，然后配置数据库连接参数。接着创建并打开数据库连接，执行一个简单的查询操作，最后关闭连接。这个过程对于任何需要与数据库交互的Node.js应用程序都是一个常见的模式。

- 阅读更多 -
SolidJS Typescript 开发指南 Props和Store
System
2024-08-17
所有,typescript



import { createSignal } from 'solid-js';
import { createStore } from 'solid-js/store';
 
// 定义一个简单的组件
export default function MyComponent(props) {
  // 使用props
  const [name, setName] = createSignal(props.initialName);
  
  // 使用store
  const [counter, setCounter] = createStore(0);
  
  // 示例方法，用于增加计数器
  function incrementCounter() {
    setCounter(counter() + 1);
  }
  
  // 渲染组件
  return (
    <div>
      <h1>Hello, {name()!}!</h1>
      <p>Counter: {counter()}</p>
      <button onClick={incrementCounter}>Increment</button>
    </div>
  );
}
 
// 设置默认属性
MyComponent.defaultProps = {
  initialName: 'Guest'
};

这个简单的SolidJS组件示例展示了如何使用Props和Store。组件接收一个名为initialName的属性，并使用它来初始化一个信号。它还使用了一个简单的store来维护一个计数器，并提供了一个按钮来增加计数器的值。这个例子简单明了地展示了如何在SolidJS中处理属性和状态，对于初学者来说是一个很好的教学资源。

- 阅读更多 -
Midwayjs（v3.0.0）跨域问题
System
2024-08-17
所有,typescript

Midwayjs是一个基于Node.js的服务端框架，它提供了一套完整的开发体验。在Midwayjs v3.0.0中，跨域问题通常是通过Midway提供的装饰器或者中间件来解决的。

跨域问题的解释：

当一个源（如浏览器）从与自身不同的源（域名、协议、端口）的服务器请求资源时，会发起跨源HTTP请求。如果服务器没有通过CORS头部来明确允许这样的请求，浏览器会阻止这样的请求。

解决方法：

  1. 使用Midway提供的@Cors()装饰器。你可以在Controller或者Function方法上使用这个装饰器来开启CORS支持。



import { Provide, Controller, Get, Cors } from '@midwayjs/decorator';
 
@Provide()
@Controller('/api')
export class ApiController {
  @Get('/hello')
  @Cors() // 开启CORS
  async hello() {
    return 'Hello World!';
  }
}
  1. 使用全局CORS配置。在src/config/config.default.ts中配置CORS。



export default {
  // ...
  cors: {
    origin: '*', // 或者指定特定的域名
    allowMethods: 'GET,HEAD,PUT,POST,DELETE,PATCH',
  },
  // ...
};
  1. 使用中间件。在Midway中，你可以创建一个全局中间件来处理CORS。



// src/middleware/cors.ts
import { Context, Next } from '@midwayjs/koa';
 
export async function corsMiddleware(ctx: Context, next: Next) {
  ctx.set('Access-Control-Allow-Origin', '*');
  ctx.set('Access-Control-Allow-Headers', 'Content-Type, Content-Length, Authorization, Accept, X-Requested-With');
  ctx.set('Access-Control-Allow-Methods', 'PUT, POST, GET, DELETE, OPTIONS');
 
  if (ctx.method === 'OPTIONS') {
    ctx.body = 204;
    return;
  }
 
  await next();
}
 
// src/configuration.ts
import { Configuration, App } from '@midwayjs/decorator';
import { IWebMiddleware } from '@midwayjs/koa';
import { corsMiddleware } from './middleware/cors';
 
@Configuration({
  // ...
})
export class ContainerLifeCycle {
  @App()
  async getMiddlewareList(app): Promise<IWebMiddleware[]> {
    return [
      {
        resolve: () => corsMiddleware,
        global: true,
      },
      // ...
    ];
  }
}

以上方法可以解决跨域问题，确保你的应用允许来自特定源或任何源的跨域请求。在实际应用中，出于安全考虑，建议将origin设置为特定的域名或通过函数来进行更细粒度的控制。

- 阅读更多 -
angular.js引入外部JS并传值给外部JS
System
2024-08-17
所有,typescript

在AngularJS中引入外部JS并传值给它可以通过以下步骤实现：

  1. 在AngularJS控制器中定义需要传递给外部JS的值。
  2. 使用$window服务来访问全局的window对象，并通过它调用外部JS中的函数，并传递值。

假设你有一个名为external.js的外部文件，它定义了一个全局函数receiveValue(value)，你想从AngularJS传递一个值给它。

首先，确保在HTML中引入了外部JS文件：




<script src="external.js"></script>

然后，在AngularJS控制器中，你可以这样做：




app.controller('MyController', ['$scope', '$window', function($scope, $window) {
    $scope.myValue = "Hello from AngularJS";
 
    // 当需要传值给外部JS时调用此函数
    $scope.sendValueToExternalJS = function() {
        // 调用外部JS中的函数并传递值
        $window.receiveValue($scope.myValue);
    };
}]);

确保在外部JS文件中定义了receiveValue函数，它接受一个参数并做相应处理：




// external.js
function receiveValue(value) {
    console.log(value); // 输出传递过来的值
    // 其他逻辑...
}

最后，在AngularJS模板中，你可以绑定一个事件来触发传值动作：




<button ng-click="sendValueToExternalJS()">Send Value</button>

当用户点击按钮时，sendValueToExternalJS函数会被调用，并且myValue的值会传递给外部的receiveValue函数。

- 阅读更多 -
【JavaScript】预解析
System
2024-08-17
所有,typescript

在JavaScript中，预解析指的是在代码执行前，JavaScript引擎将变量和函数声明提升到它们作用域的顶部的过程。这意味着变量和函数声明会被提前，但赋值不会提前。

变量的预解析：




console.log(globalVar); // 输出 undefined
var globalVar = 'Hello, World!';

在上面的代码中，虽然变量globalVar是在后面定义的，但是在执行console.log之前，JavaScript引擎会将其声明提升到作用域的顶部，因此在输出时globalVar已经存在，但是值为undefined，直到执行到var globalVar = 'Hello, World!';时才被赋值。

函数的预解析：




console.log(globalFunc); // 输出函数定义
globalFunc(); // 输出 'Hello, World!'
 
function globalFunc() {
  console.log('Hello, World!');
}

在上面的代码中，虽然函数globalFunc是在后面定义的，但是在执行console.log之前，JavaScript引擎会将其声明提升到作用域的顶部，因此在输出时globalFunc已经是可用的，可以调用，但是调用globalFunc()会输出'Hello, World!'。

需要注意的是，函数表达式不会发生预解析，例如：




console.log(funcExpr); // 输出 undefined
var funcExpr = function() {
  console.log('This will not be executed.');
};

在这个例子中，funcExpr在执行console.log时仍然是undefined，因为函数表达式不会进行提升。

- 阅读更多 -
vue3+ts 配置mockjs模拟数据
System
2024-08-17
所有,typescript

在Vue 3 + TypeScript项目中配置Mock.js来模拟数据的基本步骤如下：

  1. 安装Mock.js:



npm install mockjs --save-dev
  1. 在项目中创建一个mock.ts文件，用于配置模拟数据规则。



// mock.ts
import Mock from 'mockjs'
 
// 模拟数据规则
const data = Mock.mock({
  'items|30': [{
    id: '@id',
    name: '@name',
    'age|18-30': 1
  }]
})
 
// 模拟API接口
Mock.mock('/api/users', 'get', () => {
  return {
    code: 200,
    data: data.items
  }
})
  1. 在main.ts或其他入口文件中引入mock.ts来启动Mock.js。



// main.ts
import { createApp } from 'vue'
import App from './App.vue'
import './mock' // 引入mock配置
 
const app = createApp(App)
 
app.mount('#app')
  1. 在组件中发送请求获取模拟数据。



// UserList.vue
<template>
  <div>
    <ul>
      <li v-for="user in users" :key="user.id">
        {{ user.name }} - {{ user.age }}
      </li>
    </ul>
  </div>
</template>
 
<script lang="ts">
import { defineComponent, onMounted, ref } from 'vue'
import axios from 'axios'
 
export default defineComponent({
  setup() {
    const users = ref<any[]>([])
 
    onMounted(async () => {
      try {
        const response = await axios.get('/api/users')
        if (response.status === 200) {
          users.value = response.data.data
        }
      } catch (error) {
        console.error('Error fetching users:', error)
      }
    })
 
    return { users }
  }
})
</script>

在这个例子中，当Vue应用启动时，会加载mock.ts文件，并启动Mock.js。在UserList组件加载时，会向模拟的API('/api/users')发送请求，并获取模拟数据用于展示。这样，你可以在不连接真实后端数据源的情况下进行前端开发和测试。

- 阅读更多 -
NestJS 后台管理系统搭建、TypeOrm使用
System
2024-08-17
所有,typescript



import { Module } from '@nestjs/common';
import { TypeOrmModule } from '@nestjs/typeorm';
import { AppController } from './app.controller';
import { AppService } from './app.service';
import { UserModule } from './user/user.module';
 
@Module({
  imports: [
    TypeOrmModule.forRoot({
      type: 'mysql',
      host: 'localhost',
      port: 3306,
      username: 'root',
      password: 'password',
      database: 'test',
      entities: [__dirname + '/**/*.entity{.ts,.js}'],
      synchronize: true,
    }),
    UserModule,
  ],
  controllers: [AppController],
  providers: [AppService],
})
export class AppModule {}

这段代码演示了如何在NestJS应用中配置TypeOrm，并且连接到MySQL数据库。TypeOrmModule.forRoot()方法用于设置数据库连接选项，包括数据库类型、主机、端口、用户名、密码、数据库名，以及实体文件的位置。entities选项使用了一个动态路径，以便TypeOrm可以递归地找到所有的实体类文件。synchronize选项设置为true意味着每次应用启动时，TypeOrm都会尝试根据实体结构同步数据库架构。这在开发环境中可以方便地保持数据库结构与实体定义的同步，但在生产环境中通常应设置为false，以避免不必要的数据库结构变更。

- 阅读更多 -
Copyright © 2025 Tech Blog
All Right Reserved | 京ICP备19053165号