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

最新推荐文章于 2024-06-17 09:46:10 发布

Holyzq

最新推荐文章于 2024-06-17 09:46:10 发布

阅读量822

点赞数 1

分类专栏： python flask

本文链接：https://blog.csdn.net/huangdj321/article/details/113803710

版权

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

后台蓝图

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" %}
    </

最低0.47元/天解锁文章

Holyzq

关注

1
点赞
踩
3

收藏

觉得还不错? 一键收藏
0
评论
Flask-cms 后台登录与注册(三)

本章节开始教你一步步实现功能开发。首先，我们从项目后台开始，创建后台蓝图。后台蓝图1、首先在 app 文件夹中创建 admin 文件夹(包)，并在该文件夹中创建 views.py 文件。在 admin/__init__.py 中：from flask import Blueprint # 引入 flask 自带的蓝图模块admin_blue = Blueprint('admin_blue', __name__) # 创建蓝图对象from . import views # 引入开发文件 vi
复制链接

扫一扫

专栏目录