分类前端技术下的文章

2024-08-17

UnoCSS 是一个更快更轻的现代 CSS 框架，它提供了更多的自定义和更少的样板代码。以下是如何在 Vue 3 项目中使用 UnoCSS 的步骤和示例代码：

安装 UnoCSS 和 Windi CSS：




npm install @unocss/core @unocss/preset-windicss unocss --save

在项目中创建一个 uno.config.ts 文件来配置 UnoCSS：




// uno.config.ts
import { defineConfig } from 'unocss'
import { presetWind } from '@unocss/preset-windicss'
 
export default defineConfig({
  presets: [
    presetWind(),
  ],
})

在 Vue 3 项目中设置 UnoCSS：




// main.js
import { createApp } from 'vue'
import App from './App.vue'
import UnoCSS from 'unocss/vite'
 
const app = createApp(App)
 
app.use(UnoCSS())
 
app.mount('#app')

在组件中使用 UnoCSS 指令：




<template>
  <div v-uno="'text-center text-blue-500'">
    Hello UnoCSS!
  </div>
</template>

以上代码演示了如何在 Vue 3 项目中引入和配置 UnoCSS，并在组件模板中使用它来应用样式。UnoCSS 使用类似 Tailwind CSS 的实用性原则，通过指令直接在模板中声明样式，减少了样式的冗余和提高了项目的性能。

- 阅读更多 -

React升级umi3步骤

System

2024-08-17

所有,typescript

在将现有的React项目升级到umi 3的过程中，请遵循以下步骤：

确保你的Node.js版本至少是10.13，并且使用的是npm 6以上版本。

升级现有的umi版本到umi 3。




npm install @umijs/core @umijs/preset-react umi-plugin-react --save

升级其他依赖项。




npm install react react-dom @umijs/preset-built-in --save

更新package.json中的scripts部分。




"scripts": {
  "start": "umi dev",
  "build": "umi build",
  "test": "umi test"
}

更新配置文件.umirc.ts或config/config.ts以适应umi 3的配置方式。
修改src目录下的入口文件App.tsx和index.tsx以适应umi 3的新的路由和插件系统。
如果项目中使用了自定义的插件或者对umi的默认行为进行了覆盖，需要根据umi 3的插件系统进行相应的更新。
运行测试，确保升级后的应用程序按预期工作。

注意：在实际升级过程中，可能还需要处理其他的兼容性问题，可以参考umi官方文档或者社区的升级指导来获取更详细的指导。

- 阅读更多 -

js页面实现打印 iframe + window.print()

System

2024-08-17

所有,javascript

要使用JavaScript打印包含iframe内容的网页，您可以先将iframe的内容装载到一个新窗口，然后调用新窗口的print()方法。以下是实现这一功能的示例代码：




function printIframe() {
  var iframe = document.getElementById('myIframe').contentWindow;
  var printWindow = window.open('', '_blank');
  printWindow.document.open();
  printWindow.document.write('<html><head><title>Print</title>');
  printWindow.document.write('</head><body>');
  printWindow.document.write(iframe.document.body.innerHTML);
  printWindow.document.write('</body></html>');
  printWindow.document.close();
  printWindow.onload = function() {
    printWindow.print();
    printWindow.close();
  };
}

在HTML中，您需要有一个用于装载内容的iframe和一个按钮或其他触发事件的元素来调用printIframe函数：




<iframe id="myIframe" src="your_content_page.html" style="display:none;"></iframe>
<button onclick="printIframe()">Print iframe content</button>

请确保iframe的src属性指向您想要打印的页面地址。当用户点击按钮时，printIframe函数将被调用，iframe的内容将被加载到一个新窗口并执行打印。

System

2024-08-17

所有,html5




// 定义模块
define(['angular', 'angular-route'], function (angular) {
    'use strict';
 
    // 创建并配置模块
    var app = angular.module('app', ['ngRoute']);
 
    // 配置路由
    app.config(['$routeProvider', function ($routeProvider) {
        $routeProvider
            .when('/', {
                templateUrl: 'views/home.html',
                controller: 'HomeCtrl'
            })
            .when('/about', {
                templateUrl: 'views/about.html',
                controller: 'AboutCtrl'
            })
            .otherwise({
                redirectTo: '/'
            });
    }]);
 
    // 定义控制器
    app.controller('HomeCtrl', ['$scope', function ($scope) {
        $scope.message = 'Welcome to the home page';
    }]);
 
    app.controller('AboutCtrl', ['$scope', function ($scope) {
        $scope.message = 'Welcome to the about page';
    }]);
 
    // 返回模块
    return app;
});

这段代码使用了RequireJS来管理AngularJS模块的依赖和代码加载，同时也展示了如何使用ngRoute服务来配置AngularJS的路由。这是一个典型的单页面应用程序的架构，适合用于构建中大型的Web应用。

- 阅读更多 -

TypeScript基础系列NPM配置

System

2024-08-17

所有,typescript

在TypeScript项目中配置NPM脚本以编译和运行代码，可以在package.json文件中进行设置。以下是一个简单的配置示例：




{
  "name": "your-typescript-project",
  "version": "1.0.0",
  "scripts": {
    "build": "tsc",
    "watch": "tsc --watch",
    "start": "node ./dist/index.js"
  },
  "devDependencies": {
    "typescript": "^4.0.0"
  }
}

在这个配置中：

"build": "tsc" 定义了一个名为build的脚本，用于运行TypeScript编译器进行一次性编译。
"watch": "tsc --watch" 定义了一个名为watch的脚本，用于启动TypeScript编译器的监视模式，自动在检测到文件变化时重新编译。
"start": "node ./dist/index.js" 定义了一个名为start的脚本，用于直接运行编译后的JavaScript文件。

确保您已经安装了TypeScript，通过运行npm install typescript --save-dev来作为开发依赖安装。

要运行build脚本，可以使用命令npm run build。要启动监视模式，可以使用npm run watch。要运行编译后的JavaScript代码，可以使用npm start。

- 阅读更多 -

ECharts-html 实训

System

2024-08-17

所有,html

在ECharts中创建一个简单的饼图，可以参考以下代码：




<!DOCTYPE html>
<html style="height: 100%">
<head>
    <meta charset="utf-8">
</head>
<body style="height: 100%; margin: 0">
    <div id="container" style="height: 100%"></div>
    <script src="https://cdn.bootcdn.net/ajax/libs/echarts/5.3.3/echarts.min.js"></script>
    <script type="text/javascript">
        var myChart = echarts.init(document.getElementById('container'));
 
        var option = {
            series: [
                {
                    name: '访问来源',
                    type: 'pie',
                    radius: '55%',
                    data: [
                        {value: 235, name: '视频广告'},
                        {value: 274, name: '联盟广告'},
                        {value: 310, name: '邮件营销'},
                        {value: 335, name: '直接访问'},
                        {value: 400, name: '搜索引擎'}
                    ],
                    emphasis: {
                        itemStyle: {
                            shadowBlur: 10,
                            shadowOffsetX: 0,
                            shadowColor: 'rgba(0, 0, 0, 0.5)'
                        }
                    }
                }
            ]
        };
 
        myChart.setOption(option);
    </script>
</body>
</html>

这段代码创建了一个简单的饼图，展示了不同来源的访问量。在实际应用中，您可以根据自己的数据结构来修改 data 部分的内容。

- 阅读更多 -

Http请求响应 Ajax 过滤器

System

2024-08-17

所有,ajax

在JavaScript中，可以使用Ajax的beforeSend函数来设置请求的前置处理，类似于Asp.Net Core中的Filter。以下是一个简单的示例，展示了如何在发送Ajax请求前，使用beforeSend函数来修改请求头部：




$.ajax({
    url: 'your-endpoint',
    type: 'GET', // or 'POST'
    beforeSend: function (xhr) {
        // 设置自定义请求头
        xhr.setRequestHeader('X-Custom-Header', 'custom-value');
    },
    success: function (data) {
        // 请求成功后的处理
        console.log('Data received:', data);
    },
    error: function (error) {
        // 请求失败后的处理
        console.error('Error:', error);
    }
});

在这个例子中，我们使用beforeSend函数来给请求添加一个自定义的头部。这就类似于Asp.Net Core中的添加Filter来修改请求或响应。

如果你想要在Ajax请求中添加全局的beforeSend处理，可以考虑使用$.ajaxSetup：




$.ajaxSetup({
    beforeSend: function (xhr) {
        // 添加全局的自定义请求头
        xhr.setRequestHeader('X-Global-Header', 'global-value');
    }
});
 
// 然后正常发送你的Ajax请求，它们将自动应用这个全局的beforeSend处理
$.ajax({
    url: 'your-endpoint',
    type: 'GET',
    success: function (data) {
        console.log('Data received:', data);
    },
    error: function (error) {
        console.error('Error:', error);
    }
});

在这个例子中，我们使用ajaxSetup来设置全局的beforeSend函数，这样任何后续的Ajax请求都会自动应用这个处理。这就像是定义了一个全局的请求拦截器（Filter）。

- 阅读更多 -

CSS border边框（理解网页边框制作）

System

2024-08-17

所有,css

CSS中的border属性用于设置元素的边框样式、宽度和颜色。

基本语法：




border: border-width border-style border-color;

border-width 定义边框的宽度，可以使用像素或其他CSS单位。
border-style 定义边框的样式，常用的样式包括 solid、dotted、dashed 等。
border-color 定义边框的颜色，可以使用颜色名、十六进制颜色码或 rgb() 表达式。

实例代码：




div {
  border: 2px solid blue; /* 定义一个2像素宽、实线、蓝色的边框 */
}

HTML中使用：




<div>我有边框</div>

你可以单独设置边框的每一面，例如 border-top、border-right、border-bottom 和 border-left。

实例代码：




div {
  border-top: 2px solid red;    /* 上边框为红色 */
  border-right: 3px dotted green; /* 右边框为点状，绿色 */
  border-bottom: 4px dashed blue;  /* 下边框为虚线，蓝色 */
  border-left: 5px solid black;   /* 左边框为实线，黑色 */
}

HTML中使用：




<div>
  上边框
  右边框
  下边框
  左边框
</div>

以上代码展示了如何使用CSS为元素添加边框，并可以单独设置每一边的边框样式。

- 阅读更多 -

创建json数组与json数组渲染到HTML

System

2024-08-17

所有,jquery

创建JSON数组并将其渲染到HTML的基本步骤如下：

创建一个JSON数组。
使用JavaScript遍历JSON数组。
使用DOM操作将数据插入到HTML中。

示例代码：




<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>JSON Array Rendering</title>
</head>
<body>
 
<div id="json-container"></div>
 
<script>
// 创建JSON数组
var jsonArray = [
    { "name": "Alice", "age": 25 },
    { "name": "Bob", "age": 30 },
    { "name": "Charlie", "age": 22 }
];
 
// 获取要插入数据的容器
var container = document.getElementById('json-container');
 
// 遍历JSON数组并创建列表项
jsonArray.forEach(function(item) {
    var listItem = document.createElement('li');
    listItem.textContent = 'Name: ' + item.name + ', Age: ' + item.age;
    container.appendChild(listItem);
});
</script>
 
</body>
</html>

在这个例子中，我们创建了一个包含三个对象的JSON数组。然后使用forEach方法遍历数组，并为每个对象创建一个新的li元素，将对象的数据作为文本内容插入到这个元素中，最后将这个元素添加到页面上的<div>容器中。

- 阅读更多 -

数据结构系列之链表，熬夜整理最全面的HTML字符实体

System

2024-08-17

所有,html

在计算机科学中，链表是一种常见的数据结构，它由节点组成，每个节点包含数据和一个指向下一个节点的引用/指针。链表可以是单向的，双向的，循环的或非循环的。

以下是创建和操作链表的一些常见方法：

创建节点：




class Node:
    def __init__(self, data):
        self.data = data
        self.next = None

在链表中插入节点：




def append(self, new_data):
    new_node = Node(new_data)
    if self.head is None:
        self.head = new_node
        return
    last_node = self.head
    while last_node.next is not None:
        last_node = last_node.next
    last_node.next = new_node

打印链表：




def printList(self):
    temp = self.head
    while temp:
        print(temp.data, end=' ')
        temp = temp.next

删除节点：




def deleteNode(self, key):
    temp = self.head
    if (temp is not None):
        if (temp.data == key):
            self.head = temp.next
            temp = None
            return
    while (temp.data != key):
        if (temp.next is None):
            return
        prev = temp
        temp = temp.next
    prev.next = temp.next
    temp = None

在特定位置插入节点：




def insertAfter(self, prev_node, new_data):
    if prev_node is None:
        print("The given previous node cannot be null")
        return
    new_node = Node(new_data)
    new_node.next = prev_node.next
    prev_node.next = new_node

以上就是链表的一些基本操作，链表是非常重要的数据结构，它可以高效地支持数据的插入和删除操作。

注意：以上代码示例均为Python语言，链表操作的具体实现会根据不同的编程语言有所差异，但基本的思想是一致的。

- 阅读更多 -