python Web开发 flask轻量级Web框架实战项目--实现功能--账号密码登录界面(连接数据库Mysql)

news2025/1/23 6:06:41

ps:各位好久不见,我回家了!终于有时间把之前的一些东西整理一下了(好吧,之前是我太懒了),今天分享一个功能简单的python web实战项目,后期功能可自行丰富。

先看效果

 

 输入正确用户名和密码即可登录成功(下图为存放数据的表单)

 

 正文


一、导入模块

from flask import Flask, render_template, request
import pymysql

二、创建web程序,连接数据库

app = Flask(__name__)


def get_conn():
    # 建立与mysql连接
    conn = pymysql.connect(host="localhost", user="root", password="root", db="tmp", charset="utf8")
    # c创建游标A
    cursor = conn.cursor()
    return conn, cursor

localhost: 本机数据库。

user:设置的数据库用户名。

password:数据库密码,,默认情况下是root,如果后期自己修改了则改为相应的即可。

db:所要连接的数据库名称。 

1.关闭模块(关闭数据库连接,关闭游标)

代码如下:

def close_conn(conn, cursor):  # 关闭模块
    if cursor:
        cursor.close()
    if conn:
        conn.close()

2.查询模块(用于从数据库中查询信息)

代码如下:

def query(sql, *args):  # 查询模块

    conn, cursor = get_conn()
    cursor.execute(sql, args)
    res = cursor.fetchall()
    conn.commit()
    close_conn(conn, cursor)
    return res


def get_user(username, password):  # 从数据库中查询用户名和密码
    sql = "select id from sys_user where username= '" + username + "' and password= '" + password + "'"
    res = query(sql)
    return res

sys_user:存放用户名和密码的表。


 三、写一个函数来处理浏览器发送过的请求,请求到/是自动执行这个函数。

@app.route('/')  # 必须加上路由,否则访问和函数没有关联,当访问到127.0.0.1:5000/,执行函数
def index():
    return render_template('login.html')


@app.route('/login', methods=['post'])
def login():
    username = request.form.get('username')  # 接收form表单传参
    password = request.form.get('password')
    res = get_user(username, password)
    if res:
        return render_template('xxx.html',msg='登陆成功')
    else:
        return render_template('login.html', msg='登录失败')

 登陆成功后进入xxx页面,登陆失败留在本页面并给出提示。

登陆界面为表单传参,这里用到POST请求。

在HTTP协议的请求类型里:

  • GET:从服务器端获取资源或数据

  • POST:向服务器端提交数据

GET请求发送数据的时候,一般会将请求数据放在url字符串中发送给服务器端,所以从安全性角度来看相对没有POST请求安全性高,所以GET请求一般不会用于比较隐私数据的传输,而POST请求是将请求数据放在请求body里面,所以一般用于表单数据,登陆数据等数据的传输。

四、启动应用程序

if __name__ == '__main__':  # 固定的写法,程序的入口
    app.run()  # 启动应用程序,

 五、完整代码

  • myflask.py

from flask import Flask, render_template, request
import pymysql

# 创建web应用程序


app = Flask(__name__)


def get_conn():
    # 建立与mysql连接
    conn = pymysql.connect(host="localhost", user="root", password="root", db="tmp", charset="utf8")
    # c创建游标A
    cursor = conn.cursor()
    return conn, cursor

def close_conn(conn, cursor):  # 关闭模块
    if cursor:
        cursor.close()
    if conn:
        conn.close()


def query(sql, *args):  # 查询模块
    conn, cursor = get_conn()
    cursor.execute(sql, args)
    res = cursor.fetchall()
    conn.commit()
    close_conn(conn, cursor)
    return res


def get_user(username, password):  # 从数据库中查询用户名和密码
    sql = "select id from sys_user where username= '" + username + "' and password= '" + password + "'"
    res = query(sql)
    return res


# 写一个函数来处理浏览器发送过的请求,请求到/是自动执行这个函数
@app.route('/')  # 必须加上路由,否则访问和函数没有关联,当访问到127.0.0.1:5000/,执行函数
def index():
    return render_template('login.html')


@app.route('/login', methods=['post'])
def login():
    username = request.form.get('username')  # 接收form表单传参
    password = request.form.get('password')
    res = get_user(username, password)
    if res:
        return render_template('game.html',msg='登陆成功')
    else:
        return render_template('login.html', msg='登录失败')




if __name__ == '__main__':  # 固定的写法,程序的入口
    app.run()  # 启动应用程序,

 

  • 前端页面代码 (需要可自行拿,记得点个赞谢啦)

<!DOCTYPE html>
<html>

<head>
    <meta charset="utf-8" />
    <title>登陆界面</title>
    <link rel="icon" href="http://v3.bootcss.com/favicon.ico">
    <style>

 li {
            list-style: none;
        }

        body {
            margin: 0;
            padding: 0;
            box-sizing: border-box;
            background-image: url(static/img/鹿3.jpg);
            /* background-image: url(/static/img/1.jpg); */
            background-repeat: no-repeat;
            /*这里的100% auto 表示将背景图片的长度100%显示,高度自适应*/
            background-size: 100% auto;
        }

        #maxbox {
            margin: 0 auto;
            margin-top: 200px;
            padding: 20px, 50px;
            /*这里的90表示以不透明度90%显示*/
            background-color: #00000090;
            text-align: center;
            width: 600px;
            height: 400px;
            border-radius: 10px;
        }

        #maxbox h1 {
            padding: 0;
            padding-top: 60px;
            color: white;
            font-size: 30px;
            padding-bottom: 4px;
            border-bottom: solid 1px white;
        }

        #maxbox h2 {
            font-weight: 700;
            color:white;
        }

        #maxbox .inputbox {
            margin-top: 30px;

        }

        #maxbox .inputText {
            margin-top: 20px;

        }

        #maxbox .inputText span {
            color: white;
            font-size: 18px;


        }

        #maxbox .inputText input {
            border: 0;
            padding: 6px;
            border-bottom: 1px solid white;
            /*这里的00表示不透明度为0,即透明显示*/
            background-color: #FFFFFF00;
            color: white;
        }

        #maxbox .inputbox .inputButton {
            margin: 0;
            border: 0;
            margin-top: 20px;
            width: 145px;
            height: 25px;
            /*给这个按钮变为圆角边角*/
            border-radius: 25px;
            color: white;
            background-color: #3498db;
        }

        #sign_up {
            margin-top: 50px;
            color: white;
            font-size: 17px;
        }

        #sign_up a {
            color: #3498db;
        }
    </style>

</head>

<body>
    <div id="maxbox">
        <h1>登陆界面</h1>
        <h2>请登录</h2>
        <div class="inputbox">
<!--            <form name="frm" action="" method="post">-->
            <form  action="/login" method="post">-->
                <div class="inputText">
                    <span class="iconfont icon-mine"></span>
                    <input class="username" type="text" placeholder="用户名" name="username" style="color:while" />
                </div>
                <div class="inputText">
                    <span class="iconfont icon-lock"></span>
                    <input type="password" placeholder="密码" name="password" style="color:white" />
                    <br>
                    <input class="remember" name="remember" type="checkbox" value="" checked="checked">
                    <span style="color:rgb(255, 255, 255)">记住我</span>

                </div>
                <input class="inputButton" type="submit" value="登录" />
                    {{msg}}
            </form>
        </div>
    </div>
</body>

</html>

总结

以上就是今天要分享的内容,python+web+flask轻量级框架的实战小项目。后续功能可以自行丰富,原理都是类似的。

本文来自互联网用户投稿,该文观点仅代表作者本人,不代表本站立场。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如若转载,请注明出处:http://www.coloradmin.cn/o/408247.html

如若内容造成侵权/违法违规/事实不符,请联系多彩编程网进行投诉反馈,一经查实,立即删除!

相关文章

猿创征文|【C++游戏引擎Easy2D】我拿吃零食的时间,学会了在C++上添加可点击按钮

&#x1f9db;‍♂️iecne个人主页&#xff1a;&#xff1a;iecne的学习日志 &#x1f4a1;每天关注iecne的作品&#xff0c;一起进步 &#x1f4aa;学C必看iecne 本文专栏&#xff1a;【C游戏引擎】. &#x1f433;希望大家多多支持&#x1f970;一起进步呀&#xff01; ✨前…

vuex报错:Property or method “$store“ is not defined on the instance but referenced during render. Make

‘store’ is defined but never used no-unused-vars 最近在写vuex&#xff0c;报过一个这样的错误&#xff1a; Property or method “$store” is not defined on the instance but referenced during render. Make sure that this property is reactive, either in the da…

结合表单验证谈el-form中model、prop、rules属性

目录前言modelproprules验证总结前言 最近写vue项目需要用element ui中的表单组件显示一些信息呈现在页面上&#xff0c;但在使用提供的一些属性时有些困惑——这三者之间有什么关系&#xff0c;必须要同时存在吗&#xff1f;于是在这里做一些记录。 model 官方说是表单中的数…

flex布局中使用flex-wrap实现换行

最近做个项目,其中有个样式是换行布局,作为样式渣渣的我一开始不会,只能查资料,然后摆平了它.今天得空了,简要记录一下,方便后面小伙伴布局使用. 参考资料 flex-wrap 开始样式 <div class"planWrap"><div class"content planItem">1</div…

vue 父传子 子传父实现方式

父传子&#xff1a; 主要步骤&#xff1a; 首先在子组件props中创建一个属性&#xff0c;用以接收父组件传过来的值&#xff1b;然后父组件中引用子组件&#xff0c;并在子组件标签中添加子组件props中创建的属性&#xff1b;最后把需要传给子组件的值赋给该属性。 理解&#…

Vue父子组件生命周期执行顺序

要想弄懂Vue父子组件的生命周期执行顺序&#xff0c;首先要知道vue页面的生命周期钩子函数的执行顺序&#xff0c;这也是在面试中老生常谈的问题&#xff0c;同时相信大家在工作的时候也能经常碰到父子组件加载上的问题&#xff0c;所以&#xff0c;不管是面试还是工作&#xf…

前端常见的时间转换方法合集+动态时钟效果实现

1.将时间戳转换为YYYY-MM-DD HH:mm:ss格式-老方法 通过对应的年月日时分秒依次进行拼接&#xff0c;另外还需要对小于10的值进行处理&#xff0c;在前面添加字符串‘0’&#xff0c;转换为常见的两位数时间格式 function transformTime(timestamp new Date()) { if (time…

Vue实现生成二维码

目 录 ①首先创建一个vue项目 ②引入qrcodejs2 ③封装组件 1. 创建Vue文件 2. 定义template模板 3. 引入QRCode包 4. 进行封装 5. less控制样式 ④启动项目 1. 在终端输入启动项目命令 2. 在浏览器中输入访问地址 3. 访问生成的二维码 4. 扫码进行解析 与后端用J…

CSS实现文字描边效果

一、介绍 最近在一个项目的宣传页中&#xff0c;设计师使用了文字描边效果&#xff0c;之前我确实没有实现过文字的描边效果&#xff0c;然后我在查阅资料后&#xff0c;知道了实现方法。文字描边分为两种&#xff1a;内外双描边和单外描边&#xff0c;也就是指在给文字加上描…

ElementPlus DateTimePicker日期时间选择器限制可选时间范围(精确时分秒)

项目场景 ElementPlus DateTimePicker日期时间选择器 当我们使用日期时间选择器时&#xff0c;可能会有需求只能选择今日之前或者今日之后&#xff0c;又或者一周内&#xff0c;一个月内的时间&#xff0c;而其他的时间应该禁止被用户选择。 解决 直接看文档&#xff1a; …

【element】el-autocomplete的常见用法

前言&#xff1a; 这段时间突然发现很少写博客了&#xff0c;平时都在平衡工作和休息的时间&#xff0c;周末也没动过笔&#xff0c;而且更重要的是我找不到写的内容了&#xff0c;在经历的初始的新知识的学习阶段后&#xff0c;目前的阶段更加转入对于业务的理解&#xff0c;…

vite基本配置教程

&#x1f469; 个人主页&#xff1a;不爱吃糖的程序媛 &#x1f64b;‍♂️ 作者简介&#xff1a;前端领域新星创作者、CSDN内容合伙人&#xff0c;专注于前端各领域技术&#xff0c;成长的路上共同学习共同进步&#xff0c;一起加油呀&#xff01; ✨系列专栏&#xff1a;前端…

C1认证之web基础知识及习题——我的学习笔记

文章目录 目录 文章目录 前言​​​​​​​ Web基础 十四、语义化标签 知识点 习题 十五、表单标签 知识点 习题 十六、转义字符 知识点 习题 十七、Head头 知识点 习题 十八、CSS引入方式 知识点 习题 十九、CSS背景 知识点 习题 二十、CSS文本属性 …

CSS合并单元格四种方式:table/display/flex/grid

目录 方式一&#xff1a;table【最简单写法】 方式二&#xff1a;display: table--不推荐 方式三&#xff1a;display: flex 方式四&#xff1a;display: grid 效果图&#xff1a; 方式一&#xff1a;table【最简单写法】 colspan&#xff1a;规定单元格可横跨的列数。row…

【vue2】近期bug收集与整理02

⭐【前言】 在使用vue2构建页面时候&#xff0c;博主遇到的问题难点以及最终的解决方案。 &#x1f973;博主&#xff1a;初映CY的前说(前端领域) &#x1f918;本文核心&#xff1a;博主遇到的问题与解决思路 目录⭐数据枚举文件的使用⭐elementUI中分页组件使用的注意事项⭐v…

vue解决Not allowed to load local resource

前言 在进行通过本地路径进行加载图片的时候&#xff0c;突然就报了这个问题 Not allowed to load local resource 这个是由于安全性的问题&#xff0c;导致浏览器禁止直接访问本地文件 那么&#xff0c;这边我说一下我具体是怎么解决的吧 问题描述 我的项目是用的vue的vant…

webpack -v报错:Cannot find module ‘webpack-cli/package.json‘

-D安装了webpack和webpack-cli&#xff0c;-g安装了webpack和webpack-cli&#xff0c;但是webpack -v的时候仍然提示需要安装webpack-cli&#xff0c;并且安装之后会报错&#xff1a; 看提示应该是webpack-cli/package.json的位置获取不到正确的&#xff0c;但是并不知道为什么…

【附源码】解决pdf.js跨域并从url动态加载pdf文档

0. Abstract 当我们想用PDF.js从URL加载文档时&#xff0c;将会因遇到跨域问题而中断&#xff0c;且是因为会触发了PDF.js和浏览器的双重CORS block&#xff0c;这篇文章将会介绍&#xff1a;①如何禁用pdf.js的跨域&#xff1f;②如何绕过浏览器的CORS加载URL文件&#xff1f…

axios请求中以params或body形式传递参数的区别

一、前言&#xff1a; 前端发送请求最常⽤的是get请求还有post请求&#xff0c;get请求只能传query参数&#xff0c;query参数都是拼在请求地址上的&#xff0c;post可以传body和query两种形&#xff1b;我在开发的时候通常使用的是Axios第三方库进行网络请求&#xff0c;所以这…

教你如何用CSS修改图片颜色

看到题目是不是吓了一跳&#xff1f;css竟然还有这个操作&#xff1f;还真是第一次听说~ 原理嘛&#xff0c;其实很简单的&#xff0c;用到的就是 CSS3 滤镜filter中的drop-shadow&#xff0c;该滤镜可以给图片非透明区域添加投影。你可以理解为下图 它实现的效果看上去就像使原…