这是一篇你真正开始前需要查阅的文章。 本文介绍了前后端工作原理，前后端搭建的流程、搭建过程中需要用到的技术以及 开发环境版本。 一、前后端如何工作 Django、Vue 和 Element UI 前后 端原理论述  作者：M&T. 2 《51 测试天地》七十四 www.51testing.com 后端开发（Django+Rest Framework+MySQL）： Django 是一个关系型数据库，用于存储后端的数据。 前端开发（Vue+Element UI）： Vue 是一种现代的 JavaScript 框架，用于构建用户界面。Vue 提供了丰富的组件和模 块，可以帮助开发者构建交互式的单页面应用（SPA）。 Element UI 是一个基于 Vue 的 UI 组件库，提供了丰富的预定义组件，用于快速搭建 美观的用户界面。 前后端交互： 后端通过 Django Rest Framework 请求向后端发送数据请求，后端根据请求进行相应的数据处理，并 返回响应数据给前端。 前端接收到后端返回的数据，并根据数据更新页面展示，实现与用户的交互。 总体而言，这种前后端分离的开发模式有助于实现前后端开发的解耦，使得各自的 开发工作更加专注和高效。前端负责用户界面的呈现和交互，后端负责数据处理和业务 逻辑，通过 API 接口进行数据传输和交互，从而实现一个完整的 Web 应用。 3 《51

为 Python Function 自动生成 Web UI 彭未康 Touch-Callable The web framework for less serious application. Touch-Callable vs (Flask, Django) • Django, Flask • 起步快且容易（getting started quick and easy） • 扩展为复杂应用（scale Touch-Callable • 起步非常快 • 非常容易 • 对新手非常友好 工作原理 导入模块 枚举函数 获取元信息 前端渲染 用户提交 类型转换 调用函数 返回结果 前端展示 3.6 例子：生成测试用户 例子：生成测试用户 例子：生成测试用户 例子：远程控制饮水机 接下来： • 支持更多的数据类型 • 类型对应的控件可配置 大胆的想法： • 直接使用 Function

Python AdminUI 使用 Python 制作专业的 Web 前端界面 本 Python 包适用于想要制作简单的前端界面，但却不想处理 HTML, CSS, React, Angular, Webpack 和其 他 Javascript 前端代码的情况。你可以直接用 Python 完成网页、表单、图标和仪表盘界面。 一些应用场景：数据项目；运维工具和脚本；简单 IT 系统和管理系统；业余项目和黑客马拉松项目。本项 系统和管理系统；业余项目和黑客马拉松项目。本项 目服务于那些只需要一个简单的界面而不需要过多自定义样式和应付大流量访问的情况。 本项目基于 Flask 和 Ant Design Pro 特性： • 轻松制作表单和详情页 • 折线图和条状图 • 多级菜单 • 带有分页的数据表 • 适配小屏幕和移动设备 • 不需要使用 HTML, CSS 或者 JS 目录 1 Python AdminUI 2 AdminApp 对象: app = AdminApp() 然后，您将页面添加到你的应用中。使用 @app.page 修饰器，后跟一个自定义函数（可以任意命名），该函 数返回一个页面元素数组，将在用户访问特定 url 时显示: @app.page('/', 'Form') def form_page(): (下页继续) 4 Chapter 1. 安装和快速入门 Python AdminUI

PyWebIO提供了一系列命令式的交互函数来在浏览器上获取用户输入和进行输 出，将浏览器变成了一个“富文本终端”，可以用于构建简单的Web应用或基于 浏览器的GUI应用。 使用PyWebIO，开发者能像编写终端脚本一样(基于input 和print进行交互)来编写应用，无需具备HTML和JS的相关知识； PyWebIO还可 以方便地整合进现有的Web服务。非常适合快速构建对UI要求不高的应用。 特性 使用同步而不 等函数输出文本、图片、表格等内容到浏览器，也可 以调用 input 、 select 、 file_upload 等函数在浏览器上显示不同表单来接收 用户的输入。此外PyWebIO中还提供了点击事件、布局等支持，让你可以使用 最少的代码完成与用户的交互， 并尽可能提供良好的用户体验。 本篇使用指南从几个方面对PyWebIO的使用进行介绍，覆盖了PyWebIO的绝大 部分特性。本文档中大部分示例代码的右上方都有一个Demo链接，点击后可 input 一样），在表单被成功提交之前，输入 函数不会返回。 基本输入 首先是一些基本类型的输入 文本输入: 这样一行代码的效果为：浏览器会弹出一个文本输入框来获取输入，在用户完 成输入将表单提交后，函数返回用户输入的值。 下面是一些其他类型的输入函数: age = input("How old are you?", type=NUMBER) 输入选项 输入函数可指定的参数非常丰富（全部参数及含义请见

PyWebIO提供了一系列命令式的交互函数来在浏览器上获取用户输入和进行输 出，将浏览器变成了一个“富文本终端”，可以用于构建简单的Web应用或基于 浏览器的GUI应用。 使用PyWebIO，开发者能像编写终端脚本一样(基于input 和print进行交互)来编写应用，无需具备HTML和JS的相关知识； PyWebIO还可 以方便地整合进现有的Web服务。非常适合快速构建对UI要求不高的应用。 特性 使用同步而不 等函数输出文本、图片、表格等内容到浏览器，也可 以调用 input 、 select 、 file_upload 等函数在浏览器上显示不同表单来接收 用户的输入。此外PyWebIO中还提供了点击事件、布局等支持，让你可以使用 最少的代码完成与用户的交互， 并尽可能提供良好的用户体验。 本篇使用指南从几个方面对PyWebIO的使用进行介绍，覆盖了PyWebIO的绝大 部分特性。本文档中大部分示例代码的右上方都有一个Demo链接，点击后可 input 一样），在表单被成功提交之前，输入 函数不会返回。 基本输入 首先是一些基本类型的输入。 文本输入: 这样一行代码的效果为：浏览器会弹出一个文本输入框来获取输入，在用户完 成输入将表单提交后，函数返回用户输入的值。 下面是一些其他类型的输入函数: age = input("How old are you?", type=NUMBER) 输入选项 输入函数可指定的参数非常丰富（全部参数及含义请见

PyWebIO提供了一系列命令式的交互函数来在浏览器上获取用户输入和进行输 出，将浏览器变成了一个“富文本终端”，可以用于构建简单的Web应用或基于 浏览器的GUI应用。 使用PyWebIO，开发者能像编写终端脚本一样(基于input 和print进行交互)来编写应用，无需具备HTML和JS的相关知识； PyWebIO还可 以方便地整合进现有的Web服务。非常适合快速构建对UI要求不高的应用。 特性 使用同步而不 等函数输出文本、图片、表格等内容到浏览器，也可 以调用 input 、 select 、 file_upload 等函数在浏览器上显示不同表单来接收 用户的输入。此外PyWebIO中还提供了点击事件、布局等支持，让你可以使用 最少的代码完成与用户的交互， 并尽可能提供良好的用户体验。 本篇使用指南从几个方面对PyWebIO的使用进行介绍，覆盖了PyWebIO的绝大 部分特性。本文档中大部分示例代码的右上方都有一个Demo链接，点击后可 input 一样），在表单被成功提交之前，输入 函数不会返回。 基本输入 首先是一些基本类型的输入。 文本输入: 这样一行代码的效果为：浏览器会弹出一个文本输入框来获取输入，在用户完 成输入将表单提交后，函数返回用户输入的值。 下面是一些其他类型的输入函数: age = input("How old are you?", type=NUMBER) 输入选项 输入函数可指定的参数非常丰富（全部参数及含义请见

前言 第 1 章：准备工作 第 2 章：Hello, Flask! 第 3 章：模板 第 4 章：静态文件 第 5 章：数据库 第 6 章：模板优化 第 7 章：表单 第 8 章：用户认证 第 9 章：测试 第 10 章：组织你的代码 第 11 章：部署上线 小挑战 后记 2 Flask 入门教程 这是一本 Flask 入门教程，提供了入门 Flask 所需的最少信息，你可以跟随本书自 前言 第 1 章：准备工作 第 2 章：Hello, Flask! 第 3 章：模板 第 4 章：静态文件 第 5 章：数据库 第 6 章：模板优化 第 7 章：表单 第 8 章：用户认证 第 9 章：测试 第 10 章：组织你的代码 第 11 章：部署上线 小挑战 后记 版权信息 书名：Flask 入门教程 副书名：使用 Python 和 Flask 开发你的第一个 Watchlist 程序的完整流程，包括每一行代码块，每一个需要 执行的命令。在阅读时，你需要自己输入每一个代码和命令，检查输出是否和书中 一致。在这个过程中，你也可以对它进行一些调整。比如，示例程序的界面语言使 用了英文，你可以修改为中文或是其他语言。对于页面布局和样式，你也可以自由 修改。 在本书的最后，你会把你自己编写的 Watchlist 部署到互联网上，让任何人都可以 访问。 讨论与反馈

Web services. PyWebIO is very suitable for quickly building applications that do not require complex UI. Features Use synchronization instead of callback-based method to get input Non-declarative layout to make it easy for Python users to create interactive web applications that can connect front-end UI events to real, running Python code. In PyWebIO, you can also use bokeh.io.show() to display a Bokeh Highlights Security support: put_html(), put_markdown() can use sanitize parameter to prevent XSS attack. UI internationalization support SEO support: Set SEO info through pywebio.platform.seo() or function docstring

Web services. PyWebIO is very suitable for quickly building applications that do not require complex UI. Features Use synchronization instead of callback-based method to get input Non-declarative layout to make it easy for Python users to create interactive web applications that can connect front-end UI events to real, running Python code. In PyWebIO, you can also use bokeh.io.show() to display a Bokeh Highlights Security support: put_html(), put_markdown() can use sanitize parameter to prevent XSS attack. UI internationalization support SEO support: Set SEO info through pywebio.platform.seo() or function docstring

提供了一系列命令式的交互函数来在浏览器上获取用户输入和进行输出，将浏览器变成了一个“富 文本终端”，可以用于构建简单的 Web 应用或基于浏览器的 GUI 应用。使用 PyWebIO，开发者能像编写终端 脚本一样 (基于 input 和 print 进行交互) 来编写应用，无需具备 HTML 和 JS 的相关知识；PyWebIO 还可以方 便地整合进现有的 Web 服务。非常适合快速构建对 UI 要求不高的应用。 input 、select 、file_upload 等函数在浏览器上显示不同表单来接收用 户的输入。此外 PyWebIO 中还提供了点击事件、布局等支持，让你可以使用最少的代码完成与用户的交互， 并尽可能提供良好的用户体验。 本篇使用指南从几个方面对 PyWebIO 的使用进行介绍，覆盖了 PyWebIO 的绝大部分特性。本文档中大部分 示例代码的右上方都有一个 Demo 链接，点击后可以在线预览代码的运行效果。 首先是一些基本类型的输入 文本输入: age = input("How old are you?", type=NUMBER) 这样一行代码的效果为：浏览器会弹出一个文本输入框来获取输入，在用户完成输入将表单提交后，函数返 回用户输入的值。 下面是一些其他类型的输入函数: # 密码输入 password = input("Input password", type=PASSWORD) # 下拉选择框