python+flask+html开发简单的网页

最新推荐文章于 2024-03-09 11:33:35 发布

置顶 Pamxz

最新推荐文章于 2024-03-09 11:33:35 发布

阅读量2.3w

点赞数 42

分类专栏：网页制作文章标签：小白自学python开发网页

本文为π仔原创文章，未经博主允许不得转载。

本文链接：https://blog.csdn.net/Pxzly1117/article/details/103641421

版权

网页制作专栏收录该内容

1 篇文章 1 订阅

订阅专栏

新手学习python，掌握的基本语法的使用，学习基本的数据类型（字符串、列表、元组、字典、集合等）、函数、数据结构等使用及理解后，后续的项目实战离不开web开发、爬虫、图像处理、深度学习、人工智能等。本博客作为学习小记，纯属简单的python学习交流文章，如有纰漏或者错误，还请多多指教，感谢！

软件基础：

安装PyCharm（版本2019.3）官网链接：https://www.jetbrains.com/pycharm/

安装python（版本3.7.5）：https://www.python.org/downloads/

学习来源：

视频（bilibili）：https://www.bilibili.com/video/av16976018?from=search&seid=649169955504493099

https://www.bilibili.com/video/av14095837?from=search&seid=649169955504493099

https://www.bilibili.com/video/av48204232?from=search&seid=5440996610444191920

现有使用较多python的web搭建框架：Flask、Django、Tornado，当然还有bottle、web.py等（来源bilibili-Python_fullstack框架入门【老男孩IT】https://www.bilibili.com/video/av69049751?p=1）

Flask：短小精悍、内部没有太多组件，第三方组件丰富。

Djiango：重武器，内部包含了非常多组件：ORM、Form、ModelForm 、缓存、session、中间件、信号等

Tornado：异步非阻塞框架（node.js）

----------------------------------------------------------------------------

开始搭建:

1. 打开PyCharm，新建project，命名为setup_web，选择空目录，选择默认环境Virtualenv

新建myapp.py（网页后台控制）
新建文件夹templates（文件名一定要是这个）,在里面新建一个index.html（网页源代码）

自此，项目本地目录中就有:

2. 安装需要的flask模块包，在PyChram中Terminal命令行中

>> pip install flask

3. 基本的程序准备就绪，开始编辑myapp.py的代码：

from flask import Flask
from flask import render_template #渲染

app = Flask(__name__)
@app.route('/') #主页地址,“装饰器”
def news():
    the_news = {
            'XXX1':'1',
            'XXX2':'2',
            'XXX3':'3',
            'XXX4':'4',
    }
    context = {
        'title':'新闻',
        'the_news': the_news,
    }
    return render_template('index.html',context=context) #把index.html文件读进来，再交给浏览器

if __name__ == '__main__':
    app.run(host='0.0.0.0',debug=True,port=80) #127.0.0.1 回路 自己返回自己

html的代码：

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>个性签名</title>
    <style>
        div.wrapper {
            border: 1px solid black;
            height: 250px;
            width: 550px;
            background: white;
            margin: auto;
        }

        div.form-div {
            border: 1px solid black;
            height: 50px;
            width: 550px;
            background: yellow;
            margin: auto;
        }

        div.img-div {
            border: 1px solid black;
            height: 200px;
            width: 550px;
            background: white;
            margin: auto;
        }
    </style>
</head>

<body>
    <div class="wrapper">
        <h4>{{context.title}}</h4>
        <ul>
            {% for i in context.the_news %}
            <li><a href="#"><span>{{ i }}</span>{{ context.the_news[i] }}</a></li>
            {% endfor %}
        </ul>

        <div class="form-div">
            <form method="POST">
                <input type="text">
                <select>
                    <option>1</option>
                    <option>2</option>
                </select>
                <input type="submit">
            </form>
        </div>
        <div class="img-div">
            <span>新闻讲究时效性</span>
        </div>

    </div>
</body>
<ml>
</html>

4. 运行myapp.py（右键点击Run 'myapp.py'），打开浏览器，输入http://localhost/或者127.0.0.1，结果如下图所示：

---------------------------------------------------------------------------------------------------------

学习小计：

pycharm使用操作：

快捷键：ctrl+？注释、反注释

html操作（菜鸟教程：https://www.runoob.com/html/html-basic.html）：

基本的html代码结构

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>     <!-- 两个<title>之间的Title为网页打开时的提示标签 -->

</head>
<body>

      <!-- html编程的主体 -->

</body>
</html>

代码认识：

< style="position:relative / absolute;

float: left / right;

left / right: 10px;

top: 25px;

height: 300px (100%);

width: 300px (100%);

background: #FFFFFF;

border: 0px solid white;

display: flex; flex-direction: row /column; justify-content: space-around / between;

text-align:center /left /right;

margin: auto;

... ...

学习总结：

学习python，易学难精，开源，集成了很多的模块包，作为小白的我，把菜鸟教程中python基础教程学了一遍，才刚刚开始，还未入门；
在bilibili上看了网上学习视频，很多都教得比较基础，进阶的web开发教学内容一般都需付费，所以多找其他学习博客或者网站；
几天的学习，个人感觉用python来开发网站，网页的基础还是html编程，python实则起到构建连接、数据管理、后台运维等的框架和数据处理的作用；
以上内容，如有出错，还请多多包涵，我还需多多学习；

存在问题：

未解决所开发网页的外网访问问题；
开发网站，学习html编程语言必不可少，大部分的代码使用还不懂；
python中的数据结构、数据分析还是硬骨头，是接下来的重点，目标是开发与一个实验室的专属网站；
... ...

-----------------------------------------------------------

推荐学习：

菜鸟教程：python基础教程（小白可以看看，有100道测试题）
博客园-武沛齐:https://www.cnblogs.com/wupeiqi/
图书《python程序设计开发宝典董付国》清华大学出版社、《python基础教程（第2版修订版） [挪]Magnus Lie Hetland》人民邮电出版社

>> print(' 未完待续，多多指教！ ---- pxz20191221')

Pamxz

关注

42
点赞
踩
205

收藏

觉得还不错? 一键收藏
4
评论
python+flask+html开发简单的网页

新手学习python，掌握的基本语法的使用，学习基本的数据类型（字符串、列表、元组、字典、集合等）、函数、数据结构等使用及理解后，后续的项目实战离不开web开发、爬虫、图像处理、深度学习、人工智能等。本博客作为学习小记，纯属简单的python学习交流文章，如有纰漏或者错误，还请多多指教，感谢！软件基础：安装PyCharm（版本2019.3）官网链接：https://www...
复制链接

扫一扫