基于Python-Flask实现的网站例子

亦凉 2022-05-31 04:57 205阅读 0赞

# 概述 #

使用Flask写的体育网站 包括（注册 论坛 文章评论 组建战队 后台管理）等功能 示例地址文中有写 萌新 请多指教

# 详细 #

项目示例地址: [网站演示][Link 1]

源码下载地址：

http://www.demodashi.com/demo/12380.html

**一、环境搭建**

**1. 安装配置python3.6**

示例网站使用的是python 3.6.3

下载地址：[https://www.python.org/downloads/release/python-363/][https_www.python.org_downloads_release_python-363]

根据自己的系统选择相应的版本

**2. 使用pip 安装环境 (最好能使用virtualenv创建虚拟环境)**  
    例(没有使用虚拟环境)：

命令行进入网站根目录 就是放有 requirements.txt（内涵所有需要的库、包括flask）文件的地方 运行：

pip3 install -r requirements.txt

等待安装完成

**二、项目结构以及程序实现**

**1.项目结构**

说明：

admin 后台登录表单以及后台管理视图  
    api      大部分的借口函数  
    auth   用户登陆视图管理  
    main   网站主体部分视图管理以及表单

static  静态文件存放点

templates   html文件以及基础模版

email.py     email操作相关函数  
    models.py  数据库相关操作

config.py    网站设置  
    manage.py 启动管理

呃……里面有些奇怪的文件（自我记录）不要在意  具体如图：

![QQ图片20180117104224.png][QQ_20180117104224.png]

**2. 程序实现**

挑选部分代码进行说明:

前后端交互 使用ajax发送表单内容 提交给后台接口  根据返回内容作出相应处理

<table> 
 <tbody> 
 <tr> 
 <td style="vertical-align:baseline;"> 1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 </td> 
 <td style="vertical-align:baseline;"> <code>$.ajax({ </code> <code>&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;</code><code>type:&nbsp;</code><code>"POST"</code><code>,</code> <code>&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;</code><code>url:&nbsp;</code><code>"{ {&nbsp;url_for('api.register')&nbsp;}}"</code><code>,</code> <code>&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;</code><code>data:&nbsp;json_data,</code> <code>&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;</code><code>dataType:&nbsp;</code><code>'json'</code><code>,</code> <code>&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;</code><code>contentType:&nbsp;</code><code>'application/json'</code><code>,</code> <code>&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;</code><code>success:&nbsp;</code><code>function</code>&nbsp;<code>(data)&nbsp;{ </code> <code>&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;</code><code>if</code>&nbsp;<code>(data.result&nbsp;===&nbsp;</code><code>'ok'</code><code>){ </code> <code>&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;</code><code>swal({ </code> <code>&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;</code><code>title:&nbsp;</code><code>'注册成功,一封确认邮件已发往您的邮箱!'</code><code>,</code> <code>&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;</code><code>type:&nbsp;</code><code>'success'</code><code>,</code> <code>&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;</code><code>text:&nbsp;</code><code>'请登录后前往邮箱进行验证!&nbsp;3秒后自动跳转到首页'</code><code>,</code> <code>&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;</code><code>timer:&nbsp;3000,</code> <code>&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;</code><code>showConfirmButton:&nbsp;</code><code>false</code> <code>&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;</code><code>}).</code><code>catch</code><code>(</code><code>function</code>&nbsp;<code>()&nbsp;{ </code> <code>&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;</code><code>window.location.href&nbsp;=</code> <code>&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;</code><code>"{ {&nbsp;url_for('auth.register_ok')&nbsp;}}"</code> <code>&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;</code><code>});</code> <code>&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;</code><code>}</code> <code>&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;</code><code>else</code>&nbsp;<code>{ </code> <code>&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;</code><code>swal(</code><code>'错误'</code><code>,</code><code>'注册失败！请联系单位工作人员！'</code><code>,&nbsp;</code><code>'error'</code><code>)</code> <code>&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;</code><code>}</code> <code>&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;</code><code>},</code> <code>&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;</code><code>error:&nbsp;</code><code>function</code>&nbsp;<code>()&nbsp;{ </code> <code>&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;</code><code>swal(</code><code>'错误'</code><code>,</code><code>'注册失败！请联系单位工作人员！'</code><code>,&nbsp;</code><code>'error'</code><code>)</code> <code>&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;</code><code>}</code> <code>&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;</code><code>});</code> </td> 
 </tr> 
 </tbody> 
</table>

注册页面大概长这样：

![QQ图片20180117112006.png][QQ_20180117112006.png]

弹窗使用了sweetalert2  :

![QQ图片20180117110508.png][QQ_20180117110508.png]

后台处理：

**三、运行前配置以及本地运行测试**

使用编辑器(本人用的是pycharm)打开config.py文件  进行配置  其中

**邮箱跟密码必须修改 而且要打开该邮箱的smtp服务 139邮箱设置如图:**

**![QQ图片20180117113104.png][QQ_20180117113104.png]**

os.environ.get('xxx')     是从环境变量中取出相应的信息   配置服务器时可以在服务器上设置相应的环境变量

<table> 
 <tbody> 
 <tr> 
 <td style="vertical-align:baseline;"> 1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 40 41 42 43 44 45 46 47 48 49 50 51 52 53 54 55 56 57 58 </td> 
 <td style="vertical-align:baseline;"> <code>class</code>&nbsp;<code>Config:</code> <code>&nbsp;&nbsp;&nbsp;&nbsp;</code><code>"""基础配置，导入所有配置中"""</code> <code>&nbsp;&nbsp;&nbsp;&nbsp;</code><code>#&nbsp;密匙&nbsp;&nbsp;加密用&nbsp;&nbsp;修改SecretKey为自己想用的即可</code> <code>&nbsp;&nbsp;&nbsp;&nbsp;</code><code>SECRET_KEY&nbsp;</code><code>=</code>&nbsp;<code>os.environ.get(</code><code>'SECRET_KEY'</code><code>)&nbsp;</code><code>or</code>&nbsp;<code>"SecretKey"</code> &nbsp; <code>&nbsp;&nbsp;&nbsp;&nbsp;</code><code>#&nbsp;数据库自动提交数据&nbsp;</code> <code>&nbsp;&nbsp;&nbsp;&nbsp;</code><code>SQLALCHEMY_COMMIT_ON_TEARDOWN&nbsp;</code><code>=</code>&nbsp;<code>True</code> &nbsp; <code>&nbsp;&nbsp;&nbsp;&nbsp;</code><code>#&nbsp;如果设置成&nbsp;True&nbsp;(默认情况)，Flask-SQLAlchemy&nbsp;将会追踪对象的修改并且发送信号。</code> <code>&nbsp;&nbsp;&nbsp;&nbsp;</code><code>#&nbsp;这需要额外的内存，&nbsp;如果不必要的可以禁用它。</code> <code>&nbsp;&nbsp;&nbsp;&nbsp;</code><code>SQLALCHEMY_TRACK_MODIFICATIONS&nbsp;</code><code>=</code>&nbsp;<code>True</code> &nbsp; <code>&nbsp;&nbsp;&nbsp;&nbsp;</code><code>#&nbsp;查询耗时过长的时间</code> <code>&nbsp;&nbsp;&nbsp;&nbsp;</code><code>SLOW_DB_QUERY_TIME&nbsp;</code><code>=</code>&nbsp;<code>0.5</code> &nbsp; <code>&nbsp;&nbsp;&nbsp;&nbsp;</code><code>#&nbsp;可以用于显式地禁用或者启用查询记录</code> <code>&nbsp;&nbsp;&nbsp;&nbsp;</code><code>SQLALCHEMY_RECORD_QUERIES&nbsp;</code><code>=</code>&nbsp;<code>True</code> &nbsp; <code>&nbsp;&nbsp;&nbsp;&nbsp;</code><code>#&nbsp;邮件主题前缀</code> <code>&nbsp;&nbsp;&nbsp;&nbsp;</code><code>MAIL_SUBJECT_PREFIX&nbsp;</code><code>=</code>&nbsp;<code>'&lt;平顶山浩瀚体育&gt;'</code> &nbsp; <code>&nbsp;&nbsp;&nbsp;&nbsp;</code><code>#&nbsp;寄件人名称</code> <code>&nbsp;&nbsp;&nbsp;&nbsp;</code><code>MAIL_SENDER&nbsp;</code><code>=</code>&nbsp;<code>'平顶山浩瀚体育&nbsp;&lt;你的邮箱@test.com&gt;'</code> &nbsp; <code>&nbsp;&nbsp;&nbsp;&nbsp;</code><code>#&nbsp;邮箱端口号</code> <code>&nbsp;&nbsp;&nbsp;&nbsp;</code><code>MAIL_PORT&nbsp;</code><code>=</code>&nbsp;<code>465</code> &nbsp; <code>&nbsp;&nbsp;&nbsp;&nbsp;</code><code>#&nbsp;139邮箱smtp服务器地址</code> <code>&nbsp;&nbsp;&nbsp;&nbsp;</code><code>MAIL_SERVER&nbsp;</code><code>=</code>&nbsp;<code>'smtp.139.com'</code> &nbsp; <code>&nbsp;&nbsp;&nbsp;&nbsp;</code><code>#&nbsp;发送邮件时使用TLS安全协议&nbsp;默认为False</code> <code>&nbsp;&nbsp;&nbsp;&nbsp;</code><code>MAIL_USE_TLS&nbsp;</code><code>=</code>&nbsp;<code>False</code> &nbsp; <code>&nbsp;&nbsp;&nbsp;&nbsp;</code><code>#&nbsp;发送邮件时使用SSL安全协议&nbsp;默认为False</code> <code>&nbsp;&nbsp;&nbsp;&nbsp;</code><code>MAIL_USE_SSL&nbsp;</code><code>=</code>&nbsp;<code>True</code> &nbsp; <code>&nbsp;&nbsp;&nbsp;&nbsp;</code><code>#&nbsp;发送邮件所用的邮箱用户名以及密码&nbsp;&nbsp;</code> <code>&nbsp;&nbsp;&nbsp;&nbsp;</code><code>MAIL_USERNAME&nbsp;</code><code>=</code>&nbsp;<code>os.environ.get(</code><code>'MAIL_USERNAME'</code><code>)&nbsp;</code><code>or</code>&nbsp;<code>'你的邮箱@test.com'</code> <code>&nbsp;&nbsp;&nbsp;&nbsp;</code><code>MAIL_PASSWORD&nbsp;</code><code>=</code>&nbsp;<code>os.environ.get(</code><code>'MAIL_PASSWORD'</code><code>)&nbsp;</code><code>or</code>&nbsp;<code>'你的邮箱密码'</code> &nbsp; <code>&nbsp;&nbsp;&nbsp;&nbsp;</code><code>#&nbsp;管理员邮箱</code> <code>&nbsp;&nbsp;&nbsp;&nbsp;</code><code>ADMIN_MAIL&nbsp;</code><code>=</code>&nbsp;<code>os.environ.get(</code><code>'ADMIN_EMAIL'</code><code>)&nbsp;</code><code>or</code>&nbsp;<code>'你的邮箱@test.com'</code> <code>&nbsp;&nbsp;&nbsp;&nbsp;</code><code>#&nbsp;管理员账号&nbsp;默认为admin&nbsp;可修改&nbsp;第一次运行时会注册</code> <code>&nbsp;&nbsp;&nbsp;&nbsp;</code><code>ADMIN_USERNAME&nbsp;</code><code>=</code>&nbsp;<code>os.environ.get(</code><code>'ADMIN_USERNAME'</code><code>)&nbsp;</code><code>or</code>&nbsp;<code>'admin'</code> <code>&nbsp;&nbsp;&nbsp;&nbsp;</code><code>#&nbsp;管理员密码&nbsp;默认为admin&nbsp;可修改&nbsp;第一次运行时会注册</code> <code>&nbsp;&nbsp;&nbsp;&nbsp;</code><code>ADMIN_PASSWORD&nbsp;</code><code>=</code>&nbsp;<code>os.environ.get(</code><code>'ADMIN_PASSWORD'</code><code>)&nbsp;</code><code>or</code>&nbsp;<code>'admin'</code> <code>&nbsp;&nbsp;&nbsp;&nbsp;</code><code>#&nbsp;SSL安全协议开关&nbsp;False会打开</code> <code>&nbsp;&nbsp;&nbsp;&nbsp;</code><code>SSL_DISABLE&nbsp;</code><code>=</code>&nbsp;<code>True</code> &nbsp; <code>&nbsp;&nbsp;&nbsp;&nbsp;</code><code>#&nbsp;禁止转换asc码</code> <code>&nbsp;&nbsp;&nbsp;&nbsp;</code><code>JSON_AS_ASCII&nbsp;</code><code>=</code>&nbsp;<code>False</code> &nbsp; <code>&nbsp;&nbsp;&nbsp;&nbsp;</code><code>#&nbsp;存储图片的位置</code> <code>&nbsp;&nbsp;&nbsp;&nbsp;</code><code>#&nbsp;windows用'app\static\image'&nbsp;&nbsp;linux用'app//static//image'&nbsp;或自定义</code> <code>&nbsp;&nbsp;&nbsp;&nbsp;</code><code>UPLOAD_FOLDER&nbsp;</code><code>=</code>&nbsp;<code>'app//static//image'</code> &nbsp; <code>&nbsp;&nbsp;&nbsp;&nbsp;</code><code>#&nbsp;分页设置&nbsp;每页显示数量</code> <code>&nbsp;&nbsp;&nbsp;&nbsp;</code><code>POSTS_PER_PAGE&nbsp;</code><code>=</code>&nbsp;<code>15</code> </td> 
 </tr> 
 </tbody> 
</table>

配置完成后进入网站根目录、打开命令行运行：

python manage.py deploy

等待运行结束后 输入

python manage.py runserver --threaded

出现

![QQ图片20180117113608.png][QQ_20180117113608.png]

表示运行成功 然后打开 [http://127.0.0.1:5000][http_127.0.0.1_5000] 即可

如图：

![QQ图片20180117113747.png][QQ_20180117113747.png]

网站后台入口地址: [http://127.0.0.1:5000/manage][http_127.0.0.1_5000_manage]    用户名跟密码在config.py中设置

萌新所做 望各位大佬多多指点  有bug或者其他问题请反馈 谢谢了

注：本文著作权归作者，由demo大师（[http://www.demodashi.com][http_www.demodashi.com]）宣传，拒绝转载，转载需要作者同意

[Link 1]: http://111.231.65.159/
[https_www.python.org_downloads_release_python-363]: https://www.python.org/downloads/release/python-363/
[QQ_20180117104224.png]: /images/20220531/2054a1c881b04ad3a10d30da357542d1.png
[QQ_20180117112006.png]: /images/20220531/997d939478cd4f09ad9a442ce87bd979.png
[QQ_20180117110508.png]: /images/20220531/1342c41a7fc845e98b46a0a9d5c26b10.png
[QQ_20180117113104.png]: /images/20220531/e465eda07be14d5aabfeb935617680fe.png
[QQ_20180117113608.png]: /images/20220531/9c052703f37f427a989c593a944fe429.png
[http_127.0.0.1_5000]: http://127.0.0.1:5000/
[QQ_20180117113747.png]: /images/20220531/39025630d2984e17b576bb3a59ce443d.png
[http_127.0.0.1_5000_manage]: http://127.0.0.1:5000/manage
[http_www.demodashi.com]: http://www.demodashi.com/