ytq520

Flask实现表单登录和ajax请求登录及其项目配置

Flask实现表单注册、ajax请求登录和文件上传

import os

from flask import Blueprint, request, render_template, jsonify, session, redirect, url_for
from werkzeug.security import generate_password_hash, check_password_hash

from app.form import UserRegisterForm
from app.models import User
from utils import status_code
from utils.settings import MEDIA_PATH

blue = Blueprint('user', __name__)


@blue.route('/register/', methods=['GET', 'POST'])
def register():
    form = UserRegisterForm()
    if request.method == 'GET':
        return render_template('register.html', form=form)

    if request.method == 'POST':
        if form.validate_on_submit():
            username = form.username.data
            password = form.password.data
            # 保存
            user = User()
            user.username = username
            # 密码加密: generate_password_hash()
            # 导入模块：from werkzeug.security import generate_password_hash
            password = generate_password_hash(password)
            user.password = password
            user.save()
            return '创建成功'
        else:
            return render_template('register.html', form=form)


@blue.route('/login/', methods=['GET'])
def login():
    if request.method == 'GET':
        return render_template('login.html')


@blue.route('/login/', methods=['POST'])
def my_login():
    if request.method == 'POST':
        username = request.form.get('username')
        password = request.form.get('password')
        # all([字段]):校验字段的完整性
        if not all([username, password]):
            return jsonify(status_code.USER_LOGIN_PARAMS_IS_INVALID)
        # 判断用户是否注册
        user = User.query.filter(User.username == username).first()
        if not user:
            return jsonify(status_code.USER_LOGIN_PARAMS_IS_REGISTER)
        # 校验密码
        if not check_password_hash(user.password, password):
            return jsonify(status_code.USER_LOGIN_PARAMS_IS_PWD)
        session['user_id'] = user.id
        return jsonify({'code': 200, 'msg': '请求成功'})


@blue.route('/index/')
def index():
    user = User.query.filter(User.username == 'coco').first()
    return render_template('index.html', user=user)


@blue.route('/icon/', methods=['GET', 'POST'])
def icon():
    if request.method == 'GET':
        return render_template('icon.html')

    if request.method == 'POST':
        # 1.获取图片
        icon = request.files.get('icon')
        # 2.保存图片
        # path:E:/wordspace/Flask/day05/static/media/xxx
        path = os.path.join(MEDIA_PATH, icon.filename)
        icon.save(path)
        # 3.修改字段,并保存在数据库中
        user = User.query.filter(User.username == 'coco').first()
        user.icon = icon.filename
        user.save()
        return redirect(url_for('user.index'))

###表单验证注册


from flask_wtf import FlaskForm
from wtforms import StringField, SubmitField,PasswordField
from wtforms.validators import DataRequired, EqualTo


class UserRegisterForm(FlaskForm):
    username = StringField('账&emsp;&nbsp;&nbsp;&nbsp;号', validators=[DataRequired()])
    password = PasswordField('密&emsp;&nbsp;&nbsp;&nbsp;码', validators=[DataRequired()])
    password2 = PasswordField('确认密码', validators=[DataRequired(), EqualTo('password', '密码不一致')])
    submit = SubmitField('提交')

###ajax验证登录

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>登录</title>
    <script src="https://cdn.bootcss.com/jquery/3.3.1/jquery.min.js"></script>
</head>
<body>
    <form id="login-form">
        <p>账号：<input type="text" name="username" id="username"></p>
        <p>密码：<input type="password" name="password" id="password"></p>
        <p><input type="submit" value="登录"></p>
    </form>
    <script>
        $('#login-form').submit(function(e){
            e.preventDefault()
            var username = $('#username').val()
            var password = $('#password').val()
            $.ajax({
                url:'/user/login/',
                data:{'username': username, 'password': password},
                dataType:'json',
                type:'POST',
                success: function(data){
                    if(data.code == '200'){
                        location.href='/user/index/'
                    }

                },
                error: function(data){
                    alert('失败')
                }

            })
        });

    </script>

</body>
</html>

###Flask项目配置

####注意：在创建app文件和配置文件是要在其下面创建一个init.py文件,以方便查找文件下的py文件

app.py配置

from flask import Flask

from app.models import db
from app.views import blue
from utils.config import Conf
from utils.settings import STATIC_PATH, TEMPLATE_PATH


def create_app():
    app = Flask(__name__, static_folder=STATIC_PATH, template_folder=TEMPLATE_PATH)
    # 加载配置文件
    app.config.from_object(Conf)
    # 蓝图
    app.register_blueprint(blueprint=blue, url_prefix='/user')
    # 初始化
    db.init_app(app)

    return app

config.py配置

from utils.functions import get_sqlalchemy_uri
from utils.settings import DATABASE


class Conf():
    # 配置前面要大写
    # 数据库配置
    SQLALCHEMY_DATABASE_URI = get_sqlalchemy_uri(DATABASE)
    SQLALCHEMY_TRACK_MODIFICATIONS = False
    PRESERVE_CONTEXT_ON_EXCEPTION = False
    SECRET_KEY = 'qwertyuiopa'

####function.py配置



def get_sqlalchemy_uri(DATABASE):
    # mysql+pymysql://root:123456@127.0.0.1:3306/flask7
    user = DATABASE['USER']
    password = DATABASE['PASSWORD']
    host = DATABASE['HOST']
    port = DATABASE['PORT']
    name = DATABASE['NAME']
    engine = DATABASE['ENGINE']
    driver = DATABASE['DRIVER']
    return '%s+%s://%s:%s@%s:%s/%s' % (engine, driver,
                                       user, password,
                                       host, port, name)

####setting.py文件配置



import os
# 基础路径
BASE_DIR = os.path.dirname(os.path.dirname(os.path.abspath(__file__)))
# static路径
STATIC_PATH = os.path.join(BASE_DIR, 'static')
# template路径
TEMPLATE_PATH = os.path.join(BASE_DIR, 'templates')
# media路径
MEDIA_PATH = os.path.join(STATIC_PATH, 'media')

DATABASE = {
    'NAME': 'flask7',
    'USER': 'root',
    'PASSWORD': '123456',
    'HOST': '127.0.0.1',
    'PORT': '3306',
    'ENGINE': 'mysql',
    'DRIVER': 'pymysql',

}

####status_code.py


# 返回json请求参数
USER_LOGIN_PARAMS_IS_INVALID = {'code': 10001, 'msg': '请填写完整参数'}
USER_LOGIN_PARAMS_IS_REGISTER = {'code': 10002, 'msg': '用户没有注册，请去注册'}
USER_LOGIN_PARAMS_IS_PWD = {'code': 10003, 'msg': '账号/密码不正确'}