markdown.js,markdown(python环境),axios,ajax,sse,websocket和fastapi,fetch

合集 - AI (7)

1.AI绘画常用prompt2024-07-072.大模型api实战-open.bigmodel.cn2024-09-073.大模型API实战-console.bce.baidu.com/qianfan/2024-09-074.大模型API与前端的结合使用2024-09-125.大模型API的响应内容（markdown语法）在Html中显示2024-09-126.大模型API的响应内容（markdown语法）在Html中显示实例2024-09-13

7.markdown.js,markdown(python环境),axios,ajax,sse,websocket和fastapi,fetch2024-09-22

收起

详细讲解markdown.js,markdown(python环境),axios,ajax和sse,websocket的功能、使用场景和典型用法示例。

1. marked.js

功能:
marked.js 是一个用于将 Markdown 文本转换为 HTML 的 JavaScript 库。

使用场景:

• 在浏览器中实时渲染 Markdown 内容
• 在 JavaScript 应用程序中处理 Markdown 文本

典型用法示例:

// 引入 marked.js
<script src="https://cdn.jsdelivr.net/npm/marked/marked.min.js"></script>

// 使用 marked 函数转换 Markdown 为 HTML
const markdown = "# Hello\n\nThis is **bold** text.";
const html = marked(markdown);
document.getElementById('content').innerHTML = html;

这个示例演示了如何将一段简单的Markdown文本转换为HTML并插入到页面中。这对于需要在网页上动态显示格式化文本的应用非常有用。

2. markdown (Python 环境)

功能:
Python 的 markdown 库用于将 Markdown 文本转换为 HTML。

使用场景:

• 在 Python 后端应用中处理 Markdown 内容
• 生成静态网站或博客

典型用法示例:

import markdown

# 转换 Markdown 为 HTML
md_text = "# Hello\n\nThis is **bold** text."
html = markdown.markdown(md_text)
print(html)

这个示例展示了如何使用Python的markdown库将Markdown文本转换为HTML。这在需要在服务器端处理Markdown的场景中非常有用,比如构建一个博客系统或文档生成工具。

3. axios

功能:
axios 是一个基于 Promise 的 HTTP 客户端,用于浏览器和 Node.js 环境。

使用场景:

• 从浏览器发送 AJAX 请求
• 在 Node.js 中发送 HTTP 请求

典型用法示例:

// 引入 axios
<script src="https://unpkg.com/axios/dist/axios.min.js"></script>

// 发送 GET 请求
axios.get('/api/data')
  .then(function (response) {
    console.log(response.data);
  })
  .catch(function (error) {
    console.log(error);
  });

// 发送 POST 请求
axios.post('/api/submit', {
    name: 'John',
    age: 30
  })
  .then(function (response) {
    console.log(response.data);
  })
  .catch(function (error) {
    console.log(error);
  });

示例中展示了如何使用axios发送GET和POST请求。这在现代web应用中非常常见,比如获取用户数据、提交表单、或与后端API交互。axios的Promise-based API使得处理异步操作变得更加简单。
4. AJAX

功能:
AJAX (Asynchronous JavaScript and XML) 是一种使用现有web标准的技术,用于在不重新加载整个网页的情况下更新部分网页内容。

使用场景:

• 动态加载内容
• 表单提交而不刷新页面
• 自动完成和实时搜索

典型用法示例:

// 创建 XMLHttpRequest 对象
var xhr = new XMLHttpRequest();

// 配置请求
xhr.open('GET', '/api/data', true);

// 处理响应
xhr.onload = function() {
  if (xhr.status === 200) {
    console.log(xhr.responseText);
  } else {
    console.error('Request failed. Status:', xhr.status);
  }
};

// 发送请求
xhr.send();

这个示例展示了如何使用XMLHttpRequest对象发送GET请求。虽然现代应用更倾向于使用fetch或axios,但了解原生AJAX的工作原理对于理解Web开发的基础概念很有帮助。

5. SSE (Server-Sent Events)

功能:
SSE 允许服务器向客户端推送实时更新。

使用场景:

• 实时通知
• 股票价格更新
• 社交媒体feed实时更新

典型用法示例:

// 客户端代码
var eventSource = new EventSource('/events');

eventSource.onmessage = function(event) {
  console.log('New message:', event.data);
};

eventSource.onerror = function(error) {
  console.error('EventSource failed:', error);
};

# 服务器端代码 (使用 Flask)
from flask import Flask, Response

app = Flask(__name__)

@app.route('/events')
def events():
    def event_stream():
        while True:
            yield "data: The server time is: {}\n\n".format(time.time())
            time.sleep(1)

    return Response(event_stream(), content_type='text/event-stream')

客户端示例展示了如何建立SSE连接并处理接收到的消息。服务器端示例(使用Flask)展示了如何创建一个事件流,定期向客户端发送当前时间。这种技术适用于需要服务器主动推送数据但不需要客户端发送数据的场景。
6. WebSocket

功能:
WebSocket 提供了全双工、双向的通信通道,可在客户端和服务器之间建立持久连接。

使用场景:

• 实时多人游戏
• 协作编辑工具
• 实时聊天应用

典型用法示例:

// 客户端代码
var socket = new WebSocket('ws://example.com/socket');

socket.onopen = function(event) {
  console.log('WebSocket is open now.');
};

socket.onmessage = function(event) {
  console.log('Message from server:', event.data);
};

socket.onclose = function(event) {
  console.log('WebSocket is closed now.');
};

// 发送消息到服务器
socket.send('Hello, server!');

# 服务器端代码 (使用 Python websockets 库)
import asyncio
import websockets

async def echo(websocket, path):
    async for message in websocket:
        await websocket.send(f"Echo: {message}")

start_server = websockets.serve(echo, "localhost", 8765)

asyncio.get_event_loop().run_until_complete(start_server)
asyncio.get_event_loop().run_forever()

客户端示例展示了如何建立WebSocket连接,发送消息,以及处理接收到的消息。服务器端示例(使用Python websockets库)展示了如何创建一个简单的echo服务器,它会将接收到的任何消息发送回客户端。WebSocket适用于需要频繁、低延迟、双向通信的应用场景。
这些技术各有特点和适用场景。marked.js 和 Python 的 markdown 库主要用于 Markdown 处理；axios 和 AJAX 用于客户端发起 HTTP 请求；SSE 用于服务器向客户端推送数据；WebSocket 则提供了双向实时通信的能力。根据具体的应用需求,您可以选择最合适的技术来使用。

FastAPI和Fetch的功能、使用场景和典型用法示例

1. FastAPI

功能:
FastAPI 是一个现代、快速（高性能）的 Web 框架，用于构建 API，基于 Python 3.6+ 的标准类型提示。

使用场景:

• 构建高性能的 RESTful API
• 创建微服务架构
• 开发需要自动文档的 API 项目
• 构建实时应用（借助 WebSocket 支持）

典型用法示例:

from fastapi import FastAPI
from pydantic import BaseModel

app = FastAPI()

class Item(BaseModel):
    name: str
    price: float
    is_offer: bool = None

@app.get("/")
def read_root():
    return {"Hello": "World"}

@app.get("/items/{item_id}")
def read_item(item_id: int, q: str = None):
    return {"item_id": item_id, "q": q}

@app.put("/items/{item_id}")
def update_item(item_id: int, item: Item):
    return {"item_name": item.name, "item_id": item_id}

# 运行命令: uvicorn main:app --reload

这个示例展示了 FastAPI 的基本用法：

1. 创建应用实例
2. 定义数据模型（使用 Pydantic）
3. 创建路由处理函数（包括 GET 和 PUT 方法）
4. 使用路径参数和查询参数
5. 使用请求体

用途和作用:

• 快速构建 API：FastAPI 允许您快速编写高性能的 API。
• 自动文档：FastAPI 自动生成交互式 API 文档（Swagger UI）。
• 数据验证：使用 Pydantic 模型进行自动请求和响应验证。
• 类型检查：利用 Python 的类型提示进行静态类型检查。
• 异步支持：可以轻松编写异步代码。

2. Fetch API

功能:
Fetch 是现代浏览器提供的用于发起网络请求的接口，它返回 Promise 对象。

使用场景:

• 从服务器获取数据
• 提交表单数据
• 文件上传
• 实现 AJAX 功能
• 与 RESTful API 交互

典型用法示例:

// 基本的 GET 请求
fetch('https://api.example.com/data')
  .then(response => response.json())
  .then(data => console.log(data))
  .catch(error => console.error('Error:', error));

// POST 请求
fetch('https://api.example.com/submit', {
  method: 'POST',
  headers: {
    'Content-Type': 'application/json',
  },
  body: JSON.stringify({
    name: 'John Doe',
    age: 30
  })
})
.then(response => response.json())
.then(data => console.log(data))
.catch(error => console.error('Error:', error));

// 使用 async/await
async function fetchData() {
  try {
    const response = await fetch('https://api.example.com/data');
    const data = await response.json();
    console.log(data);
  } catch (error) {
    console.error('Error:', error);
  }
}

fetchData();

这个示例展示了 Fetch API 的几种常见用法：

1. 基本的 GET 请求
2. POST 请求，包括设置请求头和发送 JSON 数据
3. 使用 async/await 语法的异步请求

用途和作用:

• 简化 AJAX：Fetch API 提供了比传统 XMLHttpRequest 更简洁、更强大的 API。
• Promise 支持：返回 Promise，使得链式操作和错误处理更加方便。
• JSON 处理：内置方法便于处理 JSON 数据。
• 灵活性：可以轻松配置请求方法、头部、body 等。
• 跨域请求：支持跨域资源共享（CORS）。
• 流操作：支持流式操作，适用于大文件传输。

总结:
FastAPI 和 Fetch API 都是现代 Web 开发中的重要工具：

• FastAPI 用于后端开发，帮助开发者快速构建高性能、易于文档化的 API。
• Fetch API 用于前端开发，提供了一种现代化的方式来进行网络请求，替代了旧的 XMLHttpRequest。

这两种技术经常配合使用：FastAPI 用于创建后端 API，而 Fetch 用于在前端应用中调用这些 API。理解和掌握这两种技术可以帮助开发者构建全栈 Web 应用，实现前后端的高效交互。