本章节开始教你一步步实现功能开发。首先,我们从项目后台开始,创建后台蓝图。
后台蓝图
1、首先在 app 文件夹中创建 admin 文件夹(包),并在该文件夹中创建 views.py 文件。
在 admin/__init__.py
中:
from flask import Blueprint # 引入 flask 自带的蓝图模块
admin_blue = Blueprint('admin_blue', __name__) # 创建蓝图对象
from . import views # 引入开发文件 views.py
在 admin/views.py
中:
from . import admin_blue # 导入蓝图对象
# 注册后台首页路由
@admin_blue.route('/admin')
def index():
return "这是后台首页"
在 app/__init__.py
中注册蓝图:
# 后台首页蓝图
from app.admin import admin_blue
app.register_blueprint(admin_blue)
重新运行项目,访问后台地址:http://127.0.0.1:5000/admin
你会看到:
2、引入对应后台模板及样式文件
在
static
文件夹下创建admin
文件夹,把后台静态样式文件丢进去。
在templates
文件夹下创建admin
文件夹,再创建index
文件夹,把后台首页静态文件丢到index
文件夹中。
按照第二篇文章所学,修改对应路径的引用
3、在 admin/views.py
中:
from flask import render_template # 引入加载模板包
@admin_blue.route('/admin')
def index():
return render_template('admin/index/index.html') # 加载后台首页模板
4、浏览器访问后台地址:http://127.0.0.1:5000/admin
,你会看到如下页面:
后台模板布局
此处步骤不详细说明,这里只简单讲一下布局文件夹,在
templates/admin
下创建common
文件夹,用于存放公共静态模板。
在
templates/admin
文件夹下创建app.html
文件,用于存放总布局文件,后台首页index/index.html
继承布局文件即可。
详细语法格式,请参考源码或:https://clwy.cn/guide/documents/flask-clwy/1-0/templates-extends
代码提交:
git add .
git commit -m "后台蓝图和模板布局"
git push -u origin main
后台注册
由于登录后台需要账号和密码,所以我们先来实现后台注册功能,本次功能使用 ajax
来实现。
1、定义注册路由,在 admin/views.py
中:
# 后台注册
@admin_blue.route('/admin/user/register')
def register():
return render_template('admin/user/register.html')
2、在 admin
文件夹下创建 user
文件夹,里面添加 register.html
模板文件,代码如下:
<!DOCTYPE html>
<html>
<head lang="en">
<meta charset="UTF-8">
<title>cms后台注册</title>
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1">
<meta name="format-detection" content="telephone=no">
<meta name="renderer" content="webkit">
<meta http-equiv="Cache-Control" content="no-siteapp"/>
<link rel="alternate icon" type="image/png" href="/static/admin/assets/i/favicon.png">
<link rel="stylesheet" href="/static/admin/assets/css/amazeui.min.css"/>
<style>
.header {
text-align: center;
}
.header h1 {
font-size: 200%;
color: #333;
margin-top: 30px;
}
.header p {
font-size: 14px;
}
</style>
</head>
<body>
<div class="header">
<div class="am-g">
<h1>cms后台管理系统</h1>
<p>Integrated Development Environment<br/>专业细致,代码生成,界面设计,调试,编译</p>
</div>
<hr/>
</div>
<div class="am-g">
<div class="am-u-lg-6 am-u-md-8 am-u-sm-centered">
<h3>请填写以下信息注册新用户:</h3>
<hr>
<form method="post" action="" class="am-form">
<label>用户名:</label>
<input type="text" id="username" placeholder="请输入用户名">
<br>
<label>手机号:</label>
<input type="text" id="mobile" placeholder="请输入手机号">
<br/>
<label>密码:</label>
<input type="password" id="password" placeholder="请输入密码">
<br>
<label>确认密码:</label>
<input type="password" id="check_password" placeholder="请再次输入密码">
<br>
<div class="am-cf">
<input type="button" value="注 册" class="am-btn am-btn-primary am-btn-sm am-fl register">
</div>
</form>
<hr>
{% include "admin/common/_footer.html" %}
</