学习大数据DAY32 HTML基础语法和Flask库的使用

news2025/11/1 7:34:59

目录

HTML 超文本标记语言 Hyper Text Markup Language

上机练习 9

Flask

显示层 UI

前后端结合动态加载列表数据

flask 在 html 中的语法

上机练习 10

HTML 超文本标记语言 Hyper Text Markup Language

1.<html></html>: 根标签
2.<head></head>: 头标签
3.<title></title>: 头标题标签，在 <head> 标签里设置。
4.<meta charset="utf-8"/>: 常用于指定页面编码，在 <head> 标签内 .
5.<body></body>: 页面的内容基本上写在此标签内。
6. 标题标签： <h1></h1> h1 ... h6
7. 段落标签： <p></p>
8. 超级链接标签： <a href="https://www.baidu.com" target="_blank">
百度 </a>
9. 表格标签： <table><tr><td> 学号 </td><td> 姓名 </td></tr></table>
10. 表单标签： <form action="" method="post"> 表单元素控件 </form>
11. 表单元素控件： <input />
文 本 显 示 ： <input type="text" name="tname" value=" 动 漫 "
readonly="readonly"/>
加密显示： <input type="password" name="tname" />
提示功能： <input type="text" placeholder=" 请输入电影名称 "/>
12. 下拉框标签： <select></select>
<select name="typeid">
<option value="1"> 喜剧 </option>
<option value="2" selected="selected"> 动画 </option>
</select>
13. 图 片 标 签 ： <img
src="static/p1.png"
width="300px"
height="400px"/>
14. 样式标签 style
<style>
body{ margin: 0 auto; width: 800px;
background-image:url("static/bg.jpg");
background-repeat:no-repeat;
background-size: cover;
}
h1{ color: #258dcd}
a{
background-color: #258dcd;
color: white;
padding: 5px 8px;
text-decoration: none;
border-radius: 5px;
/* 半透明 */
/*background-color:rgba(55,55,55,0.5)*/
}
table,tr,td{ border: 2px solid black; border-collapse: collapse;}
table{ width: 100% }
td{ text-align: center; padding: 10px;}
.tou{
background-color: #258dcd;
color: white;
font-size: 18px;
font-weight: bold;
}
</style>

上机练习 9

1. 制作列表页： list.html
2. 制作添加页： add.html list.html:

UI.html: 
<html>
<head>
<title>欢迎使用豆瓣网</title>
<meta charset="utf-8"/>
</head>
<body>
<h1>欢迎使用豆瓣网</h1>
<a href="">首页</a>
<a href="">电影类型列表</a>
<a href="">添加电影类型</a>
<a href="">添加电影</a>
<a href="">查看柱状图</a>
<a href="">查看饼状图</a>
<p></p>
<table>
<tr><td>编号</td><td>名称</td><td>内容</td><td>创建日
期</td><td>操作</td></tr>
<tr><td>1</td><td>喜剧</td><td>这是一个搞笑电影
</td><td>2023 年 12 月 27 日</td><td><a href="">修改</a><a href="">
删除</a><a href="">查看</a></td></tr>
<tr><td>2</td><td>动画</td><td>这是小孩子喜欢的电影
</td><td>2023 年 12 月 27 日</td><td><a href="">修改</a><a href="">
删除</a><a href="">查看</a></td></tr>
<tr><td>3</td><td>动作</td><td>这打斗的电影
</td><td>2023 年 12 月 28 日</td><td><a href="">修改</a><a href="">
删除</a><a href="">查看</a></td></tr>
</table>
</body>
<style>body{ margin: 0 auto; width: 800px;
/* background-image:url("static/bg.jpg"); */
/* background-repeat:no-repeat;
background-size: cover; */
}
h1{ color: #258dcd}
a{
background-color: #258dcd;
color: white;
padding: 5px 12px;
text-decoration: 12px;
border-radius: 12px;
/*半透明*/
/*background-color:rgba(55,55,55,0.5)*/
}
table,tr,td{ border: 2px solid black; border-collapse:
collapse;}
table{ width: 100% ;}
td{ text-align: center; padding: 10px;}
.tou{
background-color: #258dcd;
color: white;
font-size: 18px;
font-weight: bold;
}
</style>
</html>
add.html: 
<html>
<head>
<title>添加电影</title>
</head>
<body>
<h1>欢迎使用豆瓣网</h1>
<a href="">首页</a>
<a href="">电影类型列表</a>
<a href="">添加电影类型</a>
<a href="">添加电影</a>
<a href="">查看柱状图</a>
<a href="">查看饼状图</a>
<p></p>
<form method="post">编号:<input type="text" name="tname" value=""
readonly="readonly"/>
</form>
<form method="post">
名称:<input type="text" name="tname" value=""
readonly="readonly"/>
</form>
<form method="post">
内容:<input type="text" name="tname" value=""
readonly="readonly"/>
</form>
<b href="">添加</b>
</body>
<style>
body{ margin: 0 auto; width: 800px;
/* background-image:url("static/bg.jpg");
background-repeat:no-repeat;
background-size: cover; */
}
h1{ color: #258dcd}
a{
background-color: #258dcd;
color: white;
padding: 5px 8px;
text-decoration: none;
border-radius: 5px;
/*半透明*/
/*background-color:rgba(55,55,55,0.5)*/
}
b{
background-color: darkgray;
color:black;
padding: 5px 8px;
text-decoration: none;
}
</style>
</html>

Flask

Flask 是目前十分流行的 web 框架，采用 Python 编程语言来实现相关功能。它
被称为微框 架 (microframework) ，代理业务逻辑层 BLL
安装： pip3 install Flask

显示层 UI

在 webDouban 项目文件夹下新建文件夹 templates ，上传 html 文件
注：如果有图片在需要在 webDouban 项目文件夹下创建文件夹 static 上传图
片到 static 文
件夹下， html 中的路径也要修改为 <img src="/static/p1.png" />

前后端结合动态加载列表数据

app.py
from flask import Flask, render_template
from DAL import MovieTypeDAL
mtdal=MovieTypeDAL()
app = Flask(__name__)
@app.route("/")
def index():
return "<a href='/list'><img src='/static/py11.png'/></a>"
@app.route("/list")
def list():
tlist = mtdal.select()
# 注：数据库 sql 语句也可以转换： date_format(tdate,'%Y 年 %m 月 %d 日 ')
return render_template('list.html', info=tlist)
if __name__=="__main__":
app.run(host="127.0.0.1",port=5000,debug=True)

flask 在 html 中的语法

# 循环结构
{% for i in info %}
{{i}}
{% endfor %}
# 选择结构
{% if tid==1 %}
1
{% else %}
2
{% endif %}
list.html 文件
<html>
<!-- {{ info }} -->
{% for i in info %}
<tr><td>{{ i[0] }}</td><td>{{ i[1] }}</td><td>{{ i[2] }}</td><td>{
{ i[3] }}</td> <td><a href="/update/{{ i[0] }}"> 修改 </a> <a
href="/delete/{{ i[0] }}"> 删除 </a></td></tr>
{% endfor %}
</html>
add.html 文件
<html>
<form method="post" action="/addSubmit">
<p> 编号： <input type="text" name="tid" /></p>
<p> 名称： <input type="text" name="tname" /></p>
<p> 内容： <input type="text" name="tcontent" /></p>
<p><input type="submit" value=" 添加 " /></p>
</form>
</html>
@app.route("/addSubmit", methods=["POST"])
def addSubmit():
tid = request.form.get("tid")
tname = request.form.get("tname")
tcontent=request.form.get("tcontent")
leixing=MovieType(tid,tname,tcontent)
result=mtdal.insert(leixing)
if result==1:
return " 插入成功 <a href='/list'> 刷新 </a>"
# return "<script> alert(' 插入成功 '); window.open('/list');
</script>"
else:
return " 插入失败 <a href='/list'> 刷新 </a>"
@app.route("/update/<tid>")
def update(tid):
leixing = mtdal.selectOne(tid)
return render_template("update.html", info=leixing)
@app.route("/delete/<tid>")
def delete(tid):
result=mtdal.delete(tid)
if result==1:
return " 删除成功 <a href='/list'> 刷新 </a>"
else:
return " 删除失败 <a href='/list'> 刷新 </a>"

上机练习 10

使用 python+flask+mysql+html 三层架构开发豆瓣网 （假的）
电影类型的增删改查操作 昨天代码的基础上新增部分（ app.py 代替原先的业务逻辑层）：
app.py: 
from flask import Flask,render_template,request
from DAL import MovieTypeDAL
from Model import MovieType
app=Flask(__name__)
mtdal=MovieTypeDAL()
tid_old=0
# 主页
@app.route("/")
def index():
return "<a href='/UI'><img src='/static/html 封面
图.png'/></a>"
# 伪地址
@app.route("/UI")
def list():
result=mtdal.select()
# print(result)
return render_template("UI.html",info=result)
# 进入添加电影页面
@app.route("/add")
def add():
return render_template("add.html")
# 添加提交
@app.route("/addSubmit", methods=["POST"])
def addSubmit():
tname=request.form.get("tname")
tcontent=request.form.get("tcontent")
mt=MovieType(tname,tcontent)
result=mtdal.insert(mt)
if result>0:
return "添加成功 <a href='/UI'>刷新</a>"
else:
return "添加失败 <a href='/UI'>刷新</a>"
# 删除
@app.route("/delete/<tid>")
def delete(tid):
result=mtdal.delete(tid)
if result>0:
return "删除成功 <a href='/UI'>刷新</a>"
else:return "删除失败 <a href='/UI'>刷新</a>"
# 修改
@app.route("/update/<tid>")
def update(tid):
result=mtdal.selectByTid(tid)
return render_template("update.html",info=result)
# 修改提交
@app.route("/updateSubmit/", methods=["POST"])
def updateSubmit():
# 先获取旧数据
tid_old=request.form.get("tid_old")
# 修改数据
tid=request.form.get("tid")
tname=request.form.get("tname")
tcontent=request.form.get("tcontent")
tdate=request.form.get("tdate")
result=mtdal.update(tid_old,"tid",tid)
result1=mtdal.update(tid_old,"tname",tname)
result2=mtdal.update(tid_old,"tcontent",tcontent)
result3=mtdal.update(tid_old,"tdate",tdate)
if result or result1 or result2 or result3:
return "修改成功 <a href='/UI'>刷新</a>"
else:
return "修改失败 <a href='/UI'>刷新</a>"
if __name__=="__main__":
app.run(host="127.0.0.1",port=5000,debug=True)
update.html:( 修改数据的界面 ) 
<html>
<head>
<title>添加电影</title>
</head>
<body>
<h1>欢迎使用豆瓣网</h1>
<a href="/UI">首页</a>
<a href="">电影类型列表</a>
<a href="">添加电影类型</a>
<a href="/add">添加电影</a>
<a href="">查看柱状图</a>
<a href="">查看饼状图</a>
<p></p>
<form method="post" action="/updateSubmit"><!-- 文本模式输入，传入参数为 tid -->
<p>编号：<input type="text" name="tid"
value="{{ info[0] }}" /><input type="hidden" name="tid_old"
value="{{ info[0] }}" /></p>
<!-- 文本模式输入，传入参数为 tname -->
<p>名称：<input type="text" name="tname"
value="{{ info[1] }}" /></p>
<!-- 文本模式输入，传入参数为 tcontent -->
<p>内容：<input type="text" name="tcontent"
value="{{ info[2] }}" /></p>
<!-- 文本模式输入，传入参数为 tdate -->
<p>创建日期 <input type="datetime" name="tdate"
value="{{ info[3] }}" /></p>
<!-- 添加按键 -->
<p><input type="submit" value="修改" /></p>
</form>
</body>
<style>
body{ margin: 0 auto; width: 800px;
background-image:url('/static/html 封面图.png');
background-repeat:no-repeat;
background-size: cover;
}
h1{ color: #258dcd}
a{
background-color: #258dcd;
color: white;
padding: 5px 8px;
text-decoration: none;
border-radius: 5px;
/*半透明*/
/*background-color:rgba(55,55,55,0.5)*/
}
</style>
</html>
UI.html:( 主页 ): 
<html>
<head>
<title>欢迎使用豆瓣网</title>
<meta charset="utf-8"/>
</head><body>
<h1>欢迎使用豆瓣网</h1>
<a href="/UI">首页</a>
<a href="">电影类型列表</a>
<a href="">添加电影类型</a>
<a href="/add">添加电影</a>
<a href="">查看柱状图</a>
<a href="">查看饼状图</a>
<p></p>
<table>
<tr><td>编号</td><td>名称</td><td>内容</td><td>创建日
期</td><td>操作</td></tr>
{% for i in info %}
<tr><td>{{ i[0] }}</td><td>{{ i[1] }}</td><td>{{ i[2]
}}</td><td>{{ i[3] }}</td>
<td><a href="/update/{{ i[0] }}">修改</a> <a
href="/delete/{{ i[0] }}">删除</a></td></tr>
{% endfor %}
</table>
</body>
<style>
body{ margin: 0 auto; width: 800px;
background-image:url('/static/html 封面图.png');
background-repeat:no-repeat;
background-size: cover;
background-position: center;
}
h1{ color: #258dcd}
a{
background-color: #258dcd;
color: white;
padding: 5px 12px;
text-decoration: 12px;
border-radius: 12px;
/*半透明*/
/*background-color:rgba(55,55,55,0.5)*/
}
table,tr,td{ border: 2px solid black; border-collapse:
collapse;}
table{ width: 100% ;}
td{ text-align: center; padding: 10px;}
.tou{
background-color: #258dcd;color: white;
font-size: 18px;
font-weight: bold;
}
</style>
</html>
add.html: 
<html>
<head>
<title>添加电影</title>
</head>
<body>
<h1>欢迎使用豆瓣网</h1>
<a href="/UI">首页</a>
<a href="">电影类型列表</a>
<a href="">添加电影类型</a>
<a href="/add">添加电影</a>
<a href="">查看柱状图</a>
<a href="">查看饼状图</a>
<p></p>
<form method="post" action="/addSubmit">
<!-- <p>编号：<input type="text" name="tid" /></p> -->
<!-- 文本模式输入，传入参数为 tname -->
<p>名称：<input type="text" name="tname" /></p>
<!-- 文本模式输入，传入参数为 tcontent -->
<p>内容：<input type="text" name="tcontent" /></p>
<!-- 添加按键 -->
<p><input type="submit" value="添加" /></p>
</form>
</body>
<style>
body{ margin: 0 auto; width: 800px;
background-image:url('/static/html 封面图.png');
background-repeat:no-repeat;
background-size: cover;
}
h1{ color: #258dcd}
a{
background-color: #258dcd;
color: white;
padding: 5px 8px;
text-decoration: none;border-radius: 5px;
/*半透明*/
/*background-color:rgba(55,55,55,0.5)*/
}
</style>
</html>
显示界面：
UI.html:
update.html
add.html:
在一个问题上琢磨了好久，结果老师说我琢磨的那个部分不在作业要求范围内。

本文来自互联网用户投稿，该文观点仅代表作者本人，不代表本站立场。本站仅提供信息存储空间服务，不拥有所有权，不承担相关法律责任。如若转载，请注明出处：http://www.coloradmin.cn/o/1986611.html

如若内容造成侵权/违法违规/事实不符，请联系多彩编程网进行投诉反馈，一经查实，立即删除！

相关文章

贝塞尔曲线参数方程推导

贝塞尔曲线参数方程推导

1.贝塞尔曲线简介 1.1什么是贝塞尔曲线 贝塞尔曲线于 1962 年&#xff0c;由法国工程师皮埃尔贝济埃&#xff08;Pierre Bzier&#xff09;所广泛发表&#xff0c;他运用贝塞尔曲线来为汽车的主体进行设计。 贝塞尔曲线主要用于二维图形应用程序中的数学曲线&#xff0c;曲线…
阅读更多...
opencascade TopoDS_Builder 源码学习

opencascade TopoDS_Builder 源码学习

opencascade TopoDS_Builder 前言 构建器&#xff08;Builder&#xff09;用于创建拓扑数据结构。它是构建器类层次结构的根。 构建器中包含三组方法&#xff1a; Make 方法用于创建形状&#xff08;Shapes&#xff09;。Add 方法用于将一个形状包含到另一个形状中。Remove…
阅读更多...
访问网站显示不安全怎么办？

访问网站显示不安全怎么办？

访问网站时显示“不安全”&#xff0c;针对不同的原因有不同的解决方式&#xff0c;下面是常见的几种原因和对应的解决办法。 1.未启用HTTPS协议 如果网站仅使用HTTP协议&#xff0c;数据传输没加密&#xff0c;因此会被浏览器标记为“不安全”。解决办法是启用HTTPS协议,给…
阅读更多...
可观察性与人工智能的结合：解锁数据收集、分析和预测的新领域

可观察性与人工智能的结合：解锁数据收集、分析和预测的新领域

随着软件系统变得越来越复杂&#xff0c;可观察性&#xff08;根据系统外部输出了解系统内部状态的能力&#xff09;已成为开发人员和运营团队的一项关键实践。 传统的可观测性方法难以跟上现代应用的规模和复杂性。随着遥测数据量的增加&#xff0c;导航变得成本高昂且复杂。…
阅读更多...
【计算机组成原理】各种周期与字长的概念辨析

【计算机组成原理】各种周期与字长的概念辨析

前言 在计算机组成原理中&#xff0c;我们会在做题时遇到各种周期与字长的概念辨析题&#xff08;非常重要&#xff09;&#xff0c;因此我们再次统一做一个梳理&#xff0c;帮助大家在理解的基础上进行记忆&#xff0c;并附上几道好题辅助理解。 概念讲解 指令周期&#xff…
阅读更多...
【轻松掌握】使用Spring-AI轻松访问大模型本地化部署并搭建UI界面访问指南

【轻松掌握】使用Spring-AI轻松访问大模型本地化部署并搭建UI界面访问指南

文章目录 读前必看什么是Spring-AI目前已支持的对接模型本文使用Spring-AI版本构建项目选择必要的依赖配置系统变量 聊天模型API配置文件方式1-使用默认配置方式2-自定义配置配置其他参数使用示例 图像模型API配置文件方式1-使用默认配置方式2-自定义配置配置其他参数使用示例 …
阅读更多...
N5 - 使用Gensim库训练word2vec模型

N5 - 使用Gensim库训练word2vec模型

&#x1f368; 本文为&#x1f517;365天深度学习训练营 中的学习记录博客&#x1f356; 原作者&#xff1a;K同学啊 目录 环境步骤分词训练word2vec模型模型应用计算词汇间的相似度找出不匹配的词汇计算词汇的词频 总结与心得体会 环境 安装gensim和jieba库 pip install gen…
阅读更多...
mysql实现MHA

mysql实现MHA

一、什么是MHA 高可用模式下的故障切换&#xff0c;基于主从复制&#xff0c;单点故障和主从复制不能切换的问题&#xff0c;架构需要奇数台&#xff0c;至少需要3台&#xff0c;故障切换过程0-30秒&#xff0c;vip地址&#xff0c;根据vip地址所在的主机&#xff0c;确定主备…
阅读更多...
全网最最实用--边缘智能的常见微调方式以及适用场景

全网最最实用--边缘智能的常见微调方式以及适用场景

文章目录 1. BitFit2. Adapter3. Prompt-Tuning4. Prefix-Tuning5. LoRA (Low-Rank Adaptation)6. QLoRA (Quantized Low-Rank Adaptation)7. LongLoRA总结 1. BitFit https://arxiv.org/abs/2106.10199 主要做法&#xff1a; BitFit&#xff08;Bias Term Fine-Tuning&#…
阅读更多...
日撸Java三百行（day15：栈的应用之括号匹配）

日撸Java三百行（day15：栈的应用之括号匹配）

目录 一、栈的括号匹配 二、代码实现 1.方法创建 2.数据测试 3.完整的程序代码 总结 一、栈的括号匹配 要完成今天的任务&#xff0c;需要先来了解一下什么是栈的括号匹配。首先&#xff0c;顾名思义&#xff0c;括号匹配就是指将一对括号匹配起来&#xff0c;我们给定一…
阅读更多...
HashTable源码

HashTable源码

引子 看到一个关于HashMap和HashTable对比的面试题&#xff0c;于是简单看了下HashTable的源码&#xff0c;简单记录下。 概述 与HashMap相似的哈希表结构&#xff0c;有很多不同点&#xff1a; 节点数组的初始化是在构造函数中完成的&#xff0c;初始容量11&#xff0c;负载因…
阅读更多...
基于JSP、java、Tomcat三者的项目实战--校园交易网（3）主页--历史清单

基于JSP、java、Tomcat三者的项目实战--校园交易网（3）主页--历史清单

技术支持&#xff1a;JAVA、JSP 服务器&#xff1a;TOMCAT 7.0.86 编程软件&#xff1a;IntelliJ IDEA 2021.1.3 x64 前文几个功能的实现的博客 基于JSP、java、Tomcat、mysql三层交互的项目实战--校园交易网&#xff08;1&#xff09;-项目搭建&#xff08;前期准备工作&a…
阅读更多...
工具学习_CVE Binary Tool

工具学习_CVE Binary Tool

1. 工具概述 CVE Binary Tool 是一个免费的开源工具&#xff0c;可帮助您使用国家漏洞数据库&#xff08;NVD&#xff09;常见漏洞和暴露&#xff08;CVE&#xff09;列表中的数据以及Redhat、开源漏洞数据库&#xff08;OSV&#xff09;、Gitlab咨询数据库&#xff08;GAD&am…
阅读更多...
鸿蒙AI功能开发【人脸活体验证控件】 机器学习-场景化视觉服务

鸿蒙AI功能开发【人脸活体验证控件】 机器学习-场景化视觉服务

人脸活体验证控件 介绍 本示例展示了使用视觉类AI能力中的人脸活体验证能力。 本示例模拟了在应用里&#xff0c;跳转人脸活体验证控件&#xff0c;获取到验证结果并展示出来。 需要使用hiai引擎框架人脸活体验证接口kit.VisionKit.d.ts。 效果预览 使用说明&#xff1a; …
阅读更多...
RK3568平台开发系列讲解（文件系统篇）文件描述符 fd（File Descriptor）是什么？

RK3568平台开发系列讲解（文件系统篇）文件描述符 fd（File Descriptor）是什么？

📢USB控制传输是USB通信中的一种基本传输类型，用于控制USB设备的配置和操作。它由 Setup 阶段和 Data 阶段组成，可用于发送命令、读取状态、配置设备等操作。 一、文件描述符 fd（File Descriptor）是什么？ 文件描述符 fd 是一个非负整数，用来标识一个打开的文件，由内核…
阅读更多...
用户态tcp协议栈四次挥手-服务端发送fin时，客户端不返回ac

用户态tcp协议栈四次挥手-服务端发送fin时，客户端不返回ac

问题&#xff1a; 四次挥手时&#xff0c;服务端发送fin后&#xff0c;客户端不发送ack&#xff0c;反而过了2min后发了个rst报文 62505是客户端&#xff0c;8889是服务端 解决&#xff1a; 服务端返回fin报文时带上ack标记
阅读更多...
微波武器反无人机技术详解

微波武器反无人机技术详解

微波武器反无人机技术中展现出了独特的优势和广阔的应用前景。以下是对微波武器在反无人机技术方面的详细解析&#xff1a; 一、微波武器概述 微波武器是指配备高功率微波&#xff08;High-Power Microwave, HPM&#xff09;载荷的作战武器&#xff0c;能够发射高能量的电磁脉…
阅读更多...
在AI浪潮中保持核心竞争力：XIAOJUSURVEY的智能化探索

在AI浪潮中保持核心竞争力：XIAOJUSURVEY的智能化探索

讲点实在的 在AI技术快速发展的今天&#xff0c;各行各业的工作方式正经历深刻变革。尤其是身处浪潮中甚至最有机会推动发展的我们&#xff0c;更需要置身事内。 ChatGPT、Copilot等的普及&#xff0c;使得编程效率显著提升&#xff0c;但也带来了新的挑战。为了在这种变革中…
阅读更多...
C++输出为非科学计数法不同数据类型表示范围

C++输出为非科学计数法不同数据类型表示范围

目录 一、C数据类型 1、基本的内置类型 2、修饰符 &#xff08;1&#xff09;signed 和 unsigned &#xff08;2&#xff09;short 和 long &#xff08;3&#xff09;区别总结 默认情况 二、类型转换 1、静态转换&#xff08;Static Cast&#xff09; 2、动态转换&a…
阅读更多...
C语言——函数（1）

C语言——函数（1）

函数 定义&#xff1a; 函数就是用来完成一定功能的一段代码&#xff08;程序&#xff09;模块。 在设计较大的程序时&#xff0c;一般将其分为若干个程序模块&#xff0c;每个模块用来实现一定的功能。 函数优势&#xff1a; 我们可以通过函数提供功能给别人使用&#xff0c…
阅读更多...
推荐文章
最新文章

Copyright @ 2022~2023