【补充】动静态网页
【补充】动静态网页
【一】静态网页
- 静态网页的数据是直接写死在页面上,不随时间或用户操作的改变而改变。
- 它们通常是由HTML、CSS和JavaScript等静态资源组成。
- 这种网页的特点是内容固定,不需要与后台服务器进行交互或实时获取数据。
- 静态网页可以提供基本的展示信息,但无法根据实时情况进行动态更新。
【二】动态网页
- 动态网页的数据是实时获取的,可以根据实际需要动态地更新页面内容。
- 在动态网页中,后端服务器会与前端的网页进行交互,根据用户的请求或其他事件,从数据库或其他数据源中获取最新的数据,并将其展示到HTML页面上。
- 例如,后端可以根据当前时间获取并展示实时的时间信息,或者从数据库中获取最新的新闻内容并展示在网页上。
【三】动态网页制作
- urls
# -*-coding: Utf-8 -*-
# @File : urls .py
# author: Chimengmeng
# blog_url : https://www.cnblogs.com/dream-ze/
# Time:2023/7/7
from views import *
urls_list = [
("/index", index),
("/login", login),
("/register", register),
("/xxx", xxx),
("/get_time", get_time)
]
- main
# -*-coding: Utf-8 -*-
# @File : 02 基于wsgrief .py
# author: Chimengmeng
# blog_url : https://www.cnblogs.com/dream-ze/
# Time:2023/7/6
from wsgiref.simple_server import make_server
from urls import urls_list
from views import *
def main(env, response):
'''
:param env: 请求相关的所有数据
:param response: 相应相关的所有数据
:return: 返回给浏览器的数据
'''
response('200 OK', [])
# wsgiref 自动处理传进来的数据,封装成字典,更加方便操作
# 从env中取到请求地址
current_path = env.get('PATH_INFO')
# 定义一个变量存储匹配到的函数名
func = None
for url in urls_list:
if current_path == url[0]:
func = url[1]
# 匹配正确后,结束当前循环
break
# 判断 func 是否有值
if func:
# 匹配成功执行方法
res = func(env)
else:
# 匹配失败返回 失败页面
res = error(env)
return [res.encode('utf8')]
if __name__ == '__main__':
ip = '127.0.0.1'
port = 8080
server = make_server(ip, port, main)
# 实时监听 ip:port 地址,只要有人访问就会触发run函数运行
server.serve_forever()
- view
# -*-coding: Utf-8 -*-
# @File : views .py
# author: Chimengmeng
# blog_url : https://www.cnblogs.com/dream-ze/
# Time:2023/7/7
import datetime
import os, sys
import time
BASE_DIR = os.path.dirname(os.path.abspath(__file__))
templates_path = os.path.join(BASE_DIR, 'templates')
def index(env):
return 'index'
def login(env):
return 'login'
def register(env):
return 'register'
def error(env):
return '404 error'
def xxx(env):
file_path = os.path.join(templates_path, 'myxxx.html')
with open(file_path, 'r', encoding='utf8') as f:
return f.read()
def get_time(env):
current_time = datetime.datetime.now().strftime('%Y-%m-%d %X')
# 如何将后端获取到的数据反馈给html页面
file_path = os.path.join(templates_path, 'my_time.html')
with open(file_path, 'r', encoding='utf8') as f:
data = f.read()
data = data.replace('time', current_time)
return data
if __name__ == '__main__':
file_path = os.path.join(templates_path, 'myxxx.html')
print(file_path)
- my_time
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
<!-- 本地 链接 引入方法 -->
<!-- Websource 文件夹 拷贝到当前文件夹下即可使用 -->
<!-- jQuery 文件 -->
<script src="Websource\jQuery\node_modules\jquery\dist\jquery.min.js"></script>
<!-- Bootstrap 的 JS 文件 (动画效果需要jQuery) -->
<script src="Websource\Bootstrap\js\bootstrap.min.js"></script>
<!-- Bootstrap 的 CSS 样式文件 -->
<link rel="stylesheet" href="Websource\Bootstrap\css\bootstrap.min.css">
<!-- bootstrap-sweetalert(弹框) 的 CSS 文件 -->
<link rel="stylesheet" href="Websource\bootstrap-sweetalert\dist\sweetalert.css">
<!-- bootstrap-sweetalert(弹框) 的 JS 文件 -->
<script src="Websource\bootstrap-sweetalert\dist\sweetalert.js"></script>
<!-- CDN 链接 引入方法 -->
<!-- Bootstrap 的 CSS 样式文件 -->
<link rel="stylesheet" href="https://cdn.bootcdn.net/ajax/libs/twitter-bootstrap/3.4.1/css/bootstrap.min.css">
<!-- Bootstrap 的 JS 文件 (动画效果需要jQuery) -->
<script src="https://cdn.bootcdn.net/ajax/libs/twitter-bootstrap/3.4.1/js/bootstrap.min.js">// bootstrap </script>
<!-- jQuery 文件 -->
<script src="https://cdn.bootcdn.net/ajax/libs/jquery/3.6.4/jquery.min.js"> // jquery</script>
<!-- 以下为 css样式书写区 -->
<style>
</style>
</head>
<body>
<h1>当前时间</h1>
time
</body>
</html>
本文来自博客园,作者:Chimengmeng,转载请注明原文链接:https://www.cnblogs.com/dream-ze/p/17533986.html