本帖使用社区开源推广，符合推广要求。我申明并遵循社区要求的以下内容： 我的帖子已经打上 开源推广 标签： 是 我的开源项目完整开源，无未开源部分： 是 我的开源项目已链接认可 LINUX DO 社区： 是 我帖子内的项目介绍，AI生成、润色内容部分已截图发出： 是 以上选择我承诺是永久有效的，接受社区和佬友监督： 是 以下为项目介绍正文内容，AI生成、润色内容已使用截图方式发出 本文是 【AgentSeed】从零开始的Agent开发教程的第三章（上），用最简单的代码带你了解Agent相关概念，并实现自己的Agent原型机！ 教程目录 ： ​【AgentSeed】从零开始的Agent开发教程——前言 & 目录 项目主页 ： ​​【AgentSeed】从零开始的Agent开发教程 —— GitHub 目录 （点击了解更多详细信息） --- 快速开始 （点击了解更多详细信息） 下面是一个示例html代码，粘贴到浏览器中就可以看到一个简单的网页，下面章节我们会对内容进行拆解。 <!doctype html> <html lang="zh-CN"> <head> <meta charset="UTF-8" /> <meta name="viewport" content="width=device-width, initial-scale=1.0" /> <title>Welcome Page</title> <style> body { font-family: sans-serif; text-align: center; } input { padding: 8px; border: 1px solid #ccc; border-radius: 6px; } button { padding: 8px 16px; border: 0; border-radius: 6px; color: white; background: #4e9af5; cursor: pointer; } </style> </head> <body> <div> <h1 id="title">Hello World</h1> <input id="content" type="text" placeholder="输入内容" /> <button id="send-button" type="button">发送</button> </div> <script> const title = document.querySelector("#title"); const content = document.querySelector("#content"); const sendButton = document.querySelector("#send-button"); sendButton.addEventListener("click", () => { const value = content.value.trim(); if (!value) { return; } title.textContent = value.toUpperCase(); }); </script> </body> </html> 3.2 搭建网页骨架 —— HTML HTML 是一种描述网页结构的语言。例如，一个最简单的 HTML 页面是这样的： <!doctype html> <html lang="zh-CN"> <head> <meta charset="UTF-8" /> <meta name="viewport" content="width=device-width, initial-scale=1.0" /> <title>Hello World</title> </head> <body> <h1>Hello World</h1> </body> </html> 这里暂时只需要关注两个部分：head 保存页面的配置，body 保存浏览器中真正显示的内容。比如 Hello World 表示：这里有一个一级标题，标题文字是 Hello World。 将上面的代码复制到文本编辑器中，保存为 .html 文件，再用浏览器打开，就能看到一个简单的网页了。 3.3 设计网页风格 —— CSS样式 现在的页面虽然已经有了内容，但看起来还比较朴素。HTML 负责搭建结构，接下来可以用 CSS 给页面增加颜色、间距和大小等样式。 最简单的方式，是在 HTML 的 中增加一个 标签： <style> body { font-family: sans-serif; text-align: center; } input { padding: 8px; border: 1px solid #ccc; border-radius: 6px; } button { padding: 8px 16px; border: 0; border-radius: 6px; color: white; background: #4e9af5; cursor: pointer; } </style> body 表示为整个页面设置属性（例如字体/居中方式） input 选择输入框，button 选择按钮。大括号中的内容就是具体的样式规则，例如 padding 用来设置内边距，background 用来设置背景颜色，border-radius 用来设置圆角。 通过一些特殊的语法我们还能实现炫彩特效，这些都是由CSS所能做到的： CSS —— 炫彩Hello World ​ PS： 要想实现上面的炫彩特效需要额外添加下面的css代码： h1 { margin-bottom: 24px; background: linear-gradient(90deg, #ff4d6d, #ff9f1c, #2ec4b6, #4361ee, #b5179e); background-size: 300% auto; color: transparent; font-size: 56px; font-weight: 800; letter-spacing: 2px; -webkit-background-clip: text; background-clip: text; text-shadow: 0 4px 16px rgba(67, 97, 238, 0.2); animation: gradient-flow 5s linear infinite; } @keyframes gradient-flow { to { background-position: 300% center; } } 3.4 实现交互逻辑 —— JavaScript 网页除了显示内容，还可以完成一些简单交互。 现在我们在上面的基础上增加一个输入框和一个按钮： 用户输入文字并点击“发送”后，标题会被替换成这段文字的大写形式。 这部分交互逻辑由 JavaScript 完成。脚本先找到页面中的标题、输入框和按钮，然后监听按钮的点击事件： <script> const title = document.querySelector("#title"); const content = document.querySelector("#content"); const sendButton = document.querySelector("#send-button"); sendButton.addEventListener("click", () => { const value = content.value.trim(); if (!value) { return; } title.textContent = value.toUpperCase(); }); </script> 当用户点击“发送”按钮后，程序会读取输入框中的内容，并去掉首尾空格。如果输入为空，就不继续处理；如果输入不为空，就将内容转换成大写，并更新页面标题。 整个过程可以简单理解为： 点击按钮 → 读取输入 → 转换为大写 → 更新标题 。 这样我们就仅仅依靠前端就完成了一个页面的编写了，但显然这知识Web编程最简单的应用，如果涉及到更复杂的处理逻辑，例如 LLM 的调用，Agent的逻辑，我们就需要依靠后端来处理这些复杂功能了 他将上面的过程直接封装成了函数，我们只需要按照它的规范编写代码就可以实现一个Web应用，下面是一个FastAPI下的Web服务原型。 from fastapi import FastAPI app = FastAPI() # 实例化一个FastAPI应用 # 请求体：定义客户端提交的数据结构 class InputData(BaseModel): value: str @app.post("/") # 装饰器：定义一个 POST 接口 def process_data(request: InputData) -> dict[str, str]: """将输入全部大写，然后返回给客户端""" result = request.value.strip().upper() # 业务逻辑：读取并处理请求体中的数据 # 返回结果：将处理后的数据封装成字典，并返回给客户端，返回的内容也称为 "响应体" return { "result": result, } 代码解析 这里我们首先定义了客户端提交的数据结构InputData，否则服务端不知道如何处理用户请求。 然后是函数接口， FastAPI直接将三个操作（监听，处理，响应）抽象为一个实例函数。 在这里 @app.post (“/”) 是一个装饰器，它 监听 ‘/’这个路径下的 ‘post’请求,通过函数内部逻辑完成对用户信息的 处理 ，通过函数返回值完成对用户的 响应 。 然后我们在路径/下启动服务。 python -m uvicorn tutorial.web_basics.main:app -port 8000 --reload 这是启动Web服务的指令，他通过 uvicorn 启动了 tutorial/web_basics/main.py 文件中的 app 对象，并监听8000端口。 这样可以响应服务的后端程序就运行起来了，然后我们可以通过下面的方式对服务器发起请求。 import httpx httpx.post("http://127.0.0.1:8000/", json={"value": "hello world"}).json() 访问自己的服务！ 1 个帖子 - 1 位参与者 阅读完整话题

  • 情报分类：服务器与云资源
  • 分类依据：内容涉及服务器、云资源或网络线路
  • 信息来源：服务器 / LINUX DO - 最新话题
  • 发布时间：2026/9/26 19:58:10