标签 Javascript 下的文章

2024-08-12

跨域问题是浏览器出于安全考虑实施的同源策略限制导致的。为了解决跨域问题，可以使用以下方法：

JSONP：只支持GET请求，不支持POST等其他类型的HTTP请求。
CORS：服务器需要设置相应的CORS头部，如Access-Control-Allow-Origin。
代理服务器：在服务器端设置代理，将请求发送到目标服务器，然后将响应返回给前端。
在服务器端设置HTTP重定向：通过服务器重定向到目标服务器，然后再返回结果。
使用HTML5的window.postMessage方法。
使用服务器作为中介，前端发送请求到同源的服务器，再由服务器请求目标服务器并返回数据。

以下是CORS的设置示例（以Node.js的Express为例）：




app.use((req, res, next) => {
  res.header('Access-Control-Allow-Origin', '*'); // 允许任何源
  res.header('Access-Control-Allow-Methods', 'GET, POST, OPTIONS'); // 允许的HTTP方法
  res.header('Access-Control-Allow-Headers', 'Origin, X-Requested-With, Content-Type, Accept'); // 允许的头部
  next();
});

以上代码允许任何源的跨域请求，并且只允许GET、POST和OPTIONS方法，以及一些标准的头部。根据实际需求，可以将Access-Control-Allow-Origin设置为特定的源，以增强安全性。

- 阅读更多 -

AJAX,Axios,JSON简单了解

System

2024-08-12

所有,ajax

AJAX, Axios 和 JSON 都是与网络请求和数据处理有关的技术。

AJAX (Asynchronous JavaScript and XML):

AJAX 是一种在无需重新加载整个网页的情况下，与服务器交换数据的技术。它可以使网页实现异步更新。

JavaScript 通过创建一个 XMLHttpRequest 对象来发起 AJAX 请求。




var xhr = new XMLHttpRequest();
xhr.open("GET", "url", true);
xhr.onreadystatechange = function () {
  if (xhr.readyState == 4 && xhr.status == 200) {
    console.log(xhr.responseText);
  }
};
xhr.send();

Axios:

Axios 是一个基于 promise 的 HTTP 库，它在浏览器和 node.js 中都可以使用。

Axios 发送 GET 请求的例子：




axios.get('url')
  .then(function (response) {
    console.log(response.data);
  })
  .catch(function (error) {
    console.log(error);
  });

JSON:

JSON 是一种轻量级的数据交换格式，易于阅读和编写，同时也易于机器解析和生成。

JSON 的示例：




{
  "name": "John",
  "age": 30,
  "city": "New York"
}

在 JavaScript 中解析 JSON 的例子：




var obj = JSON.parse('{"name":"John", "age":30, "city":"New York"}');
console.log(obj.name); // John

以上就是 AJAX, Axios, JSON 的简单了解和使用示例。

- 阅读更多 -

【node.js】fspathhttp模块的使用 02

System

2024-08-12

所有,ajax




const { readFile } = require('fs').promises;
const { createServer } = require('http');
const { resolve } = require('path');
 
const server = createServer(async (req, res) => {
  try {
    const filePath = resolve(__dirname, '..', 'public', req.url);
    const data = await readFile(filePath);
    res.end(data);
  } catch (error) {
    res.statusCode = 500;
    res.end('Server Error');
  }
});
 
const PORT = 3000;
server.listen(PORT, () => {
  console.log(`Server is running on http://localhost:${PORT}`);
});

这段代码使用了fs.promises模块来异步读取文件，并使用http模块创建了一个简单的静态文件服务器。它还包含了错误处理，以便在文件不存在或者其他服务器错误发生时返回500响应。这个示例展示了如何将Node.js的两个核心模块fs和http结合使用，为开发者提供了一个简单的学习和理解基础服务器构建的例子。

- 阅读更多 -

探索异步交互：JavaScript AJAX 的全面指南

System

2024-08-12

所有,ajax

在这个示例中，我们将使用JavaScript的fetch函数来替换XMLHttpRequest，这是现代浏览器中更现代、更简洁的AJAX实现方式。




// 使用fetch发送GET请求
fetch('https://api.example.com/data', { method: 'GET' })
  .then(response => {
    if (response.ok) {
      return response.json(); // 解析JSON响应
    }
    throw new Error('Network response was not ok.');
  })
  .then(data => {
    console.log('Request succeeded with JSON response:', data);
  })
  .catch(error => {
    console.error('Request failed:', error);
  });
 
// 使用fetch发送POST请求
fetch('https://api.example.com/data', {
  method: 'POST',
  headers: {
    'Content-Type': 'application/json',
  },
  body: JSON.stringify({ key: 'value' }), // 发送JSON数据
})
.then(response => {
  if (response.ok) {
    return response.json(); // 解析JSON响应
  }
  throw new Error('Network response was not ok.');
})
.then(data => {
  console.log('Post succeeded with JSON response:', data);
})
.catch(error => {
  console.error('Post failed:', error);
});

在这个示例中，我们使用了fetch函数来发送异步HTTP请求。这是目前在浏览器中实现AJAX的推荐方式，因为它使用了JavaScript的Promise对象，使得异步代码更加简洁和易读。同时，它也支持请求cancellation、timeout以及异步的I/O操作。

- 阅读更多 -

＊Django中的Ajax 纯js的书写样式1

System

2024-08-12

所有,ajax

在Django中使用Ajax进行前后端的数据交互，可以使用JavaScript编写。以下是一个简单的例子，展示了如何使用JavaScript和Django后端进行异步通信。

首先，你需要一个HTML模板，其中包含用于发送Ajax请求的JavaScript代码。




<!-- your_template.html -->
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Ajax Example</title>
    <script>
        function sendAjaxRequest() {
            var xhr = new XMLHttpRequest();
            xhr.open('GET', '/your-view-url/', true);
            xhr.onload = function() {
                if (this.status == 200) {
                    // 请求成功
                    console.log(this.responseText);
                    // 处理返回的数据，比如更新DOM
                }
            };
            xhr.send();
        }
    </script>
</head>
<body>
    <button onclick="sendAjaxRequest()">Send Ajax Request</button>
</body>
</html>

在Django的views.py文件中，你需要定义一个视图来处理Ajax请求并返回响应。




# views.py
from django.http import JsonResponse
from django.views.decorators.http import require_GET
 
@require_GET
def your_view(request):
    # 处理请求，比如数据库查询等
    response_data = {'key': 'value'}  # 准备返回的数据
    return JsonResponse(response_data)

最后，你需要在urls.py中添加一个URL模式，以便将上述视图映射到Ajax请求的URL上。




# urls.py
from django.urls import path
from .views import your_view
 
urlpatterns = [
    path('your-view-url/', your_view, name='your_view'),
]

这样，当用户点击按钮并触发sendAjaxRequest函数时，JavaScript会发送一个Ajax GET请求到Django后端的your_view视图。视图处理完请求后，会返回JSON格式的响应，JavaScript接收到响应后，可以在控制台中打印出响应内容或者更新DOM。

- 阅读更多 -

js计算百分比

System

2024-08-12

所有,javascript

要在JavaScript中计算百分比，你需要知道基数（numerator）和分母（denominator）。以下是一个简单的函数，它接受两个参数并返回百分比的字符串形式：




function calculatePercentage(numerator, denominator) {
  if (denominator === 0 || isNaN(numerator) || isNaN(denominator)) {
    return '无效的输入';
  }
  return (numerator / denominator * 100).toFixed(2) + '%';
}
 
// 示例
let percent = calculatePercentage(10, 20); // 返回 '50.00%'

这个函数检查分母是否为零或者输入是否为非数字，以避免除以零的错误。如果输入有效，它将计算百分比，并使用toFixed(2)将结果格式化为两位小数。

- 阅读更多 -

前端 JS 异常那些事

System

2024-08-12

所有,javascript

前端JavaScript异常处理主要涉及以下几个方面：

捕获异常：使用try...catch语句捕获可能发生的异常。
处理Promise异常：使用.catch()处理Promise中的异常。
全局异常处理：监听window.onerror进行全局异常处理。
异常报告：将捕获的异常信息发送到服务器以便追踪和分析。

示例代码：




// 捕获同步代码异常
try {
    // 可能会抛出异常的代码
    let result = 1 / 0;
} catch (error) {
    console.error('捕获到异常：', error);
}
 
// 捕获异步代码异常（Promise）
new Promise((resolve, reject) => {
    // 可能会抛出异常的代码
    let result = 1 / 0;
    resolve(result);
}).catch(error => {
    console.error('捕获到异常：', error);
});
 
// 全局异常处理
window.onerror = function(message, source, lineno, colno, error) {
    console.error('捕获到全局异常：', {
        message, source, lineno, colno, error
    });
    // 这里可以添加异常上报的代码
};
 
// 异常报告示例（需要一个异常上报的函数）
function reportError(error) {
    // 发送异常信息到服务器的代码
    console.log('异常已报告：', error);
}
 
// 监听未捕获的Promise异常
window.addEventListener('unhandledrejection', event => {
    event.preventDefault();
    reportError({ reason: event.reason });
});

在实际应用中，你可能需要结合日志系统、错误跟踪服务（如Sentry）来完善异常处理流程。

- 阅读更多 -

掌握Next.js：构建高效React应用的指南

System

2024-08-12

所有,javascript

在Next.js中创建一个带有路由的页面，你需要执行以下步骤：

安装Next.js（如果尚未安装）：




npm install next react react-dom

创建一个pages目录。
在pages目录中，创建一个新的文件，命名为about.js：




function About() {
  return (
    <div>
      <h1>关于我们</h1>
      <p>这是关于我们页面的内容。</p>
    </div>
  );
}
 
export default About;

运行Next.js开发服务器：




npx next dev

在浏览器中访问http://localhost:3000/about，你将看到新创建的页面。

以上步骤简要展示了如何在Next.js中创建一个新页面。Next.js使用文件系统作为路由，pages目录中的每个文件都会自动生成对应的路由。在实际开发中，你可以添加更多的React组件和逻辑，以及自定义CSS样式来完善页面设计。

- 阅读更多 -

vue.config.js中打包相关配置

System

2024-08-12

所有,javascript

在vue.config.js中，可以配置很多与打包相关的选项。以下是一些常见的配置示例：




module.exports = {
  // 基本路径
  publicPath: process.env.NODE_ENV === 'production' ? '/production-sub-path/' : '/',
 
  // 输出文件目录
  outputDir: 'dist',
 
  // 静态资源目录 (js, css, img, fonts)
  assetsDir: 'assets',
 
  // 生产环境是否生成 sourceMap 文件
  productionSourceMap: false,
 
  // CSS 相关选项
  css: {
    // 是否使用css分离插件 ExtractTextPlugin
    extract: true,
    // 开启 CSS source maps?
    sourceMap: false
  },
 
  // 开发服务器设置
  devServer: {
    open: true,
    host: 'localhost',
    port: 8080,
    https: false,
    hotOnly: false,
    proxy: null, // string | Object
    before: app => {}
  },
 
  // 插件选项
  pluginOptions: {
    // ...
  },
 
  // configureWebpack 或 chainWebpack 调整内部webpack配置
  configureWebpack: config => {
    if (process.env.NODE_ENV === 'production') {
      // 生产环境的配置
      config.plugins.push(new MyPlugin());
    } else {
      // 开发环境的配置
    }
  },
  chainWebpack: config => {
    config.plugin('html').tap(args => {
      if (process.env.NODE_ENV === 'production') {
        // 修改args[0]的属性来影响htmlWebpackPlugin
      }
      return args;
    });
  }
};

这些配置可以根据你的项目需求进行调整。例如，你可能需要更改publicPath来指定你的应用在生产环境中的基本URL，或者调整outputDir来改变构建文件的输出目录。对于更高级的配置，你可以使用configureWebpack或chainWebpack来直接修改webpack配置。

- 阅读更多 -

UI自动化定位元素之js操作

System

2024-08-12

所有,javascript




// 假设已经有一个页面对象page，以及相应的元素定位方法getByText
 
// 使用page对象的getByText方法定位到元素
const button = page.getByText('登录');
 
// 使用page.evaluate来执行JavaScript代码
// 这里的callback是在浏览器环境中执行的函数，可以直接操作DOM
await page.evaluate((btn, key) => {
  // 假设按钮是一个可以输入文本的输入框，这里模拟输入密码
  btn.value = key; // 将密钥值赋给输入框
}, button, 'your-password'); // 'your-password'是要输入的密码
 
// 继续其他的自动化测试步骤

这段代码展示了如何在Puppeteer中使用page.evaluate方法来执行JavaScript代码，以操作页面上的元素。首先定位到登录按钮，然后通过page.evaluate传入一个函数，在页面上下文中执行对按钮的操作，这里是输入密码。这是在UI自动化测试中常用的技术。

- 阅读更多 -