GitHub - mt-bjtu-practical/2th-works: 《线上点餐系统》曹苗淼、王亦舟、刘佳鑫

mt-bjtu-practical / 2th-works Public

Notifications You must be signed in to change notification settings
Fork 0
Star 0

《线上点餐系统》曹苗淼、王亦舟、刘佳鑫

Notifications

Name		Name	Last commit message	Last commit date
Latest commit History 3 Commits
README.word		README.word
client.zip		client.zip
server.zip		server.zip

Repository files navigation

实验过程：
点餐系统所用工具
HTML+CSS完成静态页面及美化，使用JavaScript实现页面间的跳转与交互，数据库部分使用Flask框架与后端连接，实现数据的增删改查。
<一>HTML框架
1、HTML 是一种用于创建网页结构的超文本标记语言。
	通过标签来定义网页的各种元素，如标题、段落、链接、图像等。
	负责构建页面的结构和内容，以及组织信息的层次结构，方便后续的布局。如div、section
 
2、HTML作用
负责定义页面的结构和内容
3、效果
简单静态页面，无法交互

<二>CSS：
1、CSS 是一种用于控制网页外观和样式的样式表语言。
通过选择器和属性来定义网页元素的样式，如颜色、字体、大小、布局等。
负责美化页面，使其具有吸引力和一致的外观。
2、位置
将 CSS 样式放在 <head> 部分
	优化页面加载性能： 当将 CSS 放在 <head> 中时，浏览器可以在加载页面内容之前已经加载和解析样式，使页面在渲染时能够更快地应用样式，从而提升页面加载性能。
	并行加载： 浏览器在下载页面的同时会并行加载外部资源（如样式表、脚本、图像等），将 CSS 放在 <head> 中可以让浏览器尽早开始加载样式表，加速整体页面加载过程。
	避免阻塞： 如果将 CSS 样式放在页面底部或在页面底部使用 JavaScript 动态加载样式，可能会导致样式加载过程被其他资源（如 JavaScript）阻塞，从而影响页面的显示和交互。
3、代码解释
	全局样式：
使用 body 选择器设置页面的全局样式，包括字体、外边距、内边距、Flex 布局等。
通过 min-height: 100vh 确保页面至少占据整个视口的高度。
 

	标签样式
通过 label 选择器定义，包括字体大小、颜色、粗体等。
输入字段、提交按钮和按钮都有相似的样式，包括内边距、字体大小、边框样式和圆角边框。
提交按钮和按钮都有鼠标悬停时的背景颜色变化。
 
	图片容器样式：
使用 .image-container 类选择器设置图片容器的样式。
使用 Flex 布局，使图像垂直和水平居中。
添加内边距，用于控制图像容器周围的间距。
图像具有最大宽度为容器宽度的 150%。

 

	动态效果
Idex页面上的动态显示：
 
4、css选择器
在 CSS 中，选择器是用来定位页面上要应用样式的 HTML 元素的标识符。用于匹配特定的元素或元素组合。
	元素选择器：
元素选择器是最基本的选择器，通过元素的名称来选择 HTML 元素。例如，使用 p 选择器就可以选择所有的 <p>（段落）元素。元素选择器会选择页面中所有匹配的元素。
	类选择器：
类选择器允许你为具有相同类名的元素应用样式。类名以点（.）开头，可以在多个元素中使用相同的类名。这使得你可以为多个元素定义相同样式，而不必为每个元素编写独立的样式规则。
	CSS 还支持其他选择器，如 ID 选择器（# 开头）和伪类选择器（如 :hover），用于更具体地定位元素以及实现不同的样式效果。
5、效果
有样式和动态效果的静态页面，不能交互

<三>Javascript
1. 前后端交互基础
	前端：
用户在浏览器中看到和交互的部分，通常由 HTML、CSS 和 JavaScript 构成。
JavaScript 是一种用于网页交互的脚本语言，能够通过浏览器与服务器进行通信。
	后端：
在服务器上运行的程序，用于处理用户请求、进行数据处理等。
后端通常使用各种编程语言和框架来实现。
	前后端交互：
前端通过网络请求将用户输入发送到后端，后端进行处理并返回相应的数据给前端。
前后端交互通过 API（应用程序接口）来实现，常见的形式包括 HTTP 请求和响应。

2. 举例：用户登录功能实现
JavaScript 事件监听：
 
通过在表单提交事件监听器中使用 event.preventDefault()，可以阻止默认的页面刷新行为，从而允许使用 JavaScript 控制表单提交的方式，例如发送异步请求、处理响应数据，而不影响整个页面的刷新。这样可以提升用户体验，并让页面变得更加动态和交互性。
发送 AJAX 请求：
AJAX是一种用于在不需要刷新整个页面的情况下，在后台与服务器交换数据的技术。它允许你通过 JavaScript 在后台发起HTTP请求，获取数据并更新页面的部分内容，而不需要重新加载整个页面。这使得网页可以更加动态、交互性和快速地响应用户的操作。
 
后端接受请求，并执行数据库相关操作
 
Flask 路由和视图函数：

1、使用 @app.route('/login', methods=['POST']) 装饰器定义了一个处理 POST 请求的路由，即处理用户登录的操作。
def login(): 是定义的视图函数，该函数处理登录逻辑并返回响应。
2、请求对象和表单数据获取：
customer_name = request.form['customer_name'] 和 seat_no = request.form['seat_no'] 从 POST 请求中获取表单数据，即用户输入的用户名和座位号。
3、如果用户信息验证成功（if user:），使用会话对象 session 存储用户信息，假设用户名存储在 user[0] 中。
4、重定向和响应：
return redirect('/login_success') 是一个重定向操作，将用户重定向到登录成功的页面（URL）。
response = {'success': True} 是一个字典，表示登录成功的响应信息。
5、JSON 响应和错误处理：
如果用户信息验证失败（else:），返回 JSON 格式的响应，其中包括失败信息和标志。
return jsonify(response) 将字典 response 转换为 JSON 格式的响应。
前端处理后端响应
 
1、AJAX 请求状态监听：
xhr.onreadystatechange 设置一个回调函数，用于监听 AJAX 请求的状态变化。xhr 是一个 XMLHttpRequest 对象，用于发起请求。
2、AJAX 请求状态判断：
if (xhr.readyState === XMLHttpRequest.DONE) 检查 AJAX 请求的状态是否已完成，即数据已返回且请求已处理完毕。
3、AJAX 请求状态码判断：
if (xhr.status === 200) 检查 AJAX 请求的状态码是否为 200，表示请求成功。
4、处理服务器响应：
const response = JSON.parse(xhr.responseText); 解析服务器返回的 JSON 格式响应，将其转换为 JavaScript 对象。
if (response.success) 检查响应对象中的 success 属性，表示是否登录成功。
5、前端页面跳转：

如果登录成功，使用 alert("登录成功！"); 弹出提示框，然后使用 sessionStorage 保存用户标识（例如用户名）。
window.location.href = "/login_success"; 在登录成功后，跳转到登录成功页面。
如果登录失败，使用 alert(response.message); 弹出登录失败的提示信息。
如果 AJAX 请求出错，使用 alert("登录请求出错：" + xhr.statusText); 弹出错误信息。

5、数据编码和发送：
constdata=customer_name=${encodeURIComponent(customerName)}&seat_no=${encodeURIComponent(seatNo)}; 构建待发送的数据字符串，将用户名和座位号进行 URL 编码。
xhr.send(data); 发送 AJAX 请求，将数据发送给服务器进行处理。