分类前端技术下的文章

2024-08-14




<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8">
<title>jQuery UI 实例 - 按钮（Button）</title>
<link rel="stylesheet" href="//code.jquery.com/ui/1.12.1/themes/base/jquery-ui.css">
<script src="//code.jquery.com/jquery-1.12.4.js"></script>
<script src="//code.jquery.com/ui/1.12.1/jquery-ui.js"></script>
<style>
.button-style {
  padding: 10px 20px;
  text-align: center;
  cursor: pointer;
  outline: none;
  color: #fff;
  background-color: #4CAF50;
  border: none;
  border-radius: 15px;
  box-shadow: 0 9px #999;
}
 
.button-style:hover {background-color: #3e8e41}
 
.button-style:active {
  background-color: #3e8e41;
  box-shadow: 0 5px #666;
  transform: translateY(4px);
}
</style>
<script>
$(function() {
  $(".button-style").button();
 
  $("#radios").buttonset();
});
</script>
</head>
<body>
 
<button class="button-style">默认按钮</button>
 
<div id="radios">
  <input type="radio" id="radio1" name="radio" checked="checked">
  <label for="radio1">选项 1</label>
  <input type="radio" id="radio2" name="radio">
  <label for="radio2">选项 2</label>
</div>
 
</body>
</html>

这个代码实例展示了如何使用jQuery UI库中的按钮（Button）部件来创建一个自定义样式的按钮，并使用按钮集（Button Set）来创建一组单选按钮。这个实例简单明了，并且可以直接复制粘贴到你的项目中使用。

- 阅读更多 -

JQuery使用iframe子页面操作父页面中的元素与方法

System

2024-08-14

所有,jquery

在父页面中，你可以通过jQuery选择器选择元素，并操作它们。如果你想要从子页面（iframe中的页面）调用父页面的函数或者修改父页面的元素，你需要首先获取子页面的window对象，然后就可以像在普通页面中一样进行操作了。

以下是一个示例代码：

父页面（假设有一个id为parentElement的元素和一个名为parentFunction的函数）:




<div id="parentElement">父页面元素</div>
<script>
function parentFunction() {
    alert('父页面函数被调用');
}
</script>

子页面（在iframe中）:




<button id="callParentFunction">调用父页面函数</button>
<button id="changeParentText">改变父页面元素文本</button>
 
<script src="https://code.jquery.com/jquery-3.5.1.min.js"></script>
<script>
$(document).ready(function() {
    $('#callParentFunction').click(function() {
        // 调用父页面的函数
        window.parent.parentFunction();
    });
 
    $('#changeParentText').click(function() {
        // 改变父页面的元素文本
        window.parent.$('#parentElement').text('新的文本');
    });
});
</script>

在子页面中，当你点击按钮时，会根据id调用父页面的相应函数或者改变父页面元素的内容。注意，window.parent是获取父页面的window对象的引用，而$是jQuery的别名，通过window.parent.$，子页面获得了父页面中jQuery的使用权。

- 阅读更多 -

实践一个Vue 3 + TypeScript + Vite + Pinia项目

System

2024-08-14

所有,typescript

以下是一个简单的Vue 3项目的核心文件示例，展示了如何配置Vue 3、TypeScript、Vite和Pinia。

vite.config.ts - Vite配置文件：




import { defineConfig } from 'vite';
import vue from '@vitejs/plugin-vue';
 
// https://vitejs.dev/config/
export default defineConfig({
  plugins: [vue()],
});

main.ts - Vue 应用的入口文件：




import { createApp } from 'vue';
import App from './App.vue';
import { createPinia } from 'pinia';
 
const app = createApp(App);
 
app.use(createPinia());
 
app.mount('#app');

App.vue - Vue 应用的根组件：




<template>
  <div id="app">
    <!-- 应用的主要内容 -->
  </div>
</template>
 
<script lang="ts">
import { defineComponent } from 'vue';
 
export default defineComponent({
  name: 'App',
  // 其他组件逻辑
});
</script>

tsconfig.json - TypeScript 配置文件：




{
  "compilerOptions": {
    "target": "esnext",
    "useDefineForClassFields": true,
    "module": "esnext",
    "moduleResolution": "node",
    "strict": true,
    "jsx": "preserve",
    "sourceMap": true,
    "resolveJsonModule": true,
    "esModuleInterop": true,
    "lib": ["esnext", "dom"],
    "baseUrl": ".",
    "types": ["vite/client"]
  },
  "include": ["src/**/*.ts", "src/**/*.d.ts", "src/**/*.tsx", "src/**/*.vue"],
  "references": [{ "path": "./tsconfig.node.json" }]
}

这些文件提供了一个基础框架，展示了如何在Vue 3项目中集成TypeScript、Vite和Pinia。开发者可以在此基础上添加自己的状态管理逻辑和组件。

- 阅读更多 -

Vue3中使用svg文件图标（TS）

System

2024-08-14

所有,typescript

在Vue 3中使用SVG图标，可以通过以下步骤进行：

将SVG图标添加到项目中，通常放在src/assets目录下。
在Vue组件中导入SVG图标，并使用<svg>元素和对应的属性来展示。

以下是一个简单的示例：

首先，将SVG图标保存到项目中，例如src/assets/icons/example.svg。

然后，创建一个Vue组件来使用这个SVG图标：




<template>
  <div>
    <!-- 使用svg图标 -->
    <svg class="icon" aria-hidden="true">
      <use :xlink:href="`#${iconName}`"></use>
    </svg>
  </div>
</template>
 
<script lang="ts">
import { defineComponent, ref } from 'vue';
// 导入SVG图标
import '@/assets/icons/example.svg';
 
export default defineComponent({
  name: 'SvgIconExample',
 
  setup() {
    // SVG图标的ID
    const iconName = ref('example-icon');
 
    return { iconName };
  }
});
</script>
 
<style scoped>
.icon {
  width: 1em;
  height: 1em;
  fill: currentColor;
  vertical-align: -0.15em;
}
</style>

确保你的webpack配置能够处理SVG文件，并且在<use>标签的xlink:href属性中使用图标的ID引用SVG图标。

注意：确保你的Vue项目配置了正确的loader来处理SVG文件，例如使用vue-loader和适合的SVG loader，如svg-url-loader或file-loader。

- 阅读更多 -

TypeScript中的联合类型、类型别名、接口、类型断言

System

2024-08-14

所有,typescript




// 定义一个基本的类型别名
type Username = string;
 
// 定义一个接口来描述用户信息
interface UserInfo {
  name: Username;
  age: number;
}
 
// 使用接口来描述一个函数，该函数接受一个UserInfo类型的参数
function greetUser(user: UserInfo) {
  return `Hello, ${user.name}!`;
}
 
// 使用类型断言来访问对象属性
function getUserInfo(user: Username | UserInfo): UserInfo {
  return (user as UserInfo); // 类型断言确保user被当作UserInfo类型
}
 
// 使用UserInfo接口和类型别名
let userName: Username = "Alice";
let userInfo: UserInfo = {
  name: userName,
  age: 30
};
 
// 调用函数并输出结果
console.log(greetUser(userInfo));
 
// 使用类型断言访问属性
let userInfoAsserted = getUserInfo(userInfo);
console.log(userInfoAsserted.age);

这个代码示例展示了如何在TypeScript中定义类型别名、创建接口、编写函数以及使用类型断言。它演示了如何创建一个用户信息的函数，并如何使用类型断言来确保访问正确的属性。

System

2024-08-14

所有,typescript




import React from 'react';
import { View, Text, Image } from 'react-native';
import { createBottomTabNavigator } from 'react-navigation';
 
// 自定义的导航栏图标组件
const MyHomeIcon = ({ tintColor, ...props }) => (
  <Image
    source={require('./images/home.png')}
    style={[{ tintColor: tintColor, width: 24, height: 24 }, props.style]}
  />
);
 
// 自定义的导航栏标签头部组件
const MyTabBarHeader = ({ title }) => (
  <View style={{ flex: 1, justifyContent: 'center', alignItems: 'center' }}>
    <Text style={{ color: 'blue', fontSize: 18 }}>{title}</Text>
  </View>
);
 
// 导航器配置
const TabNavigatorConfig = {
  tabBarOptions: {
    activeTintColor: 'tomato', // 激活标签的颜色
    inactiveTintColor: 'gray', // 未激活标签的颜色
    showIcon: true, // 是否显示图标
    showLabel: true, // 是否显示标签
    style: {
      height: 50, // 底部标签栏的高度
      backgroundColor: 'white', // 底部标签栏的背景颜色
    },
    labelStyle: {
      fontSize: 12, // 文本的字体大小
    },
  },
  defaultNavigationOptions: {
    tabBarIcon: ({ focused, tintColor }) => (
      <MyHomeIcon focused={focused} tintColor={tintColor} />
    ),
    tabBarLabel: ({ focused, routeName }) => (
      <MyTabBarHeader title={routeName === 'Home' ? '首页' : '其他'} />
    ),
  },
};
 
// 导航器定义
const TabNavigator = createBottomTabNavigator({
  Home: {
    screen: HomeScreen,
    navigationOptions: {
      tabBarIcon: ({ tintColor }) => (
        <MyHomeIcon tintColor={tintColor} />
      ),
      tabBarLabel: '首页',
    },
  },
  // 其他屏幕定义...
}, TabNavigatorConfig);
 
export default TabNavigator;

这个代码实例展示了如何在React Native中使用createBottomTabNavigator来创建一个底部标签导航器，并自定义了图标和标签头部的组件。同时，它也演示了如何通过TabNavigatorConfig来设置全局的导航器配置，包括标签栏的样式和颜色。

System

2024-08-14

所有,typescript

报红线通常是因为Visual Studio Code (VSCode)的IntelliSense引擎无法识别TypeScript中某些类型或组件。这可能是由于以下原因：

TypeScript配置不正确或缺失。
项目缺少类型定义文件(.d.ts 文件)。
VSCode没有正确识别element-plus组件库。

解决方法：

确保项目中有一个有效的tsconfig.json文件，它包含了正确的配置。
如果你使用的是Vue.js项目，确保安装了类型定义：
```
npm install @element-plus/icons-vue --save
```
确保element-plus已正确安装：
```
npm install element-plus --save
```
重启VSCode或重新加载窗口。
如果问题依旧，尝试删除node_modules文件夹和package-lock.json或yarn.lock文件，然后重新安装依赖：
```
npm install
```
或者使用Yarn：
```
yarn install
```
确保你的VSCode工作区设置中启用了TypeScript插件。

如果以上步骤无法解决问题，可能需要检查VSCode的TypeScript插件版本是否最新，或者查看是否有更具体的错误信息在问题面板中提供。

- 阅读更多 -

node.js服务器开发

System

2024-08-14

所有,nodejs

问题描述不够具体，但我可以提供一个简单的Node.js HTTP服务器示例代码。




const http = require('http');
 
const hostname = '127.0.0.1';
const port = 3000;
 
const server = http.createServer((req, res) => {
  res.statusCode = 200;
  res.setHeader('Content-Type', 'text/plain');
  res.end('Hello World\n');
});
 
server.listen(port, hostname, () => {
  console.log(`Server running at http://${hostname}:${port}/`);
});

这段代码使用Node.js的http模块创建了一个简单的HTTP服务器，监听本地3000端口。当浏览器访问这个服务器时，它会返回“Hello World”。这是Node.js服务器开发的一个基本例子。

- 阅读更多 -

前端（node.js）调用dll动态链接库

System

2024-08-14

所有,nodejs

在Node.js中调用DLL（动态链接库）通常涉及到使用Node.js的ffi-napi模块，这个模块允许你从Node.js代码中调用C或C++编写的DLL文件中的函数。

首先，你需要安装ffi-napi模块：




npm install ffi-napi

然后，你可以使用以下代码示例来调用DLL中的函数：




const ffi = require('ffi-napi');
 
// 定义DLL中函数的接口
const myDllFunction = ffi.Library('my-dll', {
  'myFunction': ['int', ['int']] // 假设DLL中有一个返回int的函数，接受一个int参数
});
 
// 调用DLL中的函数
const result = myDllFunction.myFunction(5);
console.log(result); // 输出DLL函数处理后的结果

在这个例子中，my-dll是你的DLL文件名，myFunction是你想要调用的DLL中的函数名。'int', ['int']定义了函数的返回类型和参数类型。

请注意，DLL文件需要位于可搜索的路径上，或者你需要提供完整的文件路径。函数签名（返回类型和参数类型）需要与DLL中函数的实际签名相匹配。

- 阅读更多 -

制作一个简单HTML静态网页（HTML+CSS）

System

2024-08-14

所有,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: #f4f4f4;
        }
        .header {
            background-color: #333;
            color: #fff;
            padding: 10px 0;
            text-align: center;
        }
        .navigation {
            list-style-type: none;
            margin: 0;
            padding: 0;
            overflow: hidden;
            background-color: #333;
        }
        .navigation li {
            float: left;
        }
        .navigation li a {
            display: block;
            color: white;
            text-align: center;
            padding: 14px 16px;
            text-decoration: none;
        }
        .navigation li a:hover {
            background-color: #ddd;
            color: black;
        }
        .content {
            margin: 15px;
            padding: 20px;
        }
        .footer {
            background-color: #333;
            color: #fff;
            text-align: center;
            padding: 10px 0;
            position: absolute;
            bottom: 0;
            width: 100%;
        }
    </style>
</head>
<body>
    <div class="header">
        <h1>我的网站</h1>
    </div>
 
    <ul class="navigation">
        <li><a href="#home">首页</a></li>
        <li><a href="#news">新闻</a></li>
        <li><a href="#contact">联系</a></li>
        <li><a href="#about">关于</a></li>
    </ul>
 
    <div class="content">
        <h2>内容</h2>
        <p>这里是内容...</p>
    </div>
 
    <div class="footer">
        <p>版权所有 &copy; 2023</p>
    </div>
</body>
</html>

这个示例添加了一个导航栏，并通过CSS样式使其浮动在页面顶部。同时，页脚被设置为绝对定位，始终显示在页面底部。这样的页面布局更加合理，便于用户理解页面结构。

- 阅读更多 -