Flask-cms 后台登录与注册(三)_flask后端注册

作者：Gausst松鼠会 | 2024-04-13 19:15:54

踩

flask后端注册

本章节开始教你一步步实现功能开发。首先，我们从项目后台开始，创建后台蓝图。

后台蓝图

1、首先在 app 文件夹中创建 admin 文件夹(包)，并在该文件夹中创建 views.py 文件。

在 admin/__init__.py 中：

from flask import Blueprint  # 引入 flask 自带的蓝图模块

admin_blue = Blueprint('admin_blue', __name__)  # 创建蓝图对象

from . import views  # 引入开发文件 views.py
1
2
3
4
5

在 admin/views.py 中：

from . import admin_blue  # 导入蓝图对象

# 注册后台首页路由
@admin_blue.route('/admin')
def index():
    return "这是后台首页"
1
2
3
4
5
6

在 app/__init__.py 中注册蓝图：

# 后台首页蓝图
from app.admin import admin_blue
app.register_blueprint(admin_blue)
1
2
3

重新运行项目，访问后台地址：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')  # 加载后台首页模板
1
2
3
4
5

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
1
2
3
4
5

后台注册

由于登录后台需要账号和密码，所以我们先来实现后台注册功能，本次功能使用 ajax 来实现。

1、定义注册路由，在 admin/views.py 中：

# 后台注册
@admin_blue.route('/admin/user/register')
def register():
    return render_template('admin/user/register.html')
1
2
3
4

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" %}
    
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
59
60
61
62
63

声明：本文内容由网友自发贡献，不代表【wpsshop博客】立场，版权归原作者所有，本站不承担相应法律责任。如您发现有侵权的内容，请联系我们。转载请注明出处：https://www.wpsshop.cn/w/Gausst松鼠会/article/detail/418079