标签 Javascript 下的文章

推荐开源项目：Express.js 的 `response-time` 中间件

2024-08-17




const express = require('express');
const responseTime = require('response-time');
 
// 创建一个Express应用
const app = express();
 
// 使用response-time中间件记录响应时间
app.use(responseTime());
 
// 定义一个简单的路由
app.get('/', (req, res) => {
  // 模拟一些处理过程
  setTimeout(() => {
    res.send('Hello, World!');
  }, 1000); // 假设处理请求需要1秒钟
});
 
// 监听3000端口
app.listen(3000, () => {
  console.log('服务器运行在 http://localhost:3000/');
});

这段代码演示了如何在一个使用Express框架的Node.js应用中使用response-time中间件来记录每个HTTP响应的时间。它创建了一个简单的Express应用，添加了response-time中间件，定义了一个处理根路径请求的路由，并且监听3000端口。当访问根路径时，它会模拟一些异步处理，并在控制台显示响应时间。

- 阅读更多 -

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应用。

System

2024-08-17

所有,中间件




import express from 'express';
import { checkAccess, setup } from 'express-jwt-permissions';
 
// 假设你已经有了一个JWT密钥，并且已经设置了角色和权限
const jwtSecret = 'YOUR_JWT_SECRET';
const roles = ['user', 'admin'];
const permissions = {
  'user': {
    'read': ['articles', 'comments'],
    'create': ['comments']
  },
  'admin': {
    'read': ['articles', 'comments', 'users'],
    'create': ['articles', 'comments', 'users'],
    'update': ['articles', 'comments', 'users'],
    'delete': ['articles', 'comments', 'users']
  }
};
 
// 初始化express-jwt-permissions
setup({
  roles,
  permissions,
  jwtSecret
});
 
const app = express();
 
// 使用中间件保护路由
app.get('/api/protected', checkAccess('read', 'articles'), (req, res) => {
  res.json({ message: 'Protected route accessed' });
});
 
// 启动服务器
app.listen(3000, () => {
  console.log('Server running on port 3000');
});

这个示例代码展示了如何在Express应用中使用express-jwt-permissions来保护路由。首先，我们初始化了这个库，并通过setup函数提供了角色、权限和JWT密钥。然后，我们使用checkAccess中间件来保护一个路由，并且指定了访问该路由需要的权限。最后，我们启动了一个Express服务器，并且在控制台输出了服务运行的消息。

- 阅读更多 -

探索Kappa：Kraken.js框架的实用中间件

System

2024-08-17

所有,中间件




// 引入Kraken.js框架的必要组件
const { Kraken } = require('kraken-js');
 
// 创建一个新的Kraken实例
const app = new Kraken({
    basedir: __dirname, // 设置项目基础目录为当前目录
    // ... 其他配置项
});
 
// 使用中间件
// 假设有一个名为"middleware"的中间件目录，里面包含多个中间件脚本
app.configure('production', 'development', function(){
    // 加载所有中间件
    app.use(require('middleware/middleware1')());
    app.use(require('middleware/middleware2')());
    // ... 加载更多中间件
});
 
// 启动服务器
app.listen(process.env.PORT || 8000);
console.log('Server is running...');

这个代码示例展示了如何在Kraken.js框架中加载和使用中间件。首先，引入了Kraken.js框架必要的组件。接着，创建了一个新的Kraken实例，并设置了基础目录。然后，在配置函数中，加载了位于"middleware"目录中的所有中间件。最后，服务器启动，并且可以在指定端口监听请求。

- 阅读更多 -

【Node.js】详细记录express路由和中间件以及qs中间件的使用

System

2024-08-17

所有,中间件




const express = require('express');
const qs = require('qs');
 
// 创建Express应用
const app = express();
 
// 使用qs中的解析函数自定义query解析方式
app.use(express.urlencoded({ extended: false, parser: qs.parse }));
app.use(express.json());
 
// 定义路由
app.get('/', (req, res) => {
  res.send('Hello World!');
});
 
// 监听3000端口
app.listen(3000, () => {
  console.log('Server is running on port 3000');
});

这段代码首先引入了Express框架和qs库。创建了一个Express应用，并使用qs中的parse函数来自定义express.urlencoded中的query解析方式。然后定义了一个路由，监听3000端口。这个简单的例子展示了如何使用Express框架和qs库，并且如何在实际应用中设置和使用中间件。

System

2024-08-17

所有,中间件




// 引入 NestJS 的核心组件
import { Module, MiddlewareConsumer, NestModule } from '@nestjs/common';
import { APP_FILTER, APP_GUARD, APP_INTERCEPTOR } from '@nestjs/core';
 
// 引入自定义的中间件
import { MyMiddleware } from './middleware/my.middleware';
 
// 引入拦截器、守卫、过滤器等组件
import { MyInterceptor } from './interceptor/my.interceptor';
import { MyGuard } from './guard/my.guard';
import { MyExceptionFilter } from './filter/my-exception.filter';
 
@Module({
  // 配置模块需要注入的提供者（如果有的话）
})
export class AppModule implements NestModule {
  // 配置中间件，并为每个中间件指定相应的处理函数
  configure(consumer: MiddlewareConsumer) {
    consumer
      .apply(MyMiddleware) // 应用自定义中间件
      .forRoutes('*'); // 对所有路由有效
  }
}
 
// 使用模块的提供者来配置全局拦截器、守卫和过滤器
export const appProviders = [
  {
    provide: APP_INTERCEPTOR,
    useValue: new MyInterceptor(),
  },
  {
    provide: APP_GUARD,
    useClass: MyGuard,
  },
  {
    provide: APP_FILTER,
    useClass: MyExceptionFilter,
  },
];

这段代码展示了如何在NestJS框架中定义一个简单的中间件，并展示了如何在AppModule中配置它。同时，代码还演示了如何配置全局拦截器、守卫和过滤器，这些是AOP编程中常用的技术。

- 阅读更多 -

Koa.js 入门手册：洋葱模型插件机制详解以及常用中间件

System

2024-08-17

所有,中间件




const Koa = require('koa');
const app = new Koa();
 
// 使用中间件
app.use(async (ctx, next) => {
  console.log('处理请求前');
  await next(); // 调用下一个中间件
  console.log('处理请求后');
});
 
// 响应请求
app.use(async ctx => {
  ctx.body = 'Hello Koa!';
});
 
app.listen(3000);
console.log('服务器运行在 http://localhost:3000/');

这段代码演示了如何使用Koa.js创建一个简单的Web服务器，并且使用了洋葱模型的中间件机制。在每个中间件内部，使用console.log打印出请求的处理情况。最后，通过app.listen启动服务器，并监听3000端口。这是学习Koa.js的一个基本入门示例。

- 阅读更多 -

NestJS入门6：日志中间件

System

2024-08-17

所有,中间件




import { Injectable, NestMiddleware } from '@nestjs/common';
import { Request, Response, NextFunction } from 'express';
 
@Injectable()
export class LogMiddleware implements NestMiddleware {
  use(req: Request, res: Response, next: NextFunction): void {
    console.log(`Request URL: ${req.url}`);
    next(); // 继续执行后续中间件或路由处理器
  }
}

这段代码定义了一个日志中间件，它会在控制台打印出每个请求的URL。在NestJS中，中间件是通过@Injectable()装饰器注解的服务。实现NestMiddleware接口的use方法来处理请求-响应周期中的特定逻辑。在use方法中，我们记录了请求的URL，并调用了next()来继续执行后续的中间件或路由处理器。这是一个很基础的日志中间件示例，但在实际应用中可以根据需要记录更多信息。

- 阅读更多 -

创建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>容器中。

- 阅读更多 -